The new Volvo Cars app on three phones with statistics and service cards

Volvo Cars AppUX/UI Redesign Concept

Date:: September 2023
Tools:: Figma, Adobe Photoshop
Materials:: Official Volvo Cars car photography, © Volvo Cars
Scope:: Product Concept
UX Architecture
UI Design & Style Guide
Interaction Design

Concept:

A UX/UI redesign concept for the Volvo Cars App, built around the electrification of vehicles. It rethinks the visual layer and the UX of the app, so that charging status, range and the most frequently used vehicle functions are always at hand.

Created in one week – from research and a workshop, through UX architecture and a UI style guide, to the final presentation – the concept covers 6 key application screens and 8 supplementary modules, including modal bottom sheets for quick actions and an energy-saving dark mode.

This was an independent design concept, not a commissioned or released Volvo product. Its outcome is therefore a documented design direction and prototype scope; no production usage or business impact was measured.

The new dashboard next to the current Volvo Cars app (My XC60)

01. The concept

The conceptof rebuilding the UX/UIof the Volvo Cars App

Electrification of vehicles as the leading theme.

Visual UI change in line with electrification
Rebuilding elements and UX layer
Facilitating access to the most important functions
Introduction of dark mode

6: Key application screens
8: Supplementary modules

02. Process

Ready in one week. How?

Efficient implementation of the conceptual design helps to explore and visualize the idea. Fast product delivery is the greatest value for many startups.

Week timeline: day 1 research and workshop, days 2–3 UX architecture, days 4–6 style guide and UI, day 7 presentation

Volvo XC90 T8 from above in the new app interface with ranges

03. Dashboard

You want to come back here.Welcome new dashboard.

Our biggest challenge, because this is where the user lands for the first time.

One of our main assumptions was to create a dashboard from which the user will have access to all the most frequently used functions of the vehicle.

At the same time, we aimed to create a UI that reacts to the change of the charging status of the car.

Dashboard in two states: charging and standby, with feature descriptions

04. Modal bottom sheets

Less is more.The most important information at hand.

Modal bottom sheets are our solution for quick access to the most important functionalities, while maintaining the possibility of quick return without losing the context.

Modal sheets: tire pressure, range details, location and charger

05. Dark Mode

Dark Mode, because we know how importantenergy consumption is.

“Changing from light to dark mode reduces the phone's power consumption by 42% at 100% screen brightness.”

The app in dark mode: menu, dashboard and range details

Map with the car’s location and navigation, and a connected charger card

06. Summary and credits

Thanks for your attention – let’scatch up soon

Date:: September 2023
Project:: UX/UI Redesign Concept
Tools:: Figma, Adobe Photoshop
Scope:: Product Concept
UX Architecture
UI Design & Style Guide
Interaction Design

More case studies

Tigers.pl

Polish digital agency with a bold, community-driven identity, redesigned to translate its transformation and Asian-inspired branding into a distinctive digital experience.

CopyCase

Cloud-based file hosting platform designed for storing, managing and accessing files through a simple and intuitive web application.