Rezultaty

• Kompleksowy UI Design z dedykowanym 
Design Systemem opartym na Google Material Design 2 z dokumentacją developerską.
• Identyfikacja wizualna spójna z interfejsem strony i aplikacji.
• Wieloplatformowy prototyp dla środowiska web, systemu Android i iOS.
• Zwiększenie intuicyjności interfejsu poprzez przeprowadzenie testów użyteczności.
• Opracowanie person i ścieżek użytkownika umożliwiła zespołowi projektowemu lepiej zrozumieć potrzeby i zachowania odbiorców.
• Budowa strategii treści dla zespołu projektowego ułatwiła tworzenie contentu dla aplikacji.

Kontekst i cel projektu

Zespół Trainy.app zwrócił się do mnie z prośbą o stworzenie brandingu i projektu UX i UI dla aplikacji umożliwiającej rezerwację treningów z trenerami personalnymi. Projekt znajdował się w początkowej fazie i zawierał wstępny brief opisujący kluczowe funkcjonalności oraz wymagania technologiczne.

W ramach oczekiwań było opracowanie aplikacji mobilnej i webowej, która zapewniłaby użytkownikom prosty dostęp i wybór trenerów, a także umożliwiła trenerom oferowanie swoich usług i zarządzanie treningami. Aplikacja miała wspierać komunikację pomiędzy trenerem a klientem, obsługę płatności poprzez Stripe oraz zmianę terminu treningu.

Odbiorcy docelowi

Zróżnicowane grupy użytkowników związane z rynkiem fitness i zdrowia. Młodzi aktywni entuzjaści sportu to osoby zafascynowane nowymi trendami w treningach, takimi jak Crossfit czy kalistenika. Kobiety dbające o wygląd i zdrowie szukające treningów i diet, a także dopasowania usług do ich indywidualnych potrzeb, takich jak ćwiczenia dla matek. Mężczyźni, którzy chcą poprawić siłę, przygotować się do wyzwań lub zawodów sportowych, ceniący intensywność i konkretność treningów.

Osoby dojrzałe i seniorzy z potrzebą rehabilitacji szukają bezpiecznych, indywidualnych programów skoncentrowanych na poprawie zdrowia i leczeniu schorzeń. Z kolei rodzice szukający trenerów dla dzieci pragną, aby ich dzieci rozwijały zdrowe nawyki i sprawność fizyczną.

Profesjonaliści, tacy jak trenerzy siłowi, instruktorzy jogi, fizjoterapeuci i dietetycy, również należą do odbiorców, gdyż korzystają z narzędzi wspierających ich pracę, umożliwiających zarządzanie klientami, harmonogramami oraz dostarczanie wysokiej jakości usług.

Wyzwania

Wieloplatformowość

Równoczesne zaprojektowanie aplikacji mobilnej 
i webowej, z wykorzystaniem technologii hybrydowej, umożliwiającej działanie aplikacji zarówno na Androidzie, jak i iOS, wymagało uwzględnienia szczegółowych wytycznych obu systemów operacyjnych.

Dwie strony aplikacji

Dodatkowym wyzwaniem było stworzenie płynnego, dwustronnego doświadczenia użytkownika, dostosowanego zarówno do potrzeb klientów, jak i trenerów personalnych, aby każda z grup mogła w pełni wykorzystać możliwości aplikacji. Wiązało się to z koniecznością stworzenia wielu komponentów i ekranów oraz ustanowienia efektywnego systemu zarządzania nimi, który obejmował przyjmowanie uwag, nanoszenie poprawek oraz dbanie o spójność i aktualność projektu. Zarówno sam zakres projektowy, jak i organizacja tego procesu stanowiły dla mnie złożone wyzwanie.

Podejście projektowe

Strategia UX

Zasugerowałam zespołowi zdefiniowanie funkcji aplikacji, opierając decyzje projektowe na badaniach i warsztatach UX, aby lepiej dopasować je do potrzeb użytkowników.

Design System

Zaproponowałam wykorzystanie systemu Google Material Design 2, który łatwo dostosować do stron internetowych oraz aplikacji mobilnych na iOS i Android. W tym celu posłużyłam się gotowym zestawem komponentów dla Figmy, opartym na bibliotece React, umożliwiającym prostą edycję i personalizację. Na bazie tego zestawu stworzyłam spersonalizowany Design System Trainy.app, dopasowując kolory, typografię, styl zdjęć oraz ikon, aby zapewnić spójność z identyfikacją wizualną marki i wyróżnić aplikację na rynku.

Design System Trainy.app zbudowałam wykorzystując metodologię Atomic Design. Polega na budowaniu interfejsów z małych, prostych elementów (jak „atomy”), które łączą się w większe części (jak „molekuły” i „organizmy”), aż po gotowe, kompleksowe strony – dzięki temu interfejsy są spójne i łatwe do wdrożenia i skalowania (https://atomicdesign.bradfrost.com/chapter-2/).

Analiza konkurencji

Analiza konkurencji pozwoliła mi zidentyfikować najlepsze praktyki oraz błędy w ścieżkach użytkowników stosowane przez inne firmy, co miało pomóc w uniknięciu typowych pułapek projektowych. Wyniki omówiłam z zespołem Trainy.app.

W ramach analizy wybrałam 3-5 konkurentów z usług sportowych oraz z obszaru konkurencji niebezpośredniej, które także mogą posłużyć za inspiracje projektowe.

UX research: rynek i odbiorcy

W fazie badań przeprowadziłam analizę danych zastanych, obejmującą raporty i statystyki dotyczące rynku pracy trenerów personalnych oraz oczekiwań ich klientów. Dzięki temu uzyskałam wgląd w specyfikę rynku, co pozwoliło mi zidentyfikować kluczowe potrzeby i problemy zarówno trenerów, jak i ich klientów.

Definiowanie odbiorców

Na podstawie przeprowadzonych badań stworzyłam protopersony, które pozwoliły mi zebrać i usystematyzować wiedzę o użytkownikach w formie, która pomaga w dalszym definiowaniu funkcji aplikacji.

Następnie zdefiniowałam mapy empatii, które pomagają w identyfikacji dalszych pytań i priorytetów dla funkcji. Dzięki temu podejściu funkcje wynikają z potrzeb, motywacji i obaw odbiorców.

Kluczowe hipotezy

Na podstawie analizy danych z desk research zdefiniowałam poniższe hipotezy. Ich celem jest dopasowanie funkcjonalności projektowanego produktu do rzeczywistych potrzeb użytkowników, co pozwoli na skuteczniejsze rozwiązanie ich problemów i zwiększenie wartości oferowanych usług.

Scenariusze użytkowników

Aby lepiej zrozumieć potrzeby użytkowników, opracowałam hipotetyczne scenariusze opisujące sposób, w jaki odbiorcy mogliby korzystać z aplikacji. Scenariusze te pozwoliły zidentyfikować kluczowe korzyści, które użytkownicy mogliby osiągnąć dzięki aplikacji, a także problemy, które aplikacja ma za zadanie rozwiązać.

Definiowanie user flow na podstawie korzyści

Diagramy user flow

Następnie stworzyłam diagramy przedstawiające ścieżki użytkownika, które ilustrują kroki niezbędne do osiągnięcia wybranych celów.

Kontakt z klientem. Ścieżka użytkownika z poszczególnymi krokami.

Zakładanie konta trenera. Ścieżka użytkownika z poszczególnymi krokami.

Strategia treści

Po omówieniu funkcjonalności na stronie przeszłam do budowy architektury informacji. Przeprowadziłam klasyfikację oraz zdefiniowałam różne rodzaje treści. Zdefiniowałam kategorie wyszukiwania, sortowania i filtrowania, co miało zapewnić użytkownikom łatwy dostęp do potrzebnych informacji. Opracowanie obejmowało m.in. stworzenie mapy witryny, identyfikację kluczowych kategorii treści oraz utworzenie środowiska w Google Drive do uzupełniania brakujących elementów.

Sitemap (mapa strony) to lista wszystkich stron i podstron w formie diagramu, która pomaga użytkownikom i wyszukiwarkom zrozumieć organizację treści.

Branding

Przed rozpoczęciem etapu projektowania interfejsu aplikacji (UI Design) zaprojektowałam podstawową identyfikację wizualną, zawierającą m.in. logotyp, paletę kolorystyczną i ikonę aplikacji.

Logotyp zaprojektowałam z wykorzystaniem fontu Resolve Sans w odmianie Extra Bold Extra Italic. Dodatkowo zostały dopasowane odstępy pomiędzy poszczególnymi parami liter, aby znaki nie wydawały się zbyt rozsunięte od siebie.

UI Design

W pierwszym etapie przygotowałam makiety przyszłej aplikacji (wireframes). Miało to na celu ustalenie hierarchii treści oraz rozmieszczenia wszystkich elementów na ekranie, co pozwoliło na wczesne uzgodnienie struktury i funkcjonalności aplikacji.

Dzięki dość szczegółowym makietom mogłam doprecyzować wygląd i zawartość każdego elementu interfejsu, co minimalizowało ryzyko zmian w późniejszych fazach projektu.

Szczegółowe makiety wykorzystałam do prototypowania i przetestowania kluczowych interakcji, np. sposobu wyszukiwania trenera.

Testy z użytkownikami

Po stworzeniu prototypów makiet przeprowadziłam testy użyteczności kluczowych funkcji, opracowując dla nich krótkie scenariusze. Po każdym kroku użytkownicy oceniali efektywność w skali od 1 do 5. Wszystkie testy były nagrywane, co pozwoliło zespołowi na analizę zachowań użytkowników. W testach wzięło udział po 20 osób z każdej grupy docelowej. Wyniki pokazały, że użytkownicy płynnie przechodzili przez złożone procesy, takie jak zakładanie konta trenera i rezerwacja treningu, jednak wskazano na potrzebę poprawy nawigacji w obrębie konta użytkownika oraz zwiększenia czytelności ikon.

Wnioski

• Projekt pokazał wyzwania związane ze złożonością platform i funkcji, pomimo planowanego podejścia budowy MVP (Minimum Viable Project).  Wprowadzenie metodologii Lean UX mogłoby pozwolić skoncentrować się na priorytetowych funkcjonalnościach, które można by testować iteracyjnie, co mogłoby zmniejszyć początkowe ryzyko i skupić zasoby na dopracowaniu kluczowych aspektów.
• Przeprowadzenie testów na etapie prototypu pozwoliło zidentyfikować kluczowe problemy związane z nawigacją i czytelnością interfejsu, co wskazuje na wagę iteracyjnych testów.
• Zaangażowanie wszystkich osób związanych z projektem, w tym developerów, jest ważne już na wczesnych etapach. Wysokie koszty wdrożenia developerskiego doprowadziły ostatecznie do decyzji o zastosowaniu rozwiązania no-code, które okazało się niesatysfakcjonujące. To doświadczenie uwydatniło, jak istotne jest wcześniejsze zrozumienie kosztów i ograniczeń technologicznych, aby lepiej dopasować technologię do zasobów oraz potrzeb projektu.