Szukasz wybitnych specjalistów od web developmentu, którzy dowiozą projekt?

FITNETE: projekt UX/UI, ścieżki użytkownika i animacje dla mobilnej aplikacji fitness

Jak w sześć tygodni stworzyliśmy ponad 200 animacji oraz znakomity projekt UX i ścieżki użytkownika dla aplikacji w React Native.

W skrócie:

Klient

Rierra

Kraj

Niemcy
Zakres projektu i technologie

Projektowanie UX/UI, projektowanie aplikacji mobilnych, animacja, branding, projektowanie ilustracji

Branża

Zdrowie, media i rozrywka
Skład zespołu

1 Head of Design, 2 animatorów, 1 project manager

Czas trwania

5 miesięcy

Fitnete to aplikacja mobilna na iOS i Androida, napisana w React Native. Pomaga ćwiczyć: można w niej wybrać dowolną partię mięśni i poziom zaawansowania. Zamiast typowych filmów wszystkie ćwiczenia są animowane, więc użytkowników nie onieśmielają „wyrzeźbione na siłowni” sylwetki trenerów.

Wyzwanie:

Klient poprosił nas o zaprojektowanie aplikacji fitness na iOS i Androida dla osób, które mają jeszcze niewielkie doświadczenie z fitnessem i treningiem. Miała mieć swobodny, przyjazny ton i nie onieśmielać użytkowników, którzy dopiero zaczynają regularnie ćwiczyć.

Rynek jest dość nasycony, więc aplikacja musiała być wyjątkowa, żeby wyróżnić się z tłumu.

Klient miał na to pomysł: zrezygnować z filmów i pokazywać animowane sylwetki kobiet i mężczyzn. Bez prawdziwych ludzi na ekranie użytkownicy mieli skupiać się na samym ruchu, a nie na świetnie wyglądających ciałach trenerów. Taki widok często irytuje początkujących.

Część filmów z ćwiczeniami przekazał nam zespół Fitnete. Naszym zadaniem było odtworzyć te ćwiczenia w formie animacji i zaproponować nowe.

Proces:

Pracę zaczęliśmy od warsztatu designerskiego i analizy UX. Gdy mieliśmy już wszystkie dane, przygotowaliśmy w Sketchu wireframe'y i interaktywne prototypy.

Aplikacja miała być dość złożona (ponad 50 ekranów i 200 animacji), więc wprowadziliśmy własny proces adaptacji design systemu. Bardzo nam to pomogło: kolejne ekrany powstawały spójnie i bez przestojów, mimo zmian w brandingu.

Zaproponowaliśmy też nową ścieżkę rejestracji, która uwzględnia wzrost, wagę, dietę i partie ciała użytkownika.

Głównym wyzwaniem było stworzenie ponad 200 animacji. Nastrój aplikacji ustaliliśmy już na wczesnym etapie prac nad UI, więc wiedzieliśmy, jakiego eksperta od animacji szukać w naszej sieci specjalistów.

Gdy taki ekspert dołączył do projektu, zaczęliśmy tworzyć animacje w After Effects. Punktem wyjścia były nagrania wideo od zespołu Fitnete. Animowane postacie szybko wbudowaliśmy w kompletny, działający moduł, który uczy poprawnej techniki ćwiczeń.

Żeby aplikacja wyróżniła się na tle konkurencji, zaproponowaliśmy zestaw usprawnień brandingowych, które i tak były w planach. Praca szła bardzo sprawnie, więc mogliśmy podjąć się tego dodatkowego zadania i mimo to oddać cały design w pierwotnym terminie.

Na starcie nie było gotowego brandingu. Wiedzieliśmy więc, że solidna struktura komponentów w prototypowanym design systemie pozwoli nam szybko wprowadzać zmiany w kolorach, krojach pisma i strukturze atomic design, kiedy dostaniemy ostateczną identyfikację wizualną.

Adam Kozłowski

Head of Design w Ideamotive

Rezultat:

Gdy skończyliśmy projektowanie, zespół Fitnete mógł od razu zabrać się do programowania.

Przekazaliśmy nie tylko ścieżki użytkownika, ale też wszystkie potrzebne ekrany i animacje ćwiczeń, czyli to, co najbardziej wyróżnia tę aplikację.

Wzięliśmy też na siebie dodatkową pracę: zadbaliśmy o branding aplikacji, żeby mogła konkurować na zatłoczonym rynku.

Aplikacja jest już dostępna na Androida i iOS.

200+ animacji
50+ ekranów

Przy minimalnych wskazówkach potrafili zebrać wiedzę o konkurencji i znaleźć przykłady prac, które dobrze pasowały do naszego produktu. Rozumieją tę branżę i poruszają się w niej tak, by stworzyć projekt, który naprawdę się wyróżnia. Mimo mocno nasyconego rynku dowieźli kreatywne rozwiązania, jakich wcześniej nie widziałem.

Adam Casole-Buchanan

Prezes, Rierra