Škoda Auto
Innovating Auto Configurators with UX-Driven Design and AR Capabilities
The Škoda Auto Configurator project was a one-week task designed to test the skills of a two-person design team, consisting of a UX/UI designer and a UX researcher/designer, following a successful pitch for a larger project. The goal was to reimagine Škoda’s Auto Configurator while adhering to its core branding elements, such as typography and colors, and modernizing the user experience. The redesign introduced innovative features, including augmented reality (AR) functionality to visualize cars in real-world environments like driveways and a forward-thinking concept for Apple Vision Pro integration. The resulting designs were later used by Škoda to secure internal funding for a larger, ongoing project and provided the foundation for future product evolution.
Project Overview
Roles & Duration
UX Design
UI Design
1 month
Primary Tools
Figma
Miro
Screenshots of old UI for the Škoda Auto configurator.
The project began with a comprehensive audit of Škoda’s existing Auto Configurator on both mobile and desktop platforms. The team meticulously identified usability challenges, gaps in navigation, and areas where the overall experience could better reflect the Škoda brand. This evaluation was enriched by a competitor analysis that included benchmarks from Tesla, Rivian, Porsche, and Toyota, spanning electric vehicles, luxury models, and mainstream automobiles. These comparisons underscored the industry trend toward sleek, intuitive interfaces and immersive customization experiences, revealing significant opportunities for Škoda to innovate and modernize its platform. Additionally, user behavior insights showed a clear distinction between platform preferences: desktop for reliable final purchase decisions and mobile for exploratory, playful engagement with configurations.
Site Audit and Research
“Our audit uncovered gaps in usability and revealed a pivotal insight: desktop anchors big decisions, but mobile fuels discovery and engagement, making both platforms essential for a seamless car-buying journey.”
To further enhance the audit, the team expanded its research into AR implementations by studying leading examples like the IKEA Place App and Apple’s AR experience on their site. These references provided valuable inspiration for integrating AR into Škoda’s configurator, focusing on intuitive, real-world applications that resonate with users. For instance, IKEA’s ability to seamlessly place virtual furniture in physical spaces influenced the team’s approach to virtual car placement, while Apple’s polished, detail-oriented AR interfaces guided visual and functional design decisions. Together, these insights shaped a well-rounded strategy to create a configurator experience that is innovative, user-friendly, and reflective of Škoda’s core values.
The wireframing process was driven by insights uncovered during the site audit, ensuring the designs directly addressed the identified pain points. Key issues included a cluttered interface where critical information was buried, sluggish performance, and visuals that felt too cartoony and unconvincing. Additionally, the configurator’s user journey was often confusing, with unclear selections and navigation. Crucially, legal information required by the EU was hidden and poorly communicated, adding to user frustration. With these challenges in mind, the team began with low-fidelity wireframes, prioritizing simplicity, clear hierarchy, and improved workflows for car selection, customization, and checkout. Early iterations also outlined the integration of innovative features like AR functionality and enhanced navigation.
UX Design Wireframes
“We approached wireframing as a problem-solving exercise, ensuring every design decision addressed real user frustrations while paving the way for innovative new features like AR.”
High-fidelity wireframes were then developed to refine the structure and incorporate Škoda’s updated tone of voice, making the experience feel more welcoming and less formal. The designs used modular layouts to ensure consistency and flexibility across desktop and mobile platforms. Clear selection indicators, simplified navigation, and prominent placement of legal information were implemented to address usability issues. A key focus was on the conceptual flow for AR functionality, allowing users to seamlessly place and interact with their configured cars in real-world settings. These detailed wireframes not only resolved existing pain points but also laid the groundwork for visually polished UI designs.
The UI design phase built on the foundation of the wireframes, producing high-fidelity screens for both desktop and mobile platforms while carefully balancing Škoda’s iconic branding and modern usability. As the lead designer, I took on both UX and UI responsibilities, ensuring every element addressed user pain points while enhancing Škoda’s visual identity. A key design feature was the integration of the brand's iconic diagonal line into the configurator drawer, a motif synonymous with Škoda’s marketing and instantly recognizable to its audience. On desktop, the layouts emphasized clarity and streamlined workflows for purchase decision-making, while mobile designs fostered a playful, interactive experience, encouraging users to experiment with configurations before making a final decision. AR functionality was seamlessly incorporated to enable users to visualize their customized cars in real-world settings, reinforcing the immersive and engaging nature of the configurator.
UI Design
“As lead designer, I was responsible for both UX and UI design, ensuring the user experience addressed key pain points while integrating Škoda’s branding into a modern, engaging configurator. ”
Special attention was given to critical details that would elevate the user experience and meet EU requirements. For example, the always-visible CO2 emissions data ensured compliance with legal standards while building trust with environmentally conscious users. Clear and easily adjustable selection options enhanced usability, with immediate updates reflected in the visuals, creating a dynamic and responsive experience. Users could further personalize their configurations by changing the background and environment, adding a layer of immersion and flexibility. To highlight Škoda’s 'Simply Clever' features—such as the cleverly integrated umbrella—we used intuitive animations and highlights, emphasizing the brand’s unique value proposition. This comprehensive approach not only modernized the configurator but also prepared the designs for the investor presentation, where I played a key role in crafting a compelling deck to secure additional funding.
Showcasing dynamic backgrounds—from urban cityscapes to desert vistas—this feature adds realism and flexibility, letting users visualize their car in settings that match their style.
Škoda's ‘Simply Clever’ features offer practical, user-focused innovations like umbrella holders, ice scrapers, and smart storage, enhancing everyday convenience.
Pop-up modals keeps the auto configurator clean while offering full access to additional photos, pricing, and detailed descriptions—all in one convenient view.
Augmented Reality (AR) might be considered a mature technology, but its application remains underutilized in creating practical, immersive user experiences. For this project, AR was reimagined as a bridge between traditional digital interfaces and the cutting-edge possibilities of the AI-driven future. By integrating AR into the Škoda Configurator, users could visualize their customized cars in real-world settings—like their driveway or garage—bringing the product to life in a way that enhances decision-making and emotional engagement.
AR and Vision Pro
“AR and Vision Pro offer Škoda a unique opportunity to move beyond the screen, immersing users in an interactive, real-world exploration of their dream car.”
Additionally, the potential for Apple Vision Pro integration was explored, positioning Škoda as a forward-thinking brand. The concept envisioned an immersive, gesture-based experience where users could interact with their car configurations in mixed reality. This innovative approach aligns with evolving user expectations and reinforces Škoda’s commitment to leveraging emerging technologies to create meaningful connections with its customers.
This project was a testament to the power of design in addressing real user frustrations and pushing the boundaries of innovation. As the lead designer, I oversaw both the UX and UI, transforming Škoda’s Auto Configurator into a seamless, engaging experience that balanced brand identity with cutting-edge features like AR integration and a Vision Pro concept. Through comprehensive audits, competitor analysis, and thoughtful design decisions, I resolved key usability issues, elevated the visual experience, and ensured compliance with EU standards. Collaborating within tight timelines taught me the importance of prioritizing impact and focusing on user-centric solutions. This experience also reinforced the value of storytelling in design, as the final presentation not only secured funding but set a visionary path for Škoda’s future in automotive digital experiences.
Main Takeaways
“From solving usability challenges to envisioning future-forward features like AR and Vision Pro, we transformed Škoda’s configurator into a seamless, innovative experience.”
Explore More
Here are a few more case studies you might find interesting.
Lucid Motors
Designing the Future of In-Car Infotainment: From Concept to Production
Northern Trust
Designing a Scalable UI Library in Adobe Experience Manager
Škoda Auto
Innovating Auto Configurators with UX-Driven Design and AR Capabilities
Nacero
Creating a Brand & Digital Experience for Next-Gen Gasoline
Coming Soon!
Faraday Future
The Future of Touch: Designing for a Screen-First Car Interior
Coming Soon!
Lettuce Grow
Crafting a Consumer-First Brand Identity & Platform
Coming Soon!