Competitor Analysis & Market Research

I learned that only a handful of our indirect competitors like Carvana and Shift do so. However, the personalization tools are fraught with unclear navigation and outdated UI design.

Strengths:

• Straightforward, quick, intuitive

• Ask about important things to look for in a car

• Guided walkthrough with progress indicator

• List of top recommendations

User Interview & Empathy Map

Method: 8 user interviews on UserZoomGo. All participants shopped for cars in the last 6 months.

Discovery (Top 3):

• Price, MPG (Miles Per Gallon), Style, Features, and Safety are the most important factors people consider when shopping for a new car

• Shoppers’ main source of inspiration is Google, followed by family/friends and brand websites

• All users want to know if a car is in stock (and if not, how long the wait is)

Pains:

• Not knowing if a car is in stock

• Not getting the help needed from sales rep

• Too much information online

GAINS:

• Shop for cars anytime online

• Find a car based on individual and family needs

• See options and compare specs

User Journey Map

Meet Amanda! She’s in the market to buy a new car for work. I walked through the potential touch points of her user journey and looked for opportunities where DealerOn would meet her needs.

What I found interesting was that there are many opportunities to increase customer value through personalization that direct competitors have not addressed even though the need is obviously there. These opportunities would be a solid starting point for me to brainstorm ideas in the next phase.

Task Flow

In order to see tailored results, Amanda answers 6 questions that tie to certain attributes. Some attributes like Price and Body Style are at a model level, and others like Features and Engines are at a model and trim level. We opted to simplify the decision making process for Amanda by breaking down complex tasks into smaller steps, and by clearly highlighting the recommended options. We recommended car models based Price, MPG, Body Style, and Seats (all model-related attributes), and provided Amanda with the options to drill into a particular model, or answer trim-related questions to see even more tailored results.

Medium Fidelity Wireframes

Here’s how my medium fidelity wireframes addressed users’ needs and mitigated their frustrations:

• The questionnaire is simple, easy, and intuitive to use with no more than one information per page

• The car recommendations are tailored to shoppers based on their individual and family needs

• Shoppers can easily discern if a vehicle is in stock

• Shoppers can see multiple options and compare specs

• Besides giving shoppers the ability to modify selection or restart Car Match, we also provide them with direct paths to our other product lines

High Fidelity Wireframes

I learned from my usability testing that my audience wanted all car recommendations to fit within their budget. This is consistent with my user research, since price was the number one priority. Based on what I learned about participants’ pain points and frustrations, I made changes to my prototype to align with users’ mental models and be more effective in meeting their needs.

Questionnaire:

• Changed the horizontal progress bar to a vertical style with input. Not only can shoppers see their progression at any time and make modifications, but this design is more responsive and mobile friendly

• Added an inventory-driven price range and a stock availability chart

• Added an Attributes page to prioritize cars that have features most important to shoppers

Results Page:

• Styled “Modify My Selection” and “Restart Car Finder” inside a container so that these actionable items are more obvious to shoppers

• Removed title and subtitle to bring more matches into the first fold

• Provided shoppers the ability to see all cars in a particular model

Main Screens

Responsive Design

More than half (53%) of automotive internet shoppers use their phone in their quest for automotive information. To keep the experience consistent across desktop, tablet, and mobile devices, I opted to stack information rather than resize fonts and components. Following good design principles around giving users feedback, I used a progress bar to manage user expectations, and also made the process for revisions simpler by utilizing the navigation drawer in the hamburger menu.

UI Kit

After filling in my wireframes with color, photos, and branding to visually represent the end product, I created a UI Kit to house all design components of the user interface. I used a combination of elements from my company’s Business-to-Customer (B2C) Cosmos design system, and new ones I created that were≈. For this project’s brand color, I used a shade of blue that is unique to Honda, but I chose secondary colors that would work with other brand colors in mind (think Toyota Red or Chevrolet Gold). In the future as DealerOn adds more products to the Cosmos line, the UI Kit will ensure all design elements share a similar style and work as one mechanism.

Other Case Studies