Aplikacja mobilna dla ANSWEAR.COM
W 2017 roku mieliśmy przyjemność współtworzyć aplikacje mobilne IOS i Android dla jednego z największych europejskich sklepów multibrandowych z branży fashion.
Od samego początku byliśmy bardzo entuzjastycznie nastawieni do tej współpracy. Wiedzieliśmy, że będzie to doskonała okazja do tego, żeby nauczyć się wielu nowych rzeczy i sprawdzić się w projektowaniu aplikacji, której będą używać setki tysięcy użytkowników miesięcznie.
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/phones_01.png)
Wyzwanie
ANSWEAR.com jest pierwszym polskim sklepem multibrandowym. W ofercie sklepu można znaleźć odzież, obuwie oraz akcesoria najbardziej rozpoznawalnych marek odzieżowych na świecie. Sukces na rynku polskim zaowocował ekspansją na rynki Europy Środkowo-Wschodniej.
Skala przedsięwzięcia i poziom skomplikowania ustawiły poprzeczkę bardzo wysoko już na samym początku. Od strony User Experience i projektu interfejsu dużym wyzwaniem było zaprojektowanie samej architektury informacji i przepływu użytkowników przez aplikację. Kluczowe kwestie, które musieliśmy rozwiązać na tym etapie to zaprojektowanie intuicyjnej nawigacji, filtrowania ogromnej listy produktów, przejrzystej i czytelnej karty produktu. Najwyższy priorytet został położony na projekt procesu check-out’u - blisko połowa całego czasu poświęconego na projektowanie aplikacji dotyczyła właśnie tego elementu.
Wymienione wyżej kwestie to zaledwie wierzchołek góry lodowej. Jak zatem rozpocząć projektowanie tak złożonego e-commerce’a.
Kickoff meeting
Dobre spotkanie organizacyjne to solidny fundament sukcesu projektu - pozwala ono na wypracowanie wspólnego języka, ustalenie celów, określenie wzajemnych oczekiwań, zdefiniowanie jaki powinien finalny produkt naszej pracy. Nasz kick-off meeting był również doskonałą okazją do omówienia danych statystycznych i wiedzy płynącej z dotychczasowych doświadczeń użytkowników ze stroną mobilną klienta. Umożliwiło to zespołowi, który miał pracować ze sobą przez blisko pół roku czasu, lepsze poznanie się.
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/kickoff.jpg)
Przygotowanie
Zanim rozpoczęliśmy projektowanie zrobiliśmy gruntowny research. Przeanalizowaliśmy dziesiątki aplikacji mobilnych największych marek modowych i sklepów multibrandowych w poszukiwaniu dobrych praktyk, ale i ciekawych pomysłów. Część rozwiązań, które budziły nasze wątpliwości przetestowaliśmy z użytkownikami w testach zadaniowych. Cały proces projektowania skupiał się na potrzebach i wygodzie użytkownika (User Centered Design), dlatego też jednym z pierwszych kroków było określenie kim są nasi modelowi użytkownicy i stworzenie person UX.
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/zalando.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/mango.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/asos.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/hm.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/allegro.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/massimo.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/farfetch.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/porter.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/zara.png)
Flow diagram
Projektując możliwe ścieżki przejścia użytkownika przez aplikację musieliśmy uwzględnić rozmaite scenariusze. Ponieważ projektowanie aplikacji mobilnej znacząco różni się od projektowania strony www, na tym etapie bardzo ściśle pracowaliśmy z zespołem developerskim, który kontrolował czy zaproponowane przez nas rozwiązania będą wykonalne.
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/flow.png)
Prototypowanie
Kolejnym krokiem prac było przygotowanie interaktywnej makiety aplikacji. Na tym etapie przygotowana została makieta lo-fi (low fidelity), której zadaniem jest szybkie zwizualizowanie pomysłu i przetestowanie proponowanych rozwiązań.
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/poster1.jpg)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/woman.png)
Testy z użytkownikami
Wspomniane wyżej testy rozwiązań odbywały się zawsze przy udziale użytkowników. Testy były wykonywane na każdym etapie projektowania - od wczesnych prototypów, przez makietę hi-fidelity, aż po gotowy produkt. Testy były wykonywane najczęściej przy wykorzystaniu aplikacji Lookback, która pozwala na jednoczesne nagrywanie ruchu użytkownika w aplikacji oraz jego twarzy i wypowiedzi w trakcie używania apki.
Design
Do zaprojektowania aplikacji wykorzystaliśmy następujący ekosystem narzędzi. Projekty graficzne powstawały w Sketchu, a następnie były importowane do Marvela, w którym tworzyliśmy interaktywne makiety hi-fi. Finalne projekty były wgrywane do aplikacji Zeplin, która eksportowała grafiki dla developerów i automatyzowała tworzenie dokumentacji wykonawczej. Dzięki zastosowaniu takiego zestawu narzędzi udało się nam znacznie skrócić czas produkcji finalnych designów, co przełożyło się na duże oszczędności dla Klienta.
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/sketch.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/zeplin.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/marvel.png)
Kolorystyka
Typografia
Ikony
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/phone_01.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/phone_03.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/phone_02.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/phone_04.png)
![](https://pl.mohi.to/wp-content/themes/mohito/images/case/answer/phones_02.png)
Na cały projekt graficzny składało się ponad 150 unikalnych widoków - w celu zachowania spójności wyglądu opracowaliśmy style guide aplikacji - bibliotekę elementów (typografia, formularze, buttony, alerty, zestaw ikon etc.) używanych konsekwentnie w całej aplikacji.
Projektując skupialiśmy się na tym, żeby elementy interfejsu były jak najmniej nachalne dla użytkownika. Wiedzieliśmy, że główną rolę powinny grać produkty i wygoda użytkownika, a sam design powinien być podporządkowany celom funkcjonalnym.
Development
Do realizacji projektu zdecydowaliśmy się przystąpić razem z naszymi przyjaciółmi z firmy HoldApp. Praca odbywała się w metodyce SCRUM, raz na dwa tygodnie rezultaty pracy przedstawialiśmy w trakcie spotkań demo. Od strony programistycznej również stanęliśmy przed wieloma ciekawymi kwestiami do rozwiązania.
Wyniki
Już po trzech miesiącach od ukazania się aplikacji w sklepach, 40% klientów firmy zdecydowało się wykorzystać właśnie ten kanał. Na jego rzecz stracił zarówno procent użytkowników tabletów, jak i desktopu. W stosunku do mobilnej wersji strony aplikacja generuje średnią wartość koszyka większą o 25% !, a w stosunku do desktopu jest to blisko 10% wzrost.
Podsumowanie
Przyszłość zakupów przez internet to bez wątpienia mobile. ANSWEAR.com nastawia się na silny rozwój tego kanału - zamierza inwestować w aplikację i dostosowywać je do potrzeb klientów tak, aby zakupy były jeszcze prostsze i przyjemniejsze. Nasz projekt został nominowany w konkursie Mobile Trends Awards 2017 w kategorii m-commerce.
Planujesz nowy projekt?
Masz pytania?
Napisz do nas
![](https://pl.mohi.to/wp-content/themes/mohito/images/placeholder.png)