CarDiag


Product

CarDiag is a web-based vehicle diagnostic software for scanning check engine lights and reading vehicle data with a phone, tablet, or desktop browser. The typical users are 18 - 55 years old and mostly mobile mechanics or DIY car owners.

With CarDiag, auto techs will have one less expensive tool to buy and carry around for work.

Project duration:

2 Months


Project overview

The problem

Diagnostic scan tools are expensive, bulky, and inconvenient to carry around.

The goal

Design a responsive web-based diagnostic platform available on phone and desktop, with user-friendly navigation and diagnostic process.


Responsibilities

Conducting interviews, paper, and digital wireframe, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on the design, and responsive design.

My role

UX designer leading the CarDiag website design.



Understanding the user

User research: summary

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users enjoy diagnosing and reading vehicle data with a diagnostic scan tool because it saves them time and money on most repairs.

However, many diagnostic scan tools are bulky and expensive, which frustrates many target users, causing a usual enjoyable experience to become challenging, defeating the purpose.

Experience

Most diagnostic scan tools do not have a responsive web-based version that can be used on phones, tablets, or desktops.

Expensive

Diagnostic scan tools are expensive to buy and charges a fee for annual software updates.

Mobility

Scan tools are bulky and add weight to the number of tools mobile mechanics carry for work.



Persona

Problem statement

Fred is a mobile mechanic who needs a diagnostic scan tool that is not bulky, expensive, and requires annual updates because they are tired of carrying a bulky, outdated diagnostic scan tool to work.

Cardiag persona, named fred


Cardiag user journey map


User journey map

Mapping Fred's user journey revealed how helpful it would be for users to be able to use their phone as a diagnostic scan tool.



Starting the design



Sitemap

My goal was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose makes the diagnostic process simple, easy to navigate, and has a similar design to the scan tools.

Cardiag sitemap


Cardiag paper wireframe screen size variations


Paper wireframe screen size variations

Because CarDiag's aim is for customers to access the site on various devices, I started working on designs for additional screen sizes and ensuring the site is fully responsive.


Digital wireframes

Moving from paper to digital wireframe made it easy to understand how the redesign could help address user pain points and improve the user experience.

Prioritizing easy navigation, familiarity, and a simplified design was a crucial part of my strategy.

Cardiag desktop home screen digital wireframe

Desktop

Cardiag mobile phone home screen digital wireframe

Mobile


Cardiag low fidelity prototype image


Low-fidelity prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of adding a vehicle to complete a vehicle diagnostic.

At this point, I received feedback on my designs from automotive technicians about simplifying the diagnostic process. I made sure to listen to their feedback, and I implemented several suggestions that addressed their pain points.


View on Adobe XD

CarDiag low-fidelity prototype


Usability study: Parameters

Study type

Unmoderated usability study

Location

United States, remote

Participants

8 participants

Length

20-30 minutes


Usability study: Findings

Shop manager

Once at the shop manager screen, the user didn't understand why "Repair History" wasn't part of "Manage Clients."

Navigation

Users weren't able to navigate back to the previous page like they do on scan tools.



Refining the design

Mockups

Based on the insight from the usability study, I made changes to improve the site's "Shop Manager" screen. One of the changes I made was merging the "Repair History" with "Manage client," thereby eliminating any confusion and improving the user experience.

I also made changes to the navigation, giving the user the option to navigate back to the previous page.

Cardiag desktop shop manager screen digital wireframe. Before

Before usability study

Cardiag desktop shop manager screen digital wireframe. After

After usability study


Screen size variations

I included consideration for additional screen size in my mockups based on my earlier wireframes. Because users depend on the diagnostic tool to scan and read vehicle data, I felt it was essential to optimize the browsing experience for various device sizes, such as mobile and tablet. Hence, users having the smoothest experience possible.

Cardiag desktop vehicle detail screen
Cardiag mobile phone vehicle detail screen
Cardiag desktop connect vehicle screen
Cardiag mobile phone connect vehicle screen



High-fidelity prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype and included the design changes made after the usability study.


View on Adobe XD

Mobile: High-fidelity prototype

Desktop: High-fidelity prototype

Cardiag high fidelity prototype


Accessibility considerations

One

I used headings with different sized text for a clear visual hierarchy.

Two

I added alt text in images for people who might have trouble seeing content.



Going forward

Takeaways

Impact

My target users shared that the design felt familiar, was easy to navigate, and demonstrated a clear diagnostic process.

What I learned

I learned that even a slight design change can have a significant impact on the user experience. The most important takeaway for me is continuously focusing on the user's actual needs when designing.


Next steps

One

Maybe conduct a follow-up usability testing on the new website.

Two

Identify additional areas of need and ideate on new features.