Projektowanie UX dla cross-border e-commerce marki COBI posiadającej sieć sprzedaży w 50. krajach

Klient

COBI S.A. to polski producent klocków konstrukcyjnych oraz firma, zajmująca się importem i dystrybucją zabawek uznanych marek. Przedsiębiorstwo działa na rynku od 1987 roku, a swoją działalność rozpoczęło od produkcji puzzli i gier planszowych.

W związku z prężnym rozwojem firmy, jej oddziały początkowo pojawiały się nie tylko w Warszawie i Mielcu, ale biura sprzedaży zaczęły funkcjonować również w Czechach, na Słowacji i na Węgrzech.

Obecnie COBI to największy producent klocków konstrukcyjnych w Europie Środkowej i Wschodniej, który swoich przedstawicieli posiada także w Wielkiej Brytanii, Niemczech, Francji, USA i w innych krajach. W międzynarodowej sieci sprzedaży znajduje się niemal 50 krajów na całym świecie.

Klient

COBI S.A. to polski producent klocków konstrukcyjnych oraz firma, zajmująca się importem i dystrybucją zabawek uznanych marek. Przedsiębiorstwo działa na rynku od 1987 roku, a swoją działalność rozpoczęło od produkcji puzzli i gier planszowych.

W związku z prężnym rozwojem firmy, jej oddziały początkowo pojawiały się nie tylko w Warszawie i Mielcu, ale biura sprzedaży zaczęły funkcjonować również w Czechach, na Słowacji i na Węgrzech.

Obecnie COBI to największy producent klocków konstrukcyjnych w Europie Środkowej i Wschodniej, który swoich przedstawicieli posiada także w Wielkiej Brytanii, Niemczech, Francji, USA i w innych krajach. W międzynarodowej sieci sprzedaży znajduje się niemal 50 krajów na całym świecie.

Współpraca

Marka COBI, posiadająca sieć sprzedaży, obejmującą blisko 50. krajów na całym świecie, zdecydowała się kontynuować ekspansję zagraniczną, przechodząc na model sprzedaży cross-border w e-commerce.

Z COBI  w obszarze digital współpracujemy już ponad 11 lat. Klient, mając na uwadze projekty, które realizowaliśmy dla niego dotychczas, zdecydował się powierzyć nam projektowanie UI oraz UX nowej odsłony e-commerce. Sklep internetowy kierowany jest na kilka rynków i posiada 3 wersje językowe:

• polską
• angielską
• niemiecką

Dostosowanie projektu do sprzedaży cross-border  wiązało się z koniecznością zastosowania uniwersalnych rozwiązań, znanych odbiorcom na różnych rynkach.   Z drugiej strony nie mogliśmy jednak zapomnieć  o tym, że każdy z tych rynków posiada swoją specyfikę i wymagania. Tylko dzięki odpowiedniemu wyważeniu tych aspektów, możliwe było dostarczenie użytkownikom rozwiązań, zapewniających im pozytywne doświadczenia. 

Nasze prace z zakresu projektowania podzieliliśmy na następujące etapy:

1. Research – pozyskanie danych, które stanowiły fundament dalszych działań i pozwoliły na podejmowanie świadomych i trafniejszych decyzji.
2. Strategia – identyfikacja problemów oraz formułowanie insightów, poprzez segmentację klientów, opracowanie person oraz customer journey.
3. Projektowanie - zaprojektowanie architektury informacji, makiet UX oraz projektu UI, które określiły kształt projektowanego e-commerce.

Grupa docelowa

Spróbujmy przez chwilę wyobrazić sobie typowego klienta marki COBI. Przed oczami może rysować się nam obraz rodzica, poszukującego  wymarzonych klocków dla swojej pociechy. Z dużym prawdopodobieństwem będzie to klient, który skrupulatnie wyszukuje informacje na temat potencjalnych zestawów.

Miłośnicy historii i militariów, czyli (nie)typowy klient Cobi. Myśląc o producencie takim jak COBI, zarysowany wyżej obraz klienta, wydaje się mieć zastosowanie dla przeważającej większości użytkowników. Ale, czy na pewno? Czy w takim przypadku nie damy się zwieść pozorom, podczas, gdy jedną z najbardziej lojalnych grup klientów będą kolekcjonerzy, miłośnicy historii i militariów, którzy poszukują wśród: militarnych, specjalnych i współczesnych kolekcji historycznych. Ponadto mają do wyboru wojskowe i cywilne samochody, w tym modele licencjonowane, a także klocki na sztuki. Segmentacja użytkowników COBI  pozwoliła potwierdzić i wyodrębnić następujące grupy odbiorców:

1. Okazjonalni – kupujący na prezent.
2. Rodzice.
3. Kolekcjonerzy.

Każda z tych grup to inne motywacje oraz momenty bólu. Zagłębienie się w charakterystykę tych grup w zakresie zaangażowania, świadomości czy lojalności pozwoliło lepiej zrozumieć istotę problemów i wyzwań, z którymi spotykają się użytkownicy.

Projektowanie UX i UI

Projektowanie UX cross-border e-commerce, wymagało połączenia ducha marki z uniwersalnością rozwiązań stosowanych na rynkach, do których e-commerce kieruje swoją działalność. Obszarami, na które położyliśmy szczególny nacisk były:

• Nawigacja i architektura.
• Optymalizacja pod urządzenia mobilne.
• Optymalizacja pod kątem konwersji.
• Ścieżka zakupowa.
• Komunikacja z klientem.
• „Look and feel”.

Cross-border e-commerce dostosowany do urządzeń mobilnych

Optymalizacja projektu pod kątem urządzeń mobilnych to krok w stronę przede wszystkim 3. grup użytkowników:

1. Tych, którzy na etapie researchu związanego z wyborem produktu, zdecydowanie najczęściej wybierają urządzenie mobilne, aby później dokonać zakupu na desktopie.
2. Lojalnych klientów sprawdzających e-commerce regularnie w poszukiwaniu premier lub wyprzedaży.
3. Wprawnych mobile’owych konsumentów , którzy cały proces zakupowy realizują na swoim smartfonie, wspierając się przy tym mobilnymi aplikacjami do płatności.

Przebieg działań

Benchmarking – nauka na błędach innych

Analiza zagranicznych serwisów konkurencyjnych pozwoliła pozyskać informacje, dotyczące realiów i dobrych praktyk stosowanych w poszczególnych krajach. Z jednej strony daje to możliwość pozyskania dużej ilości wiedzy o tym, na co warto zwrócić uwagę i zaadoptować to do własnych potrzeb, a z drugiej strony pozwala wystrzegać się rozwiązań, których zastosowanie może  mieć więcej wad niż zalet.

Benchmarking umożliwił:

• Trafniejszy dobór sprawdzonych funkcjonalności.
• Dużo większą innowacyjność w kontekście proponowanych rozwiązań.
• Identyfikację potencjalnych zagrożeń jeszcze przed rozpoczęciem projektowania.
• Wykorzystanie sprawdzonych funkcjonalności, które są znane wszystkim użytkownikom.

Projektowanie UX  - koncentracja na tym co najważniejsze

Projektowanie rozpoczęliśmy od przygotowania makiet UX w odcieniach szarości. Projekt został przygotowany dla 3.  rozdzielczości: mobile, tablet i desktop. W wyniku prac powstały makiety dla 18. unikalnych podstron, z czego każda podstrona posiadała makiety w 3. rozdzielczościach. Finalnie uzyskaliśmy aż 54 widoki.

Przygotowanie makiet dało nam możliwość skoncentrowania się na funkcjonalnościach, zawartości i układzie projektowanych widoków, co nie byłoby w pełni możliwie w sytuacji, w której od razu  przeszlibyśmy do projektowania finalnego UI. Przygotowanie makiet UX przyniosło również szereg innych korzyści:

• Możliwość szybszej identyfikacji potencjalnych problemów z użytecznością i dostępnością.
• Efektywniejsza komunikacja i możliwość skupienia się na zawartości i funkcjonalnościach.
• Szybsza iteracja zmian.
• Możliwość walidacji wstępnych idei i pomysłów.
• Możliwość wstępnej oceny technicznej wykonalności.

Projektowanie UI – dopracowanie detali, które mają znaczenie

W kolejnym etapie skupiliśmy się na dopracowaniu zaprojektowanych makiet pod kątem UI. W pierwszej kolejności opracowaliśmy propozycję widoku strony głównej, która pozwoliła wytyczyć „look and feel” projektu. Po akceptacji pierwszego widoku przeszliśmy do projektowania kolejnych, w tym do dopracowania kolorystyki, typografii, ikonografii, rozkładu oraz hierarchii wizualnej elementów.

Podczas projektowania UI dopracowaliśmy i uwydatniliśmy kluczowe elementy z perspektywy ścieżki zakupowej klienta. Poniżej prezentujemy wybrane elementy:

• Łatwo dostępne menu mobilne – przypięte do dolnej krawędzi ekranu, pozwala wygodnie nawigować po e-commerce dzięki łatwemu dostępowi do menu, konta oraz koszyka. Smartfony posiadają coraz większe ekrany, co powoduje, że użytkownik, trzymając smartfon jedną ręką, nie jest w stanie tą samą ręką obsłużyć elementów, znajdujących się na górze strony. Rozwiązanie znane z aplikacji mobilnych zapewnia łatwy dostęp bez konieczności używania drugiej ręki.

• Wykorzystanie społecznego dowodu słuszności dzięki sekcji „Najchętniej kupowane” – niezdecydowani użytkownicy podczas poszukiwania produktu mają możliwość zasugerowania się wyborami innych użytkowników. Dzięki sekcji „Najchętniej kupowane” użytkownik otrzymuje informacje, które produkty cieszą się największą popularnością.

• Teaser z premierami produktów – bywa, że COBI  decyduje się oferować wyłącznie limitowane edycje swoich produktów. Wówczas występują sytuacje, w których nie wszyscy zdążą kupić wymarzony produkt. Dlatego najwięksi fani marki mają możliwość skorzystania z funkcjonalności, dzięki której otrzymują  powiadomienia tuż po tym, jak produkt zostanie wprowadzony do sprzedaży.

• Duże zdjęcie produktowe oraz ekspozycja najważniejszych informacji o produkcie – aspekt wizualny odgrywa niebagatelną rolę w procesie wyboru klocków konstrukcyjnych do zakupu. Dzięki rozplanowaniu zdjęcia produktowego na 50% szerokości kontenera kupujący mają możliwość szczegółowego zapoznania się z wyglądem danego produktu. Po prawej stronie użytkownicy mogą z kolei pozyskać kluczowe informacje o produkcie.

Wsparcie UX podczas wdrażania

Za wdrożenie strony odpowiedzialna była agencja interaktywna Ideo, z której wywodzi się marka Ideo Force. W ramach prac wspieraliśmy zespół programistów i na bieżąco konsultowaliśmy wszelkie kwestie. Ścisła współpraca zespołu technicznego z projektantami pozwoliła zwiększyć efektywność prowadzonych działań. Dodatkowo w ramach działań optymalizacyjnych e-commerce jest cały czas rozwijany, wdrażane są nowe funkcjonalności i usprawnienia.

Wnioski, czyli jak projektować UX w cross-border e-commerce

Kluczowe w procesie projektowania cross-border e-commerce jest rozpoznanie specyfiki i potrzeb rynków, na których prowadzona będzie ekspansja. Zastosowanie np. nieodpowiednich rozwiązań, form dostawy czy płatności może skutecznie blokować potencjał, jaki drzemie w danym e-commerce.

Ważne jest również to, aby odpowiadać na potrzeby użytkowników, poprzez rozwiązania dostarczające im realnej wartości. Korzystanie ze znanych odbiorcom  funkcjonalności jest właściwe , jednak warto pójść o krok dalej i zastanowić się nad aspektami, które pozwolą  marce zbudować przewagi konkurencyjne.  

Otwartość klienta pozwoliła  przenieść współpracę na jeszcze wyższy poziom. To z kolei doprowadziło do efektywnego wykorzystania czasu i pozyskania przez nas cennych informacji, które firma gromadziła  przez całe lata funkcjonowania w branży.