Aplikacja to nie tylko praca nad kodem i doskonalenie umiejętności programowania. To także projektowanie. Nie pokażemy przecież czegoś, co źle wygląda i jest nieużyteczne (szczególnie jak chcemy pracować jako front-end developer). Dziś mam dla Was case study przygotowania strony UXowej Habit Trackera.
Autorką poniższego wpisu jest Zuzanna Mrożewska, która współpracuje ze mną przy Habit Trackerze. Zuzia jest odpowiedzialna za stronę UXową. Początkowo zastanawiałam się, czy nie zająć się tym samodzielnie. Jednak, jak już wielokrotnie podkreślałam, to zupełnie nie moja bajka. Lubię o tym czytać i poszerzać swoją wiedzę, ale nie czuję, żeby moje projekty czy pomysły były faktycznie wystarczające. Dlatego postanowiłam poszukać kogoś, kto również buduje swoje portfolio, z tym iż od strony UXowej. Całą historię poniżej przedstawia Wam Zuzia.
Przypominam, iż pozostałe wpisy z tej serii możecie przeczytać tutaj.
Pewnie zaraz padnie pytanie “Ale gdzie ta aplikacja?”. Otóż, aplikacja jest w trakcie Niestety byłam zmuszona przerwać pracę nad nią przez ilość obowiązków, jakie na mnie ostatnio spadły. A i problemy ze zdrowiem nie pomagały. Teraz już większość projektów na ten rok mam zamkniętą i będę skupiać się na Habit Trackerze. Możecie spodziewać się wpisu z postępu prac. Mam ogólny plan wypuścić wersję demo (taką wersję alfa) do końca roku, zobaczymy, jak to wyjdzie praktyce. Ale wróćmy teraz do tematu dzisiejszego wpisu, czyli jak zaprojektować aplikację, która będzie dla użytkownika użyteczna. Nie jest to takie oczywiste. Oddaję głos Zuzi.
Interesujesz się projektowaniem aplikacji i uczysz się czytając case study napisane przez doświadczonych projektantów? Często jesteśmy pod wrażeniem treści i graficznego sposobu prezentacji ich wniosków. Jednak brakuje w nich opisania sposobu podejmowania podstawowych decyzji. Gdy już się czegoś nauczymy, to nie potrafimy sobie przypomnieć, jak to było gdy tego nie umieliśmy. Dlatego zachęcam do lektury, która pomoże Ci uniknąć moich błędów podczas projektowania Twojej pierwszej aplikacji.
Nazywam się Zuzanna Mrożewska i rozpoczynam karierę jako UX designer. Podczas studiów psychologicznych na Uniwersytecie SWPS uczestniczyłam w module User Experience. Uznałam, iż użyteczność w kontekście nowych technologii jest świetną przestrzenią do połączenia mojego wykształcenia i umiejętności.
Po ukończeniu studiów psychologicznych, zaczęłam samodzielnie uczyć się o interakcji człowiek-komputer, aplikować na staże i uczestniczyć w warszawskich meetupach związanych z tą tematyką. W trakcie nauki doszłam do wniosku, iż szczególnie pasjonuje mnie UX research. Badacz użyteczności zajmuje się przede wszystkim planowaniem, przygotowaniem i prowadzeniem badań jakościowych i ilościowych z użytkownikami. Na pierwszy staż Design Research dostałam się po 4-miesiącach starań.
W międzyczasie robiłam swoje projekty (możecie je zobaczyć tutaj) łączące UX design i UX research – na podstawie własnych pomysłów, Weekly UX design challenges (http://weeklyux.co) albo zadań rekrutacyjnych. Jednak zdawałam sobie sprawę z tego, iż taki sposób działania jest oderwany od ograniczeń realnej pracy, dlatego szukałam okazji do zrealizowania projektu w większym gronie.
Właśnie wtedy natknęłam się na post Joanny w grupie Programuj dziewczyno! na Facebooku. Napisała, iż poszukuje UX designera do współpracy nad niekomercyjną aplikacją Habit Tracker. Z euforią się zgłosiłam.
Doświadczenie w innych obszarach procentuje
Początek projektu
Aplikacja, jak ją pierwszy raz zobaczyłam, wyglądała tak:
Dodatkowo: link do demo
Joanna chciała, żeby Habit Tracker był przejrzysty, estetyczny (nie raził kolorami) i funkcjonalny. Interesowały ją też moje pomysły na temat funkcjonalności aplikacji. Poinformowała mnie, iż zgłosiło się kilka osób chętnych do współpracy i wybierze jedną na podstawie nadesłanej propozycji.
Pierwsze różnice między samodzielną pracą a współpracą z Joanną:
- istniejący projekt z konkretną strukturą (jak bardzo mogę ją zmienić?)
- nie wystarczy “ubrać” istniejącej strony, żeby była użyteczna (w jaki sposób powinnam ją zmienić?)
- motywacja zewnętrzna (ach ta rywalizacja!)
Zrozumienie problemu
Joanna opisała już w tym artykule, dlaczego wybrała temat nawyków. Habit Tracker ma na celu ćwiczenie umiejętności (a nie stworzenie przychodowego biznesu), dlatego wybrała zagadnienie, które jest bardzo popularne, a jednocześnie ważne. Na rynku jest bardzo dużo takich aplikacji. Jak zaprojektować coś co się wyróżnia i wnosi nową jakość?
Najważniejsze pytania jakie sobie zadałam:
Jak stworzyć aplikację, która:
- Efektywnie pomaga w budowaniu nawyków?
- Będzie wyróżniała się na tle wielu innych podobnych aplikacji?
- Będzie miała przystępny, prosty a zarazem zachęcający do korzystania interface?
Czego nie analizowałam?
Celów biznesowych. Na tym etapie moim celem jest pomoc w stworzeniu aplikacji, która będzie niekomercyjnym projektem.
Desk study
Pierwszym krokiem powinno być zgłębienie wiedzy na temat dziedziny projektu. Ja poznałam temat dzięki książce “Siła nawyku” na podstawie której Joanna zaprojektowała Habit Tracker oraz studiom psychologicznym. Dzięki temu, iż specjalizuję się w działaniach łączących nowe technologie i psychologię, udało mi się przeskoczyć ten etap.
W związku z tym od razu zabrałam się do zbadania tematów istniejących aplikacji do nawyków. Zadałam sobie następujące pytania:
- Na jakim aspekcie nawyków te aplikacje się skupiają?
- Co je wyróżnia?
- Jak prezentują się od strony wizualnej?
- Jaki mają branding?
Czasem łamanie zasad jest niezbędne
Propozycja rozwiązania
Zastanawiałam się, co zrobić, żeby moja propozycja została wybrana? Idąc zgodnie z założeniami UX-owymi, powinnam przesłać Joannie prosty prototyp, który będzie można potem iterować. Zdecydowałam się jednak pójść inną drogą – stworzenia zaawansowanego prototypu i brandingu. Chciałam pokazać Joannie wizję Habit Trackera jako produktu budzącego zainteresowanie.
Koncepcja logotypu
Branding nie wchodzi choćby w zakres pracy UX designera. Jednak doszłam do wniosku, iż to najlepiej zobrazuje moją wizję. Wymyśliłam, iż śledzenie nawyków można przedstawić w postaci kropeczek, które tworzą określony kształt. Nasze codzienne nawyki pozwalają nam zrealizować długofalowy cel.
Dzięki desk researchowi widziałam, iż nie jest to powtórzenie już istniejącej koncepcji.
Do ikonki składającej się z kropeczek dodałam font kojarzący się z elegancką produktywnością Caecilia.
Kolorystyka
Tu pamiętałam o wymaganiach Joanny, a jednocześnie zadawałam sobie pytanie o to, jak się wyróżnić spośród istniejących aplikacji? Postawiłam na fiolet – określany jako połączenie stabilności niebieskiego i energii czerwonego – idealnie obrazujący powtarzalne działanie. Dodatkowo liliowy przeze mnie wybrany nie jest popularnym kolorem do takich aplikacji, więc dzięki temu wyróżnia się na tle konkurencji.
Początkowy research
Żeby lepiej zrozumieć użytkowników, postanowiłam przeprowadzić początkowe badanie. Można powiedzieć, iż zastosowałam technikę Insiders Insight nowojorskiej agencji Motivate Design. Insiders Insight zakłada wyjście z ram tradycyjnego UX researchu na rzecz obserwacji i rozmów z ludźmi w ich naturalnym środowisku, przez osoby, które dobrze znają. Dzięki temu badani są bardziej otwarci na dzielenie się swoimi refleksjami i możemy dotrzeć głębokich przemyśleń. W moim przypadku polegało to na rozmowach z przyjaciółmi. Rozmowę prowadziłam zgodnie z wcześniej zaplanowanym scenariuszem i zapisywałam ich odpowiedzi.
Ankieta
Co ci przychodzi na myśl jak słyszysz słowo “nawyk”? / czym według Ciebie jest nawyk?
Twoja relacja z nawykami…
Czy ostatnio nabyłaś nowy nawyk? / Czy pamiętasz sytuację w której zdobyłaś nowy nawyk?
Kiedy?
Jaki?
W jaki sposób?
Co cię zmotywowało?
Ile czasu go wykonujesz?
Co robiłaś jeżeli pojawiały się chwile zwątpienia?
Czy używałaś jakiegoś narzędzia / sposobu które Ci w tym pomogło?
Czy ostatnio pozbyłaś się niechcianego nawyku?
Kiedy?
Jaki?
W jaki sposób?
Co cię zmotywowało?
Ile czasu go wykonujesz?
Co robiłaś jeżeli pojawiały się chwile zwątpienia?
Czy używałaś jakiegoś narzędzia / sposobu które Ci w tym pomogło?
Czy chciałabyś nabyć nowy nawyk? Jaki? Co cię powstrzymuje przed tym?
Czy chciałabyś się pozbyć niechcianego nawyku?
Jakiego?
Co cię przed tym powstrzymuje?
Czy używasz aplikacji do śledzenia nawyków?
Jakiej?
Co w niej Ci się podoba?
Co w niej Ci się nie podoba?
Wyniki
Przeprowadziłam rozmowy z 3 osobami, które szczegółowo odpowiedziały mi na powyższe pytania. Nie zdążyłam jednak na tym etapie przeanalizować szczegółowo tych wyników. Przesłałam Joannie moją propozycję, jak może wyglądać Habit Tracker i kilka slajdów z podsumowaniem moich przemyśleń.
Nie zaczynaj od końca
Landing page i moment zwątpienia
Landing page
Ku mojej euforii Joanna zdecydowała się na moją propozycję. Rozpoczęłyśmy od projektu landing page, który możecie zobaczyć w poście Joanny na FB. Podczas projektowania landing page skupiłam się głównie na informacjach, które chcemy przekazać naszym użytkownikom. Albo raczej, jakie korzyści mogą wyciągnąć dzięki używaniu naszej aplikacji? Tu polecam książkę Jak pisać, żeby chcieli czytać (i kupować).
Największy problem – ilustracji na landing page został rozwiązany przez Joannę, która zaproponowała ilustracje ze strony undraw.co. Jak dla mnie wielką zaletą tych ilustracji, jest to, iż można dowolnie zmieniać ich kolorystykę wpisując kod HTML wybranego koloru. Ich minusem jest mała oryginalność, co sprawia, iż nasz projekt może się nie wyróżniać wystarczająco.
I co dalej?
Mój projekt został wybrany, a przygotowany przeze mnie landing page zbiera lajki. Mały sukces. Do tej pory działałam nieco chaotycznie i nie zawsze zgodnie z założeniami procesu UX-owego, ale wyszło mi to na dobre. Tylko co dalej? W tym momencie stanęło przede mną zadanie stworzenia przejrzystej struktury aplikacji, jednocześnie zgodnej z założeniami Joanny. Tylko jak się do tego zabrać?
Nie znasz odpowiedzi? Zaufaj procesowi
Prototypowanie
Prototypowanie podejście pierwsze
Postanowiłam, iż rozpocznę prototypowanie i w trakcie będę rozwiewać pojawiające się wątpliwości (tak, wiem, doświadczeni UX-owcy na pewno się ze mnie śmieją, ale jak wiadomo, czasami trzeba doświadczyć, żeby uwierzyć). Jako narzędzie do prototypowania wybrałam Figmę, program dostępny online, darmowy i wygodny w użyciu. Zabrałam się za prototypowanie i… pojawiło się tak dużo pytań i wątpliwości, iż nie wiedziałam zupełnie od czego zacząć…
Zrozumiałam, iż muszę się cofnąć, żeby znaleźć odpowiedź na nurtujące mnie pytania i dopiero z gotowymi rozwiązaniami ponownie rozpocząć prototypowanie.
Jak utkniesz – poproś o wsparcie
Jaki problem rozwiązuje?
Analiza potrzeb użytkowników
Wróciłam do przeanalizowania wywiadów, które zrobiłam na samym początku. Wsparł mnie w tym Michał Parkoła, który dzięki swojemu doświadczeniu i wiedzy pomógł mi wyjść z impasu. Przepisaliśmy wywiady do Excela i zaczęliśmy wyciągać z nich wnioski.
Michał stworzył mapę myśli przedstawiającą pojęcia poruszane przez badanych. Razem zrobiliśmy cichą burzę mózgów (najpierw zadaliśmy pytanie, potem indywidualnie zapisaliśmy nasze odpowiedzi w wyznaczonym czasie, a na koniec się nimi podzieliliśmy) na temat najważniejszych problemów naszych użytkowników, a następnie przygotowaliśmy diagram pokrewieństwa.
Czego nie zrobiłam?
Person – ponieważ sama pracuję nad całym procesem UX-owym, to nie mam trudności z przywołaniem różnych zachowań i cech użytkowników. Natomiast jakbym pracowała w większym zespole, to na pewno bym je przygotowała, żeby najważniejsze cechy użytkowników były łatwe do zrozumienia przez współpracowników.
User Flow – to bardzo duży błąd, powinnam go była zrobić przed przygotowaniem papierowego prototypu. Wydawało mi się, iż strona ma tak prostą strukturę, iż nie jest to potrzebne.
Na bieżąco zapisuj pojawiające się pytania, nie możesz odpowiedzieć na wszystkie w tym samym czasie
Prototyp lo-fi i hi-fi
Papierowy prototyp
Na podstawie wniosków z naszych rozmów i badań znalazłam odpowiedzi na podstawowe pytania. W Habit Trackerze skupiamy się tylko na budowaniu dobrych nawyków – priorytetyzacji, urealnieniu i wytworzeniu głębszej motywacji wewnętrznej. Postanowiłam także zmniejszyć ilość informacji na jednym ekranie, w porównaniu z pierwszą wersją.
Prototypowanie podejście drugie
Tym razem poszło mi lepiej. Moim zadaniem było przeniesienie papierowego prototypu do Figmy. Pytania, które się pojawiały podczas tego procesy byłam w stanie rozwiązywać na bieżąco – jaka powinna być odległość między elementami? Jaka wielkość buttonu? Jaki cień? Nie pojawiały się już pytania o sens tego co umieszczam w prototypie – na to już znałam odpowiedzi.
Więcej pomysłów niż czasu – zastanów się, co musi posiadać produkt minimalnie gotowy do wprowadzenia na rynek (MVP)
Badanie prototypu i kolejna iteracja
Badanie prototypu
Wymyśliłam, iż aplikacja będzie zadawała pytania o nawyk, który chce wyrobić w sobie dana osoba. Jak zbadać sensowność tych pytań, jeżeli nie można wpisywać odpowiedzi do prototypu?
Doświadczona design researcherka poleciła mi metodę “Czarnoksiężnik z Oz” (ang. “Wizard of Oz”), w której ukryty operator udaje odpowiedzi systemu. Wymyśliłam, iż będę zadawała pytania i wysyłała przypomnienia mailowo. Tym razem znalazłam grupę 5 znajomych, którzy chcieli wyrobić w sobie nowy nawyk i umówiliśmy się na tydzień badania.
Na początku wysłałam maila z prośbą o doprecyzowanie nawyku, wymienienie trzech głównych celów, jakie stoją za tym nawykiem oraz z pytaniem, o której godzinie chcą dostawać przypomnienie. Wysłałam spersonalizowane przypomnienie (zawierające w sobie część odpowiedzi na pytanie), a po tym jak osoba potwierdziła mi, iż nawyk został wykonany, to przesyłam gratulacje (za każdym razem inny tekst) oraz kolejne pytania. Z 5 osób, które zgłosiły się do badania do samego końca dotrwały 3. Te 3 osoby na zakończenie odpowiedziały na krótki kwestionariusz, który opracowałam.
Wnioski wyciągnęłam w trakcie badania, a także na jego zakończenie. Badanie pozwoliło mi zderzyć moje pomysły z realnymi użytkownikami, dzięki temu mogłam je zweryfikować. Po tygodniu przesłałam kolejny kwestionariusz do badanych – dwie osoby odpowiedziały, iż realizowały nawyk każdego dnia przez cały tydzień po zakończeniu badania. Pozostałe osoby nie wypełniły kwestionariusza.
Potwierdziło się również, iż koncepcja odpowiadania na pytania dotyczące nawyku jest dobrym rozwiązaniem. Ale z zastrzeżeniem, iż użytkownicy muszą być naprawdę chętni do realizowania tego nawyku i mieć czas na jego wprowadzenie (rozwiązanie nie sprawdzi się w momencie np. intensywnego okresu w pracy albo podróży).
Prototypowanie podejście trzecie
Wypisałam wszystkie wnioski z badania w Excelu. Dużo uwag dotyczyło np. sposobu sformułowania pytań albo konieczności doprecyzowania. Inne wnioski były bardziej długofalowe. Następnie przeanalizowałam, które zmiany są niezbędne w pierwszej wersji projektu, a które zostawiam do zrealizowania na kolejne iteracje projektu.
Prototyp Habit Trackera minimalnie gotowego do wprowadzenia na rynek jest gotowy. Przede mną kolejne badanie koncentrujące się już na samym prototypie. Wyciągnięcie wniosków i ostatnie poprawki. A potem chwila przerwy. Powiedzenie sobie, iż przez chwilę nic nie trzeba poprawiać, iż jest ok. To chyba najtrudniejszy moment tego procesu, bo skąd mam wiedzieć, iż już wystarczy? W teorii wiem, iż muszę powiedzieć stop, bo przecież nie mogę ulepszać ćwiczeniowego prototypu w nieskończoność. Ale czy uda mi się to w praktyce?
Tak wygląda aktualna propozycja Habit Trackera.
O autorce
Zuzanna Mrożewska – rozwija się w kierunku ux design, z wykształcenia japonistka i psycholog. Jej droga zawodowa związana była do tej pory z organizacją eventów, od gier miejskich po festiwale muzyczne. Fascynuje ją połączenie psychologii człowieka w kontekście międzykulturowym i samorozwojowym oraz nowych technologii, dlatego w tej chwili rozwija szkolenia People Skills for Geeks.
