In collaboration with BMW’s Sustainability business unit, I supported their efforts to address the main concerns of potential e-mobility customers: range anxiety, charging availability, and long charging times. We designed two key components for the electric BMW model pages on their website:

Range & Charging: A tool allowing users to compare different BMW electric model variations in terms of range, charging times, and available charging stations.

Charging Consultation: A personalized journey through a questionnaire that recommends suitable charging solutions based on users‘ living circumstances.

These tools were crafted to provide transparent, easy-to-understand, and relevant information, helping users feel more confident about adopting e-mobility.

The main challenge was addressing key concerns of potential e-mobility customers in a single component:

Range Anxiety: Worries about the car’s ability to complete trips without running out of battery.

Charging Infrastructure: Concerns about the availability of charging stations during travel.

Charging Times: Fear of long, inconvenient charging times.

Additionally, the Charging Consultation needed to cater to both newbies and advanced users. We aimed to provide clear, simple information for beginners while offering detailed insights for more experienced users.

As the Lead UI/UX Designer, I was responsible for the full design workflow:

• Conducted user research to understand potential customers‘ concerns, identifying the main barriers to adopting electric vehicles.

• Mapped user flows to streamline navigation and ensure a user-friendly experience.

• Created wireframes and prototypes for both the „Range & Charging“ and „Charging Consultation“ components, validating them with users through testing.

• Designed the final UI screens, paying close attention to consistency with BMW’s brand guidelines.

• Introduced motion design to enhance navigation and clarify transitions and interactions.

• Collaborated closely with stakeholders and BMW’s digital agency, The Marcom Engine, to ensure alignment with the overall website and model page designs.

• Provided final handover documentation to developers, ensuring smooth implementation and consistency across all platforms.

Our design process began with user research to identify the main concerns of potential e-mobility customers. We conducted interviews and surveys to understand range anxiety, charging availability, and long charging times. Based on this, we focused on two core components: Range & Charging and Charging Consultation.

The Range & Charging tool aimed to ease range anxiety by providing clear data on range and charging times for various BMW electric models. We integrated an interactive map showing nearby charging stations and added a route calculation tool to display real-time charging options, times, and the number of stops needed along the user’s route.

The Charging Consultation was a questionnaire designed to capture users’ living situations and recommend the best charging products and solutions. Using progressive disclosure, we provided high-level information first, with deeper details available through further interactions.

Throughout the process, I worked closely with BMW’s digital agency, The Marcom Engine, to align designs with the broader website and digital showroom. After several rounds of iteration, I finalized the designs and handed them off to development with detailed specifications.

• Progressive Disclosure: Simplified the user experience by presenting essential information upfront and providing more detailed data upon user interaction.

• Interactive Prototypes: Conducted user testing with interactive prototypes to validate design decisions and refine the user journey.

• Personalized User Journey: Designed the Charging Consultation questionnaire to provide tailored recommendations based on users‘ unique circumstances.

• Consistency Across Touchpoints: Ensured that both components were seamlessly integrated into the larger BMW ecosystem, maintaining brand consistency.

• Micro-Interactions & Motion Design: Incorporated subtle animations and transitions to enhance the user experience, providing smooth feedback and engagement throughout interactions.

The Range & Charging tool and Charging Consultation feature received positive feedback from both users and stakeholders. The transparency of the Range & Charging tool helped users easily compare the electric models and understand the availability of charging stations, which alleviated concerns about range anxiety and charging options.

The Charging Consultation component helped users find the best charging solutions based on their living situation, making it easier for both novices and advanced users to adopt electric mobility. The dual-level content presentation (simplified for newbies and technical for advanced users) ensured that the experience was tailored to each user’s needs.