MINI USA
MINIUSA.com Redesign
UI/UX design
In fall 2018, I joined the team bringing MINI USA’s outdated web experience up to speed. For the redesign, we established a modern design language that better reflected MINI’s positioning as a sophisticated, design-centric car brand while staying true to its iconic, sport-racing heritage.
With nearly as many users visiting MINIUSA.com on mobile devices, we made sure the redesigned experience was first class across all types of device screens.
We wanted the experience to feel as close to a modern, shoppable online retail site as possible. One way we did this: tiles on the homepage that reveal interactive swatches on hover.
We started by rethinking the model detail pages after an audit revealed those pages contained the widest variety of components, which we leveraged to begin building a scalable design system.
Before jumping into design, wireframing page templates allowed us to explore layout options and achieve the right hierarchy. Our Content Strategist provided guidance on content blocks as we determined the best page structure and flow.
Over the course of design sprints focusing on key sections of the experience, we amassed a library of versatile components. When designing new pages, we reused components as often as possible and only created new ones when absolutely necessary.
With multiple designers working across multiple design files, we used InVision’s DSM to keep our growing design system organized and updated.
‘Line-up’ cards appear throughout the experience to show relevant vehicles in a compact yet visually distinct way. These cards are highly flexible and can contain more or fewer elements (e.g., price, CTAs, icons), depending on the context.
The MINI brand typefaces were used throughout. To increase legibility, we pushed to use MINI Sans Serif as much as possible (especially at smaller sizes).
One of the most important sections of the site was the Configurator. Due to a complex, legacy codebase, tackling it was planned as the last phase of the project. As a solution, we rethought the entry into and exit from the Configurator experience first.
Throughout the experience, users can jump into the Configurator flow, starting at the appropriate stage (choosing a model, engine, or trim) based on where they entered. Users then go into the Configurator proper to fully customize their MINI.