Role
Design Director & Lead Designer
Type
Responsive website
Industry
Automotive
BMW Living with i: Making electric feel effortless
TL;DR
BMW needed a digital experience that could help reduce range anxiety and support the shift to electric. The microsite combined interactive tools and reassuring guidance for both new and existing BMW i drivers, making the benefits of electric driving feel more practical, personal and easy to understand.
Who is BMW?
BMW is a German premium automotive brand with a heritage dating back to 1916, known for its engineering precision, performance, and design. In the UK, it operates as part of BMW Group alongside MINI, Rolls-Royce Motor Cars, and BMW Motorrad. With a focus on innovation and sustainability, BMW continues to lead the shift toward electric mobility through its expanding range of fully electric vehicles.
My role
The project was delivered by a small team, with myself as the Design Director working alongside a Senior Front-end developer.
I shaped the overall look and feel of the experience, designing the responsive layout, UI components, interaction patterns and motion details. Working within the BMW i brand system, I combined practical UI elements with subtle SVG animations to make the content clear and engaging.
Although small in scope, the project gave me space to use some of my other skills, including illustration, animation and micro-interactions, which I don't often get to use all at once.
Problem statement
Range anxiety was stopping people from going electric. BMW needed to help potential and existing i owners feel confident about daily driving. Customers worried about practical range, where to charge, and running costs. We needed to design a microsite that made electric driving feel doable by showing what was realistically possible with a BMW i.
Design process
Ideation
The brief pinpointed the range calculator as our core feature, backed by Zap Map and content about electric driving benefits. I mapped out how each section could calm specific worries without information overload.
I built five areas (Savings, Charging, Range, Benefits and Charging Points) to tackle different concerns. Most sections used interactive tools, while the Benefits page was more content-driven. To keep it feeling connected, I added subtle SVG animations triggered on scroll.
Visual assets were limited to i3 product shots. BMW projects usually include a wider set of lifestyle imagery, but having worked on previous BMW digital products, I was comfortable extending the brand expression for this. I used BMW i Blue as the foundation and built out the rest of the visual direction using cues from their linear iconography, adapting it into simple illustrations and interface elements.
While I have a strong understanding of front-end, I prefer to validate design decisions early to keep timelines and budgets on track. During the ideation phase, I worked closely with the developer to ensure the designs would perform well across devices and interaction states.
Results
Impact
The final microsite brought the tools, content and visual language together into a cohesive experience that worked smoothly across devices. Each section supported the user journey in a way that made electric driving feel more practical and less intimidating.
BMW loved how the calculators made complex information easy to understand, helping customers see how an i3 could fit their lifestyle. The Zap Map integration tackled charging worries without sending users elsewhere.
