Used-car shoppers have no way of knowing if the car they are buying is in good condition. They are not car experts and do not trust the seller.
I designed a website where used-car shoppers can go to hire an independent mechanic who will come with them to the dealer to inspect the condition of the car they are considering.
The result is a high fidelity prototype that covers the journey of someone purchasing a car on Cargurus.
I lead the entire project from generative research through usability testing the high fidelity prototype.
I had two goals for the generative research:
Test my inititial hypothesis that used-car shoppers do not trust dealerships, and thus will not consider buying from them.
Learn what the current user journey is for a used-car shopper.
For this research I conducted four USER INTERVIEWS. All had were currently shopping for or had recently purchased a used-car.
I Affinity Mapped my findings categorized by stages of the user journey.
Link To Zoomable Affinity MapI had three main take-aways from the research:
Independent mechanics are who the shoppers trust the most. My idea was to have the dealerships use the the mechanic's pre-existing trust with them.
I had a couple ideas for how this might look practically:
Dealerships could have respected mechanics in the area come and inspect their cars. Any car approved by the mechanic could be listed on the dealership's website with an icon indicating that it has been approved.
A website where used-car shoppers could go to hire a mechanic to come with them to inspect a car they're considering.
I eliminated "Pre-Approved" due to the conflict of interest issue. The whole point of this idea is to gain user trust.
From here I created the primary user journey. The journey starts with a shopper browsing cars on CarGurus, and continues through them setting and receiving confirmation of their appointment.
From here, I turned each step of the journey into an actual screen layout.
The proof our users trust the most is a recommendation from their friends.
Schedule right on the profile helps users find a mechanic that aligns with their schedule.
Again, a front and center element indicating that you're booking for the right car.
Big image of car, front and center, to ensure user knows that this page is connected to his car.
Ultra clear back button ensures users that they've moved from CarGurus to M4U site.
I emphasized independent as it is our biggest value add.
I ran 5 usability tests. The usability concerns for this product were whether the user knew where he was in the process, and if he had the correct expectation of what the next steps were. The usabiliy test tasks included:
The car's product page on CarGurus:
What is Mechanic’s 4U’s relationship to CarGurus?
M4U homepage linked from the the car's product page on Cargurus:
Does the user know that this page is custom to the car he was looking at?
Appointment confirmed page:
Where are you going to meet the mechanic?
The biggest concerns found in testing were that users didn't know the price for an appointment, and they also didn't know where they would be meeting the mechanic.
Link To Full Usability Test ReportI started by perfecting a few of the site's main screens. Then, knowing that the colors, fonts etc... worked cohesively, I went back to create the style guide.
There were two factors that went into choosing the color scheme:
The whole idea of the website is to provide shoppers with mechanics who feel like a trusted friend. A secondary goal is to make the used-car shopping experience a bit more enjoyable than the slog that we're all used to.
Color contrast standards were the other influence on the colors I chose. Every color combination actually used in the app exceeds the WCAG's AA standard.
Many of the issues from the first round of testing got cleared up as shown by the second round of testing.
Link To Usability Test Report (Round 2)With all that being said,
Go ahead and give it a try!