Finansowa aplikacja mobilna, branding oraz landing page dla Crescent

Klient zgłosił się do 10Clouds, aby uzyskać wsparcie przy tworzeniu MVP finansowej aplikacji, z której będą korzystać przedstawiciele Gen Z. Oprócz aplikacji mobilnej zespół zrealizował branding oraz zaprojektował i wdrożył projekt strony internetowej przy użyciu narzędzia Webflow.

OPIS STUDIUM PRZYPADKU:
Szczegółowe Studium Przypadku jest opisane na Naszym Behance:
oraz na blogu 10Clouds

Punkt wyjścia i wyzwania projektowe:
Kiedy rozpoczęliśmy pracę dla klienta Crescent wiedzieliśmy, że przed nami rozciąga się wielkie wyzwanie. Początkowo produkt miał być platformą do inwestowania w kryptowaluty dla początkujących, ale po zaprojektowaniu makiet klient zdecydował się na pivot, który doprowadził do powstania narzędzia do oszczędzania dla użytkowników Gen Z.
Kolejnym wyzwaniem, z którym się zmierzyliśmy było koordynowanie pracy multidyscyplinarnego zespołu designerów w celu stworzenia spójnego doświadczenia marki, które pasuje do opisu grupy docelowej i voice & tone marki dostarczonego przez klienta.
Mimo napiętego deadline’u, w fazie eksploracji kilka razy zmienialiśmy kierunek designu, ściśle współpracując z klientem.

Egzekucja procesu projektowego:
Projekt Crescent jest kompleksowym projektem, który możemy podzielić na 3 mniejsze podprojekty. Każdy z podprojektów miał nieco inny proces projektowy. Research - wywiady z użytkownikami, benchmarking oraz stworzenie person było zrealizowane po stronie klienta. Testy z użytkownikami również przeprowadził klient.

Nie były to procesy linearne. Często iterowaliśmy oraz wracaliśmy do poprzednich etapów, ale jeśli mielibyśmy naszą pracę “ubrać” w proces to wyglądałby tak:

Branding:
Warsztaty z klientem → Moodboards → Pierwsze szkice logo → Znak → Typografia → Kolory → Visuals i Motion Design

Aplikacja mobilna:
Warsztaty z klientem → Moodboards → Architektura informacji → User flow → Wireframes → UI Design → Design System → Visuals i Motion Design → Testy z użytkownikami → Wprowadzenie zmian → Development

Landing page:
Warsztaty z klientem → Moodboards -> Wireframes → UI Design → Motion Design & Visual Design → Webflow development → Testowanie strony internetowej

Narzędzia oraz frameworki użyte w procesie:
Brainstorming - Miro
Makiety - Figma
Branding - Figma, Adobe Illustrator, Affinity
Visuals - Adobe Illustrator, Affinity, Cinema 4D
Motion design - Cinema 4D + Octane render, After Effects
Zarządzanie projektem - Scrum

Rezultaty procesu projektowego:
Aplikacja Mobilna - Zaprojektowaliśmy i wdrożyliśmy aplikację mobilną, w której znajdują się cztery główne funkcjonalności:

1. Boosts - zwiększenie APY poprzez wykonywanie prostych zadań (np. zaproszenie znajomych do aplikacji).
2. Automatyczne oszczędzanie - ustawianie transakcji cyklicznych oraz zaokrąglanie kwot transakcji i przenoszenie nadwyżek środków na konto oszczędnościowe. Takie metody pozwalają na automatyczne i systematyczne oszczędzanie znaczących kwot, bez wysiłku i planowania wydatków.
3. Social Impact - użytkownicy mają możliwość wyboru jednej organizacji non-profit, której mogą przekazać 1% zaoszczędzonych pieniędzy, co przyczynia się do pomocy potrzebującym.

Design System - stworzenie design systemu było kluczowym zadaniem w projekcie. Pomogło przede wszystkim zachować spójność wizualną ekosystemu oraz zmniejszyć koszty developmentu.
Branding - logo, znak, materiały graficzne.
Landing Page - Głównym celem landing page było zachęcenie użytkowników do zapoznania się z funkcjonalnościami aplikacji oraz zapisanie do listy oczekujących. Powstała strona jest bardzo angażująca, przepełniona animacjami 3D oraz ilustracjami. Jest to celowe działanie, które ma odpowiedzieć na potrzeby użytkowników Gen Z, do których kierowany jest produkt.


Lessons Learned:
Zaangażowanie multidyscyplinarnego zespołu przynosi świetne rezultaty, ponieważ każdy wnosi inne kompetencje do projektu. Niemniej jednak wymaga to częstych synchronizacji z zespołem (nawet kilka w ciągu dnia) oraz koordynacji prac tak, aby każdy był na bieżąco ze zmieniającymi się założeniami oraz wymaganiami klienta.
Przed przystąpieniem do tworzenia ilustracji powinniśmy w pierwszej kolejności stworzyć wytyczne dla zestawu ilustracji, które powinny się znaleźć w aplikacji mobilnej i na landing page. Stworzyliśmy te wytyczne za późno, po zorientowaniu się, że dwie ilustracje nie pasują do reszty. Straciliśmy także cenny czas, a deadline zbliżał się wielkimi krokami. Po utworzeniu takich wytycznych i naprawieniu niepasujących ilustracji późniejsze prace poszły szybciej i bez problemu osiągnęliśmy oczekiwaną spójność w projekcie.
Faza eksploracji (moodboardy, szukanie odpowiedniego kierunku designu) trwała dłużej niż zakładaliśmy w estymacji. W przyszłych projektach będziemy zakładać większy “bufor”.

Crescent był jednym z nielicznych projektów w 10Clouds, do którego był zaangażowany multidyscyplinarny zespół designerów posiadający kompetencje w obszarze: Product Design, Illustration, Motion Design, Webflow Development. Dzięki połączeniu powyższych kompetencji powstał wysokiej jakości projekt, z którego klient jest bardzo zadowolony.