W ten deseń
rodzaj projektu:
Zakres prac:
programy:
SKLEp internetowy
oparty na woocommerce
UI, UX
Figma
w ten deseń jest firmą tworzącą niepowtarzalne meble i dodatki z drewna i stali. ich projekty łączą w sobie naturę z funkcjonalnością i charakteryzują się eleganckim designem. firma oferuje również doradztwo w zakresie urządzania przestrzeni.
rodzaj projektu:
sklep internetowy oparty na woocommerce
Zakres prac:
ui, ux
programy:
figma
w ten deseń jest firmą tworzącą niepowtarzalne meble i dodatki z drewna i stali. ich projekty łączą w sobie naturę z funkcjonalnością i charakteryzują się eleganckim designem. firma oferuje również doradztwo w zakresie urządzania przestrzeni.
O projekcie
Klientowi zależało na uzyskaniu "designerskiego" efektu, który pomoże wyrazić styl marki. Projekt jest utrzymany w beżowej kolorystyce, wzbogacony o szarość oraz granat. Ostre kąty przycisków oraz innych elementów, obrysy i bezszeryfowe fonty nawiązują do logo firmy. Dzięki fotografiom przedstawiającym produkty na szarym tle całość jest spójna i estetyczna. Sklep został oparty na platformie Woocommerce.
Zdjęcia są własnością W ten deseń.
Sklep
W ten deseń sprzedaje unikatowe produkty, dlatego w większości dostępne są tylko pojedyncze sztuki. W związku z tym zaprojektowałam odpowiednie oznaczenia, aby klient wiedział, które produkty umieścił już w koszyku. Odpowiednio oznaczone są również produkty objęte promocją, nowości lub dodane do ulubionych. Produkty niedostępne, oprócz zaciemnionego zdjęcia i napisu, posiadają również przycisk "Powiadom o dostępności", po kliknięciu którego klient zostaje powiadomiony e-mailem kiedy produkt jest ponownie dostępny.
Pusta kategoria
Po uruchomieniu sklepu niektóre kategorie nie posiadały jeszcze produktów. Taka sytuacja mogła się również zdarzyć w przyszłości. W miejsce pustej kategorii zaprojektowałam formularz zapisu do newslettera, który pozwoli klientowi dowiedzieć się, że w sklepie pojawiły się nowe produkty.
Podstrona produktu
Podstronę projektu podzieliłam na wyraźne sekcje, które pozwalają klientowi szybko odszukać potrzebne mu informacje. Dane na temat produktu umieściłam na białych tłach - na górze ilość przyznanych gwiazdek, nazwę i cenę, a na dole opis. Na beżowym tle znalazły się przyciski - dodaj do koszyka, dodaj do ulubionych, wybór ilości i opcji oraz informacje na temat dostępności i darmowej przesyłki. Zaprojektowałam również widok produktu z wariantami. Poniżej umieściłam taby na szarych tłach, które grupują dane techniczne, informacje na temat materiałów oraz opinie. W celu zatrzymania klienta na stronie i skłonienia do dalszego przeglądania asortymentu, na samym dole strony zaprojektowałam sekcję z proponowanymi produktami, gdzie wyświetlane są produkty kupione przez innych klientów.
Koszyk i ulubione
W koszyku zaprojektowałam przyciski, które pozwalają przenieść produkt do ulubionych. Podobnie z ulubionych istnieje możliwość przeniesienia produktu do koszyka. Użytkownik ma również możliwość zmiany ilości, a po prawej stronie na bieżąco widzi koszt swoich potencjalnych zakupów. Dzięki temu można uniknąć rezygnacji w trakcie składania zamówienia przez klientów, których zaskoczyła końcowa suma. Na miejscu podsumowania w ulubionych umieściłam sekcję z proponowanym produktem, co pozwala dłużej zatrzymać użytkownika na stronie.
Strony tekstowe
Projektując podstrony tekstowe sklepu, zadbałam o odpowiedni podział na akapity, nagłówki oraz długość linii tekstu, aby zapewnić jak najlepszą czytelność. Ponadto, w polityce prywatności zastosowałam akordiony (rozwijane sekcje), aby uporządkować ten bardzo długi tekst i ułatwić znalezienie potrzebnych informacji.
Strona błędu 404
W przypadku sklepów internetowych warto zadbać o stronę błędu 404. Na projekcie oprócz wyjaśnienia błędu i wskazania klientowi możliwych opcji umieściłam sekcję z proponowanymi produktami. Dodatkowo po lewej znajdują się kategorie sklepu, dzięki czemu użytkownikowi łatwo jest trafić do innych kategorii sklepu.
Wersja mobilna
Aby zakupy na telefonie były jak najłatwiejsze, odpowiednio dostosowałam stronę do urządzeń mobilnych. Przeprojektowałam menu, tak aby wyszukiwarka była widoczna. Dzięki temu można zwiększyć konwersję wśród użytkowników, którzy preferują korzystanie z wyszukiwarki. Poszerzyłam przyciski, a między interaktywnymi elementami zachowałam odpowiednią odległość, aby uniknąć przypadkowych kliknięć. Przeprojektowałam również galerię produktu, którą można przewijać poprzez przeciągnięcie lub strzałkami.
