Sklep dla pasjonatów fotografii – jak mógłby wyglądać? Dziś ruszamy z propozycją dla marki, która wspiera profesjonalistów, jak i amatorów. Staraliśmy się podejść do tematu redesing Fripers.pl na zasadzie: wykorzystać te elementy, które są charakterystyczne dla brandu i przedstawić je w najbardziej atrakcyjny sposób. Zobaczcie sami.

Strona główna sklepu

Z uwagi na techniczny charakter sklepu Fripers.pl, prezentowanych produktów, jak i w nawiązaniu do kolorystyki loga, sklep zachowany jest w jasnych, nawiązujących do marki barwach. Istotne elementy akcentowane są kolorem pomarańczowym oraz ciemnoszarym. Wykorzystany font dobrze prezentuje się zarówno w większych “wyboldowanych” nagłówkach, jak i w tekście opisowym.

Duże zmiany dotyczą prezentacji menu i głównych informacji, które są obecnie widoczne w górnej sekcji strony. Z uwagi na sporą ilość elementów (menu, wyszukiwarka, językowość, koszyk, podstawowe informacje o firmie, infolinia, logowanie) podzieliliśmy je na dwie sekcje. Górne menu to funkcje sprzedażowe. Stąd wyodrębniliśmy tu: menu, wyszukiwanie, koszyk, logowanie oraz językowość. Elementy informacyjne (o firmie, kontakt, infolinia, social media) są widoczne po kliknięciu w pływający z lewej pasek. dzięki temu są zawsze ‘pod ręką” (zwłaszcza istotny kontakt, który w tak specjalistycznej branży produktów może być pomocny). 

• megamenu – nie ukrywamy kolejnych podkategorii, są od razu widoczne. Taki zabieg pozwala szybciej znaleźć potrzebną kategorię przy jednoczesnym
• maksymalnym wykorzystaniu przestrzeni
• boczne menu – wspomniane elementy informacyjne w postaci dużych linków oraz zawsze widoczna infolinia i social media, pozwalają w szybki, łatwy sposób na uzyskanie pomocy
• zaproponowana wyszukiwarka na całą stronę nie tylko pomaga wyszukać produkty, ale “podpowiada” też najczęściej odwiedzane kategorie. Dzięki temu zabiegowi, nawet ktoś kto nie do końca był pewien czego szuka (np. statyw, ale jaki…?) ma od razu podpowiedziane konkretne produkty
• logowanie – przenosi do osobnej podstrony. Gdzie można się zalogować, utworzyć konto. W momencie gdy użytkownik jest zalogowany w miejsce napisu “Logowanie”, pojawia się “Moje konto” z rozwijanym menu: do ustawień konta, historii zamówień, schowka, + element WYLOGUJ.

„Slider” pełni funkcję przede wszystkim prezentacyjno – sprzedażową (zakłada częstą rotację produktów – powinny być wymieniane przynajmniej raz w tygodniu, aby nie “opatrzyły” się użytkownikom). Jest to dobre miejsce na zamieszczenie promocji czy wyjątkowych ofert. Dzięki wykorzystaniu całej szerokości strony. Dzięki nazwie produktu, kilku kluczowym informacjom oraz przez CTA button umieszczony zaraz pod sekcją opisu, 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. Stąd mocno zaznaczony element scroll ze strzałką w dół. Nie pozostawia wątpliwości, że mimo iż widzimy “zamkniętą” w pewnej przestrzeni grafikę prezentującą produkt, to poniżej mamy dalszą część strony.

Kolejne sekcje strony głównej to prezentacja najpopularniejszych marek, odsyłających do konkretnych kategorii produktów (lub wszystkich produktów dla danej marki). Sekcja ta przewiduje mocniejsze zaakcentowanie marki środkowej i skupienie wzroku na jej kategoriach (poprzez zmniejszenie opacity pozostałych). Kolejne sekcje przewijane są prawo / lewo.

Poniżej sekcja z banerami odsyłająca do najnowszych produktów, topowej kategorii czy np. mniej oczywistych “pomysłów na prezent”, które na obecnej stronie nie są raczej akcentowane.

Sekcja produktowa w swoim obszarze także wykorzystuje nowo dostępny obszar. Dzięki temu zabiegowi możemy wprowadzić lepszej jakości, większe zdjęcia, bardziej czytelne nazwy produktów i ceny. Prezentacja produktów ma przyciągać uwagę, stąd na hover zdjęcie powinno się automatycznie podmieniać na inne przedstawiające bądź to szczegół produktu lub inne ujęcie.

Sekcja dedykowana marce, znajdująca się poniżej została opatrzona w mocną, przykuwającą uwagę grafikę, która jednocześnie “zamyka”, odcina nam pewien obszar strony głównej. Od elementów typowo sprzedażowym przechodzimy do sekcji informacyjnej na stronie. Wspomniana grafika opatrzona jest ostatnio dodanymi opiniami, które na obecnej stronie trochę “znikają”. Poniżej mamy sekcją z opisem (SEO) oraz głównymi kategoriami. Poniżej mocno kontrastowa sekcja blogowa. Ostatnim wizualnie odciętym elementem w grafice strony jest sekcja korzyści, która została uzupełniona o element bezpieczeństwa. Poniżej znajduje się zapis do newslettera (nieco mniej eksponowany poprzez stonowane kolory), ale nadal bardzo dobrze widoczny. Ostatnim elementem tej sekcji jest stopka, która została utrzymana w minimalistycznej formie, prezentując najważniejsze linki na stronie.

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

Listing produktów 

Strona listingu produktów nastawiona jest mocno na prezentację wizualną produktów. Uporządkowane zostały informacje, które obecnie znajdują się na listingu przy produkcie. Zarówno nazwa jak i cena nie zmieniają położenia względem strony głównej. Są “wzbogacone” o dodatkowy krótki, jednozdaniowy opis znajdujący się pod nazwa produktu. dzięki temu mamy logiczną całość: nazwa, cena, opis. Dostępności i szybkość dostawy została zaprezentowana w firmie ikony i czasu, dzięki czemu łatwo dostrzec informację i szybko ocenić termin wysyłki. Do produktu linkuje zarówno zdjecie, jak i nazwa produktu. Dodatkowo po najechaniu, oprócz podmiany zdjęcia wysuwają się kafelki akcji, które pozwalają zobaczyć opis produktu, od razu dodać do koszyka (przydatne zwłaszcza przy drobniejszych akcesoriach, kiedy opis mocno nas nie interesuje) oraz możliwość dodania do porównywarki.

Filtry początkowo są ukryte, dzięki czemu mamy więcej przestrzeni na prezentację produktu. Po kliknięciu w “pokaż filtry” rozwija się od góry na szerokość strony moduł prezentujący wszystkie dostępne dla danej kategorii filtry. Dzięki takiej prezentacji filtrów, nawet przy ich małej ilości nie tracimy miejsca na stronie na “białe tło” pod filtrami.

Karta produktu

Karta produktu została podzielona na dwie sekcje. Z lewej strony mamy dobrze eksponowany produkt wraz z galerią miniatur. Z prawej wszystkie podstawowe informacje, które czytane od góry do dołu ułożone są w pewnej hierarchii. Głównym założeniem było zminimalizowanie efektu niewidocznego buttona CTA. Stąd ułożenie kolejnych elementów: nazwa produktu, producent, opinie, cena i buttony. Dopiero poniżej mamy sekcję z opisem i uporządkowane elementy z dodatkowymi informacjami.
Poniżej mamy sekcję z podstawowymi informacjami, opiniami, pytaniami prezentowaną na zasadzie przełączanych tabsów oraz element “inni kupili także”.

Widok karty produktu zamyka przypomnienie korzyści korzystania ze sklepu (jako element wzmacniający poczucie bezpieczeństwa), zapis do newslettera oraz standardowo – stopka.

Logowanie

Strona logowania jest bardzo minimalistyczna, opatrzona jedynie w najważniejsze elementy. Dostosowana jest zarówno do osób, które posiadają konto, jak i nowych użytkowników. Stąd jasny podział na dwie sekcje. Strona ta jest widoczna także jako pierwszy krok procesu zakupowego. Po kliknięciu w koszyku na “zamawiam”, użytkownik jest automatycznie kierowany do tej podstrony. Dla obecnych użytkowników to swoiste “przypomnienie” o zalogowaniu do konta (co daje korzyści takie korzyści jak chociażby historia zamówień), dla nowych – zachęcenie do założenia np. poprzez wskazanie dlaczego warto mieć konto w sklepie Fripers.pl. Niemniej jest grupa osób, która ze sklepu będzie chciała skorzystać okazjonalnie – dla nich przeznaczony jest button “Kupuje jako gość”.

Redesign Fripers.pl

Redesign sklepu internetowego, to zawsze delikatny temat. Sprawia on, że klienci muszą porzucić swoje dawne przyzwyczajenia i przestawić się na nowe rozwiązania, chociaż na pozór może to budzić w nich opór. Najważniejsze w tym przypadku, to odpowiednie przygotowanie się do tego typu prac: zebranie odpowiedniej ilości informacji, przebadanie i przeanalizowanie zachowań użytkowników, a następnie wyciągnięcie z kwintesencji zmian layoutu. Naszym zadaniem jest przeprowadzić klienta przez ten proces i wdrożenie sklepu w taki sposób, żeby sprzedawał.