CASE STUDY

PORSCHE ELECTRIC CHARGING

Designing interaction for the new e-charging device

TIMING

July 2016 - Aug 2016 — 7 weeks

ROLE

Tailoring the project processes, directing the team and reviewing the outcomes, as well as being involved in research, key meetings and workshops.

OVERVIEW

Porsche was developing a device for electric car charging with an integrated display. Porsche asked us to design interaction for the device interface.

They were struggling to prioritise features as well as adopting personas which were designed for all Porsche digital products.

Rather a tech-driven feature list and wire-frame were shared at the kickoff. We facilitated a workshop with stakeholders to refine user archetypes and user scenarios. 

We immersed ourselves in the topic by going out in the field and talking to people, observing other charging devices, vehicles and applications.

PROCESS

Discover (2 weeks)
Kickoff workshop
Immersion
Determining key user archetypes
Defining user scenarios and user journeys 

Define (2 weeks)
Mapping out wireframing along key scenarios
Developing interaction model
Defining information architecture
Physical prototyping for user testing

Design (3 weeks)
Design refinement for key flows and key screens 
Creating charging animation
Creation of storytelling videos
Defining design language system

01

Discovery

IMMERSION

We reviewed all documents that have been provided by the Porsche team and started to cluster them by topics. We created the first draft of a technical feature list to get a better understanding of charging cable requirements. Based on these assets we developed three user scenarios.

The team went out for a day trip around Munich to visit a Tesla showroom and explore the installed charging stations as well as the charging processes. We were visiting a BMWi store where the team was able to go for a BMW i3 test drive. By looking at the competitors we gained valuable insights on best practices and less valuable solutions.

KEY LEARNINGS

We understood that the generation 2 charging cable will be provided as a bundle containing an HCM unit to be installed at user homes. Apart from that, the team learned more about the general user behaviour and how the customers charge their cars.

Educate and guide users through the e-charging

Systematically allow the Porsche drivers to acclimate to the charging language in an easily digestible format with clear user interface flows. Over time, the Porsche driver should be switching the mental model of re-fueling their Porsche with petrol to re-charging their Porsche with electricity.

Communicate bold & clear

Considering the user context, and thick protective glass on top of the display, it will require easy access to information at a glance and typical interactions will not be like those of a smartphone. The design should provide clear information in a bold manner.

Make users feel secure

All design language correlates to the E3 connect app concept and customer web portal design direction to keep the sense of familiarity. The cable interface fits seamlessly into this ecosystem which includes the HCM web config that allows the Porsche driver to charge without fear of creating a power surge or blackout.

02

Define

PERSONAS

Fei

“I love the green image, the luxury of a great brand and just want to charge my car without any effort.”

Fei likes to use just one device at a time and is satisfied if someone else does the detailed settings for her. She is more reactive and has just a few touchpoints with the Porsche digital eco system during her week.

• Is it working?
• When will it be finished?
• How far can I go?
• Will I have enough battery for my day?

Claude

“I love the combination of green driving, and modern technique”

Claude likes to use a solid system. He proactively changes settings manually and likes to be in control. During a normal week, he is having multiple touchpoints with the digital Porsche ecosystem.

• How can I utilise the best energy for my kw/h?
• Where can I edit my energy profiles and charging timers?
• Will my route stopovers have DC fast charging stations?

CONCEPT
GENERATION

We began with refining key user scenarios and mapping out early wireframes along the key scenarios. In parallel, prioritised features were simplified and mapped out as a conceptual diagram. Followed by visual design exploration and development of interaction models. It was crucial for us to always keep in mind the holistic system which includes the physical device, LED lights on the device, LED lights on cars, web config, Porsche Connected App and the car dashboard.

PROTOTYPING
& TESTING

To make sure that we are designing with the context in mind, we built a physical mock-up of the device and constantly tested it under different circumstances. For example, under the sunlight and standing at a distance from the device. We realised that the device has an extremely thick glass covering the screen for safety reasons which makes touch screen interaction feel somehow disconnected. 

03

Design

INTERACTION MODEL
3 LAYERS

The interaction model contains three layers. The first layer is the home screen with read-only information. Users cannot edit functionalities on the home screen. The second layer contains the charging history and settings. In the third layer the settings - changes and adjustments can be made by the user. 

FIRST LAYER
READ-ONLY

The home screen contains read-only information. The battery status uses the whole screen to indicate the charging status of the connected car.

SECOND LAYER
SELECT & VIEW

Charging history
In the second layer, the user has as well access to the charging history and the settings section.

Session information
The session information contains additional data that is not essential to be shown on the home screen. Users can easily toggle between both views. Less technical orientated users still have a very reduced home screen with the minimum information that is only relevant to them. 

THIRD LAYER
EDIT & ADJUST

Settings
In the third layer, users are able to adjust and configure their charging device. For example, changing the electric current, editing preferences or defining device protection.

DESIGN FOR MENTAL MODEL SHIFT

As we are used to litre and km today with petrol cars, adopting the new values for electronic cars such as kWh and kw might be confusing. However, early adopters are already comfortable with those values and the mental model shift will happen in the future.

The design is built through the mental model shift from traditional petrol to electricity-driven units. Educating and guiding users through e-charging.

DESIGN LANGUAGE SYSTEM

STORYTELLING

We delivered a completely new simplified information architecture, design language system, feature mapping of the ecosystem and conceptual diagram which explains the interaction model.

3 key user scenarios together with screens were also translated into story-telling animation videos to be shared with their senior management stakeholders.

TEAM