Skip to main content

EV Charging Mobile App

Led end-to-end design of an EV charging mobile app, improving real-time visibility and simplifying complex workflows so drivers and operators can make faster, more confident charging decisions.

Mobile UI/UX
Data Visualization
Accessibility
EV Charging Mobile App

Background

Synop is an EV charge management platform that helps commercial fleets navigate the complex shift to electric vehicles—bringing charger management, real-time telematics, energy optimization, and payment workflows into a single platform.

While the desktop experience gave operators clear visibility and control, drivers in the field were left with scattered instructions, limited insight into charging progress, and no reliable way to resolve issues on the go. As customer needs grew, it became clear that fleets required a mobile experience designed specifically for drivers moving between depots, routes, and home-charging scenarios.

Role and responsibilities

I led the design of Synop’s EV charging mobile app beginning in Q2 2025, partnering closely with product and customer support to ensure the experience aligned with real driver needs and product goals. The app was also a contractual requirement for a major EU customer, which meant every part of the experience needed to meet strict WCAG accessibility standards for mobile.

My work spanned the full design lifecycle: conducting user research, facilitating brainstorming sessions, mapping flows, sketching and wireframing, building prototypes, defining final UI specifications, supporting testing, and shaping the launch strategy. The result was a mobile experience built for clarity, reliability, and accessibility from day one.

Requirements

  • Start and manage a charge session confidently.
  • Provide real-time visibility into spending and charger usage.
  • Represent charger details clearly and accurately.
  • Meet strict WCAG 2.1 AA accessibility requirements, legally required for the EU market.

Design Process

1

Competitor Audit

I conducted a competitor analysis of leading EV charging apps, reviewing map interactions, charger availability, pricing, session flows, and accessibility. Across the market, most apps overloaded users with technical details, buried pricing, and lacked consistent accessibility. These insights shaped a design approach focused on clarity and ease of use.

2

Internal Insights

Because the app is designed for fleets, I also reviewed customer support tickets, driver pain points, account manager feedback, and engineering/API constraints. This helped clarify what users genuinely needed day-to-day versus what was simply nice to have.

3

Analysis and planning

This phase focused on transforming research into a clear plan. I synthesized user insights, contractual requirements, and technical constraints to define the core use cases and success criteria for the app. From there, I mapped the end-to-end driver journey and created early flows and wireframes to align the team on the interaction model, reduce ambiguity, and validate direction before moving into high-fidelity design.

User Journey Map

Identifying key elements within the user journey: pain points, actions, user thoughts, and opportunities. Then exploring how we can navigate, improve, and build upon them.

User flow for Initiate Charge

Walking through the steps a driver must take to start an instant charge or make a reservation. Identifying potential sticking points and also ways that we could reduce potential errors.

Wireframes for Reservations Flow

Exploring design directions and validating the reservation flow with wireframes before committing to the UI, with the goal of reducing rework for engineering.

4

Design Focus

I redesigned the end-to-end charging experience to make key information clear at every step. On the map, drivers can quickly understand station availability through a high-contrast, color-coded status system, with a swipeable drawer that adapts to sites of any size and surfaces essential charger and connector details. Pricing, often a point of confusion, was simplified with clear labels for speed, connector type, and cost, removing unnecessary jargon and helping drivers make confident decisions.

  • Large progress cards with real-time updates to time, costs, and power.
  • Clear error messages with actionable guidance.
  • Organized history with scannable cost and energy breakdowns.
  • Supporting both drivers and admins to understand usage and spending.

Charging Flow

The designs below show the initiate charging flow. From the map site finder, where the user can select a site and view the details, to the charging in progress screen, where the user can see the charging progress and the estimated time remaining.

Home screen map view
Home screen map view
Site detail page
Site detail page
Plug in and confirm
Plug in and confirm
Loading Screen
Loading Screen
Charge in progress
Charge in progress
Dynamic island notification
Dynamic island notification
Cancel charging
Cancel charging
Charge complete
Charge complete

Reservation Flow

The designs below show the reservation flow. From the start reserve charger screen, where the user can select the date and time of the reservation, to the checkout screen, where the user can confirm the reservation and pay for the charging session.

Start reserve charger first screen
Start Reserve Charger first screen
Select start date calendar selector
Select Start Date Calendar
Select start time field screen
Select Start Time Field
Select start time time selector screen
Select Start Time Selector
Reseve form filled
Reserve Form Filled
Checkout screen with required field
Checkout Screen with Required Field
Checkout screen ready
Checkout Screen Ready
Reservation details screen
Reservation details screen
5

Launch & Outcomes

The app was launched in both the US and EU markets with successful outcomes including:

  • A clear, modern charging experience that supports fleet drivers.
  • Improved transparency for customers tracking charging activity.
  • A flexible design foundation for adding new features over time.
  • A shared accessibility standard adopted by both design and engineering.
0
WCAG compliance
Improving color contrast and visibility
0
Error reduction
Cut number of unclear or dead states
0
Launch Complete
100% of MVP requirements met
0
Reduction in steps
Improved task completion rate

Project lifecycle

I led the end-to-end UI/UX design for this project, building the experience from the ground up. The work moved through two core phases:

1. Discovery & Planning (3 weeks)

  • Defined user needs, constraints, and success criteria
  • Mapped workflows, edge cases, and required states
  • Partnered with product to align scope and priorities

2. Design & Implementation (3 weeks)

  • Delivered high-fidelity designs and detailed interaction specs
  • Collaborated closely with engineering to ensure feasibility and smooth handoff
  • Created accessibility guidelines used across design, development, and QA
  • Updated and extended the design system to support new components

Conclusion & Future Opportunities

This project established a solid foundation for a scalable, accessible, and production-ready charging experience. If I were to continue expanding the product, I would focus on:

  • Integrating route planning to streamline trip-based charging needs
  • Providing more personalized charging recommendations for drivers
  • Delivering deeper session analytics and insights for fleet managers
  • Reducing cognitive load through additional accessibility enhancements
  • Further optimizing map performance for faster, more responsive interactions

Throughout the project, I focused on delivering a clear and consistent experience that provided real value to customers while collaborating closely with product and engineering from ideation through implementation and QA. I defined edge cases, refined interaction patterns, and provided detailed component specifications to remove ambiguity. In addition, I reinforced design patterns by creating reusable components that kept the interface cohesive, scalable, and development-ready.

Presenting designs to company

Presenting designs at company offsite

EV Charging Mobile App | Cathy Villamar