Duration
1 month
Role
Product Designer
Project Type
End-to-end mobile application
Client
Academic
Empowering drivers with car diagnosis for at-home auto fixes.
UI DESIGN
UX RESEARCH
UX DESIGN
BRAND DESIGN
UX Case Studies
IDENTIFYING THE PROBLEM
The Car Clinic is a derivative of a local auto parts company that is attempting to increase their sales and build trust in their products and services through the implementation of a mobile application. They want the application to make beginners feel comfortable with their cars. The brand and application should be comforting and approachable to new or anxious drivers so they can leave feeling empowered and equipped to take care of their own car.
This case study will take you through my process designing an end-to-end mobile application that keeps drivers informed about their vehicles and prepared for the worst.
Problem Space
PREVIEW OF FINAL DESIGNS
After connecting your car to an OB2 sensor, you can diagnose your car and identify repair + maintenance needs.
Diagnosis Scanner
Drive through areas with no service, worry-free. Filter through nearby auto services on the offline map in times of trouble in an unfamiliar area.
Offline Map
Fix your car at home with step-by-step instructions. Designed to help you quickly execute the fix and get on with your day. After you've diagnosed your car's problem, the Car Clinic breaks down your fixes step-by-step so you can feel comfortable making fixes all on your own.
Step-by-Step DIY Fix Guide
Use the interactive A/R tour in times of trouble, when preparing to go into an auto shop, or just to learn more about the build of your car.
Under-the-Hood AR Tour
Brief overview of the solution
RESEARCH & DERIVING INSIGHTS
100% of participants expected women to be discriminated against, but both men and women felt they had been financially taken advantage of before.
Interviewees have no desire to spend time learning more than just the basics. They want to quickly fix the problem, then get out.
Auto shop visits are most successful when the driver has knowledge of the problem and price range for the fix.
100% of participants feel most empowered with hands-on and visual learning.
Users are frustrated with being overcharged. While 100% of user interview participants expected just women to be discriminated against, both men and women interviewees felt they had been financially taken advantage of before.
1. We need to help user's save money.
We need to help the user feel safe while doing DIY maintenance and repairs and help provide a feeling of security when something unexpected happens in an unfamiliar area with no service. In emergency situations, user's feel anxious having to go to a random, unchecked auto shop and mechanic. A user interviewee explained: "It's terrifying because you don't know this mechanic and you don't know if you can trust them with your only mode of transportation."
2. We need to help the user feel safe in moment's of uncertainty.
We need to help users feel empowered and confident about approaching their car troubles, at home or at the auto shop. Auto shop visits are most successful when the driver has knowledge of the problem or service and price range for the fix. When user's don't know these things and don't know the mechanic, it can make auto shop visits very intimidating.
3. We need to help the user prepared for an auto shop visit.
Users are frustrated with making appointments at auto shops for any reason, but especially for routine maintenance. User's feel that these appointments lead to major disruptions in their lives and serve as a major inconvenience. They need fast, reliable fixes so they can get back to their regularly scheduled life.
4. We need to help the user minimize the number of trips to the auto shop.
User's also find themselves taking unnecessary trips to the auto shop to get basic routine maintenance or to figure out the level of severity when an unfamiliar light comes on in their car dashboard. Users need an indication of how severe the issue is and if they can fix it at home or not.
5. We need to help the user with quick + easy ways to fix their car at home by visual and hands-on means.
Car diagnosis that tells the user whats wrong
A/R under the hood tour fit to their car
Notifications
when users can do their own routine maintenance
Landing dashboard that summarizes all updates & info
Car diagnosis and fix recommend-ations
Empowers users with range of pricing before going in for service
Quick facts about cars that pop up during loading screens
Recommended auto shops + reviews
Satellite map available offline
Chat with professionals instantly
Add multiple cars to one account
Issue forecast that scans your car automatically and notifies you results
Landing dashboard that showcases all of your cars current stats
Section that walks through information about your make, model of car
Key Insights
Direct users to at-home tech that makes fixes even easier
Videos that walk through the fix step by step
Diagrams of important and relevant information
Step-by-step instructions for how to DIY
I wanted to develop a deeper understanding of drivers from different backgrounds and what barriers they face when fixing their cars without the assistance of a professional. I also wanted to explore the thought processes behind the moment a driver discovers their car is broken and the actions they take after. To do this, I gathered both primary (user interviews with participants 26-61 years old) and secondary research.
Research insights
Introducing Kerri
Introducing Janie
Condensing & applying insights
After prioritizing the above [affordability, empowerment + preparation, convenience, quick + easy education], I conceptualized these 5 main features: Issue Diagnosis, Offline Map, Step-by-Step DIY Instructions, A/R under-the-hood tour.
Research-backed wireframes
IDEATION & WIREFRAMES
Opening up the hood of your car can be intimidating. This A/R helps people of all experience levels take a look "under the hood" and gather a deeper understanding of what they are looking at, as well as identify any obvious problem areas.
The landing dashboard highlights reading from your cars actual dashboard - including warning lights. It also has quick-access packets of information for emergency
Explore all wireframes
Simplified sequence of steps through the process to fix your tire pressure.
During user interviews, I found that participants preferred to do more visually and auditory-based learning. To assure Car Clinic users are most comfortable with these DIY fixes, we utilized each type of learning - video/audio, words,
Each step starts with a video of how to complete the fix, followed by: the tools needed, written directions and a diagram revealing how the tool itself is used.
Built in feedback for users to let us know how we are doing - and how they are feeling making these fixes.
Horizontal scrolling filters allow for quick locating of necessary services.
This offline map is beneficial to emergency situations. It's meant to help users find a way out of even the trickiest and most remote situations.
Here are the results of a car diagnosis. The diagram highlights problem areas before telling you how to fix them.
This Level of Severity indicator allows drivers to quickly see if it's safe to continue driving or if they should pull over right away.
Service time estimator, color-coded according to the recommended fixes below.
Each accordion row is a separate issue that was detected. Depending on the level of severity, the Car Clinic will recommend a type of fix, provide a layman terms description of the issue, range of prices, and link you directly to the DIY fix.
Get the tools needed for the recommended DIY fixes right in the app.
BRANDING
BRANDING & UI
Defining the brand and user interface.
To explore the full brand concept, explore the style guide below.
Logo design
The logo for Car Clinic is meant to convey the freedom users will experience while using the app.
In my initial digital sketches, I drew inspiration from "car," "clinic" and associated words as well as the feelings people will experience using the application.
Version 1: Digital Sketches
I decided that creating the feeling of freedom and comfortability was the most important in the logo.
Version 3: Human view
I narrowed it down to these three concepts based off of relevance to the apps functionality.
Version 2: Closing in on the concept
And still...the previous version seemed illogical for a mobile application. The full logo was the view a human would experience, so I altered the perception to the concept to a birds-eye-view.
Version 4: Bird view
For the final logo, I took it one step further towards simplicity.
Version 5: the Simplified look
01. The benefit of the A/R feature is unclear
02. Want it to be easier to access the DIY guide + nearby auto shops
03. Can't access Diagnosis results after leaving the page
04. Faster + more efficient access to car diagnosis and emergency info
TESTING
I conducted usability testing with 3 participants to explore where my initial wireframes may have fallen short. While users were pleased with the overall experience on Car Clinic, they were unified in the thought that all emergency information and repairs should be more readily available immediately when they open the app. They also felt that it was difficult to locate the diagnosis tool due to unclear phrasing and that maintenance should be separate from repairs.
While considering the project priorities and the these 4 repeating frustrations, I developed the following solutions:
Testing the features
My solution: Add tutorial instructions to explain the significance of this feature.
01. The benefit of the A/R feature is unclear
PRIORITIZED REVISIONS
My solution: Make the recommended fixes clickable and take them to the specific DIY guide or the filterable map.
02. Want it to be easier to access the DIY guide + nearby auto shops.
My solution: Increase accessibility on the landing dashboard, use visual hierarchy to make it stand out.
04. Faster + more efficient access to car diagnosis and emergency info
My solution: Add buttons on Dashboard and Step-by-Step completion page to a Diagnosis log or Recent Diagnoses.
03. Can't access Diagnosis results after leaving the page.
FINAL DESIGNS
A research-backed, proven product.
OUTCOME & REFLECTION
The greatest challenge for me was creating a design for an industry that is very foreign to me and distant from my interests. I realized I absolutely thrive in unfamiliar industries as well - I feel a burst of energy to learn as much as I can about this unfamiliar space.
My Challenges
-
Design OBD II Sensor + Sync feature
-
Take A/R further with a variety of tours + incorporate into Step by Step fixes
-
Make location markers on map clickable with more info
-
More time on accessibility and equity-focused design
