- CLIENT: BMW
- Forging a connection between performance and luxury
- Conceptual Design
- User Research
- Personas & User Flows
- Information Architecture
- Heuristic Assessment
- Wireframing
- Rapid Prototyping
- User Testing
- Style Guide & Hi-Fi Comps
- Rapid Prototyping
- Front End Development
- Delivery and Integration Support
Overview
Web Design & UX design for all models and trims across the range. New BMW UX Design for new full package offering product desktop and mobile pages for BMW in addition to web ads.
The design challenge here was coming up with a new layout that complemented BMW design efforts to present BMW as not only a luxury brand, but as a performance brand. Usage of full bleed imagery, dynamic menu systems, and parallax design elements offered a professional finish, and complemented a racing heritage.
The main design challenges were to modernize product to a fully responsive digital experience, and forging the connection of luxury & performance.
Problems
& Opportunities
I had three main goals in mind in redesigning the pages to align with BMW. One, to bring modern designs to a digital space. Two, to ensure products were completely responsive and lastly, to forge a connection between luxury and performance across digital assets, with an intact visual design language.
Roles & Responsibilities
I began by getting all the media I could about BMW to really understand not only the history of the brand, but also where it was going. I visited a BMW dealership to see the products firsthand, like the M3, the X5 SUV and other models across the range. This project scope included digital product for all models, trims for desktop, mobile, tablet and animated display ads, all of which I designed and developed.
Analysis
Responsive Workflows
BMW has a rich racing history and incorporating that into the digital product was paramount. Finding the ideal balance of information vs overwhelming options was a challenge. Based on the Foundational research performed, users were keen to know a few bits of information such as the price, model and what specs it had. I work together with various departments, marketing, engineering and so on, and one design battle that was lost was that I pushed for showing as little information as possible, so as to not overwhelm the user. I proposed only showing sales information, pricing, make and model with links to showing specs in an alternate area. While disagreeing with showing the specs and significantly enlarging the hero image, I styled it in such a way as to keep it easy for the end user, while still working closely with internal devs.
High Fidelity
Designs
it was interesting to find the right design and options for visual language that would inform and develop with the user. Whereas with the initial launch there is one design that was refined, with versions 2.0 and going forward, having options to be selective with information shown is a win for everyone.
bringing
the results
Worked out the rough IA for the products, to provide layout direction for myriad devices. Depending on the model, I led with Performance, Interior, Exterior and Safety while keeping sections fluid for model and trim differences.
Launch
The design was on point, hitting the key KPIs. Fluid and responsive, & thoroughly modern. Keeping the nav slider to the length of the string seemed like a simple challenge, but ended up almost being a dealbreaker. The fix involved analyzing the string length and adjusting the element to match, which required retooling some backend code. Next steps would be adding video, VR walkarounds of the interior and exterior where available.
Chad Rawlinson
Product Designer
BMW Design Work
"This felt complete when it hit the design goals, was responsive and quick and really allowed the user to get an up close look at the product. A brief moment to come up for air, then on to improving for the next iteration."