RyderGyde

Get Roadside Assistance fast, right when you need it — plus locations, fuel rates, and maintenance.

A stranded driver doesn't have time to figure out an app.

The Research

Process

Competitive analysis to identify gaps and opportunities for our product in the marketplace
Interviews with experts, who educated us on their daily processes, needs, and pain points
All data placed in an Empathy Map, which helps us define our user personas

Empathy Map

RyderGyde Empathy Map An empathy map helps us establish our personas by finding their voices, feelings, and motivations.

User Pain Points

1. “Calling Gets Results”

For decades drivers have been calling for Roadside Assistance and it has worked. Stranded on the side of the road is not the ideal situation to experiment with an app.

2. “I Don't Want Another App”

Many drivers believe there are already too many useless apps on their phones. They won't download a native app unless it is absolutely necessary.

3. “I Didn't Know This Existed”

Despite various attempts to promote the apps and its features, many drivers still didn't know that they could use RyderGyde to get Roadside Assistance.

Our User

The Story

In order to know what we are going to need to design, we need to illustrate a roadside emergency involving Randy.

Randy is assigned a particular Ryder truck and gets stranded along his trip
Randy scans the QR code provided on the windshield of the vehicle
RyderGyde opens and Randy quickly requests Roadside Assistance
RyderGyde confirms help is on the way and provides GPS tracking

Ideate: Exploring Opportunities

My team and I assembled an affinity map to organize the results of our competitive analysis into gaps left by the competition and opportunities presented by these gaps.

Affinity Map

RyderGyde Affinity Map An affinity map is a great way to organize the results of the competitive analysis into opportunities left by the competition.

Top Opportunities

1. Register vehicles, not drivers — to streamline registration process

2. Emergency sticker located on windshield with unique QR Code

3. Real-time GPS tracking of assistance vehicle

4. Streamline form process to 3 steps

From Ideas to Sketches to Wireframes

With opportunities identified, we sketched, iterated, and refined wireframes for each step of the flow. Since users will have limited access to the internet and 91% of Americans own a smartphone as of 2024, mobile screen sizes were the natural focus for this project.

Ideas to Implement

1. Use QR Codes in Cabs

All windshields on vehicles have an emergency sticker with a QR Code that preloads vanity URL with essential information.

2. Web Over Native Apps

Instead of downloading a native app, we can utilize this feature as a web application to not only expedite adoption but assure compatibility.

3. Eliminate Registering

Registering is the biggest hurdle with new users. If we create profiles for vehicles by their vehicle number, then the driver’s name is all that is needed at check-in for a complete profile.

RyderGyde Sketches

Sketches

RyderGyde Sketches

Complete information

RyderGyde Wireframe: Step 1

Assistance Dispatched

RyderGyde Wireframe: Step 2

Assistance Arrived

RyderGyde Wireframe: Step 3

Low-Fidelity Prototype & Testing

Observing users interacting with prospective designs is crucial to finding out if the designs work practically.

RyderGyde Low-Fidelity Prototype

Summary

After assembling a lo-fi prototype to demonstrate a truck driver's journey to securing help from Roadside Assistance, I conducted live usability studies with 10 customers at an actual Ryder truck facility, 30 minutes each.

Tasks

  1. Scan the QR Code
  2. Complete the simple form
  3. Receive assistance

Results

100% successfully received Roadside Assistance

100% found the app useful

100% reacted positively

93% would use it in the future

High-Fidelity Mock-ups

After validating our solutions with users, the next step was to finalize our screens and bring them to life.


Step 1

RyderGyde Wireframe: Step 1
RyderGyde Mockup: Step 1

Step 2

RyderGyde Wireframe: Step 2
RyderGyde Mockup: Step 2

Step 3

RyderGyde Wireframe: Step 3
RyderGyde Mockup: Step 3

Complete

RyderGyde Wireframe: Complete
RyderGyde Mockup: Complete

Final Prototype

The final step before handing off our designs to the development team was to take our high-fidelity mock-ups and create a working prototype, which would be an integral part of future presentations, helping us verify the final details with testers, and serve as a visual template for the developers to emulate.

Final Prototype

Lessons Learned

1. Technology has its time

In a pre-pandemic world, QR codes were a forgotten craze even though native camera apps can scan them. But now that people don't want to touch anything, they've become commonplace, proving that integration and usefulness are necessary for technology to be accepted.

2. Web apps are powerful

A Progressive Web Application (PWA) is a quick and cost-effective way to provide a simple experience for any user across platforms through a browser. For this project, its simplicity helped with user adoption and convenience.

3. No more registering

A huge hurdle for new users is getting them to register. Not only is it a hassle, signing up for yet another app, but it can be a deal breaker. By eliminating this hurdle for drivers, we can quickly get them the assistance they desperately need and possibly win over a new user for the native app.

Have an opportunity? Let's connect.