PrestaShop
Sylius
Akeneo PIM
PrestaShop
Sylius
PIM Akeneo
Redesign sklepu Triny: 6 tysięcy kosmetyków naturalnych i setki marek
Triny sprzedaje kosmetyki naturalne i zdrową żywność od 2013 roku. Zaprojektowaliśmy i wdrożyliśmy nową wersję sklepu na PrestaShop w technologii PWA – od danych i design systemu, przez ekrany projektowane najpierw dla telefonu, po kasę rozpisaną na cztery kroki.
Kim jest Triny
Triny to sklep z kosmetykami naturalnymi i organicznymi, obecny na rynku od 2013 roku. W ofercie ma produkty setek marek – od pielęgnacji włosów i twarzy, przez makijaż, po zdrową żywność i eko dom.
Katalog liczy ponad 6 tysięcy pozycji wielu producentów. Część klientek wraca po konkretny kosmetyk, część szuka zamiennika w tej samej kategorii, a jeszcze inna trafia do sklepu z poziomu marki. Każda z tych ścieżek musi działać na tym samym katalogu.
Sklep od początku pracuje na PrestaShop. W 2019 roku Triny rozpoczął z nami współpracę nad nową wersją serwisu, opartą na danych ilościowych z analityki i obserwacjach zachowań klientek w starym sklepie.
Szeroka oferta, która ma się dać przeszukać z telefonu
Nowa wersja sklepu miała pogodzić rozmiar katalogu z prostotą wyboru. Im więcej produktów w ofercie, tym łatwiej klientka gubi się między kategoriami – i tym szybciej rezygnuje.
Główne wyzwanie: Przełożyć katalog liczący 6 tysięcy produktów na ścieżkę, w której klientka trafia do właściwego kosmetyku w kilku ruchach – również na ekranie telefonu.
Redesign prowadzony iteracyjnie
Pracowaliśmy w rytmie Lean UX: projekt, wdrożenie, obserwacja, poprawka. Same prace UX zajęły ponad 300 roboczogodzin.
Dane ilościowe i jakościowe
Punktem wyjścia było to, co Triny wiedział o swoich klientkach: analityka, dane sprzedażowe i obserwacje zachowań w starym sklepie.
Design system i makiety
Powstał spójny zestaw komponentów: siatka, typografia, karta produktu, listing, formularze kasy. Każdy ekran projektowaliśmy najpierw w wersji mobilnej.
PrestaShop i PWA
Nowy layout wdrożyliśmy na PrestaShop w technologii PWA, więc mogliśmy sięgnąć po wzorce nawigacji znane z aplikacji mobilnych.
Wdrażanie etapami
Kolejne widoki trafiały na produkcję partiami, a wnioski z obserwacji wracały do projektu przed następną iteracją.
Nawigacja, filtry i karta produktu pod szeroki katalog
Zakup kosmetyku zaczyna się od zawężenia oferty do kilku produktów. Pod to zaprojektowaliśmy cztery obszary sklepu.
Wejście w katalog
- Mega menu z kategoriami głównymi i podkategoriami
- Drzewo kategorii w kolumnie przy listingu
- Wyszukiwarka obejmująca cały katalog
- Osobna sekcja marek i producentów
Filtry, które zawężają wybór
- Filtrowanie po marce i kraju producenta
- Suwak przedziału cenowego
- Sortowanie po popularności i cenie
- Zestaw filtrów rozwijany na życzenie
Karta produktu pod decyzję
- Galeria zdjęć produktu z podglądem wariantów
- Oceny i liczba opinii przy nazwie
- Etykiety nowości i promocji
- Informacja o kończącym się stanie magazynowym
- Dodanie do ulubionych jednym gestem
Koszyk i kasa
- Edycja ilości i usuwanie pozycji w koszyku
- Pasek pokazujący, ile brakuje do darmowej dostawy
- Sekcja produktów uzupełniających zamówienie
- Kasa w czterech krokach z wyborem dostawy i płatności
Zobacz wdrożony sklep
Trzy widoki, na których najlepiej widać efekt redesignu: karta produktu na telefonie, koszyk i projekt kasy.
Karta produktu, która mieści się w kciuku
Na telefonie zdjęcie, cena, wybór wariantu i przycisk zakupu układają się jeden pod drugim, a stała belka na dole daje dostęp do menu, koszyka i konta. Nad przyciskiem zakupu widać ocenę produktu i informację o kończącym się stanie magazynowym.
Podsumowanie, próg darmowej dostawy i propozycje uzupełniające
Koszyk pokazuje pozycje z możliwością zmiany ilości, podsumowanie kwoty i pasek z brakującą wartością do darmowej dostawy. Pod spodem klientka dostaje zestaw produktów uzupełniających zamówienie.
Kasa rozpisana na siatce, krok po kroku
Ekrany kasy powstawały na wspólnej siatce, wspólnych odstępach i komponentach formularzy. Klientka przechodzi przez logowanie, wybór dostawy, adres i potwierdzenie zamówienia, z paczkomatami, kurierem, odbiorem w punkcie i płatnością przy odbiorze do wyboru.
Moduły z katalogu Sellision użyte w sklepie
Powtarzalne funkcje sklepu pokryliśmy modułami z naszego katalogu, dzięki czemu projekt mógł skupić się na nawigacji po szerokiej ofercie i na warstwie mobilnej.
Perspektywa zespołu realizującego
Triny to projekt, w którym o wyniku decyduje nie liczba funkcji, tylko porządek w katalogu i wygoda na telefonie.
Przy 6 tysiącach produktów każda decyzja projektowa mnoży się przez cały katalog. Dlatego zaczęliśmy od danych i design systemu, a dopiero potem od ekranów. Klientka Triny nie ogląda sklepu – ona szuka jednego kosmetyku i chce go znaleźć z telefonu w kilka ruchów.
Daniel Tomaszewski CEO, Sellision
Szeroka oferta ułożona w jedną ścieżkę zakupu
Triny dostał sklep, w którym rozmiar katalogu przestał być przeszkodą – zarówno na desktopie, jak i na telefonie.
Nowa wersja sklepu powstała na własnym design systemie, więc kolejne widoki i kampanie Triny buduje z gotowych komponentów, bez projektowania każdego ekranu od zera. Nawigacja, filtry i karta produktu prowadzą klientkę od kategorii do koszyka, a kasa domyka zamówienie w czterech krokach.
Sukcesy naszych klientów
Firma zrozumiała nasze potrzeby i dokonała szeregu integracji, aby dokonać usprawnień pozwalających na efektywniejsze obsługiwanie klientów i skalowania sprzedaży na 7 rynków europejskich.
Na uznanie zasługuje także komunikacja, proaktywne podejście do rozwoju naszego sklepu i rozwiązywaniu skomplikowanych problemów.
Adam Affek Account Manager w Mondex
Wdrożenie przebiegło pomyślnie zgodnie z przedstawionym procesem oraz planem wdrożenia. Do projektu zostało przydzielonych dosłownie kilka osób, dzięki czemu komunikacja była na wysokim poziomie.
Dzięki temu mamy świetną nową platformę sprzedażową, a Sellision nowego i stałego klienta, ponieważ zdecydowaliśmy się na dalszą współpracę w zakresie rozwoju naszego sklepu.
Tomasz Niemira Właściciel w Niemirka
Sellision to doświadczona firma wdrożeniowa, która zaprojektowała i wdrożyła sklep internetowy skierowany do klientów B2C oraz B2B. Wdrożenie przebiegło pomyślnie zgodnie z przedstawionym procesem oraz planem wdrożenia.
Efekt końcowy? Sklep, który nie tylko świetnie wygląda, ale jest intuicyjny i funkcjonalny dla naszych klientów dostępny jest pod adresem bottari.pl
Katarzyna Michnowska Manager w Bottari Polska
Jestem zadowolona z realizacji wdrożenia sklepu internetowego dla naszej marki Neess. Wdrożenie sklepu przebiegło sprawnie, zgodnie z określonym budżetem i czasem wdrożenia.
Doceniam profesjonalizm w zakresie designu i UX, które znacząco przyczyniły się do poprawy konwersji na urządzeniach mobilnych. Ich zaangażowanie i skrupulatność w zarządzaniu projektem doprowadziło do pomyślnego wdrożenia w krótkim czasie.
Izabela Kopała Brand Manager w Donegal
Praca z nimi była profesjonalna i efektywna. Od początku współpracy czułem, że zlecane zadania są należycie realizowane i miały odzwierciedlenie w raportowanym czasie, który stanowił podstawę do rozliczeń.
Sellision wykazał się dobrą wiedzą techniczną i zrozumieniem moich potrzeb i tym samym mogę polecić tą firmę.
Szymon Pawlik CTO w Devisu
Sklep internetowy od Sellision daje poczucie dobrze zainwestowanego budżetu. Platforma nie tylko działa bez zarzutu pod kątem technicznym, ale jest potężnym narzędziem marketingowym.
Sklep także doskonale komunikuje wartości naszej marki. Polecam Sellision jako partnera w tworzeniu sklepów internetowych zorientowanych na marketing.
Damian Kuboszek Chief marketing officer w FSS
Ponad 200 wdrożeń e-commerce B2B & B2C
Za Sellision stoi zespół z 12-letnim doświadczeniem
Status PrestaShop Expert, setki wdrożonych i utrzymywanych sklepów oraz zespół dev, DevOps, QA i CRO to konkretna przewaga: znamy pułapki aktualizacji, architekturę sklepu i to, co realnie podnosi sprzedaż.
- Status PrestaShop Expert 3★ – najwyższy poziom certyfikowanego partnerstwa
- Pełne repozytorium kodu i dokumentacja – bez vendor-lockingu, wszystko dostajesz na własność
- Dostęp do autorskich modułów (np. B2B), które realnie obniżają koszty wdrożeń
Planujesz nowoczesny sklep B2C?
Zbudujemy szybki, mobilny sklep dopasowany do Twojej marki – z migracją, dobrym UX i integracjami. Bezpłatna konsultacja, bez zobowiązań.
Umów bezpłatną konsultację