Paintory

Baza farb oraz organizer dla pasjonatów figurkowych gier bitewnych.

Kontekst

Projekt aplikacji mobilnej Paintory to pomysł na aplikację dla dosyć wąskiej grupy odbiorców, jakimi są pasjonaci gier bitewnych. Zaprezentuję proces, jaki przeszedłem od podstawowych założeń aplikacji do interaktywnego prototypu i jego testowania.

Specyfika projektu

Projekt został stworzony na zaliczenie kursu IT Bootcamp Digital UX. Jest to projekt indywidualny o charakterze weryfikacyjnym. Pomija fazę badań i strategii, skupia się tylko na zaprojektowaniu wizji produktu oraz przeprowadzeniu testów użyteczności.

Dla kogo?

Aplikacja ma na celu ułatwienie życia pasjonatów gier bitewnych i figurkowych.

Gry bitewne to odmiana gier planszowych, w której gracze dysponują określoną liczbą jednostek i prowadzą pomiędzy sobą różnego rodzaju starcia i bitwy. Miniaturowe figurki maluje się, aby dodać grze odpowiedniego klimatu i charakteru.

Temat malowania figurek jest bardzo obszerny i ma na świecie wielu pasjonatów. Działa na rynku dużo firm produkujących farby i akcesoria wyłącznie dla tego rodzaju hobby. Paintory ma posłużyć każdemu fanowi figurkowych gier bitewnych do organizacji narzędzi, jakimi posługuje się do wykonywania swojej pasji.

Metody

Do stworzenia wizji produktu, wykorzystałem w procesie projektowym takie metody jak:

papierowy prototyp

user flow

makietowanie

testy użyteczności

Wszystkie zdjęcia są własnością firmy Games Workshop.

Etap modelowania

Potrzeba

Aplikacja spełnia potrzebę uporządkowania życia pasjonatów gier bitewnych. Poprawia zarządzanie swoimi zasobami i pozwala ustalić jakich farb brakuje w kolekcji. Umożliwia lepszą orientacje w palecie dostępnych produktów oraz planowaniu zakupów. Poza tym ułatwia przeglądanie i zarządzanie produktami związanymi z hobby, które dostępne są na rynku polskim. Oprócz katalogu farb dostępnych na rynku, aplikacja zawiera porównywarkę odpowiedników innych producentów.

Research

Przy tworzeniu konceptu aplikacji, oprócz pomysłu wyjściowego opartego na własnych doświadczeniach i opinii osób ze środowiska graczy, bardzo ważny był research. Pozwolił mi zebrać dokładniejsze informacje o użytkownikach i ich potrzebach a także pozwolił wykrystalizować pewne kluczowe funkcjonalności.

Do dwóch najważniejszych należą:

Lepsze filtrowanie i zarządzanie produktami. Aplikacja pozwala na szybkie grupowanie farb na dwie kategorie. Jedna to “Inventory”, czyli to co już posiadamy w swojej kolekcji. Druga to “Wishlist”, czyli to co chcielibyśmy nabyć w najbliższym czasie. System pozwala także na szybkie przerzucanie produktów pomiędzy zakładkami. Pozwala to zaoszczędzić czas na przeszukiwanie swoich zasobów, umożliwia tworzenie gotowych list produktów z możliwością eksportowania.

Szybka porównywarka farb innych producentów. Każdy produkt posiada swój opis z listą zamienników dostępnych na rynku, widoczna jest próbka koloru z możliwością przybliżania. Kolory można porównać w porównywarce kolorów. Delta koloru, czyli matematyczna wartość jak porównywane kolory są do siebie zbliżone, pozwala na szybkie znalezienie alternatyw.

Analiza konkurencji

Na rynku działają dwie aplikacje, które są bezpośrednią konkurencją dla Paintory. Przeprowadziłem analizę obu produktów pod względem plusów i minusów.

Citadel Colour

Aplikacja stworzona przez największego producenta gier bitewnych Games Workshop.

Jest dostępna za darmo, posiada instrukcje dla nowych graczy oraz schematy kolorystyczne dopasowane do figurek firmy GW. Jest jednak wciąż okrojonym produktem dotyczącym jedynie produktów z serii Citadel. Informacji o farbach mogło by być więcej.

Army Colors

Aplikacja stworzona w Niemczech, jest płatna, kosztuje 23,99 PLN.

Posiada możliwość doboru farb do figurek, zapisywanie schematów, możliwość tworzenia swoich zasobów, jest to jednak funkcja dodatkowa. Aplikacja jest wciąż niedopracowana, mogła by mieć lepszą architekturę oraz system wyszukiwania.

User Flows

Ścieżki użytkowników, czyli przebieg akcji wykonywanych przez użytkownika pomogły doprecyzować funkcjonalności aplikacji. Wcześniejszy research i analiza konkurencji pozwoliły mi na stworzenie pewnego rodzaju modelu mentalnego użytkownika, na którym opierałem się przy tworzeniu user flows. Praca nad ścieżkami dała mi możliwość uproszczenia drogi użytkownika. Dzięki nim wyeliminowałem na wczesnym etapie kilka zbędnych elementów i nie przeładowałem ekranu.

Do stworzenia diagramów użyłem programu FlowMapp.

Prototyp

Papierowy prototyp

Mając zebrane informacje o użytkownikach i funkcjonalnościach mogłem przejść do etapu prototypowania.

Zacząłem od ćwiczenia, które nazywa się Crazy Eights (szalone ósemki). Polega to na szybkim zaprojektowaniu na kartce podzielonej na osiem części ośmiu widoków lub układów aplikacji. Na wszystko mamy jednak osiem minut. Pozwala to w ciekawy sposób znaleźć kreatywne rozwiązania.

Po tym ćwiczeniu stworzyłem pierwsze papierowe widoki aplikacji.

Makieta

Po ustaleniu wstępnej wizji wyglądu najważniejszych elementów zacząłem przelewać pomysły kotłujące się w głowie na prototyp. Stworzyłem makiety niskiej wierności w programie Axure RP 8. Po przygotowaniu ekranów odpowiadających ścieżkom użytkowników zabrałem się za testowanie.

Testowanie

Testy użyteczności

Testy przeprowadzone były na małej grupie użytkowników i prowadzone łącznie przez dwa dni. Badania składały się z testów manualnych. Testerzy skupili się na testowaniu funkcjonalności fragmentu dostarczonej aplikacji.

Do wykonania mieli trzy zadania oparte na stworzonych ścieżkach użytkowników. Wykonywane zadania oceniałem w skali od 1 do 3. Oceniałem także ogólne wrażenia z obcowania z aplikacją.

Problemy

Badania pozwoliły na wychwycenie problemów, jakie pojawiały się przy użytkowaniu. Wszyscy testerzy mieli problem z szybkim zrozumieniem systemu filtrów, pojawiały się problemy z umieszczaniem produktów w odpowiednich zakładkach oraz zabrakło kilku elementów pomagających w wyjaśnieniu co znajduje się na stronie. Zyskałem dużo materiału do przeanalizowania.

Rozwiązania

Przeprowadzone od razu testy fragmentu aplikacji pozwoliły na szybkie znalezienie rozwiązań.

Ustaliłem, że należy przebudować filtry i zmienić dostęp do nich. Menu zakładek powinno zostać przebudowane na zgodne z Material Design. Zmienić należy także kolejność zakładek na bardziej czytelną. Poprawić czytelność i dodać więcej informacji o komponentach.

Ogólna jakość zaprezentowanego fragmentu została jednak oceniona bardzo pozytywnie. Dwie najważniejsze funkcjonalności działały prawidłowo. Zadania zostały wykonane z wysoką średnią na poziomie 2,7.

Projektowanie UI

Interfejs graficzny

Po przeprowadzeniu testów i analizie wyników zabrałem się do opracowania dokładniejszych rozwiązań i ulepszeń. Nastawiłem się na przygotowanie prototypu wysokiej wierności. Interfejsy graficzne opracowałem w Adobe XD. Po drodze wiele nowych, dodanych elementów weryfikowałem z użytkownikami. Użyłem do tego tzw. Guerrilla Testingu.

Testowałem także poszczególne widoki ekranów w testach 5 sekundowych. Użyłem do tego platformy usabilityhub.com. Dzięki tak krótkiemu czasowi respondenci skupiali się tylko na najważniejszych elementach. Zebrane informacje były niesamowicie pomocne przy ustaleniu położenia poszczególnych elementów oraz położeniu odpowiedniego nacisku na najważniejsze komponenty z projektowego punktu widzenia.

Wizualizacja aktualnych ekranów aplikacji Paintory.

Ekran startowy.

Ekran główny.

Ekran główny z widokiem farby.

Ekran zakładki “Inventory”.

Ekran zakładki “Wishlist”.

Ekran produktu z widoczną tabelą z dostępnymi zamiennikami. Z prawej strony widoczne pola z wartością delty koloru.

Widok części prototypu z ustawionymi interakcjami.

Prezentacja fragmentu interaktywnego prototypu wysokiej wierności aplikacji Paintory.

Podsumowanie

Dalsze kroki

W dalszym etapie rozwoju pojawi się pełna polska wersja językowa, dopracowana porównywarka kolorów, propozycje sklepów, gdzie można kupić farby, eksport listy do pdf i innych popularnych formatów, pełna baza farb największych pięciu producentów w Polsce.

W drugim etapie rozwoju może pojawić się rozszerzenie produktów o inne rynki, zwiększenie liczby producentów, dodanie akcesoriów (pędzle, elementy makiet), system dodawania zdjęć pomalowanych figurek z możliwością opisu.

Wnioski

Koncepcja aplikacji zebrała bardzo dobre opinie, aplikacja odpowiada na potrzeby konkretnej grupy docelowej. Metoda testowania fragmentów aplikacji jest bardzo wydajna i pozwala szybko znaleźć wiele ciekawych rozwiązań. Do stworzenia całościowego produktu jeszcze jednak daleko. W dalszym etapie rozwoju aplikacji należy wrócić do całościowych badań jakościowych i ilościowych oraz opracowani strategii. Stworzenie tak zaawansowanego projekty weryfikacyjnego pozwoliło mieć solidną bazę i dużo materiałów do dalszej pracy nad produktem.