Sober Lover to marka merchowa stworzona wokół Matiskater, streamera z grupy YFL założonej przez Young Multi. Naszym zadaniem było przygotowanie sklepu internetowego dla nowego dropu oraz marki, która od początku miała wyglądać bardziej jak niezależny brand odzieżowy niż klasyczny sklep z merchem.
W tej realizacji połączyliśmy projekt sklepu, logo, animacje, UX, koszyk, checkout, płatności, wysyłkę i rozwiązania wspierające sprzedaż pierwszej kolekcji.
Zobacz też: Sober Lover – logo
Zobacz też: Sober Lover – animacja
SCREEN: strona główna Sober Lover – hero z animacją
Sklep, który miał wyglądać jak marka
Przy Sober Lover ważne było, żeby sklep od pierwszego wejścia nie wyglądał jak techniczna lista produktów. To miał być prosty, estetyczny i dobrze poprowadzony e-commerce, który pasuje do dropu odzieżowego i społeczności zbudowanej wokół twórcy.
Dlatego projekt został poprowadzony bardziej w stronę marki fashion niż typowego sklepu internetowego. Minimalistyczny układ, mocne hero, prosta nawigacja i szybka ścieżka do kolekcji były tutaj ważniejsze niż rozbudowane opowiadanie o firmie.
SCREEN: widok strony głównej z kolekcją
Header z prostą nawigacją i wysuwanym menu
Na samej górze strony znajduje się pasek z informacją o darmowej wysyłce od 359 zł. To mały element, ale dobrze działa sprzedażowo – użytkownik od razu wie, od jakiej kwoty może skorzystać z darmowej dostawy.
Header składa się z logo Sober Lover, które również zaprojektowaliśmy w ramach tej realizacji, hamburgera po lewej stronie oraz ikon użytkownika i koszyka po prawej.
Menu otwiera się jako wysuwany panel z lewej strony. Znalazły się w nim kategorie produktów: wszystkie produkty, bluzy, t-shirty i akcesoria, a także podstawowe zakładki: kontakt, polityka prywatności, regulamin, zwroty i reklamacje.
SCREEN: wysuwane menu po lewej stronie
Koszyk działa odwrotnie – wysuwa się z prawej strony. Dzięki temu menu i koszyk mają osobne, czytelne zachowania, a użytkownik nie trafia za każdym razem na nową podstronę.
SCREEN: wysuwany koszyk po prawej stronie
Produkty od razu na stronie głównej
Niżej na stronie głównej znajduje się sekcja „wszystkie produkty”, czyli pełny drop pokazany od razu po przewinięciu. Produkty zostały ułożone w prostą siatkę – cztery produkty w rzędzie i dwie linie.
Karty produktów są minimalistyczne: zdjęcie, nazwa i cena. Po najechaniu użytkownik może dodać produkt do koszyka bez wchodzenia na osobną stronę produktu.
Po kliknięciu „dodaj do koszyka” pojawia się mały widget, w którym można wybrać rozmiar i potwierdzić dodanie produktu. Dopiero potem wysuwa się koszyk z prawej strony.
SCREEN: hover na produkcie z przyciskiem dodania do koszyka
SCREEN: popup wyboru rozmiaru
To rozwiązanie skraca ścieżkę zakupową. Użytkownik może szybko przejrzeć drop, wybrać rozmiar i dodać produkt bez zbędnego przechodzenia między podstronami.
Społeczność jako część sklepu
Pod produktami dodaliśmy sekcję zachęcającą do obserwowania Sober Lover na Instagramie. Komunikat mówi o oznaczeniu marki na relacji po zakupie i otrzymaniu 10% rabatu na następne zamówienie.
W tej sekcji pojawiają się zdjęcia osób, które kupowały rzeczy z poprzednich dropów. To ważne, bo w przypadku merchu społeczność jest częścią marki. Użytkownik widzi, że te rzeczy naprawdę żyją poza sklepem – są noszone, pokazywane i wracają na stories.
SCREEN: sekcja Instagram / zdjęcia klientów i fanów
Ta część działa też jako element zaufania. Zamiast pisać, że „społeczność kocha nasze produkty”, pokazujemy prawdziwych ludzi, którzy już je mają.
Stopka z informacjami, płatnościami i newsletterem
Stopka została zaprojektowana tak, żeby zamykała stronę wszystkimi najważniejszymi informacjami. Pojawiają się tam komunikaty o darmowej wysyłce, bezproblemowych zwrotach i bezpiecznych płatnościach.
Niżej znajduje się logo, dane firmy, e-mail kontaktowy, linki do Facebooka i Instagrama, odnośniki, przydatne linki oraz zapis do newslettera ze zgodą na regulamin i politykę prywatności.
SCREEN: stopka z informacjami i newsletterem
Na samym dole dodaliśmy ikony obsługiwanych metod płatności i dostawy, m.in. Visa, BLIK, Mastercard, Apple Pay oraz InPost.
Koszyk zaprojektowany pod domykanie zamówienia
Koszyk nie jest tylko listą dodanych produktów. Dodaliśmy w nim elementy, które pomagają użytkownikowi przejść dalej i mogą zwiększać wartość zamówienia.
Na górze koszyka znajduje się licznik do darmowej wysyłki. Jeśli użytkownikowi brakuje niewiele do progu 359 zł, widzi to od razu i może zdecydować, czy chce dorzucić coś jeszcze.
Dodaliśmy też logikę produktów do kompletu. Jeśli w koszyku znajduje się np. różowa bluza, koszyk może zaproponować różową koszulkę jako uzupełnienie zestawu. To prosty cross-sell, ale dobrze pasuje do kolekcji odzieżowej, w której produkty są projektowane jako spójne sety.
Niżej znajduje się sekcja na kod rabatowy oraz przejście do podsumowania.
SCREEN: koszyk
Checkout z płatnościami i dostawą
Checkout został przygotowany tak, żeby był możliwie czytelny i prosty. Użytkownik może uzupełnić dane, zapisać się do newslettera, wpisać kupon i przejść przez zamówienie bez niepotrzebnych kroków.
W checkoutcie pojawia się też możliwość podania danych do faktury, w tym numeru NIP. To ważne przy sklepie, który ma działać nie tylko wizualnie, ale też poprawnie od strony sprzedaży i obsługi zamówień.
SCREEN: checkout – dane klienta i podsumowanie
Wdrożyliśmy integrację z InPostem oraz płatnościami Autopay. Dzięki temu sklep obsługuje wygodną dostawę i najważniejsze metody płatności online.
SCREEN: metody dostawy InPost i płatności Autopay
Kategorie produktów i sortowanie
Oprócz strony głównej przygotowaliśmy też klasyczne strony kategorii, takie jak wszystkie produkty, bluzy, t-shirty i akcesoria.
Widoki kategorii są proste i skupione na produktach. Użytkownik może przeglądać kolekcję oraz sortować produkty według dostępnych opcji.
SCREEN: strona kategorii produktów
Nie rozbudowywaliśmy tych widoków na siłę. W przypadku dropu najważniejsze jest szybkie dotarcie do produktu, a nie przechodzenie przez skomplikowaną strukturę sklepu.
Strona produktu z tabelą rozmiarów i cross-sellem
Na stronie produktu znalazły się wszystkie elementy potrzebne do podjęcia decyzji: zdjęcia, nazwa, cena, rozmiar, ilość, tabela rozmiarów, informacje o preorderze, wysyłce, zwrotach, opis i dodatkowe informacje.
Na stronie produktu pojawia się też sekcja „dobierz do kompletu”. Jeśli użytkownik ogląda różową koszulkę, strona może zaproponować różową bluzę jako pasujący produkt.
SCREEN: strona produktu – główny widok
Wdrożyliśmy też skrypt odpowiadający za właściwe tabele rozmiarów. Dla t-shirtów wyświetla się tabela rozmiarów koszulek, a dla bluz tabela rozmiarów bluz. Dzięki temu użytkownik nie musi zgadywać, które wymiary dotyczą konkretnego produktu.
SCREEN: tabela rozmiarów dla t-shirtu
SCREEN: tabela rozmiarów dla bluzy
Pod produktem dodaliśmy również sekcję podobnych produktów, która pozwala dalej przeglądać kolekcję i może pomóc w dorzuceniu kolejnego produktu do koszyka.
SCREEN: podobne produkty
Sklep gotowy pod drop
Całość została zaprojektowana z myślą o pierwszym dropie kolekcji. Przy takich sklepach ważne jest, żeby użytkownik szybko zrozumiał markę, zobaczył produkty, wybrał rozmiar i przeszedł do zakupu bez tarcia.
Dużo uwagi poszło w estetykę, detale interfejsu, zachowanie koszyka, cross-sell, komunikaty o dostawie i cały proces zakupowy.
Dobra sprzedaż pierwszej kolekcji była dla nas potwierdzeniem, że sklep nie tylko wyglądał dobrze, ale też dobrze prowadził użytkownika przez zakup.
Co finalnie powstało?
W ramach tej realizacji przygotowaliśmy sklep internetowy Sober Lover dla merchu Matiskater. Projekt połączył branding, animację, e-commerce, UX i rozwiązania wspierające sprzedaż kolekcji.
Zakres obejmował:
- sklep internetowy dla marki Sober Lover,
- projekt logo,
- animowane hero przygotowane pod drop,
- pasek z informacją o darmowej wysyłce od 359 zł,
- header z logo, kontem użytkownika i koszykiem,
- wysuwane menu z kategoriami i linkami informacyjnymi,
- wysuwany koszyk po prawej stronie,
- sekcję wszystkich produktów na stronie głównej,
- dodawanie produktu do koszyka z poziomu listingu,
- popup wyboru rozmiaru,
- licznik do darmowej wysyłki w koszyku,
- produkty do kompletu w koszyku,
- sekcję Instagram ze zdjęciami klientów i fanów,
- stopkę z danymi, linkami i newsletterem,
- ikony metod płatności i dostawy,
- strony kategorii produktów,
- sortowanie produktów,
- stronę produktu z tabelą rozmiarów,
- dynamiczne tabele rozmiarów dla koszulek i bluz,
- sekcję „dobierz do kompletu”,
- podobne produkty,
- checkout,
- integrację z InPostem,
- integrację z Autopay,
- obsługę kuponów rabatowych,
- dane do faktury i pole NIP.
To była realizacja, w której sklep musiał być szybki, estetyczny i gotowy na sprzedaż dropu. Nie chodziło tylko o wdrożenie produktów, ale o cały zakupowy flow: od pierwszego kliknięcia w kolekcję, przez wybór rozmiaru, koszyk, cross-sell, darmową wysyłkę, aż po checkout i płatność.
