Introduction

Following the success of the Vitra Chair Finder and Vitra Gift Finder, Build in Amsterdam was challanged with creating a new flagship configurator for Vitra.com.

I worked on the project for four months at Build in Amsterdam, collaborating 50/50 with another designer, Charlotte Cherf. The project was supervised by Creative Director Daan Klaaver and Associate Creative Director Jerrie Bührmann.

This configurator, integrated into every product detail page (PDP) on the site, plays a pivotal role in enhancing and reshaping Vitra’s e-commerce experience.

As part of the project, we also developed a new design system that lays the foundation for the future redesign of the entire platform.

Additionally, we introduced an engaging and playful way to explain how to use the products, making it both informative and entertaining.

In this case study, we’ll dive deep into the design of the configurator as I will share the key learnings of the process.

Why Redesign the Configurator

There were three primary issues that drove the need for a redesign of the existing Vitra configurator: UX problems, UI problems, and other considerations.


UX Problems

1. Decision Difficulty: Users struggled to confidently choose fabrics, as there wasn’t enough guidance or clarity.

2. Mobile Limitations: On mobile devices, the available space for 3D visualization was too limited, leading to a less immersive experience.

3. Lack of Information: For some decisions, users didn’t have enough information to make an informed choice, leading to frustration.

4. Saved Configurations: Previously saved configurations weren’t well integrated into the platform, making it difficult for users to revisit or continue a past configuration.

5. Option Visualization: The sublayers lacked clear visualization of the configuration options, requiring users to apply each option before seeing how it looked.

6. Engagement: The process of configuring furniture lacked an element of fun, making it feel more like a chore than a creative experience.

UI Problems

1. Inconsistent Visual Language: The configurator and Vitra's platform lacked a cohesive UI language that reflected Vitra’s tone of voice and wasn’t easily recognizable as part of the brand.

2. Lack of Visualization: Many configuration options lacked thumbnails or visual representations, making it harder for users to scan and compare options quickly.

3. Lack of Character: The tool lacked personality and didn’t stand out as a distinctive part of Vitra’s digital identity.

Other Considerations:

1. Inconsistent Cross-Device Experience: Users experienced inconsistent functionality and design across devices, which negatively impacted engagement and led to drop-offs, especially on mobile.

2. Drop-Off During Configuration: The complexity of certain configurations resulted in user drop-offs, particularly when the process became too time-consuming or overwhelming.

Briefing

Vitra provided a comprehensive briefing through virtual meetings and a well-organized Miro board, where they shared their insights, ideas, and expectations for the project.

With their deep industry experience and understanding of customer struggles, Vitra’s input was invaluable and played a key role in shaping the success of the project.

Research

To truly understand the platform, brand, and users, we utilized multiple research methods.

Brand Research: Both Charlotte and I were already familiar with Vitra’s iconic brand and legendary products, but for this project, we took the time to dive deep into its heritage and character. We thoroughly explored Vitra’s platforms, brand books, and any other materials we could access to fully immerse ourselves in the brand’s identity.

User Research: To get a better understanding of the user perspective, we spoke with previous Vitra customers and interviewed colleagues. Throughout the design process, we conducted smaller user tests on specific aspects of the project to validate our decisions. We even tested the icons we designed to ensure they were readable and clear for users.

Configurator Research: We gathered a comprehensive overview of the best configurators available online to study their UX choices and draw inspiration for our project. This research helped us benchmark top-notch configurator experiences, and I still refer to this board today for inspiration.

Integration into the platform

Throughout the design process, we were mindful of how the configurator would seamlessly blend into the rest of the platform. This meant ensuring a cohesive visual and functional integration while keeping all entry points in mind.

We also focused on refining how users enter and exit the configurator, making sure the transitions felt natural and intuitive.

Design Approach

To find the best solution, we followed a clear, multi-step design process.

1. Research: We began with intensive research, as previously explained, to gain a solid foundation of knowledge.

2. Wireframes: We created dozens of wireframes to explore various UX solutions for the platform, blocking out multiple potential user flows and interfaces.

3. Prototyping: We refined the most promising solutions into clickable prototypes, which we presented and discussed with the client for feedback.

4. Refinement: After deciding on one direction, we continued to refine the chosen approach.

5. Iteration: Throughout the refinement process, we incorporated learnings from user feedback and client input to continuously improve the UX, integrating smart ideas to elevate the experience to the next level.

6. Handoff: With my experience in front-end development, we made an extensive dev-handoff to Vitra’s internal development team, providing clear documentation so they could focus on the code and implementation without ambiguity.

Configurator Directions

From the UX phase, we selected the most promising directions and designed eight mid-fidelity prototypes for each. After internal testing, we presented the strongest options to the client for discussion on which direction to pursue.

Ultimately, we chose a blend of two directions, focusing on a sublayer approach (you can learn more about this approach in my Configurator article).

This decision was driven by the need for users to quickly experiment with color and configuration options, as step-by-step solutions would have made it too time-consuming for users to try different combinations and variations.

UI Language / Design System

Inspired by Vitra’s colorful, playful yet elegant furniture, we crafted a UI language that mirrors these qualities.

The result was a vibrant, playful, yet sophisticated design system that not only enhances the configurator experience but also lays the groundwork for the future redesign of the entire Vitra.com platform.

This new UI language was designed for scalability, with the brand’s essence at its core, ensuring it could grow with the platform while maintaining a strong connection to Vitra's identity.

Configuration Overview

We ensured that the furniture visualization took center stage, providing ample space for users to get a clear view of their customization and what they are about to purchase.

To complement this, we utilized a side panel for most of the UI elements, incorporating a sublayer approach. This included a streamlined pipeline we developed to quickly generate thumbnails for each configuration category, enabling easy navigation.

Additionally, we gave users the flexibility to add their current configuration to their wishlist or cart at any point during the process.

Based on insights from the previous configurator, Vitra learned that customers highly value delivery time, so we included this information prominently next to the price. This feature ensured users were aware if certain configuration options would impact shipping times.

Sublayers

Almost every item available at Vitra offers some level of customization—some products feature extensive options, while others may only allow for color choices.

The system we designed needed to accommodate every level of customization. To achieve this, we created visualized solutions for every type of sublayer, ensuring that the design would work seamlessly across the platform, no matter the product.

The five most common sublayer types are visualized above, and each sublayer configuration option can include an information text. This allows Vitra to provide additional details that help users make informed decisions.

One of the most common sublayers users struggle with is the fabric selection, which is also the most prevalent category across Vitra’s product line.

We took special care to refine the fabric sublayer, ensuring users had the guidance they needed, as you’ll see next.

Fabrics

As previously mentioned, fabrics are the most common configuration option across Vitra’s product range. In the previous configurator, users had to navigate two separate sublayers—one for selecting the fabric material and another for choosing the color.

This separation caused confusion and made it harder for users to see which materials were available in their preferred colors.

As a result, Vitra had even added a separate section on their product detail pages to display all fabric options.

With the redesign, we resolved this issue by consolidating both material and color selection under a single Fabrics category.

We also introduced search, filter, and compare options, giving users the tools to make more informed decisions and streamline the fabric selection process.

This made it easier for users to find exactly what they wanted without the previous complications.

Filtering System

Drawing from Vitra’s extensive experience and knowledge of what customers prioritize when selecting fabrics, we designed an accessible yet playful filtering system. Recognizing that users often search within a range of color tones—such as various shades of green—we introduced the idea of using split color spaces.

This visual approach allows users to filter for an entire range of colors, rather than one specific value, making the process clearer and more intuitive.

The filtering tags were carefully crafted based on Vitra’s deep understanding of their customers' needs, ensuring that users could easily find the fabrics that match their preferences without feeling overwhelmed.

Compare Fabrics

Typically found on product detail pages (PDPs) or product listing pages (PLPs), we decided to include a fabric compare tool directly within the configurator—right where and when customers need it during the fabric selection process.

We designed the tool with scannability in mind, incorporating easy-to-read graphs and custom illustrations to represent different comparison categories.

Since fabrics often have many similar attributes, and it can be challenging for users to differentiate between them. Thus we added a toggle button that allows users to show only the differences.

This feature makes it easier for users to identify the key distinctions between fabrics, ensuring a smoother and more informed decision-making process.

Farbic Details & Iconography

To cater to users who want a deeper understanding of a fabric’s texture and qualities, we added a Fabric Detail Page that can be easily accessed from the fabrics sublayer.

This page displays a large, detailed image of the fabric along with all its features and specialties in an easy-to-scan layout.

The information is visualized using a custom icon system that reflects Vitra’s playful tone of voice, making it both informative and aligned with the brand’s identity.

Mobile adjustements

To ensure the configurator worked just as well on mobile as it did on desktop, we made several adjustments tailored for the different devices. One key decision was to implement horizontal scrolling for navigation and configuration options, which freed up more space for product visualization and made the configurator more intuitive to use on smartphones.

Throughout these adjustments, we maintained a focus on delivering a consistent experience across both mobile and desktop platforms, ensuring a seamless transition between devices.

Integration of a Chat Assistant

To reduce drop-offs at key moments in the user journey, we integrated a chat assistant that appears when users reach the end of browsing materials or using the compare tool.

At this stage, users are often most likely to disengage, so the chat assistant playfully opens up, offering help and guidance to keep them engaged and moving forward in the configuration process.

Reccomendations / Presets

A key learning from other configurator projects is that users often feel overwhelmed when starting from a blank slate. They may not have a clear idea of exactly what they want, which can make the process intimidating. To address this, we introduced recommendations—preset configurations that users can browse and choose as a starting point.

This allows them to select something they already like and make minor adjustments to fit their needs perfectly.

This UX pattern can also be seen on Nike's product detail pages, where users typically select a sneaker color they already prefer and then make small tweaks, like adding a signature, to make it uniquely theirs.

Saved configurations

We included a wishlist feature that allows users to save different configurations, giving them the ability to compare options, share the list with friends, partners, or family members, or simply return to it later.

This feature enhances flexibility, enabling users to explore multiple configurations without feeling pressured to make an immediate decision, while also making it easy to gather feedback from others.

Acessibility

To ensure the configurator is accessible to all users, we incorporated several accessibility best practices. This includes providing multiple interaction options for the 3D model, allowing users to interact in a way that suits their preferences and needs.

By focusing on inclusivity, we made sure the configurator is usable for a broad range of users, regardless of their abilities or device limitations.

Checkout

The checkout process presented a unique challenge: we needed to provide users with visual feedback that their item had been successfully added to the cart, while also allowing them the option to continue with the current configuration, add another configuration, or design a second chair.

Initially, we solved this with a dialog box, but after further refinement, we replaced it with a playful animation that streamlined the process, eliminating the need for extra steps while keeping the experience smooth and engaging.

How to use (3D)

Charlotte and I worked full-time on the project for the duration of four months. The project was supervised by Creative Director Daan Klaaver and Associate Creative Director Jerrie Bührmann. Karla Vincheva handled the project management.

We worked in two-week sprints, with bi-weekly meetings with the client and weekly internal check-ins with the team.

Summarized

Through extensive research, thoughtful design, and a deep understanding of Vitra’s brand and user needs, we created a configurator that not only enhances the customer experience but also lays the groundwork for the future of Vitra’s e-commerce platform.

The result is a playful, elegant, and functional tool that helps users seamlessly configure products and explore their options with ease and confidence.

If you’d like to learn more about the project or how we approached the design challenges, feel free to contact me.

I am happy to connect.