Przez ostatnie cztery miesiące przebudowaliśmy dużą część sklepu Culture Shock Club. Zmieniliśmy ponad 500 000 linii kodu, licząc dodane, usunięte i zrefaktoryzowane. Efekt to szybsza strona, prostsze zakupy i bardziej przydatne konta klientów.
Najważniejsze fakty
- Cztery miesiące przebudowy storefrontu: ponad 500,000 zmienionych linii wśród dodań, usunięć i refactorów.
- Każdą część wypuszczaliśmy, gdy była gotowa, potem dopracowywaliśmy, nie jeden wielki relaunch.
- Kluczowe strony mają 95 or higher w Lighthouse na mobile i desktop.
- Fokus: szybszy first screen, jaśniejsza homepage, quick add i wyszukiwanie, strony produktu, przeszukiwalna historia zamówień.
Nie odkładaliśmy wszystkiego na jedną wielką premierę. Każdą część wdrażaliśmy, gdy była gotowa, a potem dalej ją dopracowywaliśmy.
Szybszy pierwszy ekran
Poprzednia strona główna ładowała karuzelę produktów, zanim pokazała pierwszy pełny widok. Zdjęcia produktów, warianty, ceny, dostępność i kod karuzeli musiały więc ładować się od razu.
Nowa strona główna najpierw ładuje zdjęcie otwierające. Sekcje produktów, rekomendacje, analityka i narzędzia zgód ładują się później albo tylko wtedy, gdy są potrzebne.
Ograniczyliśmy też początkową pracę związaną z fontami, CSS i skryptami. Zasoby lepiej trafiają do pamięci podręcznej, a działania w koszyku nie przeładowują już niepowiązanych danych strony.
Najważniejsze strony mają teraz 95 lub więcej punktów w naszych testach Lighthouse, na telefonie i na komputerze. Szybciej też nadają się do użycia, są stabilniejsze podczas nawigacji i mniej obciążają telefony.
Strona główna o czytelniejszej strukturze
Poprzednia strona główna opierała się głównie na jednym strumieniu produktów. W nowym układzie każda sekcja ma konkretne zadanie.
Nowości mogą pojawiać się w kompaktowej galerii, a większe kolekcje w gęstszych siatkach. Produkty pokazane na górze nie wracają w kolejnych sekcjach, więc podczas przewijania jest mniej powtórek.
Strona główna może teraz przedstawić premierę, przypomnieć starsze produkty i poprowadzić odwiedzających do różnych części katalogu bez powtarzania tych samych rzeczy.
Szybkie dodawanie i wyszukiwanie bez zmiany strony
Wybór opcji produktu nie powinien wymagać opuszczania strony.
Szybkie dodawanie otwiera się teraz jako panel od dołu na telefonie i szerszy panel na komputerze. Obie wersje mają miejsce na zdjęcia, warianty i informacje o rozmiarach.
Wyszukiwanie podpowiada wyniki już podczas pisania i pamięta ostatnie wyszukiwania. Szczegółowe karty wyników ładują się tylko w razie potrzeby, więc przed rozpoczęciem wyszukiwania dzieje się mniej.
Dzięki temu możesz porównać produkty, wybrać opcję i dodać ją do koszyka, nie gubiąc wątku.
Strony produktów skupione na decyzji o zakupie
Przeorganizowaliśmy strony produktów wokół informacji potrzebnych do zakupu. Zdjęcia i media, wybrany wariant, cena i przyciski zakupu są na początku. Rozmiary, dostawa, pielęgnacja i zwroty pozostają pod ręką.
Galeria obsługuje teraz zdjęcia, wideo, zewnętrzne wideo i media 3D. Zmiana koloru może od razu przenieść galerię do pasującego zdjęcia.
Powiązane produkty pojawiają się w osobnej sekcji „More to Explore”. Są łatwo dostępne i nie konkurują z najważniejszymi informacjami o produkcie.
Koszyk, który reaguje od razu
Wcześniej koszyk zwalniał albo działał niespójnie podczas przetwarzania zmian. Przebudowaliśmy jego aktualizację, żeby od razu dawał informację zwrotną.
Zmiany ilości, usuwanie produktów, kody rabatowe i aktualizacje cen widać już wtedy, gdy serwer potwierdza końcowy wynik. Potem koszyk uzgadnia wyświetlane ilości i sumy z potwierdzoną odpowiedzią.
Postęp promocji jest też bardziej czytelny. Koszyk pokazuje, ile brakuje do darmowej dostawy albo oferty na kilka sztuk, a potem potwierdza, gdy ją osiągniesz.
Pełny koszyk i koszyk wysuwany działają teraz w dużej mierze tak samo. Dzięki temu obie drogi do kasy są spójniejsze.
Bardziej przydatne konta klientów
Sklep jest teraz przydatny także po złożeniu zamówienia.
Konta klientów mają historię zamówień z wyszukiwarką, miniaturami produktów, sumami, datami i statusem realizacji. Strony pojedynczych zamówień mogą pokazywać szczegóły wysyłki, zwrotu pieniędzy i zwrotu towaru.
W przypadku kwalifikujących się zamówień możesz wybrać produkty, ilości i powód zwrotu, a potem wysłać prośbę ze swojego konta.
Przebudowaliśmy też wybór kraju i języka. Możesz szukać po nazwie kraju, kodzie kraju, walucie lub języku, a wyniki są pogrupowane według regionu. Po zmianie rynku zostajesz na tej samej stronie, a język i ceny się aktualizują.
Skąd nazwa Energy Edition
Każda część tej wersji stawia na tempo. Strona główna wykonuje mniej pracy przed pierwszym wyświetleniem. Przeglądanie wymaga mniej zmian stron. Koszyk reaguje od razu, a konta klientów załatwiają więcej spraw po zakupie.
Żadna pojedyncza funkcja nie definiuje tej aktualizacji. To łączny efekt przebudowy tych części sklepu, z których korzystacie najczęściej.
Pracujemy dalej. Dajcie znać, gdy coś działa wolno, jest niejasne albo przeszkadza.
