Hvyt - sklep z wyjątkowymi uchwytami do mebli
W ramach projektu zrealizowaliśmy pełny redesign sklepu internetowego HVYT, skupiając się na wzmocnieniu spójności wizerunku marki oraz poprawie jakości doświadczeń użytkowników.
HVYT – to designerski sklep, który oferuje nie tylko gałki i uchwyty. Brand kładzie duży nacisk na jakość i estetykę swoich produktów.
Naszym zadaniem był redesign istniejącego sklepu. Ważnym celem było nie tylko ulepszenie funkcjonalności, doświadczenia użytkownika i usprawnienie ścieżek zakupowych, ale również stworzenie przestrzeni, która inspiruje i buduje emocjonalną więź z klientami.
Ważnym aspektem projektu było ukazanie poprzez design charakteru, osobowości i indywidualności marki.
Zaprojektowaliśmy kartę produktu, która w pełni eksponuje ekskluzywność i indywidualność oferowanych uchwytów.
Ścieżka zakupowa produktu
Wireframes
UX & UI
Design System
Kontekst projektu
Naszym wyzwaniem było zaprojektowanie designu, który eksponuje ekskluzywność i indywidualność produktu, daje poczucie, że każdy detal ma znaczenie, a nawet drobne elementy – takie jak uchwyty – mogą całkowicie odmienić charakter domu. Kluczowym celem było stworzenie przestrzeni, która nie tylko podkreśla elegancję i unikalność produktów, ale również zapewnia prostotę i łatwość użytkowania, tworząc harmonijną całość.
Cele projektu
Wspierające filtrowanie– umożliwienie klientom łatwego wyszukiwania produktów.Projekt konto użytkownika– opracowanie własnego panelu, który umożliwia zarządzanie zamówieniami i preferencjami klienta.
Uproszczenie procesu zakupowego– opracowanie intuicyjnej ścieżki zakupowej, która pomoże klientom poruszać się po sklepie.Przejrzysty design- projekt, który łączy elegancję z prostotą, uwypukla dbałość o każdy detal i buduje poczucie dostępności marki.
Proces projektowy
Zakres prac objął:
- Analizę dotychczasowej architektury informacji oraz opracowanie nowej, bardziej intuicyjnej struktury serwisu,
- Projektowanie makiet UX (wireframes), obejmujących m.in. listing produktów, system kategoryzacji, widoki kolekcji, ścieżkę zakupową oraz konto klienta,
- Wypracowanie Look & Feel marki – z naciskiem na skojarzenia z produktem premium, który pozostaje dostępny dla każdego,
- Stworzenie spójnego Design Systemu.
Architektura informacji i projekt UX
W pierwszym etapie wypracowaliśmy architekturę informacji oraz wstępny flow produktu. Wyzwanie stanowiło zaprojektowanie intuicyjnego systemu nawigacji i filtrów obejmujących różne kategorie produktów – takie jak uchwyty, klamki czy wieszaki. Każda z nich wymagała innego zestawu filtrów (np. materiału, parametrów technicznych czy dodatkowych specyfikacji), które musiały zostać przedstawione w sposób klarowny i zrozumiały. Dodatkową trudnością było zapewnienie, aby system filtrowania działał równie efektywnie na urządzeniach mobilnych i desktopowych.
Drugim istotnym wyzwaniem było zaprojektowanie karty produktu w taki sposób, aby podkreślić ekskluzywność i wartość oferty oraz luksusowy charakter marki, zachowując jednocześnie jej dostępność i przyjazny wizerunek.
Wypracowaliśmy także cały proces zakupowy w którym uwzględniliśmy różne scenariusze:
- dla klientów b2b oraz b2c
- podawanie adresu przy pierwszym zakupie oraz zarządzanie wieloma adresami
- status użytkownika ( zalogowany lub kupuje jako gość)
Ustalenie kierunku wizualnego
Wspólnie z klientem, podczas warsztatów, wypracowaliśmy look & feel nowej strony. Na podstawie logotypu i identyfikacji wizualnej marki HVYT stworzyliśmy moodboard oraz 3 różne propozycje kierunków wizualnych.
Premium, ale przyjaznyDążymy do wykreowania wizerunku marki aspirującej do segmentu premium, a jednocześnie przyjaznej i dostępnej dla każdego.
Kolorystyka wywodząca się z ID branduCiepła, pastelowa paleta barw nadaje stronie subtelny i przyjemny charakter. Stonowane tło sprzyja budowaniu atmosfery spokoju i wyrafinowania.
Grafiki i animacje, które oddadzą klimat produktuStawiamy na prostą geometrię i dużo przestrzeni, prezentując produkty na jasnym tle – co podkreśla ich unikalność, a jednocześnie ukazuje je w kontekście użytkowym. Całość wzbogacają subtelne animacje, które dodają stronie elegancji i nowoczesnego charakteru, a interakcjom – lekkości i wyrafinowania.
Listing, kategoryzacja produktów
Rozbudowane filtrowanie – Intuicyjne wyszukiwanie i filtrowanie, które pozwala klientom szybko znaleźć produkty odpowiadające ich potrzebom.
Karta produktu
Naszym głównym zadaniem było zaprojektowanie karty produktu, która w pełni ukazywałaby walory produktu, prezentując go z najlepszej strony. Po lewej stronie umieściliśmy dużą galerię zdjęć i wideo, by użytkownik mógł dokładnie obejrzeć produkt. Obok, po prawej stronie, umieściliśmy przypięty boks z pełnymi informacjami o produkcie oraz wszystkimi możliwymi konfiguracjami, co ułatwiało decyzję o zakupie. Dzięki temu rozwiązaniu, użytkownik miał łatwy dostęp do kluczowych informacji oraz możliwość dokładnego zapoznania się z produktem.
Koszyk i Checkout
Opracowaliśmy intuicyjną ścieżkę zakupową, zapewniając różne scenariusze zakupowe.
Możliwość edycji z poziomu koszyka
Jednym z kluczowych elementów było umożliwienie użytkownikom edycji konfiguracji produktu bezpośrednio z poziomu koszyka. Dzięki temu, użytkownik mógł wprowadzać zmiany bez konieczności wracania do karty produktu, co zapewniało płynność procesu zakupowego.
Istotne było, aby klient nie wypadał ze ścieżki zakupowej i mógł wprowadzać zmiany bez opuszczania koszyka – co minimalizowało rozproszenie i zwiększało komfort użytkowania.
Możliwość zarządzanie kilkoma adresami
To rozwiązanie spełnia potrzeby różnych użytkowników, szczególnie tych, którzy realizują projekty w wielu miejscach, na przykład przy remoncie różnych mieszkań. Dzięki możliwości zarządzania wieloma adresami dostawy, mogą zamawiać produkty bezpośrednio do obiektów, jednocześnie korzystając z jednego konta w sklepie. To zapewnia im wygodę i oszczędność czasu, a także umożliwia korzystanie z programów lojalnościowych oraz rabatów.
Nasz zespół pracował w modelu projektowym
![To musisz wiedzieć, żeby Twój biznes w medtech zadziałał [+przykłady UX]](https://cdn.prod.website-files.com/665f016b950e89499f580acc/671b831663a2597f47c963f3_Grafika-nr-1_-tytul_-Innowacja-termometra--scaled.webp)
