Challenge
An Adaptable Reservation System for the VW ID.4 Launch
Volkswagen's debut electric SUV, the ID.4, wasn't just a vehicle launch. It was a test of whether they could deliver a fully digital shopping experience in a space traditionally dominated by dealership visits.
I joined the project midstream to help finalize and refine key flows in the reservation experience: trim configuration, checkout, and post-reservation onboarding. But just as we were preparing to launch, work came to a halt due to COVID-19. The team disbanded while the product was only a couple weeks away from going live—and it was up to the remote dev teams to bring the designs across the finish line.
Impact at Launch
2,000+
Vehicles reservations placed within the first 8 hours
500+
Dealerships activated through the platform
35%
Organic search traffic increase
How we got there: focused on the critical path (configure → reserve → confirm), clear content design, and a componentized system that let multiple teams ship in parallel.
Challenges
Volkswagen's first EV launch in the U.S. needed a digital reservation flow that felt simple for consumers yet worked across a dealership-driven ecosystem. I joined midstream to stabilize trim configuration, checkout, and post-reservation onboarding. Constraints included mobile-first performance, localization readiness, and a fully remote, multi-team build after COVID paused work. I had to design for edge cases—failed deposits, timeouts, and configuration changes—without creating support load for dealers. The challenge was less ‘pretty UI,’ more ‘adaptable system’ that could launch and scale.
Approach
I framed the project around the critical path: configure → reserve → confirm. I mapped states and failure modes, then worked with concurrently evolving components so multiple dev teams could build in parallel. I created spec sheets for each step (inputs, validation, error/empty states), prototyped micro-interactions, and aligned design tokens, grid, and spacing for consistent handoff. Content design clarified labels, fees, timing, and next steps to reduce hesitation at checkout. We reviewed in Figma with daily stand-ups, cutting rework and keeping the release on track despite a distributed team.
Results
The platform shipped on schedule and enabled the first wave of pre-orders. Launch metrics included over 2,000 reservations within the first 48 hours—doubling VW’s internal target and validating the system’s usability under high traffic. In the first eight hours, 500+ dealerships activated through the platform, and a 35% lift in organic search traffic to the experience. Beyond numbers, the work delivered a reusable reservation pattern, clearer post-reservation onboarding, and a component library that sped up subsequent iterations. Dealers reported fewer ‘what happens next?’ calls, and the cross-team build cadence became a template for follow-on releases. The system proved durable under launch traffic and flexible for content updates.
Lessons Learned
I learned the importance of designing adaptable flows that could scale across regions and dealership networks, ensuring the system could handle variations in regulations and incentives while still delivering a consistent user experience.
I learned how critical it is to tie design decisions to business outcomes—simplifying trim selection not only made the experience clearer for users, it directly reduced drop-off and drove more completed reservations.
I learned the value of looking beyond the transaction—treating onboarding and confirmation as moments to build trust, which strengthened confidence in the brand and kept users engaged after checkout.
Designing for success and failure across the reservation journey
I partnered with engineering to anticipate edge cases—like abandoned configurations, payment declines, and missing confirmations—and designed UI states that kept users moving forward.
Configure
Success: Trim/features selected → Moves to checkout
Fail: Option unavailable → Disabled state
Fail: Abandoned config → Saved on return
Checkout
Success: Payment authorized → Reservation number created
Fail: Payment declined → Retry message
Fail: Timeout → Session expired screen
Confirm
Success: Confirmation screen → Email sent
Fail: Order error → Error page with retry option
Fail: Email not received → Support fallback
I led design on three critical flows
I led the design of Trim & Feature Selection, Checkout + Reservation, and Post-Reservation Onboarding flows under a tight launch timeline. I defined wireframes, state logic mapping, and content hierarchy, and drove iterative handoff in Figma during Agile sprints—ensuring clarity for both design and development while collaborating closely with product owners, engineering leads, and fellow designers.
I designed this step to emphasize the exclusivity of the 1st edition while keeping the full lineup visible—balancing urgency for early adopters with choice for those who wanted flexibility.
The 1st Edition Trim
I structured customization as a step-by-step flow, surfacing only the most relevant options at each stage. This reduced complexity, helping users feel in control while building confidence in their selection.
Trim & Feature Selection Logic
I placed the reservation summary and CTA side by side to minimize friction and make the cost breakdown more transparent.
Checkout Flow + Reservation Confirmation
I designed the onboarding message to reinforce the excitement of ownership while setting clear expectations for next steps.
Post-Reservation Onboarding Experience