Nowa aplikacja Volvo Cars na trzech telefonach z kartami statystyk i serwisu

Volvo Cars App — koncept nowego UX/UI

Data:: Wrzesień 2023
Narzędzia:: Figma, Adobe Photoshop
Materiały:: Oficjalne zdjęcia samochodów Volvo Cars, © Volvo Cars
Zakres:: Koncepcja produktu
Architektura UX
Projekt UI i wytyczne wizualne
Projektowanie interakcji

Koncepcja:

Koncept przebudowy UX/UI Volvo Cars App, oparty na elektryfikacji samochodów. Na nowo porządkuje warstwę wizualną i UX aplikacji, aby status ładowania, zasięg i najczęściej używane funkcje pojazdu były zawsze pod ręką.

Powstał w tydzień — od analizy i warsztatu, przez architekturę UX i wytyczne UI, po finalną prezentację. Obejmuje 6 kluczowych ekranów oraz 8 dodatkowych modułów, w tym panele modal bottom sheet do szybkich działań i tryb ciemny uwzględniający zużycie energii.

To niezależna koncepcja projektowa, a nie produkt zlecony ani wdrożony przez Volvo. Jej rezultatem jest udokumentowany kierunek projektu i zakres prototypu; wykorzystanie produkcyjne ani wpływ biznesowy nie były mierzone.

Nowy ekran główny obok obecnej aplikacji Volvo Cars (My XC60)

01. Koncepcja

Koncepcja przebudowy UX/UI Volvo Cars App

Elektryfikacja samochodów jako główny motyw.

Zmiana wizualna UI spójna z elektryfikacją
Przebudowa elementów i warstwy UX
Łatwiejszy dostęp do najważniejszych funkcji
Wprowadzenie trybu ciemnego

6: kluczowych ekranów aplikacji
8: dodatkowych modułów

02. Proces

Gotowe w tydzień. Jak?

Sprawna realizacja projektu koncepcyjnego pozwala szybko zbadać i zwizualizować pomysł. Dla wielu startupów szybkie dostarczenie produktu stanowi szczególną wartość.

Harmonogram tygodnia: dzień 1 research i warsztat, dni 2–3 architektura UX, dni 4–6 style guide i UI, dzień 7 prezentacja

Volvo XC90 T8 z góry w nowym interfejsie aplikacji z zasięgami

03. Ekran główny

Tutaj chce się wracać.Poznaj nowy ekran główny.

To było największe wyzwanie, ponieważ właśnie tutaj użytkownik trafia po raz pierwszy.

Jednym z głównych założeń było stworzenie ekranu zapewniającego dostęp do wszystkich najczęściej używanych funkcji pojazdu.

Jednocześnie zależało nam na interfejsie reagującym na zmianę statusu ładowania samochodu.

Dashboard w dwóch stanach: ładowanie i czuwanie, z opisem funkcji

04. Panele modal bottom sheet

Mniej znaczy więcej.Najważniejsze informacje pod ręką.

Panele modal bottom sheet zapewniają szybki dostęp do najważniejszych funkcji, pozwalając łatwo wrócić do poprzedniego widoku bez utraty kontekstu.

Arkusze modalne: ciśnienie w oponach, szczegóły zasięgu, lokalizacja i ładowarka

05. Tryb ciemny

Tryb ciemny — bo wiemy, jak ważne jest zużycie energii.

„Zmiana trybu jasnego na ciemny zmniejsza zużycie energii telefonu o 42% przy jasności ekranu ustawionej na 100%”.

Aplikacja w trybie ciemnym: menu, ekran główny i szczegóły zasięgu

Mapa z lokalizacją samochodu i nawigacją oraz karta podłączonej ładowarki

06. Podsumowanie i autorzy

Dzięki za Twój czas — do usłyszenia!

Data:: Wrzesień 2023
Projekt:: Koncepcja nowego UX/UI
Narzędzia:: Figma, Adobe Photoshop
Zakres:: Koncepcja produktu
Architektura UX
Projekt UI i wytyczne wizualne
Projektowanie interakcji

Więcej realizacji

Poprzednie

Tigers.pl

Polska agencja digital o wyrazistej tożsamości i silnej społeczności. Nowy projekt przekłada jej transformację oraz branding inspirowany Azją na charakterystyczne doświadczenie cyfrowe.

Następne

CopyCase

Platforma do przechowywania plików w chmurze, umożliwiająca ich organizowanie i dostęp przez prostą, intuicyjną aplikację webową.