Charging Session Service for

Project Brief

The previous JUCR app’s charging session experience had several limitations. Users couldn’t browse other charging locations while a session was active, restricting trip planning. The interface lacked scalability, making it difficult to add more session-related data. Error handling across backend services and embedded components was not always smooth, impacting the user experience. Additionally, misalignment between frontend, backend, interface design, and infrastructure teams led to inefficiencies in the charging session flow. This project addressed these issues by improving navigation, scalability, error handling, and cross-team collaboration.

My Role

As the sole UX Designer and Researcher on the team, I identified key limitations and pain points, mapped the backend structure using GraphQL, and defined the charging flow. I redesigned the entire charging session experience, ensuring a seamless user journey, and conducted usability testing to validate and refine the improvements.

System overview

I created the system overview to map the entire charging session flow for both roaming stations and our own stations, connecting backend processes, third-party interactions, and user touchpoints. It provides a clear structure of how different components interact to ensure a seamless user experience. The visual representation highlights the architecture while showcasing key client-side interactions, reflecting the redesigned charging flow.

I built this overview using information from the GraphQL documentation, ensuring accuracy in mapping backend processes. This resource became a go-to reference for both frontend and backend developers, helping stakeholders grasp the full scope of the charging session service. In the process, I became the team's go-to expert. If it involved charging, chances were I had the answer.

Roaming charging stations’ system overview map

I emphasized the customer journey map at the top to provide context on how users navigate the charging session. Additionally, I highlighted the stakeholders involved on the left in a vertical layout, including frontend and backend services, the vehicle itself, and our roaming partners who own the charging stations. Each stakeholder is represented by a distinct color, which is consistently used throughout the map to indicate their specific roles and actions within the charging session flow.

For example, this part of the system overview illustrates the transition from plugging the cable into the station to just before the EV charging starts. It provides a structured breakdown of how the frontend, backend, and car systems communicate to ensure a successful charging session initiation.

  • The yellow circular elements highlight key screens to be designed within the app, making it easy to identify crucial UI touchpoints in the charging process. These screens indicate where user interactions will take place, such as selecting a station, confirming details, and initiating the charging session.

  • The backend section represents system logic and decision-making. It processes responses from the station, verifies connection status, and determines whether to activate charging.

  • The car section highlights how the vehicle communicates with the backend, ensuring the charging process is properly initiated.

The user plugs in the cable and confirms the action through the frontend. The backend validates whether the station responds correctly. If successful, the charging process begins on the backend side (green boxes). If everything proceeds as expected, the session status transitions from PENDING to AUTHORIZED and then to STARTED. If an issue arises, the backend processes error states (red boxes), handling failures such as timeouts, power unavailability, or station miscommunication.

While creating this system flow, I went beyond mapping the user journey and deeply analyzed the technical processes happening in the background. Understanding how the backend operates, how charging sessions are validated, and how stations interact with the system enabled me to align my design decisions with technical constraints. As a result, I ensured a seamless experience for users while also providing an implementable solution for the development team. By bridging the gap between design and technology, I facilitated a shared understanding between frontend and backend teams.

Design

The old design of the charging session flow has several issues that should be addressed from a design perspective. For example, the app’s interface during a charging session does not allow users to interact with the app the same way they would when there is no active charging session. Specifically, it’s not possible to view details of other charging locations, which could be problematic if users want to plan their next charging stop.

Another limitation of the old implementation is that the view is too small, making it nearly impossible to add more data related to the session due to size constraints.

Furthermore, handling errors that may occur with back-end services or embedded components is not smooth or transparent.

Old interface of charging session service

I designed around 50 screens to create a seamless and intuitive charging experience. One of the key innovations was the introduction of a bottom sheet approach, addressing previous issue that users being unable to navigate the app while charging. With this new design, users can now explore other locations even while a charging session is active. By swiping down on the charging session view, users can access the map screen, with a button on the right side that animates and provides an action to return to the charging session view.

Additionally, transparency has been improved by clearly distinguishing between the pre-session view and the post-energy flow view, allowing users to better understand the status of their session.

This project also marked the first implementation of JUCR new design language, which ensures a more cohesive and consistent visual identity across the app.

I also created a new notification system to enhance real-time communication, improving both the quality of feedback provided to users and overall transparency. Furthermore, I designed a charging pulse animation to offer a clear and dynamic representation of the charging process.

Building on the System Overview, every possible variation in the charging session flow was considered to ensure a flexible and user-friendly design. The interface adapts dynamically based on different scenarios, providing users with clear guidance at each step.

One key example is the "Start Charging" bottom sheet, which was designed with multiple variations to accommodate different charging conditions:

  • The user does not have an account in the app, so charging cannot be initiated — the button remains inactive.

  • The button is active, allowing the user to proceed with charging.

  • The selected charger appears occupied, but the system still allows the user to attempt charging.

  • The user is already charging at another station through the app, so an inactive button is displayed.

  • The selected charger is "in maintenance," and the button provides information while remaining inactive.

These variations ensure that the UI not only reflects real-time system states but also provides a clear and intuitive experience by aligning visual feedback with backend conditions.

Pulse Animation

The design of JUCR charging stations served as my starting point, inspiring the creation of a pulse animation to represent active charging within the session screens. I first simplified the station’s form, extracting its distinctive curved shape, and then transformed it into a dynamic motion element.

I began prototyping the animation in Figma, leveraging its native tools to refine motion and interaction. To ensure seamless implementation, I converted the animation into a Lottie file, as frontend developers prefer JSON-based animations for their lightweight nature and scalability. Most of the team was already familiar with LottieFiles, making it an efficient choice for smooth integration. Using the LottieFiles plugin, I meticulously fine-tuned the transition from design to development, overcoming technical challenges along the way. The result: a living pulse, a subtle yet powerful visual cue that intuitively conveys the charging process.

Another animation project of mine for the JUCR application can be seen the case study Splash Screen for JUCR.