Jak powinien wyglądać sklep, w którym łączy się najnowsze trendy w modzie z kreatywnym podejściem do klasyki? Dziś przedstawiamy Wam propozycją dla marki, która od wielu lat świetnie sobie z tym radzi. Staraliśmy się podejść redesignu Gino-Rossi.com wykorzystując te elementy, które są charakterystyczne dla brandu i przedstawić je w najbardziej atrakcyjny sposób. Sprawdźcie sami jak wyszło 😉

Poniższy wpis jest propozycją, która powstała z naszej wewnętrznej inspiracji i zamiłowania do produktów marki Gino-Rossi. Jeśli chcesz porozmawiać o potrzebach swojego sklepu internetowego w kontekście nowoczesnego i użytkowego UI/UX to skontaktuj się z nami na kontakt@digital-fashion.agency.

Strona główna sklepu

Mając na względzie modowy charakter sklepu Gino-Rossi.com, wysokiej jakości – głównie skórzany – asortyment produktów, sklep zachowany jest w eleganckiej, czarno-białej tonacji. Ważne elementy jak CTA (call to action) akcentujemy kolorem złotego brązu. W nagłówkach wykorzystano font Futura, zaś dla opisów – Montserrat.

W proponowanym widoku strony głównej w górnej scrollowanej belce umieszczono szybki kontakt do sklepu, rotacyjną informację np. dotyczącą promocji / dostawy / wysyłki, logo, menu, wyszukiwarkę, konto użytkownika, link do ulubionych produktów oraz koszyk. 

W przeciwieństwie do obecnej formy prezentacji promocji, gdzie zaraz po wejściu mamy bardzo dużą ich liczbę, tutaj ograniczyliśmy ją do jednej, dużej i czytelnej informacji (w ramach rotującego banera). Jest to dobre miejsce na zamieszczenie promocji lub wyjątkowych ofert. Dzięki dużym zdjęciom na całą szerokość strony, kilku kluczowym informacjom oraz przyciskowi CTA, mamy jasny komunikat dokąd prowadzi nas slider. Dodatkowo wyświetlamy informację ile grafik mamy w rotacji. Grafika zakłada obszar widoczny “above the fold”, czyli powyżej linii przewijania. 

Pod banerem widoczne są korzyści z zakupów w sklepie oraz główne kategorie produktowe marki Gino Rossi. Dzięki temu użytkownik bardzo szybko jest informowany, czym zajmuje się sklep, jakie produkty ma w asortymencie. Dodatkowo może to być miejsce na promocję np. konkretnej kolekcji. Sekcja ta została opatrzona wizerunkowymi zdjęciami oraz karuzelą produktową. Prezentacja produktów na stronie głównej i listingu zakłada zmniejszenie obecnie widocznych dużych białych przestrzeni. Produkty mają przyciągać uwagę, stąd na hover zdjęcie powinno się automatycznie podmieniać na przedstawiające szczegóły produktu lub jego inne ujęcie.

Ponadto, na stronie głównej dodaliśmy sekcję z banerami kategorii, które chcemy aktualnie promować („bądź na bieżąco”). Sekcja jest w formie karuzeli, co pozwala w atrakcyjny i prosty sposób zaproponować konkretną kategorię, kolekcję, czy produkty o podobnych cechach. 

Poniżej umieściliśmy informację o korzyściach z dołączenia do Klubu Gino Rossi. Obecnie, jedynie w stopce mamy link do klubu, który z uwagi na prezentację – łatwo przeoczyć. Warto zadbać o właściwe wyeksponowanie programu lojalnościowego, ponieważ może on być dzięki temu jeszcze bardziej wartościowym kanałem sprzedaży dla klientów.  

Sekcja z Instagrama znajdująca się niżej, buduje wizerunek marki poprzez ciekawe, aranżacyjne zdjęcia.

Ostatnim elementem strony głównej jest stopka, która została utrzymana w minimalistycznej formie, prezentując najważniejsze linki na stronie, w bardziej niż do tej pory uporządkowanej strukturze. Dodatkowo uzupełniliśmy je o: informację o kontakcie z obsługą sklepu, graficzne przedstawienie dostępnych płatności i form dostawy. Wizualnie mocno oddzieliliśmy element newslettera od linków informacyjnych stopki.  

Stronę główną odświeżonej wersji sklepu możesz podziwiać tutaj. 

Menu

Menu na stronie jest zawsze dużym wyzwaniem. To główny element nawigacyjny, a nieprzemyślany wygląd, układ czy nazewnictwo mogą prowadzić do niespójnych komunikatów i de facto utrudniać użytkownikowi znalezienie właściwej dla niego oferty. Mając to na uwadze, wyodrębniliśmy top kategorie widoczne na stronie od razu. Po wybraniu jednej z nich rozwija się menu, które konstrukcyjnie jest takie same dla każdej nadrzędnej kategorii. W pierwszej kolumnie mamy linki prowadzące do nowości, promocji, etc. Druga kolumna to linki do kategorii produktowych, zaś trzecia to tzw. linki przeznaczenia (np. gdy użytkownik nie do końca wie, czego szuka, ale wie na jaką okazję). Zaciemnienie pozostałej części strony po rozwinięciu menu pozwala na lepsze skupienie wzroku użytkownika na podkategoriach menu.

Widok nowego menu możesz zobaczyć tutaj.

Listing produktów 

Sporą zmianę pod względem użyteczności i wyglądu przeszedł także listing. Zaproponowany widok uwzględnia breadcrumbsy ułatwiające nawigację, możliwość przełączenia dogodniejszego widoku (gdzie mamy siatkę z większą ilością produktów w rzędzie lub siatkę z dwoma produktami, ale dużymi zdjęciami) oraz baner promocyjny z jasną, krótką informacją czego dotyczy. Poniżej zamieszczono krótką informację SEO, opatrzoną tytułem kategorii, co jest jasnym komunikatem dla użytkownika, gdzie się aktualnie znajduje. 

Dużą zmianę przeszła prezentacja filtrów, które umieściliśmy w naszej wizualizacji w poziomej belce nad produktami. Dzięki  takiemu zabiegowi, widoczna jest większa część najważniejszych filtrów (przy większej ilości mamy dodatkowy przycisk “pokaż wszystkie filtry”). Po wybraniu konkretnego filtra widoczna jest jasna informacja, co zostało wybrane oraz możliwość łatwego resetowania filtrów.

Lewa kolumna została w całości przeznaczona na nawigację po kategoriach produktowych. Oprócz standardowego drzewa kategorii, mamy tu także linki do ciekawych promocji czy konkretnych marek.

Po najechaniu na zdjęcie, wyświetlana jest alternatywna grafika, CTA dodawania do koszyka oraz ikonka umożliwiająca dodanie produktu do ulubionych.

Ponadto uwzględniono widok produktu niedostępnego poprzez wyraźne zaznaczenie, że produkt jest chwilowo wyłączony ze sprzedaży. 

Stronę listingu zamyka poszerzona informacja o kategorii, w której aktualnie jesteśmy. 

Całą stronę listingu możesz zobaczyć tutaj.

Karta produktu

Głównym celem karty produktu w sklepie Gino Rossi jest atrakcyjne i wyczerpujące przedstawienie wizualne asortymentu. Zaproponowany widok zakłada, że pozycja elementu z nazwą, ceną, buttonami CTA jest stała (nie zmienia się podczas scrollowania). Dzięki temu CTA jest zawsze dostępne. 

Podobnie dolna belka z informacjami o produkcie, dostawie, zwrotach czy dodatkowych akcjach informacyjnych / promocyjnych – nie znika podczas scrollowania. Linki w belce powodują przescrollowanie strony do wysokości tekstów. Obecnie na stronie sklepu opis produktu jest ukryty, co negatywnie wpływa na użyteczność tego elementu. W naszej propozycji opis został dodatkowo wzbogacony o zasady pielęgnacji, najważniejsze informacje dotyczące wysyłki, zwrotów.

Duże, wizerunkowe zdjęcia nie wymagają przeklikiwania się przez kolejne miniaturki. Wystarczy, że użytkownik scrolluje stronę, by zobaczyć wszystkie ujęcia produktu.

Klikając w element rozwijany rozmiaru, zaciemnia nam się cała strona, tak aby wzrok skupić w obszarze doboru rozmiaru. Dodatkowo po kliknięciu widoczny jest link z tabelą rozmiarów. W przypadku rozmiaru niedostępnego jest on wyświetlany na liście, tak aby klikając w link „powiadom mnie”, łatwo przesłać informację, o jaki rozmiar nam chodzi. Informacja o braku rozmiaru została umieszczona pod rozwiniętą listą.

Kartę produktu zamyka sekcja z produktami komplementarnymi, które w zestawie z głównym produktem, będą stanowiły ciekawy zestaw.

Jesteś ciekaw, jak to wygląda na stronie? Zobacz tutaj.

Redesign Gino-Rossi.com

Redesign może być zarówno ewolucją, jak i rewolucją, a stopień zmian zależy stopnia wyzwania, które przed nami stoi. W tym procesie nie chodzi o wynalezienie koła od nowa, ale naprawienie tego, co się “nie kręci”. Zawsze w przypadku redesignu warto zadać sobie pytanie, na ile wprowadzone zmiany pomogą biznesowi w przyszłości oraz jaki będzie koszt ich wprowadzenia. Warto pamiętać, że użytkownicy działają na zasadzie przyzwyczajeń i każda większa zmiana może początkowo spotkać się z oporem. Odpowiednie przygotowanie, poprzedzone badaniami, wywiadami z użytkownikami na pewno pozwoli przeprowadzić ten proces właściwe.