TECHNOLOGIA I WDROŻENIA

Projektowanie UX i UI

Projektujemy ścieżkę zakupową i interfejs sklepu w oparciu o to, jak ludzie faktycznie kupują, a nie o bieżące trendy w projektowaniu. Każdą większą decyzję staramy się oprzeć na danych z Waszego sklepu albo na badaniach, które da się wskazać.

OD CZEGO ZACZYNAMY

Zaczynamy od miejsc, w których użytkownik się zatrzymuje

Projekt sklepu oceniamy przez to, czy prowadzi do zakupu, a nie przez to, czy wygląda nowocześnie. Cztery miejsca decydują o tym najczęściej.

Karta produktu

Najważniejszy ekran w sklepie. Sprawdzamy, czy odpowiada na pytania zadawane w Waszej kategorii i czy najistotniejsze informacje są widoczne bez przewijania.

Kategorie i filtry

Jeżeli klient nie potrafi zawęzić wyboru, wraca do wyszukiwarki i często już nie wraca. Struktura filtrów bywa ważniejsza od samego wyglądu listy.

Koszyk i checkout

Obszar o najlepiej udokumentowanych zależnościach w całym e-commerce. Liczba kroków, moment ujawnienia kosztów i wymuszona rejestracja mają mierzalny wpływ. Wymuszona rejestracja przed zakupem to jedna z najlepiej udokumentowanych barier na ścieżce zakupowej.

Wersja mobilna

Większość ruchu w e-commerce pochodzi z telefonów, a projekty wciąż powstają na dużym ekranie. Zaczynamy od małego i sprawdzamy na urządzeniach, zanim cokolwiek trafi do wdrożenia.

UX a UI

UX dotyczy tego, jak działa ścieżka: ile kroków, w jakiej kolejności, jakie informacje są dostępne w momencie decyzji. UI dotyczy warstwy widocznej: układu, typografii, kolorów i elementów sterujących. Ładny interfejs nałożony na złą ścieżkę nie zwiększy sprzedaży, a dobra ścieżka w brzydkiej formie traci na zaufaniu. Projektujemy obie warstwy, ale w tej kolejności.

ZAKRES USŁUGI

Co obejmuje projekt

Zakres dobieramy do potrzeby. Bywa, że wystarczy przeprojektowanie karty produktu i checkoutu, a przebudowa całości byłaby wydatkiem bez pokrycia.

Analiza stanu obecnego

Przegląd ścieżki zakupowej wraz z danymi z analityki i nagraniami sesji. Ustalamy, gdzie tracicie użytkowników, zanim zaczniemy projektować.

Architektura informacji

Struktura kategorii, filtrów i nawigacji. Porządkujemy sposób, w jaki klient zawęża wybór, bo od tego zaczyna się większość ścieżek.

Ścieżka zakupowa

Karta produktu, koszyk, dostawa, płatność. Projektujemy pełny przepływ wraz ze stanami błędów i sytuacjami brzegowymi, które zwykle wypadają z projektów. Stany brzegowe psują wdrożenia częściej niż układ ekranu głównego: pusty wynik wyszukiwania, brak dostępności, odrzucona płatność, bardzo długa nazwa produktu.

Wersja mobilna

Projekt zaczynamy od najmniejszego ekranu i rozbudowujemy w górę. Weryfikujemy na urządzeniach, nie w oknie przeglądarki.

System projektowy

Zestaw powtarzalnych komponentów z zasadami stosowania, żeby kolejne strony powstawały spójnie i bez naszego udziału.

ETAPY PROJEKTU

Cztery etapy do materiału gotowego do wdrożenia

Projekt kończy się dokumentacją, którą programista wdroży bez domyślania się intencji. Nie kończy się plikiem graficznym.

ANALIZA

Dane z analityki, nagrania sesji, przegląd ścieżki i rozmowa o tym, co już wiecie o swoich klientach.

STRUKTURA

Układamy przepływ i architekturę informacji. Ten etap akceptujecie przed przejściem do warstwy wizualnej.

MAKIETY

Projekt w niskiej wierności, skupiony na kolejności i hierarchii, bez rozpraszania uwagi kolorem.

INTERFEJS

Warstwa wizualna zgodna z identyfikacją marki, wraz ze stanami elementów i sytuacjami brzegowymi.

METODA I POMIAR

Na czym opieramy decyzje projektowe

Projektowanie jest obszarem, w którym łatwo o spór oparty na guście. Staramy się przenieść rozmowę na grunt sprawdzalny.

Najpierw dane z Waszego sklepu
Zanim zaproponujemy zmianę, sprawdzamy, co pokazują analityka i nagrania sesji. Wasi klienci są ważniejsi od ogólnych zasad.
Powołujemy się na badania, nie na przeczucia
Przy decyzjach dotyczących checkoutu i formularzy korzystamy z publicznie dostępnych badań użyteczności i wskazujemy źródło, żeby dało się je sprawdzić.
Test kciuka na ekranach dotykowych
Zanim uznamy projekt mobilny za skończony, nanosimy na niego strefę zasięgu kciuka przy obsłudze jedną ręką i sprawdzamy, co w niej leży, a co wymaga przekładania telefonu. Do tego kontrolujemy rozmiar pól dotykowych względem minimów producentów: 48×48 dp u Google i 44×44 pt u Apple. Element poniżej tych wartości albo wypchnięty w górny róg zbiera przypadkowe kliknięcia, które w analityce wyglądają jak brak zainteresowania ofertą.
Projektujemy stany, nie tylko widoki
Puste wyniki wyszukiwania, brak dostępności, błąd płatności, długie nazwy produktów. To one psują wdrożenia, a nie ekran główny.
Proponujemy, co zweryfikować testem
Przy większych zmianach wskazujemy, które elementy warto sprawdzić testem A/B po wdrożeniu, zamiast zakładać, że projekt jest z definicji lepszy.

Nie wiesz, czy potrzebujesz redesignu?

Przejrzymy ścieżkę zakupową i dane, po czym powiemy, czy problem wymaga przeprojektowania, czy wystarczy poprawić kilka miejsc.

Szukasz konkretnej wyceny?

Projekty wyceniamy zakresowo, bo przeprojektowanie karty produktu i przebudowa całego sklepu to różne przedsięwzięcia. Cena wyjściowa jest w cenniku.

FAQ

Najczęściej zadawane pytania

Czy projektujecie też wdrożenie?−

Możemy wykonać wdrożenie w ramach usług programistycznych albo przekazać dokumentację Waszemu zespołowi. Projekt przygotowujemy tak, żeby wdrożył go dowolny wykonawca.

Ile trwa projekt?+

Przeprojektowanie wybranych ekranów zwykle od trzech do pięciu tygodni. Pełna przebudowa ścieżki zakupowej wraz z systemem komponentów zajmuje zazwyczaj od dwóch do trzech miesięcy.

Czy prowadzicie badania z użytkownikami?+

W podstawowym zakresie opieramy się na analityce, nagraniach sesji i publicznie dostępnych badaniach użyteczności. Testy z udziałem użytkowników prowadzimy jako osobny element, gdy skala projektu to uzasadnia.

Czy dostanę pliki źródłowe?+

Tak, wraz z systemem komponentów i dokumentacją zachowań. Możecie kontynuować pracę samodzielnie albo z innym wykonawcą.

Skąd wiadomo, że nowy projekt będzie lepszy?+

Sprawdzamy to pomiarem. Przy większych zmianach wskazujemy z góry, które elementy zweryfikujemy testem po wdrożeniu, i pilnujemy, żeby pomiar był gotowy wcześniej niż projekt.