EV Route Planner Mobile App
The EV Route Planner enables users to plan electric vehicle journeys on their smartphone and send them directly to their vehicle. Once inside the car, the route is already available in the navigation system, allowing the journey to start seamlessly.
Developed by CARIAD for the Volkswagen Group, the app was rolled out across Audi, Volkswagen, and CUPRA. Built on a white-label architecture and a fully tokenized design system, it enabled efficient brand customization while maintaining a consistent feature set and user experience.
By combining expertise from multiple brands, the project reduced redundant development efforts and established a scalable foundation for future cross-brand products within the Volkswagen Group.
The following section highlights key features using Volkswagen screens, followed by Audi and CUPRA implementations that demonstrate how the shared product framework was adapted to each brand.
Starting Point
The project was built upon Audi’s existing charging and route-planning application. Users could search for charging stations and other points of interest, access detailed location information, and plan multi-stop routes with automatically calculated charging stops.
While the app offered a strong functional foundation, several usability challenges impacted the overall experience. Important charging information was hidden behind secondary screens, filtering options were limited, and route-planning settings provided little flexibility for individual preferences.
These limitations presented an opportunity to rethink the experience from the ground up, creating a more intuitive, transparent, and user-centered EV planning solution with greater control and customization for drivers.
Same same but different
The shown screens showcase CARIAD’s white-label foundation and its implementations for Volkswagen, CUPRA, and Audi. While all three apps share the same product, feature set, and design system, each brand maintains its own visual identity through tailored layouts, components, and styling.
Research showed that users across different brands have remarkably similar expectations when it comes to core digital experiences. Regardless of whether they drive a Volkswagen, CUPRA, Audi, or a premium luxury vehicle, users value intuitive navigation, efficient workflows, and easy access to relevant information. As a result, the focus was placed on creating a consistent and highly usable product experience rather than differentiating core functionality between brands.
Beyond branding, special attention was given to usability and ergonomics. Interactive elements were positioned within comfortable thumb reach to support one-handed usage, while the information architecture was refined to ensure that information appears at the appropriate level of the experience. Frequently needed information was moved closer to the point of decision, improving discoverability and reducing unnecessary interactions.
User research and continuous usability testing played a key role throughout the project, helping validate design decisions and ensuring that the experience was shaped by real user needs and behaviors.
Search
Users can access the search experience either by expanding the drawer and selecting the search field or by tapping the search field directly. Expanding the drawer first allows users to browse more suggestions before the keyboard appears.
After entering a search query, matching results are displayed in a list. Depending on the destination type, relevant information such as opening hours, ratings, or charging power is surfaced directly within the results, helping users make faster decisions.
Selected results can also be displayed directly on the map through the “Show on Map” action. This provides additional geographic context while keeping the result list accessible, allowing users to seamlessly switch between list-based and map-based exploration.
Map Filter
Selecting a primary filter reveals additional options related to that category. In this example, the Charging filter is active, exposing charging-specific filters that help users refine their search results. Active filters can be removed with a single tap.
Shown next to the activated filter is the “All Filters” chip, which provides access to the complete filtering experience shown on the right. Alongside it, frequently used filters are surfaced directly on the first level. Moving these high-frequency actions closer to the user reduces interaction costs and eliminates an additional navigation step for common tasks.
For more advanced customization, users can define their preferred charging providers through the “Preferred Operators” section, allowing results to be tailored to their existing subscriptions and personal preferences.
POI View
The screens shown here illustrate the POI experience. On the left, a Charging Point of Interest (CPOI) is displayed. Users can quickly assess key information such as charging power, available connector types, ratings, distance, travel time, and partner badges.
In this example, the charging station is part of the We Charge network, allowing users with an active We Charge contract to charge at this location. Additional benefits may be available through partner programs such as ARAL Pulse and selected Volkswagen Group partners.
Alternative charging stations are displayed on the map and differentiated through color coding. Green indicates available chargers, red indicates that all chargers are occupied, and grey is used when live availability data is not available. Availability indicators provide a quick overview of free versus total charging points.
The screen on the right shows the expanded POI view, where users can access additional details. For charging stations, this includes information such as pricing, charging capabilities, and other relevant charging-related data.
Route Calculation
These screens showcase the route planning experience. Users receive an overview of the planned journey, including start and destination, charging stops, charging duration, alternative routes, and the expected State of Charge (SoC) at key milestones. Routes can be edited, customized through route settings, or sent directly to the vehicle.
Expanding the drawer reveals a detailed route timeline with all journey milestones, charging sessions, travel times, arrival estimates, and charging costs. Color coding and icons provide additional context, such as traffic conditions and route status.
The route editing experience, shown on the right, allows users to add stopovers and define departure or arrival times. Future iterations will further increase flexibility by enabling users to replace suggested charging stops directly from the map.
Route Options
These screens showcase the route settings, which are organized into four categories to balance flexibility and ease of use.
The Charge Levels section allows users to define their preferred State of Charge (SoC) at departure, charging stops, and destination, reflecting different comfort and safety preferences. Under Charging Stations, users can select preferred charging providers and enable features such as Plug & Charge. Frequently used options are surfaced on the first level, while additional providers can be accessed through a secondary view.
Most options within the Avoid Along the Route category are self-explanatory. However, some features may be less familiar in certain regions. Examples include HOV lanes (reserved for vehicles with multiple occupants), Car Trains(rail services transporting vehicles), and ETC (Electronic Toll Collection systems).
Search
These video showcase the current Audi search experience. Search results are displayed in a structured list and can simultaneously be visualized on the map, allowing users to explore locations geographically without losing access to the result list.
Zoom
A significant part of the design process focused on balancing zoom levels and information density. As shown below, CPOIs adapt their appearance based on the current zoom level. Essential information is prioritized at lower zoom levels, while additional details are progressively revealed as users zoom in and more screen space becomes available.
Filter
This video demonstrates the filtering experience and how filters are applied across both the primary and secondary filter levels, enabling users to quickly refine search results while still providing access to more advanced filtering options.
Route Calculation
This video showcases the route calculation experience alongside the corresponding route settings, demonstrating how users can plan, customize, and optimize their journeys.
CUPRA Implementation
This video showcases the CUPRA implementation of the product. While certain layouts and visual details differ, the underlying experience, functionality, and core user flows remain consistent across brands.