MyMoney

My Money Profile - Portfolio Iwona Gałązka

Case Study

MyMoney

Analiza UX

Projektowanie UI

Firma
MyMoney

Czas realizacji
3 miesiące

Data ukończenia
Grudzień 2021

Rola w zespole
Projekt był realizowany w trzyosobowym zespole przez okres trzech miesięcy. Wszystkie etapy były realizowane wspólnie poprzez cały okres trwania projektu. Każda z nas posiada równy wkład w powstawanie tego projektu.

My Money Large Viewport - Portfolio Iwona Gałązka

Wprowadzenie

Rozbudowany projekt obejmujący opracowanie narzędzia do kompleksowego zarządzania finansami i efektywnego oszczędzania.

Case study zawiera pełny zakres projektowania od dogłębnego researchu do zaprojektowania w pełni interaktywnego prototypu Responsive Web Design.

Plan działania

1 Research

Desk research
Badania
– Ankieta wstępna
– Ankieta pogłębiona
Wywiady
Persona
Mapa empatii
User Journey Map

2 Ideate

Analiza konkurencji
Analiza rynku
Ideacja
Scenariusz użytkownika
User Flow
Wire Flow

3 Modeling

Prototyp papierowy
Testy
Low-Fidelity Wireframes
Testy
Hi-Fidelity Wireframes
Testy

4 Visual Design

Architektura informacji
User Interface Design
Interaktywny prototyp
Test Eye Tracking
Podsumowanie

1 Research

Desk Research

Desk research polegał na zapoznaniu z rynkiem finansów, kontrolowania finansów i oszczędzania w celu zapoznania z tematem i opracowaniu ankiet dla badanych.

Badania i Wywiady

Na podstawie pierwszego etapu została opracowana ankieta wstępna. W badaniu wzięło udział 26 badanych. Kolejny etap to ankieta pogłębiona, w której również wzięły udział 26 osoby. Na podstawie dwóch ankiet i udzielonych odpowiedzi zostało wybranych 5 osób, które zostały poddane indywidualnym wywiadom na spotkaniu z moderatorem. Wywiad został przeprowadzony na podstawie wcześniej przygotowanego scenariusza. Badany przed wywiadem udzielił również dodatkowych odpowiedzi w ankiecie.

Persona, mapa empatii i UJM

Zgromadzone dane w ankietach i wywiadach posłużyły do opracowania persony, mapy empatii oraz User Journey Map.

Opracowanie persony jest bardzo istotne na kolejnych etapach tworzenia produktu. Dzięki personie wiemy do kogo kierowany jest produkt i każdy następny etap ma odniesienie do persony.

Mapa empatii pozwala uporządkować zebrane dane i skonsolidować je do łatwej formy, za pomocą której szybko jesteśmy w stanie znaleźć potrzebną informację.

User Jaurney Map pozwala w sposób obrazowy pokazać ścieżkę użytkownika względem produktu. Wskazuje Pain pointy, miejsca spotkania użytkownika z produktem oraz kanały komunikacji.

Dorota Pieniążek

„Chciałabym mniej wydawać na głupoty.”

2 Ideate

Analiza konkurencji i rynku

Z pierwszego etapu płynnie przechodzimy do drugiego, który rozpoczynamy od analizy konkurencji oraz analizy rynku. Do szczegółowej analizy zostały wyłonione trzy produkty dostępne na rynku czyli: ING, Monefy oraz Kontomierz. W analizie wykazałyśmy charakterystykę produktu, grupę docelową mocne i słabe strony, ceny/plany taryfowe oraz przewagę rynkową.

Ideacja

Ideacja została przeprowadzona na zasadzie burzy mózgów. Na karteczkach zostały zapisane pomysły dostarczenia rozwiązań problemu określonego na podstawie badań. Po zakończonym procesie myślowym karteczki zostały pogrupowane a grupy nazwane. Na zakończenie, każdy uczestnik ideacji miał możliwość oddania 6 głosów na grupę, która jego zdaniem określa MVP produktu. Zostały wyłonione dwie grupy funkcjonalności czyli monitorowanie finansów i oszczędzanie jako MVP produktu.

Scenariusz użytkownika

Następnie został opracowany scenariusz użytkownika, który pozwala w prosty sposób zobrazować jak persona będzie korzystała z produktu, kiedy będzie go wykorzystywać i jak poprawi on komfort życia persony.

User flow

User flow został stworzony aby zobrazować ścieżkę użytkownika, którą musi pokonać w produkcie aby osiągnąć założony cel.

Wire flow

Wire flow został opracowany na podstawie user flow, natomiast w tym etapie widzimy drogę użytkownika pokazaną na ekranach produktu.

3 Modeling

Prototyp papierowy

Po zakończonym drugim etapie, trzeci rozpoczęłyśmy od stworzenia papierowego prototypu produktu. Opracowanie papierowego prototypu jest bardzo ważne na tym etapie ponieważ w szybki sposób można zwalidować zaprojektowane rozwiązania na teście z badanymi.

Low-fidelity wireframe

Prototyp papierowy został zbadany na teście z użytkownikami. Projektowanie ekranów niskiej szczegółowości przebiegało w oparciu o prototyp papierowy z zastosowaniem usprawnień po teście z użytkownikami. Na tym etapie powstało 39 ekranów w widoku large.

Hi-fidelity wireframe

Po przeprowadzonym teście można przejść do projektowania widoku wysoko szczegółowych ekranów z zastosowaniem usprawnień na podstawie testu z użytkownikami. Na tym etapie powstało 46 ekranów w widoku large oraz po dwa ekrany dla widoków small i medium. Interaktywne ekrany następnie zostały poddane testom z użytkownikami na podstawie przygotowanego scenariusza testowego.

My Money Large Viewport Hi Wireframe - Portfolio Iwona Gałązka

4 Visual Design

Po zakończonym etapie modelowania produktu następnie przechodzimy do projektowania wyglądu interfejsu produktu.

Kolorem primary Call to Action została wybrana energetyczna magenta. Kolor nawiązuje do świnki skarbonki, jej wizerunek znalazł się również w logotypie produktu. Kolor secondary Call to Action to granatowy, kolor budzący zaufanie oraz pokazujący wizerunek stabilnej, silnej firmy.

Primary CTA

Energetyczna magenta

Secondary CTA

Spokojny granatowy

Krój pisma wybrany do produktu to Open Sans, bezszeryfowy prosty i czytelny font, W projekcie została zastosowana odmiana Bold oraz Regular.

My Money Large Viewport - Portfolio Iwona Gałązka
My Money Mockup - Portfolio Iwona Gałązka

Interaktywny prototyp

Poniższe nagrania przedstawiają działanie interaktywnego prototypu w całości ostylowanego. Prototyp został przygotowany w pełni interaktywnej formie na widok Large i Small. Produkt został przygotowany z godnie z zasadami Responsive Web Design.

1

Projekt

3

Widoki – Small, Medium, Large

67

Ekranów – Prototyp Large Viewport

Test Eye tracker

Tak przygotowany interaktywny prototyp został poddany testowi za pomocą Eye trackera z trzema badanymi. Przeprowadzenie testu za pomocą urządzenia śledzącego ruch gałki ocznej po ekranie jest niesamowitym doświadczeniem i pokazuje jak użytkownik zachowuje się w produkcje. Testy z zastosowaniem urządzenia są zdecydowanie dokładniejsze i dają więcej danych na temat produktu.

Podsumowanie

Projekt obejmował pełen zakres projektowania UX i UI. Wynikiem tego złożonego procesu jest produkt służący do monitorowania finansów i efektywnego oszczędzania, odpowiadający bolączkom persony. Dzięki ankietą, wywiadom i licznym testom użytkownicy otrzymują produkt, którego potrzebują i będą z niego korzystać ponieważ jego działanie i funkcjonalności są zrozumiałe dla użytkowników.

Poprzedni projekt

Banking App Mockup - Portfolio Iwona Gałązka