Aplikacja Auchan – Proces Usprawniania UX i UI w Aplikacji Hipermarketu

Spis treści

1. Auchan app concept – proces powstawania
2. Hipermarkety proponują aplikacje
3. Aplikacja Auchan – analiza
4. Analiza aplikacji konkurencji
5. Low fi wireframes dla aplikacji Auchan
6. High fidelity wireframes dla aplikacji Auchan
7. Wewnętrzne testy z użytkownikami
8. Branding Auchan w redesign
9. Podsumowanie

Auchan app concept – proces powstawania 

W czasach powszechnej komputeryzacji i nieograniczonego dostępu do Internetu, wiele obszarów życia człowieka zostaje przeniesionych do wirtualnej rzeczywistości. W szczególności obszary takie jak handel i usługi. Ludzie przyzwyczaili się do wygody jaką jest telefon komórkowy, za pomocą którego możemy zapłacić rachunki, umówić wizytę u fryzjera, złożyć wniosek w urzędzie, odczytać wyniki badań, wykonać istotne przelewy… 

Można by tak wymieniać w nieskończoność. Ludzie po prostu nie mają czasu, na to by fizycznie wybrać się w dane miejsce i faktycznie “odstać” swoje w kolejkach. A co z ogromem czasu jaki poświęcamy w marketach, aby zrobić zakupy? Tak więc za potrzebą społeczeństwa postanowiły podążyć hipermarkety. 

Hipermarkety proponują aplikacje

Zaczęły powstawać aplikacje, które umożliwiają dokonanie błyskawicznych zakupów bez wychodzenia z domu. Wiele firm zdecydowało się na stworzenie własnych aplikacji, tak aby pozyskać jeszcze większą liczbę klientów. Aby zatrzymać ich w ciągłym obiegu, informują użytkowników między innymi o nadchodzących promocjach czy umożliwiają zbieranie punktów na zakup artykułów w obniżonych cenach. 

Idealnym przykładem są marki takie jak Żabka czy Lidl, które dzięki aplikacji umożliwiają korzystanie ze zniżek na wybrane produkty. Przeprowadziliśmy analizę aplikacji dostępnych na polskim rynku i postanowiliśmy skupić się na sieci handlowej Auchan. Sieć posiada ok. 110 sklepów w całym kraju. Naszym celem była propozycja usprawnienia jej pod kątem UX oraz UI. 

Aplikacja Auchan – analiza

Pierwszą rzeczą jaka zwróciła moją uwagę jest to, że strona internetowa otwiera się w aplikacji. Co za tym idzie, hierarchia poszczególnych elementów oraz użyteczność nie są dostosowane pod urządzenie mobilne. Projektując interfejs, powinniśmy mieć na uwadze wielkości fontów oraz modułów, tak aby końcowy użytkownik nie miał problemów z jej korzystaniem.

Zwróciłem uwagę, że niektóre zamieszczone banery promocyjne nie kierują do żadnej konkretnej oferty. Użytkownik aplikacji może czuć się zagubiony tym, że nie wszystkie przyciski i elementy są klikalne. Cała apka jest “przepchana” różnymi reklamami, czy to w postaci zwykłego boxu czy wyskakującego popup’u. Zdaję sobie sprawę z tego, iż jest to przestrzeń do zamieszczania głównie ofert handlowych, ale w moim odczuciu klienci są bombardowani niezliczoną ilością zbędnych informacji. 

Sam proces zamawiania dowolnego artykułu jest niemożliwy. Mianowicie wchodząc w kategorie produktowe po chwili wyskakuje biały popup, który zasłania nam cały content. Postanowiłem więc uporządkować funkcjonowanie apki skupiając się na głównych sekcjach oraz zaproponować nowoczesny, czysty interfejs. 

Analiza aplikacji konkurencji

Pierwszym krokiem była analiza aplikacji konkurencji. Skupiłem się między innymi na aplikacjach takich jak:

• Tesco,
• Biedronka,
• Lidl,
• Carrefour,
• Żabka.

Zauważyłem, że w większości z nich główny nacisk kładziony jest na:

• Produkty objęte promocją, 
• Kupony oraz zbieranie punktów z wymianą na artykuły w obniżonych cenach,
• Katalog produktowy,
• Wirtualne zakupy oraz dostawę do domu,
• Gazetki.

Zdecydowałem, że będą to również fundamentalne sekcje w mojej propozycji aplikacji. Przystąpiłem do rozrysowywania pierwszych koncepcyjnych widoków tzw. low fi wireframes. 

Low fi wireframes dla aplikacji Auchan

Dążyłem do zminimalizowania contentu oraz wyszczególnienia najważniejszych treści czy modułów danej sekcji. Warto również wspomnieć, iż na tym etapie nasze decyzje projektowe konsultowałem w ścisłym kontakcie z ios / android deweloperami. 

Co za tym idzie nie tylko UX designerzy trzymali rękę nad przebiegającą budową widoków. Wsparcie techniczne było istotne, ponieważ wyklucza ono na tak wczesnym etapie późniejsze problemy z dalszą rozbudową aplikacji. 

High fidelity wireframes dla aplikacji Auchan

Mając rozrysowane widoki przeszedłem do high fidelity wireframes, czyli doprowadzenia szkiców do postaci cyfrowej. Do tego działania wykorzystałem program Sketch. Wersję wysoko poziomową obrazuje poniższy zrzut. 

Skupiłem się między innymi na usprawnieniu funkcjonowania katalogu produktowego. Wprowadziłem wygodniejszą kategoryzację oraz filtrowanie produktów. Dodałem nowy feature, czyli pożądany przez wielu użytkowników proces zamawiania produktów i dostarczenia ich do domu. 

Warto również wspomnieć, że konkurencyjna aplikacja Tesco, proponuje taką możliwość w swojej aplikacji. W naszym przypadku chciałem zminimalizować liczbę kroków potrzebnych do złożenia zamówienia. Dodatkowo, dodałem sekcję z kuponami, które możemy wykorzystywać przez zebrane punkty z zakupów. 

Poniżej moja propozycja przepływu użytkownika przez katalog produktowy. 

Celem było również sprawne przeprowadzenie użytkownika od ekranu głównego do przycisku złożenia zamówienia. Tym samym edycja zamówienia. Poniższe flow obrazuje ten przypadek.

Wewnętrzne testy z użytkownikami

Mając zbudowany prototyp interaktywny byłem w stanie przeprowadzić wewnętrzne testy z użytkownikami, którzy nie korzystali wcześniej z podobnej aplikacji. Wyciągnąłem kilka istotnych wniosków i na ich podstawie zoptymalizowałem interfejs. Projektując widoki, nie możemy zapomnieć o takich badaniach. To właśnie one potwierdzają słuszność naszych decyzji. 

Następnie, przeszedłem do ostatniej fazy projektowej. Czyli finalny look & feel ekranów. Bazując na wcześniejszej analizie konkurencji wiedziałem jaki kierunek wybrały pokrewne marki. Tym samym, miałem przestrzeń do zaproponowania nowego, świeżego rozwiązania. Wykorzystałem panujący trend na ilustracje i budowanie opowieści wokół nich. Chciałem, aby nasz “wirtualny asystent” był przyjemny w odbiorze i wzbudzał zaufanie. 

Branding Auchan w redesign

Wykorzystałem kolory marki łącząc je z dużą ilością białych przestrzeni. Zabieg ten nie był przypadkowy. Chciałem wprowadzić poczucie lekkości interfejsu i łatwość w śledzeniu produktów oraz treści. Bardzo dobrym przykładem jest aplikacja Airbnb, która agreguje olbrzymią ilość contentu. Dzięki wykorzystaniu większych paddingów oraz rozsądnej ilości white space’a sprawia wrażenie czystej i przyjemnej w użytkowaniu. 

Dodatkową estetykę i spójność w decyzjach projektowych wprowadza szare tło wykorzystane w prezentacji produktów. Zdecydowałem się na ten zabieg zarówno w miniaturkach kategorii jak i widoku szczegółowym danego artykułu. 

Warto również wspomnieć, iż kafelki produktowe są przedstawiane na dwa różne sposoby. Stan defaultowy agreguje treść wewnątrz siwego boxu. Z kolei produkty znalezione w wynikach wyszukiwania przedstawiają wszystkie informacje na prawo od zdjęcia. Są to decyzje, które wpływają na prostotę śledzenia treści w danym fragmencie aplikacji. Większość tych na pozór błahych rozwiązań wpływa na nasze finalne zadowolenie z podróży wewnątrz apki. 

Podsumowanie

Uważam, że przeprowadzony przeze mnie redesign zwiększy liczbę dziennych, aktywnych użytkowników. Przełoży się to na zwiększenie zainteresowania wśród nowych klientów jak i wzrost sprzedaży artykułów. 

Tak jak aspekty życia społeczeństw ciągle się zmieniają i przechodzą proces cyfryzacji, tak aplikacje, czyli najważniejsze narzędzia, z których korzystają miliony użytkowników, powinny być modernizowane i dostosowywane do obowiązujących potrzeb. 

Nowoczesne aplikacje, które towarzyszą nam na każdym kroku, idą w kierunku maksymalnego ułatwienia zakupów i prostego komunikowania się z użytkownikami, co z pewnością jest kluczem do sukcesu wielu firm.