Case study
Car Dealership
responsive website
01
Project Overview
The problem
More and more car dealers worldwide seek an efficient and streamlined solution to optimise their deal-closure processes. Since the demand for such a solution is especially pronounced in the Swedish automotive market, I was tasked by a Swedish company to take part in one of the pioneering initiatives within this domain – an online platform designed to facilitate connections between car dealers, sellers, and buyers, with a primary focus on enhancing deal-closure efficiency.
The product
In this project I designed an effective checkout flow for an inbuilt marketplace of a car dealership's already existing website, where the starting point is the user’s dashboard and the ending point is the completion of the purchase. After creating the desktop version, I designed the responsive one for mobile.
The goal
This website, with its dashboard and marketplace, aims at supporting car dealers in closing deals, through an easy-to-use one-stop shop that provides them with all they need in one place.
My role
UX Researcher, UX/UI Designer.
Responsibilities
User research, market research, wireframing, prototyping, testing.
Project duration
December 2021 to January 2022.
.png)
02
Understanding the user
As part of the initial foundational research, I interviewed 3 car dealers (already users of the website) that gave me insightful opinions on what the needs and pain points I should address were.
The data collected showed that car dealers want mainly two things: easy access to funds and a way to easily exchange the services/goods they seek/provide. The former – already part of the company’s services – isn't the object of this study; the latter, instead, is the user need that I am going to address here.
User needs
1. Marketplace
Car dealers want an online space, easily accessible and browsable, to find and showcase the best deals. A marketplace seems the perfect fit to respond to this need, and therefore it will be designed and integrated in the website.
2. Dashboard
The user of this car dealership website needs a place where all the most important info is gathered. A dashboard will come in handy here.
3. Easy to use
Some older users need to be comfortable using the platform, so its navigation and interface have to be straightforward, easy to use, and fulfil all the industry accessibility standards.
Persona & Problem Statement
Persona: Tony
Tony is a car dealer who needs an online platform that is easy to navigate and showcases all the deals on the market, because he wants to find the best deals and manage them all from the same place.
Target user journey map
Tony’s journey map starts from the website's homepage, continues with the login and finally from the dashboard proceeds to the marketplace page. I will focus on the last two steps, to deliver the best buying experience.
03
Starting the design
Sitemap
Ease of use (and good navigation) was one of the primary requests coming from user interviews; with that in mind I delineated the sitemap in a way that could integrate with the existing structure of the website, without disrupting its information architecture. (even though all the pages of the website are here represented, my focus was solely on the Dashboard and the Marketplace)
Digital wireframes
Wireframing gave me the opportunity to look at the product from a comprehensive perspective, while focusing on those key elements that revealed to be essential for a smooth user experience.
Desktop wireframes
Three screens: dashboard, marketplace, item selected.
After the first user testing session, I added a couple of fundamental elements: purchase button, and sort button.
Screen size variations
At the same time, I worked on the mobile version of the same screens and made sure the website would be fully responsive.
Usability Study Findings
To start testing the designs, I created a low-fidelity prototype, available here. This prototype was used during an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
1. Interface
Dashboard is essential and needs to clearly display the crucial information.
2. Call-to-action
The marketplace needs clear call-to-action buttons.
3. Sort button
The marketplace needs a well thought-out sorting feature.
04
Refining the design
Mockups
After the first round of edits that followed the usability study, I proceeded with the polished version of the product.
The dashboard presents widgets that expand any time the user clicks on them. This aligns with the idea that the dashboard is the control center of the platform that shows an overall view of the account, and a space the user needs to undertake informed actions.
The sort button and filters have a dominant role in this user experience and have been redesigned to offer an optimal variety of options.
The layout of the page, showcasing the cars' info and thumbnails, was changed from grid to single column to optimise the space necessary to provide crucial info for the user's decision process.
Accessibility considerations
1. Text-to-speech
Text-to-speech function will be implemented in the website.
2. Contrast ratio
Contrast ratio was kept under control to make the content readable for everyone.
3. Gestalt principles
Elements and content layout were built following Gestalt principles.
Refined designs
Screen size variation
Mobile responsive website:
High-fidelity prototype
An improved user flow and a refined design was implemented after the last usability study.
Final implementation of the purchase flow: dashboard > marketplace > item selection > purchase completion.
View the Car Dealership desktop website high-fidelity prototype
View the Car Dealership responsive mobile website high-fidelity prototype
05
Going forward
Takeaways
Impact
Two car dealers left their positive feedback after a further user testing session.
Their quotes:
“The info I need to make a decision is all there. It think the marketplace is intuitive and is easy to navigate”
“In the marketplace I can finally find the best deals all in the same place”
What I learned
Thanks to research, it's likely to discover room for product improvements based on real user needs that haven't been covered yet. Iteration based on user testing is the key to provide a better version of your product.
Next steps
1. Testing
Conduct follow-up usability testing on the new website.
2. Ideation
Identify any additional areas of need and ideate on new features.