iękno i rozum, przyjemność i użyteczność — powinny iść ze sobą w parze”. To słowa Dona Normana autora kultowej dla designerów książki Dizajn na co dzień, które pasują również do pracy nad projektem sklepu internetowego. W naszej firmie od 14 lat pracujemy z markami sprzedającymi online. Przez te lata wypracowaliśmy własne podejście do projektowania, w którym staramy się połączyć to, co najważniejsze w serwisach e-commerce — atrakcyjny design i unikalne doświadczenie zakupowe klientów. Na czym polega nasze podejście?
Dobry UX w e-commerce
W Strix projektujemy interfejsy dla klientów z sektora e-commerce niemal od początków powstania handlu elektronicznego w Polsce. Przez te lata słyszeliśmy o wielu trendach w projektowaniu, część z nich została w branży na dłużej, część odeszła w niepamięć. Jednak podstawy dobrego projektowania e-commerce są stałe. Naszym zdaniem skupiają się na łączeniu znajomości efektywnej prezentacji asortymentu, wiedzy na temat customer journey, potrzeb użytkowników oraz tego, jak korzystają z produktów cyfrowych. Połączenie tych czynników determinuje tworzenie unikalnych doświadczeń zakupowych online. Tak właśnie podchodzimy do projektowania w naszym zespole UX Commerce Design.
Specyfika pracy w e-commerce
E-commerce to dynamiczna branża, która z roku na rok osiąga ogromne wzrosty, a jej rozwój przyspieszył szczególnie po pandemii. Taka sytuacja wymusza na właścicielach biznesów e-commerce inwestowanie w nowe i innowacyjne rozwiązania. Ma to wpływ również na naszą pracę w dziale UX - na co dzień spotykamy się z dużymi wyzwaniami i sporą zmiennością projektów. Projektujemy dla wielu klientów z różnych branż (beauty, medyczna, sportowa, meblarska, modowa itd.) i pracujemy dla dużych marek, m.in. Castorama, Modivo, Semilac, Lancerto. Nasi projektanci są zaangażowani w stały kontakt z klientem, podczas spotkań prezentujemy im projekty, omawiamy funkcjonalności i dążymy do tego, aby wspólnie wypracować najlepsze rozwiązanie.
Projektowanie to praca zespołowa
Mamy przekonanie, że efektywne projektowanie dla e-commerce to praca zespołowa. Dlatego stawiamy na multidyscyplinarność, a nasz zespół składa się z osób, które specjalizują się w różnych dziedzinach takich jak UX, UI, interakcje, branding, research, strategia itp. Dlaczego właśnie tak? Wierzymy, że różnorodny zespół może dostarczyć najlepsze rozwiązania biznesowe poprzez holistyczne podejście projektowe.
Przeczytaj, co członkowie Commerce UX Design mówią o pracy w tym zespole.
Ukierunkowani na rozwój
Takie podejście łączy się też z kolejnym elementem naszej codziennej pracy, czyli z Design Review. Projekty oceniamy przez cały zespół podczas specjalnych spotkań lub na naszym dedykowanym kanale na czacie — wszystko po to, aby znaleźć jak najlepsze rozwiązanie dla klienta. Dopiero po szczegółowej analizie projektu i uwzględnieniu ewentualnych uwag, przystępujemy do dalszych etapów pracy. Pozwala nam to na tworzenie przemyślanych projektów ze zwróceniem uwagi na najdrobniejsze detale. Ponadto to też dobry sposób na to, aby wymieniać się wiedzą i wzajemnie edukować.
W naszym dziale mocno stawiamy również na rozwój — każdy z naszych pracowników ma możliwość wykorzystania 3 godziny tygodniowo na dokształcanie się w wybranym obszarze. Mamy do dyspozycji także budżet rozwojowy wysokości 3 000 zł na rok, który możemy wykorzystać na wybrane szkolenie czy udział w konferencji.
Nasze podejście do projektowania
Nasi klienci zazwyczaj zwracają się do nas z różnymi potrzebami, ale najczęściej jest to potrzeba stworzenia nowego projektu dla nowo powstającego sklepu lub też redesign serwisu. Jak podchodzimy do tych zadań? Przede wszystkim stawiamy na strategię i zanim przystąpimy do fazy projektowej, dużo czasu poświęcamy na analizę i dogłębne zrozumienie biznesu. Zbieramy informacje na temat grupy docelowej, konkurencji i jej komunikacji w segmencie, ścieżki zakupowej klientów, specyfiki sprzedawanych produktów/usług, polityki dostaw, zwrotów i wszystkich procesów związanych ze sprzedażą internetową naszego klienta.
Przykład procesu projektowego
Etap 1: Discover
Bardzo często dla naszych klientów wykonujemy nie tylko projekt sklepu, ale wdrażamy również platformę e-commerce. Dlatego pierwszym elementem naszej współpracy zawsze jest zebranie potrzeb biznesowych i całokształtu wymagań niezbędnych do uruchomienia sprzedaży online. Ważne są dla nas nie tylko informacje na temat tego, jakich funkcji potrzebuje dany sklep, ale przede wszystkim próbujemy zrozumieć funkcjonowanie biznesu w szerszej perspektywie i dopiero gdy to się uda, proponujemy konkretne rozwiązania.
Do zebrania wymagań stosujemy naszą autorską metodę Commerce Blueprint, którą wykorzystujemy podczas warsztatów z klientem. To narzędzie służy do budowania holistycznej strategii i skutecznego przygotowania się do wdrożenia sklepu. Model obejmuje 3 kluczowe obszary: Clear Vision, Digital Product Journey, Business Units Policies.
Efektem warsztatów Commerce Blueprint jest powstanie dokumentu zbierającego wszystkie wytyczne wraz z naszymi rekomendacjami. To ważne, że w przygotowanie dokumentu zaangażowane są osoby zarówno z naszego zespołu, jak i z zespołu klienta, często z różnych działów. Dzięki temu wypracowujemy wspólną wizję i jasno sprecyzowany cel projektu.
Etap 2 - Discover & Define
W tym etapie przyglądamy się temu, jak nasz klient pozycjonuje się w danym segmencie, jakie są tam trendy i wyzwania, analizujemy markę pod kątemf semantycznym. Zbieramy jak największą ilości informacji na jej temat oraz o jej obecnych lub potencjalnych klientach. Ten etap dzielimy na dwie części: research i warsztaty.
Research
Metody, jakimi się posługujemy, by zrobić szczegółowy research (dobieramy je w zależności od potrzeb naszego klienta):
- desk research — na jego bazie powstają persony, czyli odzwierciedlenie osób, które docelowo będą korzystać z wdrożonego przez nas serwisu.
- analiza danych z dostępnych źródeł (np. Google Analytics, Hotjar),
- obserwacja (tak, czasem idziemy w tym celu do sklepu stacjonarnego!),
- benchmarking — sprawdzamy rozwiązania projektowe w Polsce i na świecie, trendy i wyzwania stojące aktualnie przed branżą e-commerce.
- analiza konkurencji — sprawdzamy wyróżniające się praktyki projektowe i marketingowe, weryfikujemy drabinę korzyści: atrybuty, korzyści funkcjonalne i emocjonalne, zakres oferty, kanały sprzedaży, głównych odbiorców.
- badania ilościowe i jakościowe — projektujemy i przeprowadzamy badania ilościowe i jakościowe UX: badania kwestionariuszowe CAWI, indywidualne wywiady pogłębione IDI, badania użyteczności aktualnych rozwiązań etc. Rekrutujemy ankietowanych, moderujemy badania, analizujemy ich wyniki.
Warsztaty
Drugi krok to warsztaty, podczas których w zależności od wyzwań projektowych dobieramy ćwiczenia i narzędzia z obszaru UX, strategii i pozycjonowania marki, m.in.:
- Fusion Matrix (narzędzie opracowane i przystosowane do wdrożeń e-commerce, częściowo oparte na popularnym narzędziu Value-Effort Matrix).
- Product Information Canvas,
- Value Proposition Canvas,
- User Journey Map.
Etap 3: Develop & Deliver
Bazując na wszystkich danych zebranych na wcześniejszych etapach, przechodzimy do projektowania.
- Architektura informacji e-commerce - zwracamy dużą uwagę na odpowiednią architekturę informacji podczas projektowania serwisów e-commerce. Do budowania architektury wykorzystujemy schemat drzewa (flowchart) uwzględniający wszystkie strony w sklepie (kategorie wszystkich poziomów, strony statyczne, kategorie wpisów na blogu, panel konta użytkownika itp.), więc jesteśmy pewni, że nic nam nie umknie w fazie projektowania.
- Prototypowanie low-fidelity - bazując na wszystkich danych zebranych na etapach poprzedzających projektowanie, zaczynamy tworzyć prototyp serwisu niskiej szczegółowości. Koncentrujemy się na tym, jakie informacje będą kluczowe dla naszych użytkowników i co chcemy mu przekazać wraz z budową wstępnych szkieletów stron i komponentów.
- Określenie kierunku wizualnego za pomocą narzędzi moodboard — tworzymy tablicę stylu marki i person.
- Projektowanie high-fidelity — przechodzimy do tworzenia docelowego projektu
interfejsu. Tworzymy go zgodnie z podejściem Mobile First oraz Atomic Design. Równolegle pracujemy nad rozbudowaną dokumentację graficzną — Style Guide, a w przypadku większych systemów przygotowujemy kompleksową dokumentację Design Systemu w ścisłej współpracy z developerami, korzystając z narzędzi Storybook oraz Zeroheight. Projektujemy, używając narzędzia Figma.
Wdrożenie projektu
Następny etap to współpraca z zespołem deweloperskim nad wdrożeniem projektu w życie. Przygotowujemy dokładną dokumentację, planując wdrożenie danych funkcjonalności, co daje nam pewność, że cały zespół dokładnie wie, jakie powinny być nawet najmniejsze elementy interfejsu. Developerzy są często zaangażowani w pracę już od pierwszych spotkań (Commerce Blue Print). Na bieżąco konsultujemy z nimi każde rozwiązanie, zanim przekażemy je do wglądu i akceptacji klienta.
A co dalej? :)
Wszystko zależy od projektu i planów naszego klienta. Każdy, kto pracuje jako designer, szczególnie w e-commerce, zdaje sobie sprawę, że na samym wdrożeniu nie kończy się praca nad sklepem. Najczęściej zaraz po uruchomieniu systemu rozpoczynamy rozwój funkcjonalności serwisu. Przeprowadzamy również badania ewaluacyjne po wdrożeniu, by sprawdzić, jak użytkownicy odbierają zaproponowane przez nad rozwiązania i wprowadzić kolejne usprawnienia.
Dobre praktyki
Warto wspomnieć, że w procesie tworzenia architektury informacji i projektowania sklepów opieramy się oczywiście na naszym doświadczeniu, ale przede wszystkim bazujemy na heurystykach Baymard Institute. Baymard Institute to organizacja, która przeprowadziła ponad 54,000 godzin moderowanych badań użyteczności i na bazie tego opisała ponad 750 obszernych wytycznych, z którymi zaznajomieni są nasi projektanci. Każdy z członków naszego zespołu ma możliwość zdobycia Certyfikatu Baymard E-Commerce UX Professional.
Narzędzia
Wybrane narzędzia, z których korzystamy na co dzień:
- Projektowanie: Figma, Principle, Adobe CC, Affinity, Avocode
- Badania: Hotjar, TreeJack, OptimaISort, Typeform, Google Analytics
- Inne: Lean Canvas, Design Thinking, Value Proposition Canvas, Customer Journey Map, Value/Effort Matrix, BPMN 2.0, Analiza SWOT.
To tylko zarys naszego podejścia do projektowania w Strix. Jak wychodzi nam to w praktyce? Możecie się przekonać, zaglądając do naszych materiałów:
Wskakuj na nasz pokład
Jeśli nasze podejście do projektowania, wydaje Ci się interesujące, to dobrze się składa. Szukamy Senior Product Designera/Designerki do naszego teamu UX. Zależy nam na osobie, która ma doświadczenie, ale poza wiedzą techniczną z obszaru UX/UI i znajomością odpowiednich narzędzi, rozumie biznes, potrafi efektywnie korzystać z warsztatu, planować i realizować procesy projektowe.
Sprawdź szczegóły tutaj i wyślij swoje CV.
