DesignsByEduardo

Helping stranded drivers get back on the road

RoadRescue is a capstone project that was created within the 12 weeks bootcamp at BrainStation. RoadRescue’s goal is to offer instant roadside assistance, as well as to help drivers maintain their cars to prevent further car problems.

Project overview

RoadRescue is a capstone project that was created within the 12 weeks bootcamp at BrainStation. During this project, I explored an end-to-end UX design process, including idea generation, research, and designing the mobile app interface and branding.

My role

Lead UX Designer 

Research

Ideation

Testing & Prototyping

Tools used

Figma

InVision

Duration

8 Weeks

Design process

Through User-Centered Design, I examined the roadside assistance experience from the perspective of stranded drivers. In my brainstorming process, I used user research to guide me as I designed multiple solutions. Based on the findings of my usability tests, I developed a high fidelity interactive prototype.

Discovery

Problem Space
Secondary Research
Primary Research

Define

Persona
Experience Map
User Stories
Task Flow

Develop

Sketching
Wire-framing
Prototype
User Testing
Ideation

Deliver

Branding
Marketing
Hi-fidelity Prototype

Discovery

Problem Space

Almost all drivers will have to deal with car problems at some point. Nowadays, stranded drivers must wait for an average of 45-50 minutes before they receive the help that they need. In my research, I plan to gain greater insight into why drivers are waiting for so long and explore ways to improve the overall waiting experience.

Secondary research

1

some drivers may feel that they can resolve the issue themselves and save time from submitting a roadside assistance request.

2

In comparison with drivers who are not in need of a tow truck, drivers who require one may have to wait longer due to higher demand.

3

The average wait time for a vehicle with onboard telematics, such as OnStar, is 34 minutes. Those without have to wait 45-50 minutes.

Primary Research

To obtain insight into roadside assistance experiences from past users, I conducted four indiviual interviews. After conducting the interviews, I was able to identify some general pain points, motivations, and behaviors. Utilizing an affinity map, I derived four main themes and insights after organizing my notes based on my findings.

Insight Summary

Real-time View

To avoid feeling stranded, drivers need a real-time view of where help is located so that they don't feel abandoned.

Self-help

Drivers want to learn how to repair their vehicles on their own so that they won't have to call for roadside assistance next time.

Safety

Stranded drivers worry about their safety while waiting for roadside assistance. They fear being robbed or getting into an accident in busy areas.

Seamless Process

When drivers ask for help they want a seamless process and access to all the information they need to be sure they are getting the help they need.

Key insights

After my findings, I focused on the following theme: Seamless process

In reviewing the interview responses and synthesizing with the participants, I found that they all would benefit from an improved system to reduce wait times and see where the help is. They showed the same negative response and frustration when speaking on this issue.

Define

Exploring Design Intervention Opportunities

Persona

Through the research process, I observed different pain points, motivations, and behaviors that led me to develop Vincent. By using my persona during the rest of the design process, I ensured that the needs of my users were always at the forefront of all design decisions.

Design Challenge

How might we improve the roadside assistance experience for stranded drivers in order to reduce their overall wait time?

Experience Map

Using interview data and personas, I mapped out the current experience of requesting and receiving roadside assistance help. By doing so, I could find the moments when there were significant pain points to improve the users’ experience.

Some key opportunities that I found were: 

Adapting design to user behavior

User stories

We can see many possibilities for a design intervention from the experience map. In Vincent’s experience, there were three key moments where he appeared to struggle most. It would be at the beginning where he requests help and toward the end when he is waiting for help for a long time without knowing if help was on the way.

As a result, I generated user stories from Vincent’s point of view to help me determine my digital solution’s core functionality.

Task flow

My task flow diagram was created after selecting my chosen epic, “Seamless booking process”, while also taking into account my journey map. Vincent will also benefit from this flow when requesting roadside assistance since the process will be seamless for him.

Develop

Exploring digital solutions

UI Inspiration

I wanted to draw inspiration from existing designs before developing a design solution for my capstone project.

Now that I have seen a variety of existing design solutions, I can start to generate ideas and concepts for implementation in my project.

Sketches

The sketching phase can begin after gathering some inspiration for the design. My goal was to create as many screens as possible using the task flow to get my creative juices flowing.

Greyscale Prototype

Having created my solutions sketches, I then turned them into a greyscale prototype. Before we add any colors or images, we consider how users will interact with the product.

Usability Testing

Testing mid-fi prototype

Usability test plan

Introduction

I will conduct usability tests with ten users as part of the BrainStation UX Design Bootcamp capstone project. I plan to gain practical, real-time feedback that can be incorporated into the design for an improved user experience.

Scenario

As a daily driver, you depend on your car for all of your daily activities. You want access to Instant roadside assistance when your car breaks down.

Summary

• Has had issues with roadside assistance in the past
• The app will be the main source getting instant roadside assistance
• User is familiar with using smart phone

Goal

Instantly request roadside assistance on the app without having to call a representative and see helpers ETA.

Testing task

It was time to test the prototype once the initial wireframes had been created. To create a better overall user experience, real-time feedback is needed. To prepare for the usability testing stage, users were asked to perform five tasks:

  • Task One

    You just got a flat tire and want to quickly start the process to request for help on the app.
  • Task Two

    You get out of the car to check out which tire needs to be serviced and notice the front driver's tire. How would you report that on the app?
  • Task Three

    You want to be able to enter your personal and auto insurance information so that you don’t have to pay out of pocket for a car being serviced.
  • Task Four

    You want the app to automatically locate you without you having to put in your address manually.
  • Task Five

    Once you enter the correct location, you want to verify that you have entered all the information correctly before you submit the request.
Usability test highlights

As part of my usability testing process, I conducted two rounds of usability tests on ten individuals. I observed how the users interacted with the app by asking them to complete five tasks. This helped me understand where improvements could be made. I then made iterations after each testing session to improve the user experience.

Although there were no major usability issues, observing the users and hearing feedback in real time gave me a few insights to make the app even better. To determine which insights would be of greatest value to the user, I put them into a Design Prioritization Matrix.

Revision one

When users landed on the home page, they were confused because there were too many options and no clear direction. In order for users to know what direction they should take, I made the main CTA button larger than the rest.

Home version one
Home version three
Revision two

The pricing for each service has been added based on feedback from users so they know how much a service will cost if they don’t have insurance coverage.

Services version one
Services version two
Revision three
Service detail version one

Users were confused as to what wheel locking nuts are.

Service detail version two

I added an information icon providing a brief description of wheel locking nuts but users found it hard to read.

Service detail version three

I revisited the description and made changes as well as increased the font sizing.

Overall testing results ​

Usability testing helped me gain a better understanding of precisely what users are looking for when requesting roadside assistance online. The initial prototypes I have created will serve as a starting point for improving the product based on the concerns the users raised for a better roadside assistance experience.

Deliver

Establishing the visual identity

The branding process began after I finished my final greyscale prototype. To ensure a consistent and cohesive digital experience, I created a visual identity for the RoadRescue app. I established keywords to remember throughout the process to help me conceptualize the emotions I wanted users to experience when using the app.

Brand identity

As I considered my adjectives, I began brainstorming brand names that would express the app’s purpose and emotions. My goal was to create a calm and positive brand identity so that users can request roadside assistance using the digital product without feeling stressed or worried.

Brand name exploration
Why Road Rescue?

RoadRescue is a perfect representation of our brand. It shows speedy, reliable, and friendly service to those who require roadside assistance. A good feeling of security is created by RoadRescue.

Wordmark

I had originally intended to incorporate a car or vehicle wheel to represent the target audience in my exploration sketches for the word mark. As you can see on the bottom example, I used a car on top of the actual word mark.

Finalized word mark

Black on White Logo

White on Black Logo

App Icons

Design system

With Brad Frost’s Atomic Design methodology, I developed a design system that communicated the appropriate usage of app components. By defining a cohesive language throughout the app, I was able to maintain visual consistency.

Hi-fidelity prototype

Taking the 60:30:10 rule into account, I began incorporating colour when I moved out of greyscale and into High fidelity. I finalized the design and created the UI library based on the atomic design structure, based on feedback from my usability testing.

Key learnings & next steps

Key learnings

I learned the most important lesson from this endeavor was to conduct user tests; more specifically, to test early and often. As a result, I was able to lead more user-centered design narratives, which gave me valuable feedback and insight ahead of time.

Using a human-centered design process, it helped me further understand the problem space. In order to understand the root of a problem and identify possible solutions, I often asked “why” to problems I faced. As a result, I was able to come up with a solution while keeping the user’s frustrations in mind.

Next steps

My next steps would be to expand on the task flows to fully build out the app. As well as adding additional features that were recommended when doing the usability testing sessions.

The long term goal for RoadRescue is to build out the providers side of the digital product and then hand it of the developers to create a functioning product. 

 

 

Thank you for taking your time to view RoadRescue's case study

Feel free to contact me if you have any questions about this project or if you just want to chat 🙂

Scroll to top