Trip Planning, BMW

Trip Planning for Electric Car Users

During my internship with BMW, I was assigned to the newly formed Electric Mobility team whose focus is geared towards improving how electric car users interact with the BMW ConnectedDrive App.

This gave me the unique opportunity to sit in on strategic meetings where both short and long term plans for the team were laid out. I was also able to take part in service design workshops where various pain points we could address were identified, one of which became a project I worked on over the course of the next 6 weeks.

Prompt

How can we help e-drivers choose destinations that are more charge-friendly?

Solution

Incorporating the ability to search for a charging station within the trip planning userflow, and introducing a range indicator to help e-drivers plan around battery life can improve overall user experience.

Role/Team

UX Design Intern, working with Jared Lukes (UX Lead)

Time

1.5 months

Style Guide

To improve consistency and user experience across platforms, BMW has varying icons, colors, and typography guides depending on the subsidiary (Mini, Rolls-Royce, etc.) and platform (iOS, Android, in-car operating system) in question.

As this project is focused on trip planning within the app, we adhered to the relevant guidelines:

Font

A proprietary typeface called BMW Type is used across all platforms. This project primarily uses this font with a low stroke weight.

Colors

We reference Global BMW colors, as well as iOS and Material Design color guides specific to alerts and notifications.

Existing Experience

Process & Findings
With my team's UX Lead, we identified pain points specific to trip charging and electric range in the ConnectedDrive app.

1. Battery life and electric range are shown in the Vehicle tab, but not in the Destinations tab which is where trip planning takes place.
‍
2. The app prompts an alert when a destination is out of reach, but only after an address is entered and the trip is started.

1. Battery life and electric range are shown in the Vehicle tab, but not in the Destinations tab which is where trip planning takes place.

2. The app prompts an alert when a destination is out of reach, but only after an address is entered and the trip is started.

Insights

Having to go back and forth between tabs while planning a trip is cumbersome. Housing an electric range indicator in the Destinations tab addressed both of the above mentioned concerns and can preemptively improve ease of use.

How It Works

Identifying user stories outlining the various ways users can interact with the electric range indicator led us to a clear understanding of how the feature works within the larger context of the Destinations tab.

Essentially, the destination being reachable or unreachable determines whether to direct the user to trip navigation or to nearby charging stations.

Our Approach

Three rough categories emerged as I worked through multiple ideas–

1. Symbols & Icons

Using pre-existing components of the app as a reference to build new symbols and icons that can serve as range indicators.

2. Labels & Tags

Working towards a text based indicator that is integrated into the trip planning user flow.

3. Map Animations

Animating what we called a "Range Spider" to cover area on the map that is within the vehicle's range.

CONCEPT 1

Exploring Symbols & Icons

Progress Indicators

Sketch

Commonly seen on the web as progress trackers and loading bars, progress indicators can help visualize percentages in a user friendly way.

Low-Fi Mockups

Providing a percentage value helps users set aside the appropriate time required to recharge, but using negative percentages to indicate insufficient charging isn't the most intuitive.

Components

Existing UI

This symbol appears in the Vehicle tab, and is updated in real-time to display charging and range information.

Iterations

Initial versions took up too much real estate on the screen, and weren't clear– keeping it simple is what worked best.

Mockups

Here, I adapt it to the UI in the trip planning section.

Map Icons

Sketch

Brainstorming icons that can be used as indicators on the street map used to plan trips within the app.

Low-fi Iterations

The existing icons represent points of interest such as charging stations and service centers.

These are some first iterations of what might work as range indicators.

CONCEPT 2

Labels & Tags

I paid attention to words and language in relation to the UI. What fits, and what is unclear?

CONCEPT 3

Animated Map Overlays:
Range Spider

Low fidelity renders of what potential animations can look like on load. Using Adobe After Effects, I spent some time brainstorming options.

Idea Generation

Planning various animation concepts on paper.

Blurred Lines: The Issue With Calculating Electric Range

Besides a car's charging capacity, electric range can change depending on the wind, weather, payload, tires, air conditioning and your driving speed. This demands a certain margin of error in our calculations that makes it difficult to distinguish which destinations are truly out of range.

Driver A can attempt to drive to a destination marked 'within range', and then fall short of the necessary charging required to make the trip. Similarly, Driver B can try their luck driving to a destination marked 'out of range' and then feel pleasantly surprised when they make it.

This is a tough use case to design for– providing reliable metrics is essential to gaining a user's trust, and here we are unable to do that.
‍
In both scenarios, the user sees that what the range indicator says does not hold true, thus losing trust in it. This also translates to serious safety concerns in the real world, like leaving a user stranded in a remote or unsafe area.

Possible Solutions

Keeping safety in mind, we can use an indicator that is slightly skewed to say a destination is out of range when uncertain– this is not as reliable as an 'accurate' indicator, but is far safer for the user.
Keeping accuracy in mind, we can visualize this margin of error on the map, so users can understand what extent of the trip is off bounds.

Introducing Range Indication

Our stakeholders voted to move ahead with the label concept, and this is what we came up with.
‍

DESTINATION LIST

In the iOS app, since the process of searching for nearby charging stations is similar, I applied the same UI to those screens as well. The functionality is a bit different in Android, as charging stations show up directly on a map and not in a list. I worked accordingly.

We went with a simple text label that is visible only if a destination is out of range.

DESTINATION DETAILS

The destination details show up in a tray.

Logically speaking, the trip's ETA isn't needed if the trip itself cannot be made. This meant that on iPhones, we were able to replace the ETA with the label. It worked out nicely as no other adjustments needed to be made.
‍
On Android, the layout is slightly different, so we just moved everything down a few pixels to make room for the label.
‍

Update (as of 2021)

The ConnectedDrive app underwent a total redesign in 2019, and has since modified the range indicator as well.

The clean and modern aesthetics are a much better fit for the brand, don't you think?