Projekt UX/UI sklepu internetowego dla ekskluzywnej marki jubilerskiej.
Podsumowanie projektu:
Zaprojektowaliśmy UX nowego sklepu internetowego w oparciu o dane dotyczące grup docelowych, ich charakterystycznych cech oraz przyzwyczajeń.
Na podstawie gotowych makiet UX zaproponowaliśmy zupełnie nowy UI oparty o opracowany na potrzeby projektu styleguide.
Gotowy projekt oddaliśmy z komentarzami dotyczącymi działania oraz materiałami niezbędnymi w procesie wdrażania.
Klient
Marka Schubert oferuje swoim klientom najwyższej jakości biżuterię w modnym i ponadczasowym wydaniu. Idea firmy głosi, że biżuteria podkreśla nasze piękno, a sam zakup powinien stanowić wyjątkową przyjemność.
Zadanie
Nasza rola polegała na analizie potrzeb klientów i dostosowaniu do nich interfejsu użytkownika. Głównym założeniem projektowym był nowy UI oraz UX strony, który może oferować swoim klientom wygodne i atrakcyjne wizualnie narzędzia zakupowe, co przekłada się na pozytywny wizerunek marki i zwiększoną sprzedaż.
Proces projektowy
Projekt sklepu internetowego został wykonany przy użyciu najnowocześniejszych narzędzi do prototypowania UX/UI na rynku. Dzięki nim klient miał ciągły wgląd do procesu co znacznie ułatwiało i przyspieszało komunikację. Prace na layoutem obejmowały wersję mobile i desktop oraz kompletny styleguide. Wszystkie z tych elementów są niezbędne dla poprawnego procesu wdrażania sklepu.
Nowy UI
Dobrze zaprojektowane interfejs użytkownika przyciąga uwagę klientów i pozytywnie wpływają na ich postrzeganie marki. Dlatego warto zadbać o odpowiednią prezentację produktów, intuicyjną nawigację oraz estetyczny wygląd strony internetowej.
Sekcje upsellingowe
Sekcje upsell i cross-sell są niezwykle istotne w procesie zakupowym sklepu internetowego z ekskluzywną biżuterią ze złota. Dzięki nim klienci mogą poznać produkty, które idealnie uzupełnią ich zakupy i zapewnią im pełne zadowolenie z transakcji.
Łatwy kontakt
Upsell to proponowanie klientom bardziej ekskluzywnych produktów, natomiast cross-sell to sugerowanie produktów, które będą dobrze komponować się z ich wcześniejszymi zakupami. Dzięki temu klienci nie tylko mogą odkryć nowe, interesujące produkty, ale też mogą skorzystać z najlepszych ofert i zniżek. Warto zwrócić uwagę na te sekcje, aby zapewnić sobie kompleksową ofertę biżuterii ze złota i mieć pewność, że każdy zakup będzie satysfakcjonujący.
KV Marki
KV marki zyskał nową delikatną kolorystykę oraz komplet nowoczesnych, spójnych ikonografii. Modyfikacji uległy również style hover, paginacji, elememtów funkcjonalnych takich jak checkboxy lub radiobuttony.
UX w procesie zakupowym
Dzięki odpowiedniemu UX klienci łatwo znajdą interesujące ich produkty, szybko dokonają transakcji i będą czuli się bezpiecznie podczas wprowadzania danych osobowych i finansowych. UX zapewnia także pozytywne doświadczenie użytkownika i zwiększa szansę na powrót klienta, którym zależy na dokładności i estetyce oferowanych produktów oraz oczekują wysokiej jakości obsługi.
Właściwie zaprojektowany sklep internetowy, która jest łatwa w obsłudze i dostarcza klientom pozytywnych wrażeń, zwiększa sprzedaż oraz buduje trwałe relacje z klientami. Dlatego też, właściciele sklepów internetowych powinni poświęcić wiele uwagi UX, aby zapewnić klientom najlepsze wrażenia z zakupów i zbudować pozytywny wizerunek swojej marki.
Złożoność projektu
Charakter tego środowiska wpływało na decyzje projektowe nie tylo pod względem wizualnym ale również strategicznym. Podczas projektowania wszystkich 170 widoków, szczególną uwagę należało zwrócić na budowę funkcjonalności mobilnych oraz desktopowych, których modyfikacje w Magento 2 mają znaczący wpływ na czas wdrożenia.
Integracja z narzędziami zewnętrznymi
W ramach projektu, naszym zadaniem było również zadbanie o konsekwentne zastosowanie nowego KV również w narzędziach zewnętrznych tj. konfigurator obrączek lub aplikacja do mierzenia rozmiaru pierścionka. Spójność wizualna potwierdza jakość oferowanych usług oraz udoskonala doświadczenie użytkownika.
Strona produktu
Projekt procesu zakupowego uwzględniał różnorodność typów oraz cech produktów. Zaowocowało to modularnym projektem podstrony produktu, uwzględniającym wszystkie możliwe zmienne. Ilość oraz rodzaj modułu wybierany jest indywidualnie i nie ma to wpływu na czytelność oferty.
Na potrzeby prototypowania zostały przygotowane takie widoki jak: produkt z konfiguratorem, produkt prosty, produkt prosty z wariantami, produkt z konfiguratorem oraz wariantami, produkt w przedsprzedaży, produkt promocyjny, karta podarunkowa z wariantami itp. Dodatkowe, dodawane indywidualnie lub masowo moduły upsellingowe (dopełnij swój look), możliwość sprawdzenia dostępności w salonie lub przymierzenia biżuterii w aplikacji (AR), w znacznym stopniu wpływają na decyzje zakupowe użytkownika.
Zamów i odbierz w salonie
Naszym zadaniem bylo takie zaprojektowanie funkcjonalności, aby po pierwsze: użytkownik miał łatwość w znalezieniu najbliższych salonów oraz otrzymaniu wyników wyszukiwania w tym samym oknie bez potrzeby przeładowywania strony (użytkwonik nadal znajduje się na karcie produktu). Po drugie aby ograniczenia związane z czasem logistycznym sklepu były maksymalnie czytelne dla użytkownika, zanim jeszcze wyruszy do sklepu po odbiór.
Konto użytkownika
Przed oraz podczas zakupów, zachęcamy użytkownika do założenia bezpłatnego konta, który umożliwia tworzenie biblioteki ulubionych produktów, włączenia notyfikacji o ich dostępności, wglądu do historii zakupów oraz szybkich zwrotów. Wprowadzanie opinii jest możliwe tylko przez użytkowników zalogowanych i tylko na temat zakupionych przez siebie produktów co znacznie uwiarygadnia ich autentyczność.
Zwrot zamówienia
Zwroty zamówienia zostały oparte o specjalny moduł magento, który wymagał zmian stylistycznych aby zachować spójność z resztą sklepu. Proponowane zmiany nie mogły wpłynąć na sam mechanizm działania więc musieliśmy wykazać się elastycznością w projektowaniu.
Banery reklamowe
Listing produktów jest zdecydowanie najczęściej odwiedzanym obszarem sklepu. Wysoka frekwencja stwarza dobre warunki dla komunikacji prosprzedażowej i z tego powodu zdecydowaliśmy się na zastosowanie banerów w polach produktów. Ich umiejscowienie na liście nie jest przypadkowe oraz sam komunikat dobierany jest indywidualnie do kategorii produktów.
Ścieżki użytkownika
Zadbaliśmy o to aby ścieżka użytkownika od pierwszego wejścia na stronę, poprzez treści wizerunkowe oraz ofertę przebiegała płynnie bez zakłóceń aż do procesu zakupowego. Służą temu odpowiednio wykorzystane CTA, banery oraz linki. Nawet w przypadku gdy użytkownik znajdzie się na nieistniejącej już podstronie, w łatwy sposób wróci na wyznaczoną ścieżkę skąd będzie mógł kontynuować podejmowanie decyzji zakupowych.
