Projektowanie UX/UI e-commerce nastawione na konwersję

Projekt skoncentrowany na użytkowniku

Projekt,
który konwertuje.

W e-commerce zamieszanie kosztuje pieniądze. Tworzymy płynne, dopracowane interfejsy, które łączą olśniewającą estetykę z psychologią behawioralną i płynnie prowadzą klientów od „strony docelowej” do „podziękowania za zakup”.

Architektura z myślą o urządzeniach mobilnych

70% Twojego ruchu pochodzi z telefonów. Projektujemy najpierw pod strefę kciuka. Dbamy o to, by przyciski były w zasięgu, pola dotykowe miały odpowiedni rozmiar, a menu były intuicyjne na małych ekranach.

Hierarchia wizualna

Kontrolujemy, gdzie patrzy użytkownik. Za pomocą kontrastu, skali i białej przestrzeni kierujemy wzrok na przycisk „Dodaj do koszyka”, dzięki czemu ścieżka do zakupu jest najbardziej oczywistym działaniem na stronie.

Finalizacja zamówienia bez tarcia

Wypowiadamy wojnę porzucaniu koszyków. Projektujemy procesy finalizacji zamówienia, które ograniczają liczbę pól formularza, oferują zakupy bez zakładania konta i wyraźnie pokazują sygnały zaufania, by uspokoić użytkownika w krytycznym momencie.

Sprint projektowy w skrócie.

Od koncepcji do projektu gotowego dla programistów.

01

Wireframing

Zaczynamy od struktury niskiej wierności. Rozpisujemy ścieżkę użytkownika i architekturę informacji, nie rozpraszając się kolorami, skupiając się wyłącznie na przepływie i użyteczności.

02

Prototypowanie w Figmie

Budujemy interaktywne prototypy wysokiej wierności. Możesz przeklikać swój sklep, przetestować menu i poczuć całe doświadczenie, zanim powstanie choć jedna linijka kodu.

03

Dopracowanie UI

Nakładamy tożsamość Twojej marki. Określamy skale typografii, palety kolorów i mikrointerakcje (stany najechania, animacje), dzięki którym strona wygląda premium i żyje.

04

Przekazanie projektu

Nie dajemy Ci samych obrazków; dajemy programistom mapę drogową. Dostarczamy kompletny „Design System” z wartościami CSS, zasobami i regułami odstępów, aby wdrożenie było co do piksela.

Design systemy.

Spójne na każdej stronie.

Zestaw narzędzi.

Standardowe narzędzia branżowe.

Interfejs użytkownika Figma / Sketch

Prototyp użytkowy Protopie / Adobe XD

Przekazanie do wdrożenia Zeplin / Avocode

Częste pytania

Czy zajmujecie się też kodowaniem?

Jesteśmy agencją pełnego zakresu usług. Choć ta faza dotyczy projektu, nasz zespół programistów pracuje ramię w ramię z projektantami, aby gotowa strona dokładnie odpowiadała prototypowi.

Dlaczego najpierw urządzenia mobilne?

Google indeksuje najpierw mobilną wersję Twojej strony. Jeśli wersja mobilna jest traktowana po macoszemu, ucierpią Twoje pozycje SEO i współczynnik konwersji.

Projektuj dla przychodów.

Zacznij audyt interfejsu użytkownika.

Zacznij projekt strony

Na początku audyt doświadczenia użytkownika

Przeprojektowanie sklepu bez wiedzy, co dziś nie działa, to drogie zgadywanie, dlatego nasza praca nad UX e-commerce zaczyna się od audytu doświadczenia użytkownika. Łączy on lejek z Twojej analityki, frazy wpisywane w wyszukiwarkę sklepu, nagrania prawdziwych sesji, w których odwiedzający wyrazili na to zgodę, oraz przejście po sklepie na prawdziwych telefonach. Wynikiem jest lista priorytetów: co blokuje zakupy już teraz, co spowalnia ludzi, a co jest tylko kosmetyką.

Sklep mobile-first w działaniu

• Strony produktów. Cena, kluczowe opcje, informacje o dostawie i przycisk dodania do koszyka widoczne bez przewijania obok ogromnej galerii.
• Filtry i wyszukiwanie. Filtry, które otwierają się w panelu i pokazują, ile produktów pasuje, oraz wyszukiwarka tolerująca literówki i kody produktów.
• Zasięg kciuka. Główne akcje umieszczone tam, gdzie sięga kciuk, z polami dotykowymi wystarczająco dużymi dla prawdziwych palców.
• Zdjęcia. Fotografie, które szybko się ładują, powiększają się bez psucia strony i pokazują produkt w użyciu, a nie tylko na białym tle.

Projektowanie procesu finalizacji zamówienia

Dobrze zaprojektowana finalizacja zamówienia usuwa decyzje, których nie trzeba podejmować. Zakupy bez konta pozostają dostępne, pola adresu korzystają z autouzupełniania, koszty wysyłki pojawiają się przed ostatnim krokiem, a komunikaty o błędach mówią dokładnie, co poprawić, tuż obok pola, które je wywołało. Tam, gdzie platforma na to pozwala, szybkie portfele pojawiają się wcześnie dla powracających klientów mobilnych.

Od prototypu w Figmie do działającego sklepu

Prototypowanie w Figmie pozwala przeklikać nową stronę kategorii, stronę produktu i finalizację zamówienia, zanim ruszy development, i przetestować je z kilkoma prawdziwymi klientami lub pracownikami. Zatwierdzony projekt staje się małą biblioteką komponentów, dzięki czemu projekt UI na zamówienie pozostaje spójny w różnych szablonach. W przypadku projektowania interfejsu WooCommerce opieramy się na edytorze blokowym i blokach finalizacji zamówienia, tam gdzie obsługują je Twoje rozszerzenia płatności i wysyłki; w Magento i PrestaShop pracujemy w ramach systemu motywów, aby aktualizacje nadal były możliwe.

Na start potrzebujemy dostępu do analityki, listy najlepiej sprzedających się produktów i skarg, które klienci zgłaszają najczęściej.

Powiązane usługi: testy A/B zmian w projekcie, tworzenie sklepów Magento 2 oraz tworzenie i wsparcie sklepów internetowych.