White Paper

Intuitive solutions for the future

Adaptable solutions for quick and easy usage

Reading time: approx. 4′ 43″

Adaptive Design System

Consumer Interfaces

Digital Ecosystems

Experience Design

Gamification

Human Machine Interaction

Interaction Parameters (DIN EN ISO 9241-210)

Sustainability

Universal Design & Inclusion

Analysis

The development of a modular and flexible UI/UX design system for electric mobility charging stations is a key challenge, especially in terms of user-friendliness and accessibility for different target groups. The design of user interfaces for charging stations requires special attention with special attention to the possible charging capacities, the different types of charging plugs and the variety of vehicle types to be charged. In order to ensure a consistent design for different charging stations, it is necessary to develop a system that is customisable and scalable, while at the same time offering consistent usability.

Design system

A design system is a collection of UI components, design standards and principles that make it possible to design solutions more efficiently and create consistency across products. This avoids design inconsistencies and helps different teams to implement the design more quickly and efficiently. The basis for the development of this system was the SICHARGE D fast charging station from Siemens, which later became the basis for the development of other charging stations series.

Co-Creation

A central element of the design process was the method of co-creation, in which various stakeholders, including Siemens experts and end users, were involved in the process. This made it possible to develop new values and solutions that fulfil both user needs and technical requirements. The analysis of the target groups revealed that future users of charging stations will not only be experienced electric vehicle users, but also newcomers, users with special needs such as wheelchair users and international group travellers who rely on uncomplicated and intuitive user interfaces.

Benchmark

As part of the benchmark analysis, 20 existing charging stations from different manufacturers were analysed to identify the best approaches and develop a modular design system. It was concluded that most charging stations are modular in design and allow additional functions to be integrated depending on the usage scenario and operator requirements. The key modules include the charging modules, slots, displays, control panels and authentication systems. These findings were integrated into the target parameters for the UI/UX design.

Architecture

The information architecture of the user interface was structured pyramidally to enable different levels of accessibility. At the top level, the essential information about the charging process was to be displayed, while lower levels provide technical details and assistance information that can only be accessed when required. This architecture allowed the user to choose between a ‘short path’ (quick and easy charging) and a ‘long path’ (with detailed information) depending on the situation.

Added value

The goal was not just to enable simple charging, but to offer the user real added value. For example, free charging points in the area could be visualised or useful additional information provided. In addition, technical information should be presented in an understandable and visually appealing way so that it is accessible to all users, regardless of their technical knowledge. Another focus was on dialogue and interaction with the user: the user interface should not only provide static information, but also guide the user through the charging process and provide helpful tips in the case of problems.

Customisation

The user interface had to react adaptively to the needs of the user, for example by switching between day and night mode or automatically adjusting the display to the ambient light. In addition, a height-adjustable display was developed that makes it easy accessible for wheelchair users. A remote control app (remote twin app) should also make it possible to control the charging process from the car, which would be particularly handy in the case of bad weather.

UX testing

In the UX testing of the developed basic design with eleven experts, the layout was rated as clear and intuitive. The start screen enabled quick and easy access to the loading process, and the overall operation was rated as trustworthy and secure. However, there was a need for optimisation with regard to the click flows and the wording of the buttons, which should be defined more clearly and unambiguously. Greater dialogue was also desired, for example through personalised messages during and after the loading process.

Detailed concept

In the detailed design phase, various design approaches were developed for the visual presentation and tonality of the user interface. Dynamic visualisations and contextual help information should guide the user quickly and efficiently through the loading process. Additional UI components were integrated to facilitate authentication and fast loading. These optimisations were tested in a high-fidelity mockup, which was evaluated with nine potential users. The users were able to successfully complete all tasks and the design was rated as being highly user-friendly.

Components

The design system ultimately comprised 184 components, including grid modules, graphics, symbols, icons and font formats. Care was taken to ensure that the content was easy to read, even in poor lighting conditions, and that it could be used without barriers. In addition, the text elements were to be kept short and precise in order to reflect different languages without the need for customisation. The design system proved to be sustainable and could be used to quickly customise and develop further user interfaces for Siemens charging stations. It enabled efficient scalability and flexibility for the international market without losing user-friendliness.

Year

2021

Authors

Oliver Gerstheimer, Romy Kniewel, Gesa Nolte, Stephan Hühne, Markus Boehm, Moritz Ingerfeld