17 listopada, 2017

Od czasu do czasu zastanawiamy się w eEngine, jak mogłyby wyglądać bliższe naszym sercom serwisy, gdybyśmy to my mieli okazje je zaprojektować i wdrożyć. Tak oto powstała propozycja redesign Smmash.pl – jednej z popularniejszych marek odzieżowych typu fightwear. Zobaczcie sami, jak „mogłoby” to wyglądać i dajcie znać, co sądzicie o naszej propozycji.

Redesign strony głównej Smmash.pl

W celu lepszej prezentacji contentu strony głównej Smmash.pl, jej szerokość została rozszerzona do 1430px. Dzięki temu można sobie pozwolić na eksponowanie dużych, ładnych zdjęć przy jednoczesnym zrównoważonym świetle między danymi elementami. Całość została przekuta w myśl material/flat design który zapewnia nowoczesny wygląd oraz szeroki wachlarz rozwiązań projektowych.

Projekt witryny przewiduje rozwiązania responsywne które mają ułatwiać odbiorcom eksplorację gdzie obecnie technika RWD nie jest w ogóle wdrożona. Ze względu na sportowy charakter marki, kolorystyka została zachowana z wdrożeniem wyrazów artystycznych w tle witryny czy obszarze newslettera, w celu wzmocnienia przekazu. Wykorzystano także bardziej czytelne kroje pisma.

Header sklepu internetowego po dobrym treningu w eEngine

Dużą rewolucję przeszedł header sklepu internetowego. Menu jest bardziej subtelne oraz czytelne i zajmuje tyle miejsca, ile powinno. Megamenu także w swojej postaci jest mniejsze oraz wykorzystuje swoją formę na bardziej atrakcyjną prezentację jednego z modułów strony, którym jest „Tworzenie zestawu”. Jest to dodatkowa przestrzeń, gdzie ten właśnie moduł zostaje promowany. Zrezygnowaliśmy z, dobrze już opatrzonych wszędzie, flag państw, które mają symbolizować odpowiednią zmianę języka strony. Postawiliśmy na minimalistyczne rozwiązanie z oznaczaniem skrótem nazwy państwa w postaci rozwijanej listy.

Menu jest rozciągnięte na całą szerokość strony i powinno zacząć towarzyszyć użytkownikowi po przescrolowaniu 1 pełnego swojego ekranu. Przy etykietach menu uwzględniono informowanie użytkowników o nowościach w danych sekcjach za pomocą labela „NEW”. 

Slider z zupełnie nowym planem treningowym

Pomyśleliśmy, że przydałoby się pochylić też nad sliderem i zaopatrzyć go w kilka nowych funkcji. Ich wypadkowa ma wspierać proces sprzedaży produktu. Po lewej stronie możemy nawigować po kolejnych modelach/seriach które zostaną wyświetlone na głównej grafice, natomiast po prawej stronie, poza automatyczną karuzelą, możemy nawigować po produkcie/produktach z wybranej serii. Ostateczne przekierowanie powinno zostać zapewnione przez „CTA button” (zachęcenie do zakupu), umieszczony na głównej grafice, który także zawiera elementy animowane na hover.

Dodatkowo wyeksponowaliśmy przysłowiowe 2 zdania przedstawiające markę (Kim jesteśmy).

Kafle sekcji zostały rozebrane na części pierwsze gdzie teraz każdy może właściwie linkować do swojej dedykowanej podstrony. Taki zabieg powinien wyeliminować przypadkową pomyłkę klienta sklepu polegającą na zabłądzeniu. Duże wyeksponowane zdjęcia i przejrzysty opis powinny zachęcić odbiorcę do zajrzenia na kolejną, poszukiwaną przez niego, podstronę. Według nas klikalne powinno być zdjęcie oraz sam button.

Sekcja produktowa i technologie

Sekcja produktowa w swoim obszarze także wykorzystuje nowo dostępny obszar i wprowadza dodatkowy produkt. W tej wersji mamy bezpośrednio pod ręką możliwość przełączenia między 3 kategoriami produktowymi, a także między trzema widokami kolejnych produktów, co jest sygnalizowane po prawej stronie. Prezentacja produktów w nowej propozycji ma przyciągać uwagę oraz atrakcyjnie wizualnie je przedstawiać. Po najechaniu na zdjęcia kursorem automatycznie zmienia się na kolejne w kolejce. Wstępna karta produktu została także wyposażona w krótki opis będący zajawką właściwego, znajdującego się na karcie produktu. Opcja kupna wraz z ceną zostały należycie wyeksponowane.

Sekcja „Technologie” pozostała na stronie głównej ponieważ, stanowi ciekawy element prezentacji informacji. Jednakże i ten moduł przeszedł lifting polegający na dopasowaniu wizualnym jak i funkcjonalnym. Dana sekcja miałaby się wyświetlać i wypełniać całą szerokość contentu jedynie po najechaniu kursorem myszy.

Postanowiliśmy zrezygnować z dużej ilości banerów z długimi opisami ponieważ, pełnią jedynie rolę wypełniacza miejsca. Zamiast nich zaproponowaliśmy newsletter, który swoją formą wizualną wzmacnia przekaz strony i daje użytkownikowi możliwość podjęcia decyzji o zapisie i otrzymywaniu informacji.

Stopkę zaprojektowaliśmy maksymalnie minimalistycznie, dzięki czemu zawiera jedynie najbardziej potrzebne elementy wraz z treściami informacyjnymi. 

Jeśli chcesz zobaczyć redesign strony głównej w pełnej krasie, to uderz tutaj. A przed nami druga runda, czyli redesign karty produktu. 

Karta produktu Smmash.pl wchodzi na ring

Karta produktu kładzie znacząco większy nacisk na eksponowanie produktu i jego wartości. Umieszczenie bliżej środka zdjęcia przedstawiającego produkt ma za zadanie zwrócenie uwagi większej ilości klientów. Tutaj przyświecała nam myśl:  to co bliżej środka jest bardziej zauważalne. Po lewej stronie jest do dyspozycji galeria zdjęć z zaznaczeniem obecnie aktywnego. Po prawej stronie znajduje się sekcja informacyjna z opcją kupna. Czytając od góry do dołu możemy także określić parametry i ilość jaka nas interesuje w celu kupna produktu. Zrezygnowaliśmy z przesadnego eksponowania tabeli rozmiarów na rzecz mniej inwazyjnego i częściej stosowanego rozwiązania: prezentacji tabeli w popupie. Jako dodatkową część zachowano cechy charakterystyczne dla marki oraz procesu zakupowego, tak aby jak najlepiej informować klienta sklepu.

Poniżej znajduje się opis produktu, tak aby klient miał pełny zestaw informacji co do kupowanej rzeczy. Po prawej stronie opisu znalazła się jako nowość sekcja rekomendacji. Użytkownicy (zalogowani) mogą dodawać swoje opinie. Taki zabieg często wzmacnia wiarygodność marki oraz pozytywnie wpływa na chęć zakupu.

Nad sekcją rekomendacji znalazły się 3 przyciski akcji, kolejno: udostępnienie, dodanie do ulubionych oraz porównanie. Użytkownicy dzięki ww akcjom mogą dzielić się znalezionym produktem ale także sam sklep może zbierać ważne dla siebie informacje (np. na temat popularności poszczególnych produktów).

Poniżej mamy klasyczną konstrukcję produktów polecanych i tych które inni użytkownicy także kupili. Należy zadbać o prawidłowe połączenie kategorii.

Stronę karty produktu możecie zobaczyć w pełnej krasie tutaj.

„Wirtualny” redesign Smmash.pl

Oczywiście wszystko, co mogliście zobaczyć i przeczytać wyżej to tylko „wirtualny” redesign, który w biznesowej rzeczywistości wymagałby intensywnej pracy z brandem oraz zdefiniowania najważniejszych celi i wartości, jakie kierują marką od wewnątrz. Traktujcie naszą propozycję jako eksperyment myślowy, któremu poddaliśmy się w wolnej chwili, między projektami. 

A gdybyście chcieli „przeżyć” redesign na własnej skórze, to mam nadzieję, że wiecie jak się z nami skontaktować

Inne artykuły tęgo autora

Ania
29 grudnia, 2020
Ania
16 grudnia, 2020
Ania
19 maja, 2020