Assist: A Solution For Vehicle Maintenance

Tools Used

Figma, Marvel App, Miro, Overflow

Timelime

4.5 months

Role

UI/UX Designer

Vehicle owners are frustrated with their vehicle maintenance. I set out to help them take care of their vehicles easily, efficiently, and with a sprinkle of joy.

The Challenge

Project Goals

Create an easy-to-use product that helps vehicle owners:

  • Easily book appointments

  • Figure out what’s wrong with their vehicle

  • Receive updates about their vehicle’s service appointment

Utilizing a human-centered design approach, I took this project through full implementation of classic Design Thinking process.

My Process

EMPATHIZE

01

To understand this industry, I began with secondary research, asking:

  1. What specific audience is likely to struggle with trusting their service providers & understanding vehicle maintenance?

  2. What are the main factors causing these struggles?

  3. How are people currently selecting service providers to work with?

  4. How are people currently maintaining their vehicles?

  5. What alternatives or solutions are available to solve this problem?

A Look into Vehicle Owners, Vehicle Maintenance & Trust in Auto Service Providers

Research

The Top 3 Concerns for Vehicle Owners are: Speed, Cost & Customer Care

Synthesis

I used Miro to create an affinity map in order to visually see the emerging themes from my user interviews.

From the affinity map, I noticed that customer care and respect were mentioned most often.

I also created an empathy map to visually describe the user that was developing for this project. I originally created 1 empathy map, but as I continued to analyze the data, I realized that there were actually 2 users. I turned the empathy maps into 2 user personas in order to better understand the goals, attitudes, and pain points of the users.

User #1: Willing to pay a premium for efficiency & trust

User #2: Wants to pay a reasonable price for service

I chose to write a job story using the Jobs To Be Done framework in order to define the main tasks that each user would want to accomplish with this product. While there were key differences between the 2 User Personas, I decided to create 1 job story that would solve the overlapping concerns of both users.

From here, I created a research plan, and conducted 7 user interviews with the objective being:

Identify the struggles vehicle owners face in conducting vehicle maintenance & their dynamic with auto mechanics.

The main finding was that customers want their service providers to be competent, explain things, and be respected.

DEFINE

02

Upon reviewing the insights from my research and utilizing the job story, I created 5 problem statements:

Defining the Pain Points That Vehicle Owners Face

Problem Statement

IDEATION

03

Brainstorming Solutions To Make Vehicle Maintenance Simpler And More Efficient

Solutions

Brainstorming
& Sketching

Laddering

Upon reviewing the top ideas, I determined that the best solution was actually a combination that would:

  • Keep vehicle owner’s informed about the status of their vehicle’s current service so that they could make plans according to how much longer they’d be without their vehicle.

  • Allow for clear communication from the auto mechanic.

  • Show how severe a vehicle issue is so that the vehicle owners have an idea of how long the work will take and how costly it will be.

  • Provide the ability to schedule an appointment easily & quickly.

User Stories

Bridging the gap between user needs and the outcome the user wants to achieve

Using the MoSCoW rating, I was able to determine User Stories that this product would & wouldn’t have.

Sitemap

Laying out the navigational hierarchy of the app

“Services & Prices” will help users locate different types of services & their associated costs.

Urgent services will easily allows a user to find a same-day appointment

“My Vehicle” houses service records, current service status, and upcoming appointments.

“My Account” will house basic app settings like notifications & display.

User Flows

Building out the steps for a user to take to solve their problem

Figure Out The Vehicle Issue & How Much It’ll Cost

Get Vehicle Status

Book Routine Service

While creating the user flows, I was challenged to break down each flow step-by-step. I asked questions like:

  • If a user wants to book a routine service, what information would they need in order to be successful

  • How would they input that information?

  • What is the order of steps the user needs to take to be successful?”

Heuristic
Evaluation

I looked at 3 products in order to spot usability issues that could occur, evaluating by: Match Between System & Real World, Consistency & Standards, Aesthetic & Minimalist Design

I chose these 3 principles due to my goal of relieving a vehicle owner’s frustration, which would require a product to be minimalist, to utilize common & easily understood terminology, as well as utilize familiar icons. Simplicity & familiarity are key here.

The 3 products that I evaluated were Carfax Car Care, AutoMD, and DriverSide. While these apps proved to be simple & familiar, there were critical limitations with each product. None of the products would allow a user to accomplish all of the user flows I had determined for my product.

Similar Products are Simple & Familiar, But Have Critical Limitations

Sketching

The Initial Sketches Were Designed to Keep The Product Simple & Straightforward

It was important to use familiar icons, common & easily understood terminology, and keep the product minimalist. To do this, I looked at existing products, specifically at progress bars, input controls such as date fields, form fields, map UI patterns, and search fields.

I decided to use progress bars to keep users informed throughout the various phases.

Usability Testing

Usability Test Goal:
Ensure the icons were easy-to-understand, if the buttons to get to the next step were easy to find, and if users could complete the tasks assigned to them.

Putting My Sketches to the Test & Making Key Recommendations

Tasks:

  1. While driving Jen’s Truck, you see some white smoke coming out of the front of your vehicle. You’re not sure what’s wrong. Use this site to figure out what’s wrong with your vehicle.

  2. You’re casually driving Jen’s truck on your way to work & you notice the oil change sticker on the windshield and see that your car is due for an oil change in just 200 miles. The only time you have available to get an oil change is Saturday afternoon. Find out how to get your car an oil change.

  3. You’re at the auto body shop waiting for your car’s oil change to be completed. An hour & a half has already gone by. Use the site to figure out how much longer until it’s done.

Top Findings & Recommendations

No participant successfully clicked the “services & prices” button when asked to diagnose a problem.

I recommended changing the text to “What’s Wrong With My Vehicle?” to be more obvious that this is where to diagnose an issue.

During the book routine service flow, all participants skipped the step to select their vehicle.

I recommended making the My Vehicle button bigger & changing the text to “select vehicle”.

Participants had to click the back button several times in order to switch between tasks.

I recommended adding a bottom navigation bar for easier navigation throughout the app.

Wireframes

Fitting Elements onto the Screens, Creating Understandable Text & Solving Error States

Using Figma, I built wireframes, which allowed me to get a real feel for how the elements would look & fit on each screen. I found that some of the screens I sketched had too many elements, and some of the elements were sized too large.

I separated the date & time screens so that they would fit better on the screen. This would add a step for the user, but it would be more functional as the screens would be much less cluttered.

I included the Contact button in the bottom navigation instead of the My Vehicle button since it’s not part of the minimum viable product.

In addition to creating wireframes for the user flows, I created 3 edge screens.

Wireflows

I created wireflows in Overflow, allowing me to clearly indicate the clickable hotspots that would take users to the next step in the flow. It was here that I really started to see this product come to life.

Making My Wireframes Come to Life as Wireflows

Style Guide

Developing the Look & Feel of the Product Based on the User Research

Due to time restrictions, I did not create a design system but did create a moodboard & style guide to provide the look & feel.

High Fidelity

I created the high fidelity screens mainly utilizing the primary color- Bdazzled Blue, and with simplicity in mind to help users feel a sense of relief, efficiency & ease. Each screen is straightforward and decluttered. The product follows step-by-step questions that lead the user to a solution.

Putting It All Together Into High Fidelity Screens, and Flushing Out The Final Touches

I decided that the time options should be a popup scrolling menu at the bottom of the screen to be more in alignment with iOS design guidelines

I made all clickable text blue, as once the text was clicked it would turn a blue bold so it looked much cleaner if the text started as regular blue.

In order to create decluttered screens, I made the headlines smaller, and moved them into the top header bar.

I decided to use pen & paper to come up with as many solutions as I could through brainstorming & sketching. Then, through laddering, I narrowed down my ideas to the top 3.

PROTOTYPE

Prototype

Making Final Edits While Creating A Prototype For Usability Testing

Using Figma, I turned my high fidelity screens into a prototype to prepare for usability testing.

The progress circle on the screen that shows the remaining time of the current vehicle service looked much smoother when I added 3 screens that allowed the circle to slowly fill in. I found that this would be helpful when handing off the design to developers.

04

TEST

Usability Testing

Using Moderated Usability Tests to See if the Prototype Would Solve User Needs

Usability Test Objective: Identify pain points that users would encounter while using the app that would stop them from achieving their goals, and provide opportunities for improvement.

In the first round, I held 5 remote moderated usability tests, each lasting about 30 minutes, including a short introduction, an interview, 3 task performances, and a debriefing.

Test Questions:

  1. Can users identify what is wrong with their vehicle and see how much a service would cost?

  2. Can users easily book a service appointment?

  3. Can users quickly receive a status update for their current service appointment?

I recommended eliminating these 3 screens and instead taking users directly to the map screen, where I would add location icons for users to select a shop and see more details.

Participants got lost in the Book Service flow when presented with searching for a shop. Most participants were confused & did not know what to do.

Once clicking the “What’s wrong with my vehicle?” button, users hesitated when choosing between the Search, Browse, and Diagnose buttons.

I recommended adding small descriptive text below the Browse and Diagnose buttons to help users differentiate between the 2 options.

Participants were unsure which of the issues displayed was the most likely culprit.

I recommended altering the possible vehicle issues screen to display a ranking so that users would be more clear of which option was the most likely culprit.

When booking a service, participants hesitated when choosing between the Routine & Urgent options. I recommended removing this screen entirely as it proved to be an extra, unnecessary step for users. If users needed to schedule an urgent appointment, they would be able to see that as an availability option when selecting a shop.

1st Round Usability Testing Top Findings & Recommendations

I iterated on my prototype, then held 4 more remote unmoderated usability tests, and 1 in-person. Test participants were given the same tasks to perform in order to ensure that the usability issues were fixed.

2nd Round Usability Testing Top Findings & Recommendations

Users ultimately decided that the top issue would be correct, but still felt some hesitation. If I had time for more iteration, I would add a “chat with mechanic” option, as well as the ability to add a symptom while booking a service.

Users had trouble identifying “My Vehicle”, “Waiting Room”, and “Contact”. Most users did correctly identify these, but not confidently.

05

OUTCOMES & LESSONS LEARNED

Outcomes

Based on the final rounds of usability testing, I found that overall, participants liked the simplicity of the app, and enjoyed the concept. A few test participants were even hopeful that this app would launch and that they could use it in the future.

Test Participants Wanted to Download the App

Lessons Learned

Throughout this project, I learned to not make conclusions without proof. For instance, from the user interviews, I thought that trustworthiness was a top concern, but when creating the affinity map, I found that only 2 participants actually stated this.

I also learned how important it is to review previous stages while working through the design stages. For instance, while creating the first sketches, I had to look back at the sitemap & user flows that I had created in order to stay on task and not design screens that were not critical to the user’s needs.

If I were to do this project again, I would spend more time coming up with solution ideas as I ended up with several solution ideas that were combined into 1 solution. It would be nice to have a larger variety of solution ideas to show next time.

Only Make Conclusions With Evidence & Review Work Throughout the Process

The hi fi usability testing resulted in an average score of 6.2/7 in agreement with the statement that “The Assist App is easy to use”.