Mercedes-Benz
Mercedes-Benz
Mercedes-Benz
Mercedes-Benz
Accessories configurator re-design
Accessories configurator
re-design
My Role
My Role
My Role
Art Director & UI Designer — Responsive Design, Visual Design, User Flows, Design System
Agency
Agency
Agency
big-picture.com
Timeline & Status
Timeline & Status
Timeline & Status
Launched — 18 months duration. Finalized in 2018
Launched
24 months duration.
Finalized in 2018
Overview
Overview
Overview
Mercedes-Benz accessories allows users to explore and choose accessories that perfectly match their vehicle in terms of design, safety, and personalization. The range includes everything from technical parts to lifestyle items, and users can navigate based on vehicle models for precision fitting.
The initial brief was to adapt their very outdated platform due to the growing demand for customization and personalization. The early version of the platform was catalog-based, with users having to manually browse through options without much personalization or interactive features.
Our design objective was to refresh the platform’s digital presence not only by applying their new and strict Style Guide as we were briefed on, but to go beyond expectations and create a new responsive website that delivers a more intuitive user journey that enhanced its online services, improving the user interface and offering more options to filter accessories by model, category, and vehicle type.
HIGHLIGHTS
The proposed designs were so well-received that the client chose to bypass their strict style guide, allowing us to create the Mercedes-Benz accessories configurator as a standalone tool.
The proposed designs were so well-received that the client chose to bypass their strict style guide, allowing us to create the Mercedes-Benz accessories configurator as a standalone tool.
The proposed designs were so well-received that the client chose to bypass their strict style guide, allowing us to create the Mercedes-Benz accessories configurator as a standalone tool.
The proposed designs were so well-received that the client chose to bypass their strict style guide, allowing us to create the Mercedes-Benz accessories configurator as a standalone tool.
HIGHLIGHTS
The proposed designs were so well-received that the client chose to bypass their strict style guide, allowing us to create the Mercedes-Benz accessories configurator as a standalone tool.
THE PROBLEM
THE PROBLEM
THE PROBLEM
What they need might not be what they want
What they need might not be what they want
What they need might not be what they want
What they need might not be what they want
What they need might not be what they want
A global vision, with a local point of view
A global vision, with a local point of view
A global vision, with a local point of view
A global vision, with a local point of view
A global vision, with a local point of view
Building a product with global ambitions requires flexibility from the start. By creating individual, interchangeable components, we ensure that the product can rapidly adapt to different market needs and conditions.
The approach comes with several challenges:
Enhanced UX
Market specific challenges
Market specific challenges
Unique regulatory, cultural, or user experience needs might delay international rollout and/or complicate the users journey.
Unique regulatory, cultural, or user experience needs might delay international rollout and/or complicate the users journey.
Unique regulatory, cultural, or user experience needs might delay international rollout and/or complicate the users journey.
Market specific Challenges
Market specific challenges
Unique regulatory, cultural, or user experience needs might delay international rollout and/or complicate the users journey.
Market specific Challenges
Market specific challenges
Unique regulatory, cultural, or user experience needs might delay international rollout and/or complicate the users journey.
Supporting Sales
Scalability and Customization
Scalability and Customization
Too much customization can lead to confusion or a fragmented user experience, and requiring additional design or feature tweaks that slow down the expansion process.
Too much customization can lead to confusion or a fragmented user experience, and requiring additional design or feature tweaks that slow down the expansion process.
Too much customization can lead to confusion or a fragmented user experience, and requiring additional design or feature tweaks that slow down the expansion process.
Scalability and Customization
Scalability and Customization
Too much customization can lead to confusion or a fragmented user experience, and requiring additional design or feature tweaks that slow down the expansion process.
Scalability & Customization
Scalability and Customization
Too much customization can lead to confusion or a fragmented user experience, and requiring additional design or feature tweaks that slow down the expansion process.
Out with the old, and in with the new
Out with the old, and in with the new
Out with the old, and in with the new
Out with the old, and in with the new
Out with the old, and in with the new
Mercedes-Benz, a global leader with a rich history and a powerful brand identity, came to us with a clear directive: translate their existing website into the new style guide. However, we saw an opportunity to take it even further. It wasn’t just about adhering to guidelines—it was about creating an experience that truly resonates with their audience
We knew the website had to go beyond a simple update. It needed to be responsive, ensuring seamless access across all devices, and interactive, offering an engaging experience for users. We also recognized the importance of translating the visual appeal, Mercedes-Benz is known for across its other media channels.
We took the risk and created two pitches:
Enhanced UX
Restricted brief design
Restricted brief design
In order to please the needs of the client we designed a solution based strictly on their Style Guide and demands.
In order to please the needs of the client we designed a solution based strictly on their Style Guide and demands.
In order to please the needs of the client we designed a solution based strictly on their Style Guide and demands.
Restricted brief design
Restricted brief design
In order to please the needs of the client we designed a solution based strictly on their Style Guide and demands.
Restricted brief design
Restricted brief design
In order to please the needs of the client we designed a solution based strictly on their Style Guide and demands.
Supporting Sales
A chance for greatness
A chance for greatness
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
A chance for greatness
A chance for greatness
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
A chance for greatness
A chance for greatness
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
THE CHALLENGE
Apply the complex style guide enough to create fresh, attractive designs without losing brand alignment or client trust.
Apply the complex style guide enough to create fresh, attractive designs without losing brand alignment or client trust.
Apply the complex style guide enough to create fresh, attractive designs without losing brand alignment or client trust.
Apply the complex style guide enough to create fresh, attractive designs without losing brand alignment or client trust.
THE CHALLENGE
Apply the complex style guide enough to create fresh, attractive designs without losing brand alignment or client trust.
VISUAL DESIGN DIRECTION
VISUAL DESIGN DIRECTION
VISUAL DESIGN DIRECTION
Connections grow through interaction
Connections grow through interaction
Connections grow through interaction
Connections grow through interaction
Connections grow through interaction
The Wheels accessories specials
The Wheels accessories specials
The Wheels accessories specials
The brief was to prioritize this section of the website and make it highly attractive, as wheels are the most requested item on store. With heavy traffic expected, the user flow needed to be intuitive for providers and visually engaging for consumers. The design had to ensure easy navigation while maximizing appeal to both user groups.
The Wheels accessories specials
The Wheels accessories specials
The Wheels accessories specials
The brief was to prioritize this section of the website and make it highly attractive, as wheels are the most requested item on store. With heavy traffic expected, the user flow needed to be intuitive for providers and visually engaging for consumers. The design had to ensure easy navigation while maximizing appeal to both user groups.
The brief was to prioritize this section of the website and make it highly attractive, as wheels are the most requested item on store. With heavy traffic expected, the user flow needed to be intuitive for providers and visually engaging for consumers. The design had to ensure easy navigation while maximizing appeal to both user groups.
The brief was to prioritize this section of the website and make it highly attractive, as wheels are the most requested item on store. With heavy traffic expected, the user flow needed to be intuitive for providers and visually engaging for consumers. The design had to ensure easy navigation while maximizing appeal to both user groups.
Who is who?
Originally, the site was an internal tool for retailers and providers, but it was now being opened up to clients. This shift required simplifying user flows and enhancing visual appeal to drive higher conversion rates.
After discussions with the client, we gained deeper insights into our diverse user base. By leveraging prior knowledge of the website, brand, and user goals, we were able to narrow down key user groups and address their needs
User Provider (internal employees)
Needs & Goals
Needs & Goals
Frustrations
Frustrations
Technology
Technology
User Client ( End users & B2B customers )
Needs & Goals
Needs & Goals
Frustrations
Frustrations
Technology
Technology
Both user types require a platform that is efficient, intuitive, and highly responsive to meet their unique needs while minimizing frustrations.
Who is who?
Originally, the site was an internal tool for retailers and providers, but it was now being opened up to clients. This shift required simplifying user flows and enhancing visual appeal to drive higher conversion rates.
After discussions with the client, we gained deeper insights into our diverse user base. By leveraging prior knowledge of the website, brand, and user goals, we were able to narrow down key user groups and address their needs
User Provider (internal employees)
Needs & Goals
Needs & Goals
Frustrations
Frustrations
Technology
Technology
User Client ( End users & B2B customers )
Needs & Goals
Needs & Goals
Frustrations
Frustrations
Technology
Technology
Both user types require a platform that is efficient, intuitive, and highly responsive to meet their unique needs while minimizing frustrations.
Who is who?
Originally, the site was an internal tool for retailers and providers, but it was now being opened up to clients. This shift required simplifying user flows and enhancing visual appeal to drive higher conversion rates.
After discussions with the client, we gained deeper insights into our diverse user base. By leveraging prior knowledge of the website, brand, and user goals, we were able to narrow down key user groups and address their needs.
User Provider (internal employees)
Needs & Goals
Needs & Goals
Needs & Goals
Frustrations
Frustrations
Frustrations
Technology
Technology
Technology
User Client ( End users & B2B customers )
Needs & Goals
Needs & Goals
Needs & Goals
Frustrations
Frustrations
Frustrations
Technology
Technology
Technology
Both user types require a platform that is efficient, intuitive, and highly responsive to meet their unique needs while minimizing frustrations.
The design that made the difference.
The design that made the difference.
The design that made the difference.
The design that made the difference.
The design that made the difference.
We choose to create an interactive design for the Mercedes-Benz Accessories platform that allows users to switch wheels for their selected car model.
We choose to create an interactive design for the Mercedes-Benz Accessories platform that allows users to switch wheels for their selected car model.
We choose to create an interactive design for the Mercedes-Benz Accessories platform that allows users to switch wheels for their selected car model.
The consumers expect a high level of customization, especially in the luxury market. Offering an interactive way to select wheels aligns with user expectations for personalized and tailored experiences. This interactive design would also differentiate the Mercedes-Benz Accessories platform from competitors.
While many car manufacturers offer static product catalogs, an interactive experience can provide a richer and more immersive experience.
By catering to both user providers and clients, it becomes a versatile tool that promotes customer satisfaction and drives business goals through seamless interaction.
By catering to both user providers and clients, it becomes a versatile tool that promotes customer satisfaction and drives business goals through seamless interaction.
By catering to both user providers and clients, it becomes a versatile tool that promotes customer satisfaction and drives business goals through seamless interaction.
Enhanced UX
Enhanced UX
Enhanced UX
Visual Engagement: Offering users the ability to switch wheels on a highly visual, interactive platform satisfies the modern user’s expectation for customization and personalization, which is key to increasing engagement on a luxury platform.
Immediate Feedback: Allowing the client or the provider to make or support confident purchase decisions based on visual appeal and alignment with their taste.
Real-Time Interaction: Allowing users to switch wheels in real-time gives a sense of control and autonomy over the purchase, which can boost confidence and satisfaction, leading to higher conversion rates.
Enhanced UX
Enhanced UX
Visual Engagement: Offering users the ability to switch wheels on a highly visual, interactive platform satisfies the modern user’s expectation for customization and personalization, which is key to increasing engagement on a luxury platform.
Immediate Feedback: Allowing the client or the provider to make or support confident purchase decisions based on visual appeal and alignment with their taste.
Real-Time Interaction: Allowing users to switch wheels in real-time gives a sense of control and autonomy over the purchase, which can boost confidence and satisfaction, leading to higher conversion rates.
Enhanced UX
Enhanced UX
Visual Engagement: Offering users the ability to switch wheels on a highly visual, interactive platform satisfies the modern user’s expectation for customization and personalization, which is key to increasing engagement on a luxury platform.
Immediate Feedback: Allowing the client or the provider to make or support confident purchase decisions based on visual appeal and alignment with their taste
Real-Time Interaction: Allowing users to switch wheels in real-time gives a sense of control and autonomy over the purchase, which can boost confidence and satisfaction, leading to higher conversion rates.
Supporting Sales
Supporting Sales
Supporting Sales
Upselling and Cross-Selling Opportunities: The interactive design not only shows the wheels but also presents pricing and key features, which makes it easier for both user providers and clients to explore options and make informed decisions.
Conversion-Oriented Design: By allowing users to seamlessly explore detailed information and purchase options, this interactive section serves as a funnel for conversion.
Supporting Sales
Supporting Sales
Upselling and Cross-Selling Opportunities: The interactive design not only shows the wheels but also presents pricing and key features, which makes it easier for both user providers and clients to explore options and make informed decisions.
Conversion-Oriented Design: By allowing users to seamlessly explore detailed information and purchase options, this interactive section serves as a funnel for conversion.
Supporting Sales
Supporting Sales
Upselling and Cross-Selling Opportunities: The interactive design not only shows the wheels but also presents pricing and key features, which makes it easier for both user providers and clients to explore options and make informed decisions.
Conversion-Oriented Design: By allowing users to seamlessly explore detailed information and purchase options, this interactive section serves as a funnel for conversion.
Premium Brand Image
Premium Brand Image
Premium Brand Image
Premium Visuals: The use of high-quality marketing shots ensures that the platform reflects the luxurious feel that Mercedes-Benz customers expect. High-end visuals reinforce brand value and trust, creating an aspirational shopping experience.
Brand Loyalty and Engagement: A platform that showcases product options in a sleek, engaging way makes customers feel more connected to their purchase, fostering loyalty.
Premium Brand Image
Premium Brand Image
Premium Visuals: The use of high-quality marketing shots ensures that the platform reflects the luxurious feel that Mercedes-Benz customers expect. High-end visuals reinforce brand value and trust, creating an aspirational shopping experience.
Brand Loyalty and Engagement: A platform that showcases product options in a sleek, engaging way makes customers feel more connected to their purchase, fostering loyalty.
Premium Brand Image
Premium Brand Image
Premium Visuals: The use of high-quality marketing shots ensures that the platform reflects the luxurious feel that Mercedes-Benz customers expect. High-end visuals reinforce brand value and trust, creating an aspirational shopping experience.
Brand Loyalty and Engagement: A platform that showcases product options in a sleek, engaging way makes customers feel more connected to their purchase, fostering loyalty.
LEARN ABOUT THIS WHEEL
Lemonade out of lemons
Lemonade out of lemons
Lemonade out of lemons
Lemonade out of lemons
Lemonade out of lemons
The client agreed that our design was more attractive while staying true to the Style Guide.
However, there was a challenge: Their design team hadn't provided images for the Wheels special.
To solve this, we took on the huge task of repurposing campaign images as hero visuals for each car series, seamlessly retouching the wheels into the scenery. This required significant time and effort from the team, but it ensured a cohesive, high-quality result.
Campaign images
Campaign images
Campaign images
Campaign images
Campaign images
Wheels
Wheels
Wheels
Wheels
Wheels
Retouch
Retouch
Retouch
Retouch
Retouch
HIGHLIGHTS
THE LAYOUT
THE LAYOUT
THE LAYOUT
Accessories for everyone
Consistent and scalable.
Consistent and scalable.
Consistent and scalable.
Consistent and scalable.
Everything, everywhere, all at once.
Everything, everywhere, all at once.
Everything, everywhere, all at once.
Everything, everywhere, all at once.
Everything, everywhere, all at once.
The legacy platform lacked the flexibility users needed. Clients would typically want to check accessories on their phones, while providers in dealerships and retailers want to showcase them freely around the shop by using tablets, and moving away for their desks.
The legacy platform lacked the flexibility users needed. Clients would typically want to check accessories on their phones, while providers in dealerships and retailers want to showcase them freely around the shop by using tablets, and moving away for their desks.
The legacy platform lacked the flexibility users needed. Clients would typically want to check accessories on their phones, while providers in dealerships and retailers want to showcase them freely around the shop by using tablets, and moving away for their desks.
The platform had to become responsive quickly, and we delivered.
The opportunity we saw ahead went beyond just making the site mobile-friendly—we reworked features and streamlined flows to enhance the overall user experience and make the retail journey more engaging.
A good example of this work is clear on the new Navigation:
Enhanced UX
New design
New design
Despite the style guide’s constraints, we chose to rework the navigation.
The new design was sleek, featuring integrated images of each car and model. It was also optimized for touch, with larger, finger-friendly height. By relocating the navigation, we pushed content upwards, offering users a full view of the hero images while enhancing usability.
Despite the style guide’s constraints, we chose to rework the navigation.
The new design was sleek, featuring integrated images of each car and model. It was also optimized for touch, with larger, finger-friendly height. By relocating the navigation, we pushed content upwards, offering users a full view of the hero images while enhancing usability.
Despite the style guide’s constraints, we chose to rework the navigation.
The new design was sleek, featuring integrated images of each car and model. It was also optimized for touch, with larger, finger-friendly height. By relocating the navigation, we pushed content upwards, offering users a full view of the hero images while enhancing usability.
New design
New design
Despite the style guide’s constraints, we chose to rework the navigation.
The new design was sleek, featuring integrated images of each car and model. It was also optimized for touch, with larger, finger-friendly height. By relocating the navigation, we pushed content upwards, offering users a full view of the hero images while enhancing usability.
New design
New design
Despite the style guide’s constraints, we chose to rework the navigation.
The new design was sleek, featuring integrated images of each car and model. It was also optimized for touch, with larger, finger-friendly height. By relocating the navigation, we pushed content upwards, offering users a full view of the hero images while enhancing usability.
Supporting Sales
Quick search
Quick search
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
Quick search
Quick search
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
Quick search
Quick search
We designed a second version in which we incorporated bold, attractive imagery and enhanced the user journey, while making sure the digital experience aligned with the brand’s iconic Look and Feel and newly updated Style Guide.
Show old
Show old
Show old
Show old
Show old
Back to the top
Back to the top
Prometica - AI case study
Prometica -
AI case study
Prometica - AI case study
Prometica - AI case study
Prometica - AI case study
Coming soon
Coming soon
Hive Technologies
Hive Technologies
Hive Technologies
Hive Technologies
Hive Technologies
Enhancing processes for an optimized Picking workflow
Gorillas Technologies
Gorillas
Technologies
Gorillas Technologies
Gorillas Technologies
Gorillas Technologies
The merging of 2 warehouse processes into 1 global workflow
OLive - UX case study
OLive -
UX case study
OLive - UX case study
OLive - UX case study
OLive - UX case study
Applying design thinking methodologies to truly help the users
Haspa- Hamburger Sparkasse
Haspa -
Hamburger Sparkasse
Haspa- Hamburger Sparkasse
Haspa- Hamburger Sparkasse
Haspa -
Hamburger Sparkasse
Re-design website and image identity
Aptawelt for Danone
Aptawelt
for Danone
Aptawelt for Danone
Aptawelt for Danone
Aptawelt for Danone
New modular design portal for doctors
2024 Sergio Nuñez Ubiria UX UI. All Rights Reserved.
Born in Spain, living in Berlin & raised by the 90s
2024 Sergio Nuñez Ubiria UX UI. All Rights Reserved.
Born in Spain, living in Berlin & raised by the 90s
2024 Sergio Nuñez Ubiria UX UI. All Rights Reserved.
Born in Spain, living in Berlin & raised by the 90s