Bite of White. Sklep z ceramiką użytkową i artystyczną

Zakres prac:

Front & Back-end Strategia UX UI Design UX writing

Podejście Lean UX pozwoliło na szybkie wdrożenie w pełni funkcjonalnej platformy e-commerce w wersji MVP, minimalizując koszty i maksymalizując efektywność projektową.

Data

2022

Klient

Bite of White

Sektor

Sztuka i rzemiosło

Tagi:

#e-commerce #google-analytics #hotjar #lean-ux #MVP #no-code #user-flow
Rezultaty
  • Opracowanie sklepu w wersji MVP, który umożliwia właścicielce łatwe zarządzanie treściami, asortymentem oraz monitoring sprzedaży, z możliwością dalszego rozwoju.
  • Wdrożenie systemu płatności Stripe, 
integracja z mediami społecznościowymi 
oraz zaimplementowanie narzędzi analitycznych (Google Analytics i HotJar).
  • Zastosowanie podejścia no-code i prostego 
w obsłudze panelu administracyjnego, 
co znacznie usprawniło zarządzanie hostingiem, analityką i treściami bez potrzeby angażowania dodatkowych zasobów technicznych.
BOW home3 bow mobile
Kontekst projektu

Zostałam zaangażowana do zaprojektowania sklepu internetowego dla pracowni 
Bite of White. Właścicielka chciała przetestować proces sprzedaży swoich produktów 
w przestrzeni online. Pracownia specjalizuje się w ręcznie robionej porcelanie, 
łącząc tradycyjne rzemiosło z nowoczesnymi technologiami, takimi jak druk 3D.

Celem projektu jest przyciągnięcie konsumentów wrażliwych na design poprzez oferowanie przystępnych cenowo, estetycznych produktów, które wyróżniają się na tle konkurencji 
wysoką, artystyczną jakością.

Odbiorcy docelowi

Osoby w wieku 25-45 lat, które cenią piękno i wyrafinowany design, śledzą trendy w sztuce użytkowej i poszukują wyjątkowych, estetycznych dodatków do swojego domu, takich jak wazony, karafki i lampy. Także właściciele zwierząt domowych, zainteresowani ceramicznymi produktami dla swoich pupili.

Wyzwania

Głównym wyzwaniem było zaprojektowanie sklepu w krótkim czasie przy minimalnym użyciu zasobów. Właścicielce zależało na wykorzystaniu łatwego w nauce systemu zarządzania asortymentem, sprzedażą i analityką. Konieczne było również uwzględnienie różnorodnych segmentów klientów ceramiki artystycznej i użytkowej, co wymagało dostosowania oferty do ich odmiennych potrzeb. Właścicielka chciała zintegrować sklep z platformą Allegro, szybkimi płatnościami online oraz mediami społecznościowymi, aby zwiększyć zasięg sklepu i usprawnić proces zakupowy.

Podejście projektowe

Zastosowałam podejście Hypothesis-Driven Design, które opierało się na projektowaniu w oparciu o hipotezy, z naciskiem na weryfikację założeń i minimalizację ryzyka. Kluczową strategią było wdrożenie Lean UX, co oznaczało szybkie testowanie sklepu oraz uzyskanie feedbacku od użytkowników tuż po jego uruchomieniu. Skupiłam się na budowie MVP (Minimum Viable Product), czyli stworzeniu w pełni funkcjonalnego sklepu w krótkim czasie, minimalizując koszty i maksymalnie efektywnie wykorzystując dostępne zasoby.

lean ux cycle 1 png

https://www.plainconcepts.com/lean-ux-methodology/

Problem

Klienci mają trudności ze znalezieniem i zakupem unikalnych, przystępnych cenowo i estetycznych produktów stołowych oraz dekoracji do domu online. Rynek zdominowany jest przez produkty masowe, które nie mają tej wyjątkowej wartości artystycznej, jaką oferuje Bite of White. Dodatkowo obecni konkurenci oferują produkty w wysokich cenach, co ogranicza dostępność dla odbiorców, którzy poszukują bardziej przystępnych opcji.

Cele i metryki sukcesu

Określenie tych wskaźników pozwala skoncentrować działania na kluczowych priorytetach, takich jak wzrost sprzedaży czy lepsze zrozumienie użytkowników, oraz umożliwia regularne mierzenie postępów i podejmowanie decyzji opartych na danych. Dzięki temu projekt jest bardziej ukierunkowany, a działania mogą być dostosowywane w celu osiągnięcia najlepszych wyników.

Diagram Cele i metryki sukcesu: 1. Wzrost sprzedaży produktów a) Zwiększenie sprzedaży online do poziomu przynajmniej 80% sprzedaży osiąganej na targach branżowych w ciągu pierwszych 6 miesięcy działania sklepu. b) Osiągnięcie ROI na poziomie minimum 1% po 6 miesiącach, z docelowym wzrostem do 4% w ciągu pierwszego roku. c) Podwojenie liczby zapytań o indywidualne zamówienia w porównaniu do obecnych wyników w ciągu pierwszego roku. 2. Zrozumienie struktury odbiorców i koncentracja na kluczowych użytkownikach a) Pozyskanie danych demograficznych użytkowników, takich jak płeć, wiek i zainteresowania. b) Zidentyfikowanie głównych kanałów, z których użytkownicy trafiają na stronę.
Poznanie odbiorców

Wspólnie z właścicielką przeprowadziłam wewnętrzne warsztaty, aby zdefiniować założenia oparte na bezpośrednich interakcjach właścicielki z klientami na targach branżowych. Dodatkowo wykonałam analizę konkurencyjnych stron, aby zidentyfikować luki w zakresie oferty produktów, dobre i złe praktyki podczas korzystania z interfejsu.

Kluczowe wnioski

Wraz z klientką zdefiniowałyśmy założenia dotyczące potrzeb, zachowań i preferencji jej potencjalnych klientów, które pomogą nam określić, na czym powinniśmy skupić nasze wysiłki projektowe.

Kluczowe wnioski: 1. Klienci, zwłaszcza miłośnicy sztuki i designu, właściciele małych restauracji i projektanci wnętrz, poszukują wyjątkowych, ręcznie wykonanych, estetycznych produktów, które wyróżniają się na rynku. 2. Klienci mają trudności z zakupem produktów online bez wcześniejszego ich obejrzenia, zwłaszcza w przypadku delikatnych przedmiotów, takich jak zastawa stołowa czy ozdoby. Oczekują większej transparentności i pewności co do jakości i stanu produktów. 3. Właściciele zwierząt zwracają uwagę na ekologiczne aspekty produktów, preferując te, które są bezpieczne dla ich zwierząt, a jednocześnie estetyczne i funkcjonalne. 4. Właściciele małych restauracji i projektanci wnętrz oczekują, że produkty będą dostępne od ręki, a proces zakupu online będzie sprawny i zaufany, szczególnie w kontekście dostawy i trwałości produktów. 5. Klienci cenią opcje personalizacji, takie jak zapakowanie na prezent.

Kluczowe wnioski na temat potencjalnych klientów Bite of White, zebrane po warsztatach z klientką.

User personas

Na podstawie warsztatów z klientką zdefiniowałam archetypy, przedstawiające główne segmenty potencjalnych klientów. Określają one ogólne cechy demograficzno-psychofizyczne oraz preferencje. Stworzenie takich segmentów ułatwiło nam podejmowanie dalszych decyzji projektowych oraz na spersonalizowanie interfejsu do ich poszczególnych potrzeb.

Definiowanie MVP

Wraz z właścicielką przeprowadziłyśmy warsztat, na którym wspólnie zdefiniowałyśmy zakres Minimum Viable Product. Skupiłyśmy się na kluczowym pytaniu: Jaka jest najwazniejsza rzecz, jakiej musimy się dowiedzieć? W ramach tego procesu określiłyśmy najważniejsze obszary:

  • Skąd przychodzą klienci na stronę.
  • Dlaczego rezygnują z zakupu.
  • Czy klientom zależy na darmowej dostawie.
  • Które produkty podobają im się najbardziej.

Brainstorming

Następnie określiłyśmy najważniejsze funkcje i elementy, które pozwolą szybko przetestować i uruchomić sklep:

Najważniejsze funkcje i elementy dla MVP: 1. Integracja narzędzi do monitorowania ruchu. 2 Sekcja FAQ, odpowiadająca na pytania o ubezpieczenie przesyłki oraz eksploatację produktów. 3. Wdrożenie popularnych bramek płatności (Blik, PayPal, Stripe). 4. Informacje o targach, gdzie klienci mogą obejrzeć produkty na żywo, oraz informacja, że na targach będą dostępne produkty, których nie ma na stronie. 5. Opcja zakupu produktów na prezent z personalizacją opakowania i możliwością dodania wiadomości. 6. Strona musi działać responsywnie i dobrze wyglądać na telefonie. 7. Filtracja produktów dostępnych "od ręki" oraz tych, które są dostępne na zamówienie. 8. Zdjęcia, które dokładnie odzwierciedlają rozmiar, skalę oraz detale produktów. 9. Zdjęcia produktów w kontekście, np. jak wyglądają u użytkowników, podobnie jak na platformie Etsy. 10. Integracja z Instagramem, z możliwością zamówienia produktów inspirowanych zdjęciami (np. „Jeśli coś Cię zainspirowało, napisz do mnie na zamówienie”).

User flow

Opracowałam główny diagram pokazujący prawdopodobne zachowanie użytkownika na stronie, którego celem był zakup produktu. Zaprojektowałam także dodatkowe zachowania, które mogą być realizowane na stronie, np. zamówienie produktu na prezent, przeglądanie produktów dostępnych „od ręki”.

bow userflow jpg
Architektura informacji

Zdefiniowałam taksonomie oferty produktowej sklepu, która określa sposób, w jaki produkty będą klasyfikowane. Dzięki temu możemy lepiej zrozumieć, jakie kategorie i warianty produktów będą potrzebne w serwisie, aby klienci mogli szybko znaleźć interesujące ich produkty.

BOW IA

Następnie określiłam plan strony, który określa, jak użytkownicy będą się po niej poruszać.

BOW sitemap
Wstępne szkice strony

Pierwsze makiety wykonałam w formie szkiców (low-fi wireframes), aby wizualnie przedstawić strukturę kluczowych obszarów interfejsu, co ułatwiło mi dalszą pracęnad projektem z klientką. Makiety pomogły mi także w rozpoczęciu prac nad mikrotreściami interfejsu jak nagłówki i etykiety przycisków oraz w wykryciu luk w projekcie.

Na tym etapie okazało się także, że należy rozdzielić ścieżkę użytkownika dla właścicieli zwierząt. Aby to rozwiązać, zdecydowałyśmy się na stworzenie osobnej podstrony dedykowanej ceramice dla zwierząt. Strona miała wyróżniać ten specyficzny asortyment, podkreślając funkcjonalność i estetykę produktów.

BOW wire
Tworzenie prototypu

W procesie wyboru platformy postawiłyśmy na rozwiązanie no-code z prostym edytorem wizualnym, aby skrócić czas wdrożenia i zminimalizować koszty. Wybrałyśmy platformę, która oferowała kompleksowe rozwiązanie: zakup domeny, hosting, automatyczny konfigurator sklepu, gotowe, estetyczne szablony, analitykę oraz support 24/7 – wraz z łatwym w nauce interfejsem.

Równolegle z przygotowaniem wstępnych szkiców budowałam prototyp sklepu na wybranej platformie, aby zapoznać się z możliwościami budowy funkcji naszego MVP i personalizacji wizualnej. Na tym etapie miałam już pełny katalog produktów i taksonomii, które mogłam zaimportować do systemu i testować go przy użyciu prawdziwych danych.

bow CMS 1

Zdecydowałam się pozostawić w pierwotnej formie niektóre domyślne ekrany, np. widok koszyka i proces płatności.

BOW basket
Visual Design

Wraz z właścicielką ustaliłyśmy ton komunikacji marki, który miał odzwierciedlać piękno, elegancję, subtelność i minimalizm. Stworzyłam tablicę inspiracji, obejmującą najważniejsze elementy wizualne strony: typografię, kolorystykę i stylistykę zdjęć, a także przeprowadziłam analizę istniejących zdjęć produktowych, które wymagały wykonania retuszu (poprawa bieli, usunięcie plam). Wybrana koncepcja wizualna musiała być spójna z istniejącym już logotypem Bite of White.

BOW kolorystyka

Tablica inspiracji: kolorystyka

Moodboard: stylistyka produktowa

Tablica inspiracji: stylistyka prezentacji produktów

BOW headlines2

Tablica inspiracji: Typografia dla nagłówków

Tablica inspiracji: Typografia dla tekstu bazowego

BOW pairings2

Tablica inspiracji: propozycje zestawów typograficznych

BOW FAQ

Odpowiednie dopasowanie przekazu do dwóch głównych grup: klientów porcelany artystycznej i klientów misek ceramicznych dla zwierząt wymagało innego tonu komunikacji. Oba segmenty kierowały się innymi motywacjami zakupowymi i miały nieco inne cechy demograficzne.

bow hero

Dla segmentu właścicieli zwierząt stworzyłyśmy prosty, osobny landing page z listą produktów z tej kategorii.

Analiza danych

Od uruchomienia strony zbierałyśmy dane z Google Analytics oraz Hot Jar, które dostarczają cennych informacji na temat zachowań użytkowników, ich źródeł oraz interakcji ze stroną. Stanowią one istotny punkt wyjścia do rozmów z właścicielką, gdyby zdecydowała się rozwijać strategię marketingową związaną ze stroną. Dane te mogą pomóc w:

  • Identyfikacji, które kanały generują najwięcej ruchu.
  • Zrozumieniu, dlaczego i na jakim etapie klienci rezygnują z zakupów.
  • Wyciągnąć wnioski dotyczące popularności poszczególnych produktów i sekcji strony.
Wnioski

Właścicielka po uruchomieniu sklepu zdecydowała się na kontynuację sprzedaży bezpośredniej i nie zdecydowała się na inwestycję w reklamę i promocję strony w sieci (np. poprzez Google Ads, działania SEO, content marketing). Stąd ruch na stronie jest bardzo niski, co uniemożliwia osiągnięcie oczekiwanych wyników. Projekt pokazał, że strategia projektowa wymaga wsparcia marketingowego, abym mogła zaoferować swoim klientom skuteczność i efekty sprzedażowe. Aby lepiej zarządzać tego typu ryzykiem w przyszłości, mogę zaoferować swoim klientom:

  • Wczesne zaangażowanie właściciela w dyskusje na temat planów marketingowych, równocześnie z budową MVP.
  • Wsparcie w opracowaniu strategii content marketingowej, w tym pomoc w tworzeniu treści na bloga, media społecznościowe czy landing pages, które przyciągną użytkowników na stronę.
  • Stworzenie planu promocji strony w sieci, która pozwoli na efektywną implementację promocji zaraz po uruchomieniu MVP.

Chcesz dowiedzieć się, jakie korzyści może przynieść Twojej firmie UX Design?

Skontaktuj się ze mną przez formularz, aby dopytać o szczegóły lub umów bezpłatną konsultację.

Case studies

Zobacz, jak UX Design i metodologia Lean UX pomogły w tworzeniu efektywnych rozwiązań cyfrowych.

Klienci

Współpracuję ze start-upami, firmami B2B z branż technologicznych oraz z organizacjami społecznymi

Oferta

Oferuję wsparcie UX & UI dla stron, aplikacji i sklepów na każdym etapie rozwoju produktu

Ekspresowa analiza konwersji

Szybka diagnoza Twojego produktu – dowiedz się, gdzie tracisz uwagę klientów, zanim wdrożysz pełen audyt UX.

Wygenerowana mapa cieplna dla interfejsu strony głównej
Niski koszt i szybka realizacja

Idealne rozwiązanie dla startupów i firm, które potrzebują szybkich i wymiernych wyników bez dużych inwestycji na początek.

Wyniki z rekomendacjami

Otrzymasz raport ze wskazówkami dla optymalizacji konwersji.

Wysoka dokładność analizy (90-96%)

Masz pewność, że uzyskane dane są precyzyjne i wartościowe.

Artykuły

data

Dostępność cyfrowa w Polsce: korzyści z centralizacji raportów

Centralizacja raportów mogłaby usprawnić proces monitorowania i analizy wyników, co pozwoliłoby na szybkie reagowanie na problemy z dostępnością stron i aplikacji publicznych.
LMC thumb

Jak analiza UX oparta na sztucznej inteligencji może wspierać optymalizację konwersji

Efektywne wykorzystanie map cieplnych generowanych przez AI w podejściu Lean UX
smallLeonardo Kino XL make variations use more light bright creamy 2

Zrozumienie kontekstu interakcji mobilnych: aplikacje finansowe

Podczas projektowania efektywnych interfejsów mobilnych kluczowe jest zrozumienie kontekstu, w jakim użytkownicy korzystają ze swoich urządzeń.
leonardoai heuristic series ar

Wprowadzenie do serii: Badanie heurystyk użyteczności Nielsena dla mobilnych aplikacji AR

Prezentowany artykuł pełni funkcję wprowadzenia, jak i kompleksowego przeglądu serii na temat heurystyk użyteczności Nielsena stosowanych w aplikacjach mobilnych AR.
1 lodrgGdqUIVbFMRaIleSZg

1: Analiza heurystyczna użyteczności. Informacje zwrotne w czasie rzeczywistym w mobilnych aplikacjach AR

Odkrywanie pierwszej heurystyki: Widoczność stanu systemu w mobilnych interfejsach AR

O mnie

Moje zdjęcie profilowe

W swojej pracy wykorzystuję podejście UX for Lean Startup, które jest szczególnie skuteczne w projektach startupowych, kładących nacisk na szybkie iteracje i dostarczanie wartości.

Jako projektant UX & UI, szczególną uwagę przywiązuję do zrozumienia psychologii człowieka oraz tego, jak nasze emocje, zachowania i potrzeby wpływają na komunikację z produktami cyfrowymi.

W pracy wykorzystuję swoję wykształcenie artystyczne z zakresu projektowania książek, plakatów i typografii, łącząc je z projektowaniem cyfrowym oraz nowoczesnymi technologiami, takimi jak AR, generative AI, Deep Learning.

Zrealizowaliśmy ze studiem graficznym Monika Zapisek projekt strony internetowej naszego centrum artystyczno-rozrywkowego Jungle Academy w Warszawie.

Polecamy studio za kompleksowość w podejściu do projektu nie tylko od strony wizualnej, w tym za zbadanie potrzeb wynikających z projektu, a także jego wysoką jakość estetyczną.

Doceniamy Monikę Zapisek także za profesjonalizm w kontakcie z klientem, a przy tym cierpliwość i bardzo dobrą komunikację, dlatego będziemy kontynuować współpracę przy kolejnych projektach graficznych.

Aleksy Komorowski,
współwłaściciel Jungle Academy

Chciałbym udzielić referencji p. Monice Zapisek za projekt graficzny i wdrożenie strony internetowej dla naszego thinkzinu Stock Market.

Realizacja projektu przebiegała sprawnie i elastycznie, tak samo jak komunikacja i wymiana pomysłów: dodatkowe rozwiązania zaproponowane przez p. Monikę pomogły nam także w poprawie funkcjonalności zaplecza administracyjnego dla sklepu na stronie.

Tomasz Jarkowiec,
Dyrektor artystyczny
magazynu Stock Market

Bardzo profesjonalne podejście do klienta. Podobał mi się sposób komunikacji i czytelnośc oferty, która obejmowała również szczegółowy harmonogram. Strona, której budowę zleciłem została stworzona od podstaw zarówno od strony graficznej i technicznej. Efekt przerósł moje oczekiwania.

Dominik Budecki-Nehring,
Właściciel Make BIM Agile

Współpracujemy z Monika Zapisek—Studio od powstania naszej firmy Live Media Crew w 2014 roku. Zrealizowaliśmy wspólnie m.in. projekt identyfikacji wizualnej oraz projekt strony internetowej livemediacrew.com.

Od momentu wdrożenia powyższych zauważliśmy pozytywną zmianę w odbiorze naszego wizerunku. Cenimy sobie wysoki standard prac wizualnych oraz metodologię pracy, a rozwiązania proponowane przez Monikę Zapisek wspierają nasze cele biznesowe.

Mateusz Rokicki,
Właściciel agencji muralowej
Live Media Crew

Porozmawiajmy
o potrzebach Twojego projektu

Niezależnie od tego, czy potrzebujesz wsparcia przy jednym projekcie, czy szukasz projektanta do stałej współpracy, chętnie omówię Twoje potrzeby.

Na przesłane zapytania odpowiem
w ciągu 1-2 dni roboczych.

Możemy umówić się także na
wstępną konsultację.

Aby wypełnić ten formularz, włącz obsługę JavaScript w przeglądarce.
Przesyłanie plików

Wysyłając wiadomość za pomocą powyższego formularza, wyrażasz zgodę na przetwarzanie podanych danych osobowych. Polityka prywatności