Transforming Mercedes-Benz Vehicle Sales with the Auto-E Platform
Mercedes-Benz aimed to modernise its vehicle sales by introducing a sleek e-commerce platform that reflected the brand’s luxury ethos.
As The Lead product designer for the Auto-E platform at GForces, I was asked to create a solution for MB using the Auto-E online solution that allowed customers to explore, personalise, and purchase vehicles with ease. This project showcased how Auto-E that I created could be tailored to meet the needs of a premium automotive brand while delivering an exceptional user experience.
Copyrights:
Gforces Web Management & Mercedes-Benz
My responsibilities
As the lead designer, I was responsible for overseeing every stage of the platform's design and implementation:
-
Leveraged the Auto E framework to meet Mercedes-Benz’s specific requirements, ensuring the design adhered to their brand identity and customer expectations.
-
Conducted interviews and surveys with potential customers to understand their needs and pain points, shaping the platform’s design strategy.
-
Created wireframes, prototypes, and high-fidelity UI designs, focusing on an intuitive, visually engaging experience.
-
Worked closely with Mercedes-Benz dealerships and internal teams to align on goals and ensure the platform integrated smoothly with existing dealership processes.
-
Led usability testing sessions and iteratively improved the platform based on user feedback, ensuring it met both customer and business requirements.
Objectives
Enable customers to browse and purchase Mercedes-Benz vehicles effortlessly, with filters for location, price, and model preferences.
Provide a personalised, seamless journey from exploration to purchase, reflecting the brand’s premium reputation.
Integrate dealership operations to ensure a smooth handover from online to offline services.
Challenge
Time Constraints: The project demanded rapid delivery, requiring efficient planning and execution.
Dealer Coordination: Integrating dealership networks to ensure accurate inventory and pricing across multiple locations.
High User Expectations: Designing a platform that met the high standards expected from Mercedes-Benz while maintaining simplicity and usability.
Approach
Tailored Design: Adapted Auto E to include customisation options for vehicles, a streamlined purchase journey, and tools to compare models and prices.
Psychological Design: Applied emotional design principles to build trust and ensure customers felt confident during the online purchasing process.
Dealer Integration: Coordinated with dealerships to integrate real-time inventory updates and ensure a seamless transition between online and offline touchpoints.
Research, Testing & Planning
My approach to design always hinges on two key factors: The complexity of the problem at hand and the time available to devise a solution. So,I take into account various elements such as project requirements, user needs, business objectives, and project goals to ensure a holistic approach. My primary focus is on delivering user-centric solutions, as this guarantees that our products address issues that are meaningful to people.I adhere to a user-centric design process, which involves a series of steps. This includes defining the problem and analyzing the value proposition, followed by sketching, prototyping, testing, and iterating until the optimal solution is reached. This method ensures that the end result is not only valuable but also credible and reliable for the user.
To gain a deeper understanding of the end user's needs, psychology, and behavior, we undertook extensive user research, competitor analysis, and conducted user interviews and surveys. This multifaceted approach allowed us to gain invaluable insights into our target audience.To ensure maximum reach, I created a group of user profiles aligned with our target demographic and then conducted 24 online interviews in addition to distributing a concise 12-question survey. The impressive 93% response rate provided rich data, enabling us to pinpoint the features most crucial for users to accomplish their tasks effectively. This invaluable feedback prompted me to refine and enhance my initial concepts, resulting in a more polished wireframe design..94.5% mentioned it is very difficult to go through the finance process at the dealer as it takes a long time Solution: create a finance option using the Net director solution for finance checks. MVP solution
.83% mentioned that they would like to know how long it will take for the order to be ready. Solution: Order tracking functionality. MVP solution
.99% find it hard to fill in all the personal details again and again whether to buy in cash or finance Solution: Use autofill for all the common fields throughout the site and integrate it with google..70% were looking to build their vehicles then order it Solution: Use Net director vehicle build solution and integrate it with the purchase process
.77% wanted to know the accessories, insurance packages, and extras that can be added to the car so they can order it before the purchase Solution: integrating the related accessories shop within the vehicle buying process before check out
Based on the interviews, workshop, user research, and by getting the stakeholders involved, I have set up three personas to reflect our users and referred to them throughout the entire development process of the platform.Every single persona had its own scenario that shows and identifies the realistic users' goals and objectives they might have when it comes to using the platform.Each persona information was based on users’ goals and points of pains when it comes to buying a vehicle or using a similar platform along with how they will interact with our platform. which in return affected the design decisions.Each Persona was presented to the project team for detailed discussions and for validity which in return affected the design decisions.Understanding users & creating Personas
Based on our persona, this empathy map takes a deeper dive into understanding our users. The Quadrants provide insight into who they think. This data came from interviews and observations. They sum up how the users feels, thinks, hears, etc. It’s all about what matters to them. Knowing their struggles and victories helped me to find ways for them to achieve their goals, remove or minimise any barriers to it.After that we mapped out a high level user flow in order to map every step the user will need to interact with and go through it to achieve the main goal and fulfill his/her need, I have created a user flow diagram based on the user personas.Wireframing and prototyping
Low-fidelity Wireframes:
First I have sketched each iteration along with the required elements and screens that are considered important by the user to reach their final goals and psychological needs, which gave me a better insight into which ideas worked the best from the users' perspective. After that, I uploaded the sketches on invision to create an interactive prototype and tested with the users' stories that were created.Findings
Users didn't feel right having about “Saved Vehicles” setting separate on the top nav and were confused about its functionality.Users value the option of having FAQs areaUsers asked for the option to know more about buying onlineUsers value easy-free Vehicle search
Design solutions
Adding "Saved Vehicles" into my account and change the term to "My Saved Vehicles"Add FAQs area on the buying online pages.Add a section explaining what is buying online in a simple and clean way.Ability to search by Keyword along with the standard vehicle search tool..
Mid-fidelity Wireframes:
The revised sketches were turned into a black and white prototype by using Sketch, then after that, I defined the UI elements, design patterns, and visual hierarchy based on the targeted user UI psychological behavior and based on Mercedes-Benz brand gudie lines, then the prototype was tested in a focus group and also in a remote online session.
Findings
98% of the users value having related offers on the vehicle detail page.96% of the users wanted the FAQs area shown on the landing page.Only 8% of the users found sorting by vehicle type having a value.
Design solutions
Add latest related offers carousel on the vehicle detail pageShow the FAQs area at the bottom of the landing age too.Remove Sorting by vehicle type as the users didn't feel any value in it, which gave us the opportunity to reduce clutter and increase transactions.
User Interface
After several iterations and design adjustments, I finalized the design of the screens using Sketch. Additionally, I conducted A/B testing and thoroughly studied the Mercedes-Benz brand guidelines, design libraries, and user UI psychology. This enabled me to establish design patterns, elements, and colors that not only enhance the platform's aesthetics but also resonate with the user culture, thereby fostering psychological acceptance.
The primary objective of the design was to achieve a clean, modern look that aligns with the user culture while authentically reflecting the identity of Mercedes-Benz.
To evoke the essence of Mercedes-Benz, I employed a contrast between white and black, aiming to convey trust, credibility, and reliability while creating a sense of psychological safety without compromising the brand identity.
Design libraries tailored to NETDIRECTOR were developed based on Mercedes-Benz guidelines. These libraries serve as a foundation for building the platform and provide guidance for any future products or enhancements within the platform ecosystem.
Conclusion
In conclusion, the journey of designing the e-commerce platform for Mercedes-Benz has been a meticulous and rewarding process. From conducting extensive user research to refining the final design, every step was guided by a commitment to creating a user-centric and visually captivating experience.Through iterative design adjustments and rigorous testing, we successfully crafted a platform that not only meets the functional needs of users but also resonates with their psychological and cultural preferences. By adhering to the principles of clean, modern design while staying true to the iconic identity of Mercedes-Benz, we have achieved a harmonious balance between aesthetics and functionality.Moreover, the development of design libraries based on Mercedes-Benz guidelines ensures consistency and scalability for future iterations and enhancements of the platform. This strategic approach not only streamlines the design process but also reinforces the brand identity across all touchpoints.Ultimately, this case study exemplifies the power of user-centric design in creating meaningful and impactful digital experiences. By prioritizing user needs and aligning with brand values, we have successfully positioned the Mercedes-Benz e-commerce platform as a seamless and trusted destination for luxury vehicle enthusiasts.7
Countries
3
Languages
50+
Dealers
11 Mo.
Design/build journey