Floral
Projekt strony internetowej kwiaciarni online. Strona przygotowana w ramach kursu Google UX Design Certificate w Adobe XD.
Opis projektu
Floral to pomysł na kwiaciarnię online oferującą zarówno gotowe kompozycje do kupienia pocztą kwiatową, jak i możliwość samodzielnego skomponowania bukietu w kreatorze. Typowy użytkownik to osoby w wieku 20–65 lat - studenci, pracownicy, członkowie rodziny, którzy kwiaty kupują głównie w formie prezentu dla bliskich, nauczycieli czy na wyjątkowe okazje. Celem kwiaciarni Floral jest zapewnienie wysokiej jakości obsługi (zapewnienie szybkiej dostawy świeżych kwiatów) i wyjątkowych doświadczeń zakupowych (personalizacja bukietów i quizy kwiatowe).
Badania, analiza i persona
Aby zgłębić potrzeby, problemy i obawy użytkowników korzystających z kwiaciarni online, przeprowadziłam ankietę na grupie 10 osób z różnych regionów Polski, w przedziale wiekowym od 26 do 60 lat. Na podstawie uzyskanych wyników ujawniły się następujące kwestie dotyczące istniejących platform kwiaciarni online:
● monotonna oferta bukietów, brak możliwości zamówienia czegoś wyjątkowego i dopasowanego do gustu obdarowywanej osoby,
● brak wiedzy florystycznej - użytkownicy nie mają wiedzy, jaki bukiet wybrać adekwatnie do okazji, ani też nie wiedzą jak skomponować taki bukiet samodzielnie, aby osiągnąć dobry wygląd,
● strach przed złą kondycją bukietu - użytkownicy boją się zamówić kwiaty przez stronę internetową, ponieważ nie ufają procesowi dostawy i nie chcą, aby kwiaty dotarły do osoby obdarowywanej zwiędłe.
● monotonna oferta bukietów, brak możliwości zamówienia czegoś wyjątkowego i dopasowanego do gustu obdarowywanej osoby,
● brak wiedzy florystycznej - użytkownicy nie mają wiedzy, jaki bukiet wybrać adekwatnie do okazji, ani też nie wiedzą jak skomponować taki bukiet samodzielnie, aby osiągnąć dobry wygląd,
● strach przed złą kondycją bukietu - użytkownicy boją się zamówić kwiaty przez stronę internetową, ponieważ nie ufają procesowi dostawy i nie chcą, aby kwiaty dotarły do osoby obdarowywanej zwiędłe.
W oparciu o grupę docelową oraz wyłonione potrzeby i obawy przygotowałam personę Martyny. Martyna jest pracowniczką korporacji i miłośniczką kwiatów. Przy wyjątkowych okazjach lubi obdarowywać znajomych i bliskich kwiatami. Nie ma zbyt wiele wolnego czasu, wiec chętnie korzystałaby z usług kwiaciarni online oferującej duży wybór bukietów. Obawia się jednak, że kwiaty które zamówi mogłyby nie dojechać świeże i prezent straciłby na jakości.
Projektowanie lo-fi - wireframe'y i prototypy
Analizując strony internetowe różnych kwiaciarni oraz bazując na potrzebach użytkowników rozpisałam poniższą architekturę projektowanej strony internetowej.
Gotowe bukiety zostały podzielone na kategorie, których celem jest ułatwienie kupującemu doboru kompozycji kwiatowej do okazji - użytkownik nie musi się sam zastanowić nad "stosownością" bukietu. Drugim bardzo ważnym komponentem strony jest kreator bukietów. Można skorzystać z niego od razu po kliknięciu lub też uzupełnić quiz kwiatowy, który zaproponuje kompozycję kwiatową na podstawie odpowiedzi. Kompozycję można potem dowolnie dostosowywać do potrzeb estetycznych lub cenowych.
Oba wymienione komponenty będą stanowiły pierwszą sekcję na stronie głównej.
Pozostałe elementy związane są ze standardowymi elementami zakupowymi - koszyk, konto oraz dane kontaktowe kwiaciarni.
W pierwszej iteracji narysowałam pięć papierowych makiet i wybrałem z nich konkretne elementy, które najbardziej mi się spodobały. Następnie stworzyłam model widoczny po prawej stronie na którym po drobnej zmianie (zrównanie opcji gotowych bukietów i komponowania w jednej linii) oparłam dalsze projektowanie. Istotną rzeczą był umieszczenie przycisku/sekcji dot. kreatora bukietów jako pierwszego tak, żeby przykuć uwagę klientów i zachęcić ich do wypróbowania możliwości tego rozwiązania.
Podczas badania potrzeb jednym ze zidentyfikowanych problemów był brak zaufania do procesu dostawy. Dlatego też właśnie temu została poświęcona druga sekcja strony, w której szczegółowo są opisane działa, które podejmuje kwiaciarnia, aby zapewnić dostawę świeżych bukietów w wyznaczonym czasie.
W dalszej części strony umieściłam opinie klientów (budowanie zaufania w oparciu o rekomendacje) oraz galerię (prezentacja możliwości kwiaciarni oraz przykucie uwagi).
Makieta lo-fi strony głównej Floral.
Makieta lo-fi strony głównej Floral w wersji mobilnej.
Prototyp lo-fi strony internetowej Floral - strona główna, kreator bukietów, proces zakupu.
Testowanie po fazie projektowania lo-fi
Typ: testy użyteczności (bez moderacji)
Miejsce: Polska
Liczba uczestników: 5 osób
Czas: 15 minut na osobę
Wnioski:
● większość flow dot. zakupu bukietu była zrozumiała dla użytkowników,
● potwierdzenie dodania produktu do koszyka powinno być większe (lepiej widoczne),
● część użytkowników zwróciła uwagę na brak przycisków akcji na pop-upie potwierdzenia dodania produktu do koszyka (kontynuowanie zakupów / finalizacja zakupu).
Projektowanie hi-fi (iteracja pierwsza)
Podczas projektowania hi-fi zaopiekowałam problemy, które pojawiły się podczas testów użyteczności. Od tego momentu komunikat dodania bukietu do koszyka jest większy, czytelniejszy. Zostały dodane także do niego przyciski akcji.
Projektowanie hi-fi (iteracja druga)
W drugiej iteracji makiet hi-fi dodałam kolor brzoskwiniowy, który ożywił stronę budując energetyczne skojarzenie, kojarząc się z wiosną, latem i żywotnością. Dodana została także sekcja blogowa, w której użytkownicy strony mogę znaleźć artykuły o kwiatach. o trendach florystycznych czy po prostu inspiracje do przełamania dotychczasowej "kwiatowej rutyny".
