Comfyco

Historia projektu

Klient skontaktował się z nami z zadaniem przeprojektowania internetowego sklepu meblowego na rynek amerykański. Z przyjemnością dowiedzieliśmy się, że wybrał nas, ponieważ w naszej pracy piszemy czysty kod.

Sam klient zna się na programowaniu i dlatego szukał zespołu programistów na tyle długo, by oddać swój projekt w dobre ręce.

Klient zapewnił techniczne zadanie przeprojektowania sklepu internetowego, ale zanim rozpoczęliśmy pracę, odbyliśmy kilka konferencji, aby zrozumieć, jak szczegółowo widzi swój nowy sklep internetowy.

Strona domowa

Po zdefiniowaniu głównych aspektów, nasz zespół rozpoczął tworzenie strony głównej i opracował koncepcję z kilkoma rozwiązaniami w ramach zakresu obowiązków.

Podczas opracowywania projektu szczególną uwagę zwrócono na obrazy, ponieważ to one sprzedają towary odwiedzającym.

Trudność polegała na tym, że obrazy mają różne rozmiary i jakość, ponieważ sklep oferuje produkty od różnych dostawców.

Na tej podstawie zdecydowano się użyć kwadratowego kształtu dla zdjęć produktów, aby uprościć ich skalowanie i przycinanie.

Menu

W trakcie tego procesu opracowaliśmy dwa menu:

• klasyczne w nagłówku strony;
• stałe menu dostępne podczas przewijania strony.

Pozostawiliśmy również kluczowe elementy nawigacyjne – wyszukiwanie i koszyk – w stałym bloku.

Strona kategorii

Na tej stronie znajduje się sporo elementów, które pozwalają klientowi na interakcję z produktami na stronie, a także wybór tego, którego potrzebuje.

Sama kategoria wygląda następująco:

• baner promocyjny z nazwą kategorii;
• filtr;
• kafelek produktow;
• opis kategorii;
• blok z ostatnio oglądanymi produktami.

Bloki karty produktu wyglądają inaczej niż na stronie głównej, ponieważ w przeciwieństwie do kategorii mają na celu przyciągnięcie uwagi, podczas gdy na stronie kategorii są bardziej informacyjne i zawierają dodatkowe zdjęcia, które zmieniają się po najechaniu kursorem, co czyni witrynę interaktywną i wygodną.

Strona produktu

Jednym z najbardziej złożonych elementów w tym projekcie jest strona produktu, ponieważ gdy użytkownik wyląduje na konkretnym produkcie, może natychmiast kupić powiązane produkty.

Zdecydowano się uczynić obszar głównego obrazu produktu kwadratowym, aby zapewnić optymalne wyświetlanie obrazów o różnych rozmiarach i proporcjach, a także, jeśli to możliwe, przymocować pasek boczny do ekranu.

Większość produktów na obrazie tworzy zestawy, które harmonizują ze sobą. Jest to nie tylko bardzo wygodne dla użytkownika, ponieważ może on wybrać zarówno łóżko, jak i pasujący do niego stolik nocny, ale także pomaga zwiększyć średnią kontrolę.

Ponadto opracowano dodatkowe bloki, które wzbudzają zaufanie i zachęcają użytkownika do dokonania zakupu lub rozpoczęcia interakcji z witryną, na przykład

• recenzje produktów;
• możliwość zadawania pytań dotyczących produktu.

Odpowiedzi na pytania są dostępne dla wszystkich użytkowników, co pozwala nie tylko zwiększyć zaufanie do tego konkretnego produktu, ale także poszerzyć bazę pytań od klientów, z którymi można pracować, ulepszając w ten sposób produkt.

Ponadto, specjalnie dla tej strony, opracowaliśmy system banerów, które powiadamiają użytkownika o zniżkach dostępnych na stronie i dostarczają informacji o ważnych kuponach.

Strona produktu z zestawami

Strona koszyka

Strona koszyka została zaprojektowana w taki sposób, aby użytkownik nie spędzał dużo czasu na jej wypełnianiu, ponieważ cały proces jest podzielony na małe kroki, które są łatwiejsze do wizualnego postrzegania przez użytkownika.

Ważny punkt. Zdecydowano się na usunięcie menu głównego w koszyku, aby nie odwracać uwagi użytkownika od procesu płatności.

W koszyku użytkownik wybiera dogodną metodę dostawy, dodatkowe usługi dostawy, a proces wypełniania koszyka jest wyświetlany na osi czasu powyżej, która wyświetla również aktualny koszt zamówienia na niektórych etapach.

Strona kosztów wysyłki

Ponieważ ten sklep internetowy działa w całych Stanach Zjednoczonych, koszt dostawy może się znacznie różnić w zależności od stanu. W związku z tym opracowaliśmy osobną stronę, która pozwoli użytkownikowi wybrać stan i poznać dokładny koszt dostawy, a także jej przybliżony czas.

Strona błędu 404

Wersja mobilna

Podczas opracowywania wersji mobilnej stanęliśmy przed następującymi wyzwaniami:

• reorganizacja menu;
• wygodny filtr;
• wyszukiwanie, które powtarzałoby funkcjonalność głównej wersji strony;
• wygodna stopka;
• opracowanie kilku rodzajów wyświetlania produktów;

Strona główna

Staraliśmy się w jak największym stopniu zachować pełną funkcjonalność pełnej wersji strony, upewniając się, że wszystkie okna reklamowe zostały zachowane. Przeprojektowaliśmy wszystkie bloki strony głównej zgodnie z UX użytkownika mobilnego, co pozwoliło zmniejszyć długość mobilnej wersji strony.

Zmieniliśmy stopkę, aby ułatwić użytkownikowi klikanie linków, implementując menu jako zestaw przycisków. Są to bardzo ważne zmiany, ponieważ dostęp do niektórych stron można uzyskać tylko z tej części witryny.

Filtr

Czasami deweloperzy zaniedbują filtr w wersji mobilnej i całkowicie go ukrywają. W naszym przypadku zaimplementowaliśmy go w osobnym wyskakującym okienku z pełną funkcjonalnością.

Kategoria

Dla mobilnej strony kategorii opracowaliśmy dwie opcje wyświetlania produktów:

• kompaktowy – w tym przypadku na ekranie urządzenia umieszczane są dwa produkty, co upraszcza proces zapoznawania się z asortymentem;
• rozszerzony – wyświetla jeden produkt w wierszu i pozwala na bardziej szczegółowe zbadanie obrazu.