carvoyant Logo

For all your car troubles.

Carvoyant is the fast and easy way to diagnose user car troubles without a trip to the mechanic. Answer questions, capture audio and done!

three iPhone screens with Carvoyant designs

Role

UX Design
UI Design
Branding

Deliverables

Persona
Empathy Map
Journey Map
Lightning Demo
Sketches
User Flow
Wireframes
Mid Fidelity Prototype

Time &Tools

Client
Craig Adams
Duration
2 weeks
Tools & Software
Figma

Mural

Usability Hub
View Figma Prototype
.

Problem

Craig is a car enthusiast. His favorite activity is changing oil and passing his knowledge to his kids. But his efforts are no match for their utter lack of interest. And not just his kids, but many car owners don't have the interest to learn how to fix their own vehicle. They turn to the internet to figure it out, not knowing the correct terminology or car parts to look up. Some car owners take it to a mechanic only to find they over paid to identify an easy fix.  Both of these can be a waste of time and money.

Solution

Not all car owners care for cars, but they do love technology! Users no longer have to ponder what information they need to look up. Carvoyant asks all the key questions to determine the problem.  Starting with vehicle specifics like make and model. It then asks for sensory details such as car light, vibrations or smell of gas or smoke. Last, users allow the app to capture the car sound. Carvoyant is cheaper than a trip to the mechanic and faster than searching on the internet. 

4 Carvoyant iPhone screens

Design Process

This project was designed during a one week sprint and followed a truncated design process. Each day focused on a step within design thinking. I held a discovery workshop with my client prior to the sprint. 

Diagram of the design  thinking process.

Day 1: Empathize

Target Audience

The audience is young car owners aged 25-39.  Older generations, like Craig, tend to have more car knowledge and don't need an app to help them with their car problems. The target audience is the middle class and budget conscious.  Mechanics are expensive and can cause monetary stress on a car owner. Those in a lower income bracket are also more likely to own older cars which will in turn require more maintenance. The target audience is self-reliant and like to fix their own problems, however in this case have little to no car knowledge.

Male cartoon avatar

Sam
Accountant
29 years old
Los Angeles, CA
Motivations
Sam likes to fix their own problems.
As a budget conscience individual, they seeks ways to avoid paying others to solve their issues.

Frustrations
Sam doesn't know a lot about cars, making it hard to do maintenance themselves.
Sam works hard at home and on the job and don't have time or money when their car starts to act up.

Empathy Map

Who is Sam, and what does he experience as a car owner in need?
A diagram of an empathy map

User Journey Map

How does Sam experience car trouble?

A diagram of a Journey Map

Day 2: Define

HMW

Referring back to Sam, what questions does he have about fixing a car. Turning those questions into "How Might We" statements helps identify possible features. These features define the scope of the project.

A visual with different HMW statements.

Day 3: Ideate

Lightning Demo

A lightning demo helps generate ideas to answer HMW statements. This lightning demo focuses on features from Carvana, Shazam and Replika.
Screen with Carvana 360 car featureScreen with Shazam capture audio featureScreen with Replika chat feature

Sketches

Shazam listens to music and recognizes a song. Maybe the app can listen to a car and tell what’s wrong. Replika is an AI counselor, featuring a chat function. Perhaps users can create a chat in the app to discuss car issues with an AI mechanic, like if the hosts of Click and Clack were robots. The interactive car rotation from Carvana provides a nice visual that could be beneficial for users of the solution app.
Sketches of features for Carvoyant

Solution Sketch

Combining ideas and inspirations into a solution sketch, there is now a clear idea for the solution to the problem. Users fill out prompted information, and using the Carvana app as inspiration, tap where on the car the problem or sound is occurring.  Utilizing a Shazam inspired design, users can record the car noise and a diagnosis will appear. 

Solution sketch for Carvoyant

User Flow

“As a car owner I want to know the problem with my car so I know what to do next.”
Diagram for user flow

Sketches

Sketches allow me to explore ideas quickly and efficiently prior to moving on to high-fidelity wireframes.
Wireframe sketches for Carvoyant

Day 4: Prototype

Onboarding screen wireframeHome screen wireframeData collection wireframeData collection wireframeCar view wireframeCar view wireframeCar view wireframeListening to audio wireframeDiagnostic found wireframe

Day 5: Test

Usability Testing

Tests were conducted with 18 participants, 5 over zoom and 13 on Usability Hub.  Participants had to complete the following tasks:

1) Once on the homepage, how do you start a new diagnostic?
2) Pretend you drive a 2008 Hyundai Accent GLS 4 Cylinder Automatic, how do you input that into the app?
3) How do you tell the app you noticed  the check engine light is on?
4) Pretend you have been experiencing a strange noise under the hood on the driver side. How do you indicate that to the app?
5) How do you start sound recording?

There were no issues starting a new diagnostic with any participants. However, one participant could not tell if they were on the homepage or not. For visual affordance, a home icon was added in the final design.
Before wireframe
After prototype
There were no issues inputting the correct car information, but a participant commented that the screen was asking for a lot. Splitting the questions into two screens to create whitespace makes the information visually digestible and simple.
Before wireframe
After prototype
All participants could locate the button to indicate the check engine light. Participants did express they could find it faster if the list was organized alphabetically.
Before wireframe
After prototype
When asked to indicate there was a sound coming from the front driver side, two participants had a hard time completing this task. They were unclear if they should click the label stating "driver side". To reduce complexity and confusion, the labels were removed.
Before wireframe
After prototype

Week 2: Branding

Mood Board

Inspiration came from the lights of a dashboard, or the streaks when a car goes speeding away. The app should feel sleek, fast and reliable like luxury brand cars.
Mood Board with images of cars and neon lights

Logo & Name

Gears are the inner working of the car and this app is designed to know what’s going on with those gears, therefore a gear should be incorporated in the logo.  The name Carvoyant plays of the word clairvoyant -someone who is extremely perceptive and can see thing others cannot…just as this app can with cars.
Sketches of logos

Style Tile

The color palette reflect the lights of a car and the visuals used in the app look similar to those on a blueprint for car designs.  The font EXO2 is similar to the Jaguar logo and other car related logos.
Style tile, fonts, images and color pallet
style tile

Final Thoughts

Conclusion

Apps that help users understand their car problems are not a new concept; however, this app is the first of its kind and relies heavily on AI rather than a code reader. Designing in a sprint proved to be beneficial to explore if its worth investing more time. I received an overwhelming response of excitement and intrigue amongst my testing participants when shown my prototype.

problem indicator screen

The design offers comprehensive steps, with clear  prompted questions to get to a diagnosis.

The features follow mental models, and allow users to relate the app to their car, helping them decipher the problem without actually understanding the problem.

sound indicator screen
make and model screen

Users have the option to save information for later to reduce cognitive load the next time they have a car issue.

The app provides a solution to a problem many car owners suffer, and has the potential to educate and help users save money.

home screen
View Figma Prototype
.

Plans For Development

If I had more time:

  • Design and fill out the settings tab
  • Add and improve micro interactions such as error messages or button animations
  • Add animations to the "Shazam" screen for user delight
  • Start developing the AI

When the app is released, I would look at adding features such as:

  • Where to buy parts
  • Comparative pricing for parts or mechanics
  • How To videos
6 Carvoyant iPhone screens
Back to Top
.

My Other Work