Designy aplikacji dla kierowców

Kim jest Klient

Moto Flota jest jednym z liderów w branży zarządzania flotami samochodów. Firma zarządza obecnie ponad 65 tys. pojazdów i współpracuje z rozległą siecią ponad 880 serwisów rozlokowaną na terenie całego kraju.

Cel projektu

Celem projektu było zaprojektowanie aplikacji mobilnej dla kierowców korzystających z samochodów flotowych. Narzędzie miało realnie wspierać użytkowników w codziennym zarządzaniu autem służbowym — upraszczać procesy, skracać czas realizacji obowiązków oraz minimalizować ryzyko pominięcia ważnych terminów.

Aplikacja miała umożliwiać między innymi:

• monitorowanie stanu pojazdu oraz terminów przeglądów,

• szybki i wygodny kontakt z siecią serwisów,

• intuicyjne umawianie wizyt serwisowych,

• zgłaszanie szkód i awarii pojazdu,

• bieżącą kontrolę spraw związanych z użytkowaniem auta flotowego.

Nasza odpowiedzialność obejmowała kompleksowe zaprojektowanie warstwy UX oraz UI aplikacji. W szczególności:

• identyfikacja wszystkich kluczowych scenariuszy użytkownika,

• opracowanie pełnych ścieżek (user flow) obejmujących wszystkie procesy w aplikacji,

• przygotowanie kompletnego zestawu wireframe’ów przedstawiających strukturę i logikę działania systemu,

• stworzenie interaktywnego prototypu umożliwiającego testowanie przepływów i weryfikację założeń,

• zaprojektowanie szczegółowych makiet wszystkich ekranów aplikacji w docelowym standardzie UI.

Rezultat

Efektem prac było przygotowanie kompletnego szkieletu aplikacji, obejmującego:

• zestaw wireframe’ów prezentujących strukturę wszystkich ekranów,

• interaktywny prototyp pokazujący pełne flow działania kluczowych funkcji w różnych scenariuszach użytkownika,

• szczegółowe widoki poszczególnych ekranów w warstwie UI,

• bibliotekę gotowych komponentów umożliwiających dalszy rozwój i spójne wdrażanie projektu.

Powstały materiał stanowił solidną podstawę do kolejnych etapów prac — implementacji, testów oraz wdrożenia aplikacji.

Technologie

• Figma – przygotowanie wireframe’ów, budowa interaktywnego prototypu oraz projekt warstwy UI

• Affinity Designer – opracowanie elementów graficznych i dopracowanie detali wizualnych

• Generator obrazów AI – wsparcie w tworzeniu materiałów koncepcyjnych i ilustracyjnych

Wyzwania

Choć projekt stanowił naturalne rozszerzenie wcześniejszego rozwiązania dla sieci serwisów, aplikacja dla kierowców wymagała zupełnie innego podejścia projektowego. Grupa docelowa, kontekst użycia oraz potrzeby użytkowników znacząco różniły się od poprzedniego produktu.

Interfejs musiał być bardziej nowoczesny, atrakcyjny wizualnie i maksymalnie intuicyjny. Kierowca korzysta z aplikacji często w sytuacjach wymagających szybkiego działania – przy zgłaszaniu szkody, umawianiu wizyty czy sprawdzaniu statusu pojazdu – dlatego kluczowe było ograniczenie liczby kroków, uproszczenie komunikatów i czytelna hierarchia informacji.

Jednocześnie projekt musiał pozostać spójny z istniejącą identyfikacją marki, tak aby nowa aplikacja była rozpoznawalna jako element tego samego ekosystemu produktowego. Wymagało to wyważenia pomiędzy świeżym, nowoczesnym designem a zachowaniem charakterystycznych elementów wizualnych marki.

Istotnym wyzwaniem było również zaprojektowanie interfejsu, który będzie w pełni funkcjonalny na różnych urządzeniach mobilnych – zarówno w środowisku Android, jak i iOS. Konieczne było uwzględnienie różnic systemowych, wzorców nawigacyjnych oraz zachowań użytkowników charakterystycznych dla obu platform.

Proces

Zgodnie z naszym standardem pracy od początku postawiliśmy na bliską, regularną i transparentną współpracę z zespołem Klienta. Celem nie było wyłącznie zaprojektowanie aplikacji, lecz wspólne wypracowanie rozwiązania, które realnie odpowiada na potrzeby kierowców i wspiera ich w codziennym użytkowaniu samochodów flotowych.

Każdy etap projektu realizowany był w podejściu agile. Pracowaliśmy iteracyjnie — w cyklach obejmujących:

• warsztaty strategiczne i doprecyzowanie wymagań,

• projektowanie i prezentację rozwiązań,

• zbieranie feedbacku od Klienta oraz użytkowników docelowych,

• wprowadzanie usprawnień i dopracowanie szczegółów.

Takie podejście pozwoliło na bieżąco weryfikować założenia projektowe, eliminować nieefektywne rozwiązania i systematycznie dopracowywać produkt. Dzięki temu finalny efekt nie był wynikiem jednorazowej koncepcji, lecz świadomie rozwijanym i testowanym rozwiązaniem, które w pełni spełniało oczekiwania klienta.

1. Rozpoznanie potrzeb i analiza wymagań

Projekt rozpoczęliśmy od serii warsztatów z zespołem Klienta. Ich celem było precyzyjne określenie wymagań biznesowych oraz zdefiniowanie problemów, które aplikacja ma realnie rozwiązywać. Na tym etapie zidentyfikowaliśmy również profil użytkownika docelowego — kierowcy korzystającego z samochodu flotowego w codziennej pracy.

Efektem warsztatów był ogólny zarys aplikacji — jej głównych funkcji, priorytetów oraz zakresu odpowiedzialności.

Na podstawie przeprowadzonych analiz wypracowano kluczowe założenia projektowe:

• nowoczesny i atrakcyjny wizualnie interfejs,

• czytelne oraz intuicyjne przebiegi procesów,

• ograniczenie liczby kroków w zadaniach krytycznych,

• maksymalne uproszczenie interakcji przy zachowaniu pełnej funkcjonalności.

Ten etap stanowił fundament dla dalszych prac koncepcyjnych i projektowych.

2. Wireframy i prototypowanie

Na podstawie wspólnie wypracowanych założeń przygotowaliśmy szczegółowy szkielet aplikacji oraz zestaw wireframe’ów przedstawiających strukturę wszystkich ekranów i zależności między nimi. Równolegle powstał interaktywny prototyp odwzorowujący przebieg kluczowych procesów oraz sposób prezentacji treści w aplikacji.

Iteracyjne podejście oraz regularne sesje konsultacyjne z zespołem Klienta pozwoliły systematycznie dopracowywać logikę interfejsu i weryfikować przyjęte rozwiązania. Każda prezentacja była okazją do omówienia przepływów, uproszczenia procesów oraz eliminacji potencjalnych barier w użytkowaniu.

Dzięki interaktywnemu prototypowi Klient mógł już na wczesnym etapie przejść przez wszystkie funkcjonalności aplikacji i przetestować jej działanie w praktyce — jeszcze przed rozpoczęciem prac nad warstwą wizualną.

Pozwoliło to zidentyfikować pełne spektrum scenariuszy użytkownika, w tym sytuacje wyjątkowe oraz potencjalne problemy, które należało uwzględnić i rozwiązać na etapie projektowania UI.

3. Projektowanie UX/UI

Na tym etapie opracowaliśmy kompletną warstwę wizualną aplikacji — od kolorystyki i typografii, przez system komponentów, aż po szczegółowy sposób prezentacji informacji i wprowadzania danych.

$Koncepcje i iteracje

Na początku przygotowaliśmy kilka wstępnych koncepcji wizualnych. Każda z nich została zaprezentowana wraz z uzasadnieniem decyzji projektowych oraz analizą ich wpływu na użyteczność i przebieg procesów.

Po wyborze jednego kierunku przystąpiliśmy do jego systematycznego dopracowywania – rozwijając szczegóły interfejsu, hierarchię informacji oraz sposób interakcji użytkownika z aplikacją

Takie podejście pozwoliło:

• uniknąć pracy nad rozwiązaniami, które nie zostałyby wdrożone,

• na bieżąco reagować na zmiany wymagań,

• szybko identyfikować i eliminować problemy użyteczności.

Każda modyfikacja była świadomą odpowiedzią na konkretną potrzebę użytkownika lub wyzwanie biznesowe.

$Finalna wersja designu

Efektem procesu był spójny, nowoczesny i funkcjonalny interfejs, obejmujący między innymi:

• przejrzysty dashboard prezentujący kluczowe dla użytkownika informacje,

• intuicyjny system umawiania i obsługi wizyt serwisowych,

• jasny i czytelny system powiadomień,

• uproszczony, zrozumiały język komunikatów.

Finalny design nie był kompromisem estetycznym, lecz świadomie zaprojektowanym narzędziem, które:

• wspiera kierowcę w realizacji obowiązków związanych z użytkowaniem samochodu flotowego,

• skraca czas umawiania wizyt w warsztatach,

• ułatwia organizację użytkowania pojazdu,

• upraszcza proces zgłaszania szkód i awarii.

Rezultatem jest interfejs, który nie tylko dobrze wygląda, ale przede wszystkim realnie rozwiązuje problemy użytkowników i usprawnia codzienne korzystanie z auta flotowego.

Rozwój

Przygotowany materiał projektowy stanowił kompletną i uporządkowaną bazę do dalszych etapów realizacji produktu — implementacji, testów oraz finalnego wdrożenia aplikacji.

Dzięki szczegółowo opracowanym makietom, prototypowi oraz bibliotece komponentów zespół deweloperski otrzymał precyzyjne wytyczne dotyczące:

• struktury aplikacji i zależności między ekranami,

• logiki procesów i scenariuszy użytkownika,

• zachowania interfejsu w sytuacjach standardowych i wyjątkowych,

• spójnych zasad wizualnych i systemu komponentów.

Tak przygotowana dokumentacja znacząco ograniczała ryzyko błędów interpretacyjnych na etapie wytwarzania oraz przyspieszała proces implementacji.

Tym samym wypracowany fundament nie był jedynie projektem graficznym, lecz przemyślaną strukturą gotową do dalszego rozwoju produktu cyfrowego.