CLASSIC.COM
Introduction
Design Brief:
The Classic.com CEO requested an optimized user experience for site visitors. He also expressed future plans for a customized feed, similar to Instagram. I wanted my design to be scalable to the business's future goals.
Context:
Classic.com features a database of past and present classic car auction listings. Users can browse listings, and explore car markets. A car market is a group of cars (e.g. Chevrolet El Camino — from 1959–1960). Classic.com also has graphs displaying the past auction sale prices of cars within a given market. The site also provides CMVs (Classic.com Market Values), for various cars which are based on recent sale prices.
My Role:
UX Research and design
Research
To kick off my research, I interviewed the CEO to get an idea of his business goals. I also consulted with the head of marketing to determine what users were asking in the site's help chat. I learned that users were often asking how to purchase a certain car (but buying is not a supported function on the website).
I then assessed online competitors to determine what features users have come to expect. I explored the sites and read app store reviews to gain insight into what users find valuable. I ranked the main competitors based on transparency and niche in order to identify a blue ocean in the market.
Feature Analysis
Market Position
I interviewed a classic car lover, then devised an online survey to post on classic car forums. I then conducted 4 more interviews, as well as did current-state usability testing of the website.
This revealed various issues, including a lack of clarity on the call-to-action buttons. For instance, “Save Vehicle” leads to users receiving alerts of price updates and sale prices for that specific VIN number, but users did not know they would receive updates; they thought they were simply saving the vehicle into a specified folder/area of the website.
Other users thought they would receive updates for cars similar to the one in the listing. Other issues discovered were the lack of a “go” button alongside the search bar, as well as not coming across the market value graphs until having explored the website for quite some time. "Oh what is this, market prices? That's pretty cool," one user stated after having already explored the site for about 20 minutes.
The affinity map helped me organize my findings and led me to appreciate the importance that users place on a car's appearance, and of seeing car photos online.
Affinity Map
I then devised an empathy map and a user persona to better identify with the target users, and to organize the goals and frustrations of the target users into one persona.
Empathy Map
User Persona
Then, I created the user journey map to visualize the users’ process navigating the site. The top 3 pain points were:
• difficulties searching / sorting listings,
• being unclear on the functionality behind saving a vehicle, and
• lack of clarity as to the site’s functions.
Journey Map
Ideation
I devised “how might we” statements to help ideate solutions for these 3 pain points. This served to better guide my brainstorming.
After ideating solutions, I used the MoSCoW method to prioritize ideas. This is important to prevent feature-overload and to give the company a better idea of what changes had a positive impact.
Feature Prioritization
The minimum viable product is a responsive website with a site tagline, a description for the call to action buttons, a go button for the search bar, a market value graph on all car listing pages, listings displayed card style on the landing page, and a sorting functionality.
Prototype
Once I’d arrived at the MVP, I created a user flow to determine what screens needed to be designed. I then sketched out paper lo-fi wireframes.
I then performed usability testing of the lo-fi prototype with 6 users, using Marvel and Maze. There was a 13.4% misclick rate and users described it as “intuitive.” Users did report confusion as to the featured market on the home screen. One user stated, “I don’t care about that market.” With this information, I omitted the featured market graph from the home screen in the next iteration.
Additionally, users reported that it made more sense to have the option to save a vehicle above the option to follow a market.
Next, I tested the mid-fi prototype with 6 different users.
In this iteration, users were presented with the option to check “follow market,” which would result in them receiving updates when new cars within that market are listed. After testing, I discovered that the wording of “follow market” was didn't communicate the function to receive updates when new cars are listed.
Some users stated that they didn’t read the description below the “follow market” option. For the next iteration, I changed the wording to “new listing alerts.”
Before creating the hi-fi screens, I reviewed the UI and branding choices of competitors. Hagerty has a sleek and minimal look that aligned with Classic.com’s CEO’s vision for their site. Hemmings, on the other hand, features bold use of color and a stylized logo.
Some of the hi-fi screens for desktop and mobile can be seen below. The card style listing layout on the homepage lends itself well to the stakeholder's goals of customizing the feed.
Conclusion
Success and failure metrics for this design are the number of users who follow cars and markets.
This project highlighted the importance of flexibility in design. Usability testing of each iteration resulted in pivoting my design to better meet user needs and help them achieve their goals.
This process highlighted the importance of UX copy- users had different expectations when saving vs liking vs following a car.
It's crucial to ensure the product's functionality is meeting user expectations.
My next steps are to explore the need for search filters, auto-correct / search suggestions, and a customized feed based on user activity.
