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.
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.
Lead UX Designer
Testing & Prototyping
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.
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.
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.
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.
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.
How might we improve the roadside assistance experience for stranded drivers in order to reduce their overall wait time?
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.
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.
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.
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.
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.
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.
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:
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.
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.
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.
Users were confused as to what wheel locking nuts are.
I added an information icon providing a brief description of wheel locking nuts but users found it hard to read.
I revisited the description and made changes as well as increased the font sizing.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Feel free to contact me if you have any questions about this project or if you just want to chat 🙂