CarDiag
CarDiag
Embedded Files
Product
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
Project overview
The problem
The problem
Diagnostic scan tools are expensive, bulky, and inconvenient to carry around.
The goal
The goal
Design a responsive web-based diagnostic platform available on phone and desktop, with user-friendly navigation and diagnostic process.
Responsibilities
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
My role
UX designer leading the CarDiag website design.
Understanding the user
Understanding the user
User research: summary
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
Experience
Most diagnostic scan tools do not have a responsive web-based version that can be used on phones, tablets, or desktops.
Expensive
Expensive
Diagnostic scan tools are expensive to buy and charges a fee for annual software updates.
Mobility
Mobility
Scan tools are bulky and add weight to the number of tools mobile mechanics carry for work.
Persona
Persona
Problem statement
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.
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
Starting the design
Sitemap
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.
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
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.
Desktop
Mobile
Low-fidelity prototype
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
Usability study: Parameters
Usability study: Parameters
Study type
Study type
Unmoderated usability study
Location
Location
United States, remote
Participants
Participants
8 participants
Length
Length
20-30 minutes
Usability study: Findings
Usability study: Findings
Shop manager
Shop manager
Once at the shop manager screen, the user didn't understand why "Repair History" wasn't part of "Manage Clients."
Navigation
Navigation
Users weren't able to navigate back to the previous page like they do on scan tools.
Refining the design
Refining the design
Mockups
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.
Before usability study
After usability study
Screen size variations
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.
High-fidelity prototype
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
Accessibility considerations
Accessibility considerations
One
One
I used headings with different sized text for a clear visual hierarchy.
Two
Two
I added alt text in images for people who might have trouble seeing content.
Going forward
Going forward
Takeaways
Takeaways
Impact
Impact
My target users shared that the design felt familiar, was easy to navigate, and demonstrated a clear diagnostic process.
What I learned
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
Next steps
One
One
Maybe conduct a follow-up usability testing on the new website.
Two
Two
Identify additional areas of need and ideate on new features.
Page updated
Google Sites
Report abuse