Evolving BMW products for the electric age

What is the best way to showcase BMW's new electric and hybrid vehicles?
Role
Designer, Project Manager, User Experience
Services
3D, Design Thinking, UI, User Testing, UX, Video, Web, Workshop
Summary
Working with the BMW marketing team, we define a plan to improve the UX, Interaction Design, and Visual Design of several BMW products. Research, customer interviews, Design Thinking, and benchmarking were used to create buyer personas, define goals, and plan. Before building, user tests were used to validate hypotheses and then everything was put together. Look at the results inside.

The challenge. The ask.

The BMW marketing team has several initiatives and needs to create, design, and implement new ways of communicating their new electric vehicles, as well as improve existing digital products. The products I had to work on were:
BMW Connected
BMW i3
BMW Plug-in hybrids
BMW After-sales
MINI After-sales

The challenge was important; I had to create a plan for how to communicate and execute it within a tight time frame. To accomplish this, new websites, designed graphics, created motion graphics, and made several videos have to be done. Additionally, I have to improve the User Experience (UX), Interaction Design (IxD), and Visual Design (UI) of some products: BMW & MINI After-sales, BMW Connected.

So, I formed a team, and, together with Intelygenz and BMW marketing team, set a goal of having the first MVP designed and built in less than two months, then continued creating the remaining digital assets and evolving the first MVP.

Understand

Inception. Let’s do some research.

I proposed to carry out several Design Thinking techniques, along with customer research, to understand the needs, create a roadmap, and define which digital assets we would create. The objective of this inception phase was to quickly achieve a shared understanding, so that all team members could start working independently, agilely, and in coordination.

Electric Hybrids category had the most workload, so we tackled it first. We started by defining a complete structure, not only at the website level, but also considering the creative assets the project would need.

Benchmarking

To see how BMW’s competition was speaking to their audience about similar products, I conducted a comparison of the main competing brands. The result helped us identify patterns that added value to the next stage of the project.

Buyer personas

In the first session of the Workshop, we co-created and analyzed a total of 17 Buyer Personas, until we were left with only 4. Along the way, we encountered several user pain-points:

  • They did not know what a PHEV (a hybrid electric vehicle) was.
  • They had many doubts about the legal and operational limitations of electric and hybrid cars.
  • They felt insecure about the car’s autonomy and charging times.

User interviews

With the four buyer personas finished, we conducted several user interviews to validate the design hypotheses and gain a deeper understanding of the pain points, motivators, and objectives in order to build a customer journey.

Think

Defining Goals

We wanted to be educational without making users read too much. We soon realized that the solution could be to tell stories through videos. We mixed testimonies and animations to realistically discuss the uncertainty and pain points we discovered in the research. We used four testimonies from the four buyer personas.

To go deeper, we also decided to create a few videos with an expert approach, featuring a BMW Product Genius as the protagonist. This person is knowledgeable about BMW products and can help customers find the best product for their needs.

Planning

Finally, we held another workshop to define the structure to follow, which pain points each of the buyer personas would address, and how to mix it with animations.

Learn and then Solve

Test

Before starting to build, we decided to learn and analyze our hypotheses heuristically and with a also with small group of real users from the previous steps.

To do this, we built several simple wireframes in Axure to test, as well as several preference, interaction, and some 5 seconds test created in UsabilityHub, to test if the messages were understood, if the information architecture was sufficient, and if the selected actors would generate empathy in the users who would enter the BMW website.

Scoring tasks

We had everything we needed to start building, so we began to size a light design, audiovisual, and development team to create all the pieces and join them in each of the websites that would be on www.bmw.es a few months later. We defined and scored the work to be done among us, which we validated with a 2 x 2 Decision Matrix to evaluate what we would do and what we would leave as “Nice to have”.

Wireframes and Visual Design

We began with the information architecture and created multiple wireframes versions to validate with the BMW marketing team. We collaborated with the engineering team to determine what could be built and conducted unmoderated user tests to measure the degree of understanding and the quality of the interactions.

Script, storyboarding, and shooting

We crafted the script with utmost care and precision, thinking through every single line and every single detail to make sure it was as effective and meaningful as possible. We then went on to create a storyboard that would bring the script to life and provide a visual representation of the story that would be told. Last but not least, we used our creativity to bring the storyboard to life with stunning visuals.

Postproduction

After shooting, we created the animated graphics from the storyboard, with an electric, pure and simplistic look and feel. We used 3D techniques and motion graphics to give the content a unique aesthetic and visual appeal. We also employed advanced compositing strategies to bring the various elements together, ensuring that the overall look was one of seamless unity. 

This is a visual summary of the result.

BMW Connected

The goal was to get existing customers to download the app and connect their BMWs.

"

BMW i3

The goal was for potential buyers to have guided purchase arguments and for a Product Genius to advise them virtually and audiovisually before buying the electric car.

"

BMW PHEV

The goal is to alleviate potential buyers’ concerns and dispel their fears about this type of vehicle.

"

BMW After-sales

The goal is to improve the user experience by enabling them to calculate maintenance prices, providing a timeline to know when maintenance is due, and enhancing the interaction with the spare parts catalog.

"

MINI After-sales

The goal is to improve the user experience by enabling them to calculate maintenance prices, providing a timeline to know when maintenance is due, and enhancing the interaction with the spare parts catalog.

"

What more?

@ Under a Non-disclosure Agreement.

Some of the details in this case study may be kept secret to protect the client's intellectual property.