Redesign of MINI's retailer websites - From creating components to polishing final visuals
Prototype of the Model Selector tool on Mobile
THE ROLE
MINI
Web Responsive
Involvement
Predominantly UI Design
Year
2021
Web Responsive
Involvement
Predominantly UI Design
Year
2021
THE PROJECT
MINI is a well known British automotive brand that offers a range of city and family cars. It has been owned by German automotive company BMW since 2000.
As a freelance product / UI designer, I worked with MINI on the redesign of their retailer website for 3 months. I worked closely with a UX designer, and I was the only person in charge of the UI aspects.
I came up with a design direction and then worked on the whole website redesign (navigation, campaigns, model selector, content pages, etc.).
I came up with a design direction and then worked on the whole website redesign (navigation, campaigns, model selector, content pages, etc.).
THE BRIEF
When I joined the project, MINI was in the middle of a "Rebrush" and was refreshing its brand identity. MINI didn't have a clear design language, nor a Library. As the only UI Designer on the project, this gave me a lot of freedom on the visual aspects.
DESIGN DIRECTIONS
I have started the project by working on the Design Directions. I was using fictive content and came up with 2 different concepts:
• The first one was using visual car imagery from different angles,
• The second one was showing lifestyle imagery with a focus on the people using the cars.
• The second one was showing lifestyle imagery with a focus on the people using the cars.
The client liked the two directions and we agreed on the fact the final designs should incorporate both.
Two concepts for the Design Directions
FINAL UI DESIGN
A yellow underline animating in behind the headlines, inspired by MINI's Rebrush, became one of the strongest UI element of the redesign.
I've used many colours to highlight the right content, and background blurs to make the images on top stand out.
MODEL SELECTOR TOOL
I also worked on a model selector tool, aiming at having a quick glance at the whole range and giving the users the possibility to book a test drive or talk to an expert. This tool was a central and unique part of the project as we wanted it to be as visual and immersive as possible.
I was involved in the UX process and took part to white boarding session. Then I did a few wireframes to have a good structure for the model selection tool.
Sketches to envision the journey from the model selection tool to the model page
Wireframe of the model selection tool
In terms of the visual, we wanted the model selection tool to be attractive and immersive. We wanted it to reflect the personality of the brand.
I decided to go for a very colourful page and match the background colour to the colour of the car image. As there are 8 models only, I came up with custom colours for each. This way, I could adjust the colour and make sure it was offering a good enough contrast with white.
Designs for the model selection tool - All 8 models and all devices (Mobile, Tablet & Desktop)
We added a short descriptive copy about the model to bring personality and uniqueness to each model. I put together a prototype to envision the interaction from one model to another.
Prototype of the "model selector tool" on Desktop
Mockup of the Model selector tool on Mobile
More screens of the Model selector tool on Mobile
NEWS & EVENTS PAGE
I designed a colourful and visual page for the news and articles.
I came up with a logic for colour. The tabs have a specific colour, that appears on the cards within that category.
Mockup of the News & Events page on Mobile
Prototype of the News & Events page showing the yellow underline on headlines
Overview of the News page designs for all devices - Including notes about interactions for developers
NAVIGATION
As part of the redesign, I worked on the navigation menu. After trying a few visual options, the client and I agreed the website would benefit from a clean and rather neutral nav menu, as some pages were using strong UI elements and imagery.
Final designs for the Navigation - Including the hover states on Desktop
Mockup of the Navigation on Mobile
