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 →
Project Members
1 Designer,  1 Project manager,  1 Front-end engineer, 1 Back-end engineer
Role and tasks
UX/UI Designer:
Responsible for website UX/UI design.Information architecture planning; Wireframing; UI Mockup design; Build up Design system and components; stakeholder interviewing, Design delivery and communication.
Timeline
2022.June-December

Outcome

1. outstanding performance:
According to the data, the new design driving approximately 15% increase in conversion rates
2. Winning client trust:
The client had trust in my design, with only a total of three to four design revisions.
3. Establishing a communication template:
I established a UI/UX specification document for the design team to follow, in communication with the developers.

Design Highlight

1. Homepage Improvements:
Created eye-catching entry points, allowing users to quickly find the information they need and easily achieve their desired actions.
2. Enhanced Car Search Page:
Added filter and search functions to provide users with clearer and more convenient guidance for searching for cars.
3. Versatile Car Main Page:
Provided multiple ways to search for vehiclesnby offering flexible and tailored search options to meet diverse user needs.
4. Detailed Car Information Page:
Redesigned the layout for better information presentation and added a photo filtering function, enhancing user engagement and streamlining the process of finding relevant vehicle details.

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