Onemoda

Historia projektu

Biorąc pod uwagę udaną pracę nad poprzednimi projektami w długim okresie czasu, klient zwrócił się do nas z zadaniem przeprojektowania sklepu internetowego z markową odzieżą w USA. Otrzymaliśmy zakres wymagań i życzenia projektowe dla nowego sklepu internetowego, które omówiliśmy z klientem i jego przedstawicielem.

Głównym problemem starej wersji strony był brak nowoczesnego, godnego zaufania designu, który wpływał na współczynnik konwersji. Drugim najważniejszym aspektem była wersja mobilna, ponieważ 80% ruchu pochodzi z urządzeń przenośnych.

Szczególną uwagę zwrócono na szybkość witryny, ponieważ musiała ona ładować się szybko i wyświetlać poprawnie we wszystkich nowoczesnych przeglądarkach.

Kolejnym wymogiem było przeniesienie wszystkich danych witryny i adresów istniejących stron.

Zdecydowano się na opracowanie minimalistycznego i surowego projektu z naciskiem na produkty, biorąc jednocześnie pod uwagę niewielką ilość treści tekstowych.

Strona główna

Strona główna sklepu internetowego została oparta na typowej koncepcji projektów eCommerce z głównym pokazem slajdów, listą głównych kategorii, a także promocjami i markami.

Różnicą między stroną główną w tym projekcie jest widget koszyka, który wyświetla produkty dodane do koszyka wcześniej, jeśli użytkownik nie złożył wcześniej zamówienia.

W ramach projektu opracowano dodatkowe elementy do wyświetlania rabatów i ofert promocyjnych, na przykład:

• pasek w nagłówku strony;
• informacje o kuponach na karcie produktu na stronie kategorii i na stronie produktu;
• osobna strona z listą ofert promocyjnych.

Nagłówek i menu witryny

Nagłówek strony zawiera menu główne, wyszukiwarkę i koszyk. Menu podzielone jest na dwie główne sekcje – męską i damską, z których każda po najechaniu kursorem wyświetla podsekcje: odzież, obuwie i akcesoria, a także bardziej szczegółowe kategorie trzeciego poziomu.

Blok menu drugiego poziomu zawiera małe banery reklamowe, które pozwalają skupić uwagę użytkownika na niezbędnych sekcjach sklepu internetowego.

Pole wyszukiwania jest zaimplementowane z rozwijanymi etykietami narzędzi, które ładują produkty wprowadzone w zapytaniu wyszukiwania w locie.

Strona katalogu

Ta strona została zaprojektowana jako kafelek kategorii podrzędnych, w stylu Windows Metro, z obrazami, które wyświetlają rodzaj produktów z tej podsekcji, z których każdy płynnie powiększa się po najechaniu kursorem, tworząc dyskretny i przyjemny efekt.

Strona kategorii

Głównym zadaniem przy tworzeniu tej strony było skupienie się na zdjęciach produktów, przy czym format obrazu powinien być uniwersalny i odpowiedni dla wszystkich rodzajów produktów. Na podstawie proporcji obrazów wybrano rozmiary kart produktów, a także liczbę wyświetlanych jednostek w jednym wierszu.

Po najechaniu kursorem na kartę produktu obraz zmienia się na inny, aby pokazać ten produkt pod różnymi kątami na ogólnej liście bez konieczności przechodzenia do strony konkretnego produktu.

W lewej kolumnie znajduje się filtr, który pozwala wybrać żądany produkt bardziej szczegółowo. Podczas przewijania strony filtr jest ustalany na ekranie użytkownika w celu wygodniejszej interakcji z nim.

Istnieje również przycisk umożliwiający ukrycie filtra w przypadkach, gdy nie jest on istotny dla kupującego. W takim przypadku strona wyświetla więcej produktów w rzędzie.

Strona produktu

Szczególną uwagę zwrócono na zasadę pracy z rozmiarami produktów, ponieważ poprzednia wersja strony była zbudowana w bardzo niepraktyczny sposób. Podczas przenoszenia danych do nowej wersji strony, informacje zostały usystematyzowane i opracowano nową wygodną zasadę pracy i zarządzania rozmiarami.

Bardzo ważne było wyświetlenie tabeli rozmiarów dla każdego produktu, a także informacji o sposobie zwrotu i innych linków informacyjnych, takich jak „Zadaj pytanie” na produkcie.

Koszyk

Dla strony koszyka opracowano osobny szablon nagłówka, który nie odwraca uwagi użytkownika od procesu płatności. Koszyk został wykonany w minimalistycznym stylu, aby ułatwić jego percepcję.

Strona kasy

Strona z podziękowaniem za zamówienie

Strona wybranych produktów

Strona często zadawanych pytań

Ponieważ jednym z zadań redesignu sklepu internetowego było zwiększenie poziomu zaufania użytkowników, szczególną uwagę zwrócono na strony informacyjne, takie jak

• Strona FAQ;
• Strona kontaktowa;
• strona Informacje.

Strona kontaktowa

Strona O nas

Ta sekcja witryny nie była przeładowana dużą ilością tekstu, ale raczej przekazywała ideę marki poprzez element graficzny i efekty specjalne.

Strona błędu 404

Wersja mobilna