back arrow

MB Select - Used Car Website Revamp Project

UX/UI Design
Project Brief

The Mercedes-Benz Used Car Website (MB Select), as the official channel for the sale and purchase of certified used cars, has the business objective of increasing the number of individuals selling their certified used cars by redesigning the website.

Solution

By conducting stakeholder interviews and applying the 10 Usability Heuristics, the website redesign aimed at enhancing the overall user experience and increasing conversion rates.

Website link →
Type
UX/UI Design
Project Members
1 Designer,  1 Project manager,  1 Front-end engineer, 1 Back-end engineer
Timeline
2022.June-December

Outcome

Delivered a revamped used car website with optimised navigation and user flow. Implemented data-driven design solutions addressing key user pain points. These improvements resulted in increased traffic to the 'buy car' page and a 15% boost in conversion rates.
Plus, I established a UI/UX specification document for the design team to follow, in communication with the developers.

Impact

Demonstrated expertise in design for an e-commerce platform. Translated user behaviour insights into effective solutions, directly contributing to increased conversions. Showcased ability to drive measurable business impact through strategic UX improvements in a competitive market.
The UI/UX specification document helped facilitating seamless collaboration between design and development teams.

Design Process

Stakeholder interview

After four stakeholder interviews and customer feedback, I have identified four significant pain points.

Interview Background:
‍
A.Participants: four in total, all of whom are business and website content creators with a basic understanding and experience with websites.
B.Interview Outline:
1.Business and market status: to Understand the customers and the process of buying and selling used cars, and the points and related needs that they care about when buying and selling cars.
2.Current situation and performance of the website:understand the current situation of customers' website use, as well as dealers' current thoughts on the website
3.Display the design:to get advice and feedback

Competitive Analysis

Select benchmark and competitive brands such as BMW, Audi and Lexus for specific project research.

Mainly focused on car information content and presentation. Including: number of card displays, page scrolling ways, filter design, etc.

I put the collected information on a Figma canvas for easy organization and reporting.

Design solution

Besides improving on existing pain points, I also optimized the details of each part of the website
Taking Homepage, Car search page, Car main page, Car detailed page as example:
1.Homepage:
‍Create eye-catching entry: Enlarge and highlight “I want to Trade-in 我要賣車” and “I want to purchase 我要買車”.
Allows users to quickly find the information they need and easily achieve their desired actions.

2.Car search page:
Add filter and search function to provide users with clearer and more convenient guidance for searching for cars.
This significantly improves the user experience, making it easier and faster for users to find their desired vehicles.
3.Car main page:
‍Provide multiple ways to search for vehicles, including by "Recommendation", "Popularity", "Model", "Price", and "By Keywords".
This enhances the user experience by offering flexible and tailored search options to meet diverse user needs.

4.Car detailed page:
Consider the presentation of information on the page, redesigned the layout, and also added a photo filtering function.
These changes enhance user engagement and streamline the process of finding relevant vehicle details.

MOCKUP

Responsive design(RWD) is taken into consideration.

32 pages in total.

Design System &
UI/UX Spec

By Building Design system and UI/UX spec to promote better team collaboration and to accelerate development efficiency.
Besides, my UI/UX spec documentation became the template adopted by the design team, which will be used in other projects in the future.

Content Management System Planning

I used Class diagrams to expand the requirements for related data, such as model, style, photos, exhibition locations, etc. and created wireframes for the back-end to communicate with the client.

Key Learnings

In this project, I applied my previous experience from Frog Design to independently design the entire website and gained valuable experience.
1. Client Interaction:
•Improved skills in understanding and meeting client needs through regular communication.
•Example: Conducted stakeholder interviews to clarify design goals, enhancing project success.
2. Collaboration with Developers:
•Ensured design feasibility and alignment with technical requirements by closely working with developers.
•Example: Organized design review meetings to discuss feasibility and incorporate feedback.

Other projects

Weaven - UX/UI Design and Usability Test →
Chemical Website Resdesign →
ITSEED website Redesign Project →
Menu
Case StudyAbout MeResume
COntact
EmailLinkedin
BriefProcessInterviewsAnalysis
Design Solution
UI Mockup
Spec
CMS Planning