Storyboard
Case overview:
Transparant Charging Station
Project Overview
In the future, the algorithms of the smart city will decide the allocation of public resources. If many electric cars have to be charged, a smart charging algorithm will determine when your vehicle can be charged. And this can make charging your car take longer than planned. How can you be sure that decisions as to who gets priority are taken honestly?
The Incredible Machine and I entrusted with designing the Transparent Charging Station to demonstrate how and on what basis the available energy is allocated. This design allows smart cities to communicate their transparency to inhabitants. Through the design of the user interface for this project, I proved the increased value of transparency for the user by answering the question they would have even before they would begin to charge their electric vehicle.
Transparent Charging Station project has entered a new phase. The first version of the design won a Dutch Design Award in 2018. Since then, the team and I have worked hard on a version 2.0. This is now operational and is located in a test environment at ElaadNL in Arnhem with plans to apply this model in a real-life city environment soon.
My Approach
Transparent Charging System is a project that aims to make smart charging more visible. I had to explain how smart charging works and how the algorithm makes decisions in the product. I addressed this by designing the charging station's user interface and developed prototypes for various scenarios.
The project lasted six months and was divided into three phases. Each phase included a reframe, envision, and create, followed by a thorough user test. For this project, I used the Mendel design model.
- Make design decisions while also identifying the demands of parties involved.
- Creating storyboards that describe the actual and intended state of affairs.
- Creating a persona to identify the need for transparency and other needs.
- Attend the design validation meeting at the AMS institute, where all parties concerned, including the client, will be present to discuss my design choices.
- Create ideas for the algorithm's design.• Finally, put it to the test.
The big question I started with was:
"How might we design a charging system interface that ensures complete transparency, builds user trust, and simplifies the payment process for a seamless experience?"
Design choices
The Flexpower algorithm calculates the charging speed during the smart charging process.The algorithm calculates this depending on four variables: the time of day, the weather, the availability of a shared car, and the number of empty plugs.
However, the user interface of the screen becomes overly cluttered as a result of all the information.The user only wants to know if the car is charging and how quickly it is charging.
The user is unconcerned about how the charging speed is estimated.
I approached this by converting the screen to a touchscreen and creating new interfaces to better satisfy the demands of the users. Of course, more testing was required to persuade the client to begin investing in touchscreen panels. Nevertheless, now when a driver questions how a decision was taken, the user can interact with the screen and the answer would appear. This enables me to have less information on the screen and still provide clarity.
In short the design needed to have:
- Less information yet still have all the information the user would want
- Motivate to interact with the touchscreen
- Provide clarity of how the algorithm works
- Continuously show the charging speed
Concepting
This part showcases how I went through different stages of designing the user interface for the Transparant Charging Station.
Second Iteration:
Simplifying Complexity for Clarity
During the second iteration of the design process, I identified a critical issue: the screen contained too much information, which overwhelmed users and hindered the clarity of the charging process. The interface, while feature-rich, failed to prioritize the most essential elements, making it difficult for users to quickly understand how to use the charging station.
To address this, I focused on streamlining the interface by:
- Reducing visual clutter: Removing non-essential elements and prioritizing key actions like starting, stopping, and monitoring the charging process.
- Improving hierarchy: Using clear typography, contrasting colors, and strategic spacing to guide users' attention to the most important information.
- Enhancing transparency: Ensuring that critical details, such as charging status, cost, and time, were displayed prominently and in an easy-to-read format.
Third Iteration:
Prioritizing User Needs with High-Quality
In the third iteration of the design, the focus shifted to deeply understanding and addressing the needs of the consumers. This version introduced high-quality, visually refined screens that not only enhanced the aesthetic appeal but also improved usability and accessibility. The design was divided into clear sections to ensure a logical flow of information.
The second section of the interface was dedicated to displaying detailed information that users would see upon interacting with specific design elements, such as tapping a button or selecting an option. This approach allowed users to access additional context or functionality without overwhelming them with too much information upfront.
Key improvements in this iteration included:
- Enhanced visual hierarchy: Using bold typography, intuitive icons, and strategic color contrasts to guide users seamlessly through the interface.
- Interactive elements: Designing clickable components that provided immediate feedback, ensuring users felt in control of their actions.
- Contextual information: Displaying relevant details (e.g., charging progress, cost breakdown, or time estimates) only when needed, reducing cognitive load and improving clarity.
The Outcome
The Transparent Charging System project culminated in a user-centered, intuitive, and visually appealing solution that successfully addressed the core challenges of clarity and trust in the charging process. By iterating on user feedback and refining the design, the final product delivered:
- Enhanced User Experience: A streamlined interface that reduced cognitive load and made the charging process simple and accessible for all users.
- Improved Transparency: Clear, real-time information on charging status, costs, and time, ensuring users felt informed and in control.
- Increased Trust: A design that prioritized honesty and openness, fostering confidence in the system and its operations.
- Scalable Design: A flexible and modular interface that can adapt to future updates or additional features, ensuring long-term usability.
This project not only achieved its initial goals but also set a new standard for how charging systems can balance functionality with user trust. The result is a system that empowers users, simplifies interactions, and aligns with the principles of transparency and accessibility.