TECHDIAG
Product
Techdiag connects car owners directly with a skilled auto tech. Techdiag's primary targets are auto techs with dealership training, AES certification, and mobile mechanics. Techdiag also targets car owners with expired factory or external vehicle warranties.
Project duration
6 Months
Project overview
Problem 1
For car owners:
Car repairs are expensive, time-consuming, inconvenient, and auto techs are untrustworthy.
Goal 1
For car owners:
Design an app that helps car owners find a trustworthy auto tech that will save them time and money on repair(s).
Problem 2
For auto techs:
Stagnant wages, increasing prices of repair tools, long working hours with no overtime pay, underpaid and unappreciated.
Goal 2
For auto techs:
Design an app that helps auto techs increase income, better work-life balance, and feel appreciated.
My role
UX designer leading the app responsive website design from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Understanding the user
Persona
Problem statement - car owners
Saida is a senior accountant who needs an affordable and reliable option for car repair because their factory repair warranty has expired, and vehicle repairs are expensive.
Problem statement - Auto techs
John is a dealer-trained auto tech who needs a working environment where they make money and are appreciated because they feel frustrated working long hours, are underpaid, and unappreciated.
Competitive audit
An audit of a few competitors provided direction on gaps and opportunities to address vehicle repair costs and improve auto tech earning and work-life balance.
Click to view the full competitive audit and audit report
Ideation
I did a quick paper ideation exercise to develop ideas for addressing some of the gaps identified in the competitive audit. My focus was connecting car owners to skilled and affordable auto techs through a virtual consultation process.
Starting the design
Digital wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the TechDiag app. The designs focused on helping auto techs manage their appointments and easily connect to car owners.
Low-fidelity prototype
To prepare for usability testing, I created a low-fidelity prototype that connected the user flow of an auto tech making money after completing a virtual diagnostic consultation for a car owner.
View on Figma:
Parameters
Study type
Unmoderated usability study
Participants
10 participants
Location
United State, remote
Length
30 - 60 munities
Findings
Navigation
Auto techs wants the virtual consultation process cut down. They felt it was too long.
Vehicle detail
Auto techs want to see clients complaints before starting a chat with the client.
Review
Car owners would like to see reviews and comments on tech's.
Refining the design
Before
After
Mockups
Based on the insights from the usability studies, I applied design changes like providing a clear section on the home screen for auto techs to see daily appointments and potential earning.
Mockups
Additional design changes included emphasizing the client's complaint and vehicle details. I also removed the bottom navigation to bring focus to the chat button.
Before
After
Original screen size
Home screen
Vehicle detail screen
Chat screen
Feed screen
High-fidelity prototype (auto techs)
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
TechDiag high-fidelity prototype
Responsive design
Sitemap
With the app designs for auto techs completed, I started work on designing the responsive website for car owners. I used TechDiag sitemap to guide the organizational structure of each screen's design to ensure a cohesive and consistent experience across devices.
High-fidelity prototype (car owners)
The designs for screen size variation included mobile, tablet, and laptop. I optimized the designs to fit the specific user needs of each device and screen size.
View Figma
Tablet - TechDiag high-fidelity prototype
Accessibility considerations
One
Clear labels for interactive elements that screen readers can read.
Two
I used headings with different sized text for a clear visual hierarchy.
Going forward
Next steps
One
Conduct research on how successful the app is in reaching the goal for techs to earn more while saving car owners money on diagnostic and repair.
Two
Continue iterating based on the new insight.
Takeaways
Impact (auto techs)
Auto techs shared that while TechDiag won't replace their primary job, they see a huge opportunity and a more innovative way of making money without touching a car. One quote from peer feedback was "With this app, we can make money without touching a car."
Impact (car owners)
Car owners reviewed that TechDiag gives them direct access to techs who can answer their questions and fix their vehicles in the comfort of their homes. One quote from peer feedback was, "Seeing a tech's reviews, posts, and interaction with others gives me an idea of how knowledgeable the tech is with cars."