Czas trwania

Czas realizacji projektu wyniósł

11 tygodni, w trakcie których zrealizowane zostały wszystkie kroki procesu projektowego zgodnie z metodą Design Thinking.

Role

Projekt miał charakter koncepcyjny, był realizowany w ramach kursu projektowania UX/UI. Pełniłam rolę pomysłodawcy, autora wymagań, badacza oraz projektanta UX i UI.

Projekt był realizowany pod opieką mentora.

OVERVIEW

Aplikacja BeeThere, to narzędzie dla freelancerów, pracujących w branży ślubnej i beauty. Jest to rozbudowany kalendarz z możliwością tworzenia katalogu usług oraz bazy klientów, odpowiadający na specyficzne potrzeby grupy docelowej. 

Celem było zaprojektowanie aplikacji, która przyspieszy proces prowadzenia zapisów, ułatwi zarządzanie plikami/dokumentacją powiązaną z realizacją danego zlecenia oraz pozwoli zapanować nad kalendarzem zleceń służbowych i wydarzeń prywatnych w jednym miejscu.

Ograniczenia

Projekt ograniczały zerowy budżet i brak zespołu, co miało wpływ na proces generowania pomysłów oraz prowadzenie testów użyteczności.

Na rynku brakuje aplikacji dla freelancerów z branży ślubnej i beauty. Dostępne narzędzia tworzone są z myślą o salonach, przez co są zbyt rozbudowane i niedopasowane do potrzeb osób pracujących samodzielnie – m.in. w zakresie mobilności czy łączenia kalendarza prywatnego z zawodowym.

Konkurencja

Jak aplikacja może zarabiać?

Produkt może zarabiać poprzez zastosowanie modelu subskrypcyjnego na dwóch poziomach - podstawowym oraz premium.

Potencjalni odbiorcy

Potencjalną grupę odbiorców stanowią freelancerzy, pracujący jako: wizażyści, styliści fryzur/brwi/rzęs/paznokci, fotografowie, kamerzyści, DJ-e.

KONTEKST BIZNESOWY

Użytkownicy

Kim są lub czym się zajmują/interesują?

Freelancerzy - makijażyści, fryzjerzy, fotografowie/kamerzyści - świadczący usługi stacjonarnie (we własnych salonach) i/lub “w terenie” (z dojazdem do klienta)

Z jakich narzędzi korzystają w życiu codziennym/pracy?

Facebook, Instagram, Booksy, GMB, OLX, telefon, kalendarz (elektroniczny lub tradycyjny), kalkulator, Google Maps

W jakim są wieku/gdzie mieszkają?

21-45 lat/średnie i duże miasta.

Opis wyzwania projektowego

Zaprojektowanie aplikacji, dzięki której usługodawcy będą mogli w szybki i prosty sposób zarządzać swoją pracą poprzez

dostosowane do ich potrzeb funkcje prowadzenia zapisów, tworzenia harmonogramów wydarzenia oraz przechowywania i udostępniania poszczególnych informacji/plików klientom.

Problem/potrzeba

Problem

Planowanie i organizacja pracy zarówno indywidualnej jak i podczas większych wydarzeń - śluby/sesje zdjęciowe itp.

Potrzeba

• zebranie w jedno miejsce wizyt rezerwowanych przez wiele kanałów (Facebook, Instagram, Booksy, GMB, olx, telefon),

• zarządzanie kalendarzem wizyt/zleceń w sposób jak najbardziej zautomatyzowany,

• sporządzanie harmonogramów zleceń (całodniowych) i łatwe udostępnianie ich innym zainteresowanym (klientom lub innym usługodawcom)

Brief

Pierwszym krokiem pracy nad projektem, było stworzenie briefu - zdefiniowanie grupy docelowej, jej cech demograficznych, wstępne określenie jej potrzeb i problemów oraz celu projektowego.

PROCES REALIZACJI PROJEKTU

Wywiady przeprowadziłam online, badani zostali przeze mnie zrekrutowani na grupach tematycznych na facebooku.

Przeprowadziłam 3 wywiady pogłębione, na podstawie scenariusza, który przewidywał 36 pytań podzielonych na 6 kategorii: Rozgrzewka/poznanie respondenta, Motywacje i charakterystyka pracy w wolnym zawodzie, Kontakt z klientami, Zarządzanie kalendarzem, Znajomość rynku, Pytania końcowe.

Na podstawie przeprowadzonych wywiadów stworzyłam 2 persony, które opisałam w dalszej części.

03. Wywiady IDI

Przeanalizowałam 5 aplikacji - od rozbudowanych aplikacji do zarządzania salonami beauty i rezerwacjami online (Booksy Biz, Caldis, Estetify), poprzez mającą szerokie zastosowanie w biznesie aplikację Google Calendar, aż po aplikację Todoist skierowaną do małych zespołów i osób prywatnych, służącą do zarządzania zadaniami.

02. Analiza konkurencji

Przeanalizowałam nieliczne dostępne raporty branżowe, co pozwoliło mi na zapoznanie się z obecnymi trendami, głównie w branży beauty.

Aby dowiedzieć się więcej na temat charakterystyki pracy grupy docelowej przeanalizowałam również wpisy zamieszczone na grupach tematycznych na Facebooku, gdzie usługodawcy zamieszczają swoje ogłoszenia, dzielą się swoimi doświadczeniami, spostrzeżeniami i sposobami na organizację pracy.

01. Desk research

Do osiągnięcia celu wykorzystałam następujące metody: 

Przeprowadzone badania miały charakter eksploracyjny. Celem badawczym było poznanie charakterystyki pracy grupy docelowej, ich sposobów na organizację pracy, zarządzania kalendarzem zleceń oraz ich potrzeb z tym związanych.

Empatyzacja

Konkluzje przeprowadzonego UX researchu

01. Freelancerzy branży beauty i ślubnej potrzebują prostych narzędzi dopasowanych do realiów pracy solo

Większość dostępnych aplikacji powstała z myślą o zarządzaniu salonami i zespołami, co czyni je zbyt złożonymi dla osób prowadzących działalność jednoosobową. Alternatywą są aplikacje ogólnego użytku – kalendarze czy listy zadań – które nie uwzględniają specyfiki pracy w tej branży.

02. Kluczowe funkcje są rozproszone lub niedostępne w istniejących rozwiązaniach

Żadna z dostępnych aplikacji nie oferuje zbioru funkcjonalności, które zaspokoiłyby potrzebę grupy docelowej - kalendarza z możliwościami wyraźnego oddzielenia wydarzeń służbowych od prywatnych i szybkiego prowadzenia zapisów z ujęciem czasu dojazdu oraz pozwalającego na gromadzenie oraz zarządzanie plikami powiązanymi z danym klientem/wizytą.

03. Aplikacja musi wspierać mobilny tryb pracy

Badania wykazały, że użytkownicy korzystają z takich aplikacji niemal wyłącznie na smartfonach, co bezpośrednio wpłynęło na decyzję o zaprojektowaniu aplikacji jako mobilnej – z myślą o szybkim dostępie i użyteczności w terenie.

02. Kornel

reprezentuje osoby pracujące w branży fotograficznej/ślubnej

01. Martyna

reprezentuje osoby pracujące w branży beauty

W celu uporządkowania zgromadzonej wiedzy na temat użytkowników stworzyłam 2 persony:

Persony, Mapy Empatii, User Journey Maps

Definiowanie problemu

How Might We

• Jak możemy usprawnić proces prowadzenia zapisów?
• Jak możemy sprawić aby użytkownicy łatwo i skutecznie mogli zarządzać zarówno swoimi sprawami służbowymi, jak i prywatnymi?
• Jak możemy zniwelować problemy związane z zapisami z różnych źródeł i organizacją plików?

User need statement

Freelancerzy działający w branży beauty i branży ślubnej, pozyskujący klientów w wielu źródłach, potrzebują rozwiązań, dzięki którym proces prowadzenia zapisów będzie przebiegał szybciej, będzie bardziej intuicyjny, a zapanowanie nad kalendarzem zleceń służbowych i wydarzeń prywatnych będzie łatwiejsze.

Ponadto, potrzebują oni sposobu na lepsze zarządzanie informacjami o kliencie oraz plikami/dokumentacją powiązaną z realizacją danego zlecenia. Dzięki temu będą bardziej efektywni i zwiększą poziom satysfakcji klientów poprzez zapobieganie błędom.

Następnie zdefiniowałam User Need Statement i pytania How Might We, aby określić, które problemy są najbardziej dotkliwe i wymagają największej uwagi.

User Need Statement, How Might We

Lightning Demos

Proces generowania pomysłów rozpoczęłam od szybkiej analizy 3 aplikacji, w celu zapoznania się z istniejącymi już rozwiązaniami i zainspirowania się nimi, w dalszych krokach.

Burza mózgu
z wykorzystaniem AI

Ponieważ projekt realizowałam samodzielnie, proces generowania pomysłów wzbogaciłam o użycie sztucznej inteligencji. Wynikiem były 33 pomysły, z czego 2 zostały zaproponowane przez AI. 

MoSCoW

Po wygenerowaniu pomysłów, pogrupowałam je na 7 kategorii.

Następnie w celu określenia, które funkcjonalności mają kluczowe znaczenie dla projektu, wykorzystałam metodę priorytetyzacji MoSCoW.

Generowanie pomysłów 

Jako freelancer chcę mieć możliwość tworzenia i zarządzania bazą klientów, aby móc szybko dotrzeć do informacji o danym kliencie, gdy będę tego potrzebować.

03. 

Jako freelancer świadczący kilka rodzajów usług chcę mieć możliwość utworzenia Katalogu Usług, aby nie musieć za każdym razem wpisywać ręcznie podstawowych informacji o konkretnej usłudze.

02.

Jako freelancer chcę w szybki i intuicyjny sposób odnotowywać wizyty/zlecenia w swoim kalendarzu, aby móc przeznaczać więcej czasu na ważniejsze rzeczy - np. prowadzenie social mediów.

01.

User Stories

Aby lepiej zrozumieć wymagania, cele oraz oczekiwane korzyści użytkowników, na bazie zaplanowanych, priorytetowych funkcjonalności produktu, powstały 3 User Stories, dotyczące: tworzenia wpisu w kalendarzu, konfigurowania nowej usługi oraz dodawanie załączników do konta klienta.

Task flows i user flows

Funkcjonalności, które zostały uwzględnione w User Stories i ocenione jako priorytetowe zostaną wykorzystane do stworzenia MVP. 

W związku z powyższym, sporządziłam dla tych funkcjonalności (tworzenie wpisu w kalendarzu, konfiguracja nowej usługi oraz dodawanie załączników do konta klienta) diagramy task flow i user flow w celu zmapowania kroków oraz interakcji użytkownika z systemem podczas wykonywania wskazanych zadań. Poniżej przykłady:

Architektura informacji

Przed przystąpieniem do projektowania sporządziłam także wstępną wersję architektury informacji celem ustalenia hierarchii oraz relacji pomiędzy poszczególnymi elementami aplikacji. 

Dzięki tym działaniom powstała sitemapa, która stała się bazą dla dalszych etapów procesu projektowego.

Low-fidelity i mid-fidelity wireframes 

Pierwszą fazę projektowania stanowiły szkice low-fidelity początkowo wykonane na kartce papieru, a następnie przeniesione do Figmy. W efekcie, przygotowałam projekty 9 ekranów - dashboardu (w trzech wersjach, zależnie od widoku kalendarza), panelu usług, klientów, raportów oraz profilu użytkownika, a także ekrany dodawania nowego wydarzenia i nowej usługi.

Kolejnym etapem, było przekształcenie low-fidelity wireframes na mid-fidelity wireframes.

Prototypowanie

Modyfikacje

W trakcie projektowanie makiet mid-fidelity zdecydowałam się na wprowadzenie kilku modyfikacji, tj.:

usunięcie rzadko używanych przycisków (“edytuj”, “usuń)” z listy usług i listy klientów, w celu zminimalizowania ryzyka przypadkowych kliknięć spowodowanych małym rozmiarem przycisków oraz zwiększenia przejrzystości list

04.

usunięcie bottom baru z ekranów dodawania nowego wydarzenia i nowej usługi - zastosowanie ekranów modalnych

03.

zmiana sposobu wyświetlania kalendarza w widoku tygodniowym - z poziomego na pionowy - w obawie o zbyt mały rozmiar elementów (wydarzeń) i wynikające z tego problemy z użytecznością

02.

zmiana okrągłego floating action button znajdującego się w prawym dolnym rogu, na poziomy, znajdujący się nad bottom barem tak, aby nie zasłaniał żadnego elementu w obszarze kalendarza oraz listy usług/klientów

01.

Scenariusz testu użyteczności 

Wyznaczyłam 3 cele badawcze: 

• Sprawdzenie czy użytkownicy mogą bez problemu skorzystać z podstawowych funkcji kalendarza (np. odnalezienie/dodanie wydarzenia),

• Sprawdzenie czy użytkownicy mogą bez problemu skorzystać z funkcji odbiegających od standardowych kalendarzy (np. z katalogu usług/bazy klientów),

• Sprawdzenie czy zaproponowana struktura umożliwia intuicyjne korzystanie z aplikacji.

Aby zrealizować cele badawcze, opracowałam 6 zadań, polegających na:

• Zmianie sposobu wyświetlania kalendarza

• Sprawdzeniu wpisu w odległym terminie

• Zmianie ceny usługi

• Utworzeniu wpisu w kalendarzu

• Dodaniu nowej usługi

• Dodaniu załącznika do konta klienta

Kolejnym krokiem pracy nad projektem było opracowanie zadań oraz scenariusza testu użyteczności. 

Przygotowanie prototypu

W celu przeprowadzenia testu użyteczności stworzony został prototyp interakcji, pozwalający na wykonanie wskazanych wyżej zadań. 

Prototyp został przygotowany w Figmie, na poziomie szczegółowości mid-fidelity.

Metodologia

Test użyteczności przeprowadziłam w formie indywidualnych sesji, które trwały około 30 minut. Spotkania odbyły się stacjonarnie, aby jak najlepiej obserwować interakcje badanych z aplikacją, w jak najbardziej zbliżonych do “naturalnych” okolicznościach. Spotkania były nagrywane za zgodą uczestników.

Dobór respondentów

Respondenci zostali zrekrutowani do badania na grupie na Facebooku zrzeszającej osoby pracujące/zainteresowane tematyką beauty. 

Testy użyteczności

Kolejnym etapem projektu było przygotowanie i przeprowadzenie testów użyteczności.

Przyjęte kryteria

Osoby w wieku 21-45 lat, pracujące jako freelancerzy w branży makijażowej i ślubnej

Próba

Badanie objęło 2 uczestników, w wieku 28 i 37 lat, pracujących jako freelancerzy w branży beauty, którzy na co dzień przynajmniej częściowo korzystają z narzędzi cyfrowych do organizacji swojej pracy. 

Testowanie

Analiza danych

Analiza danych zgromadzonych podczas testów została przeprowadzona przy użyciu Google Sheets oraz narzędzia Dovetail.

Rozwiązanie: Zmiana ikony „przejdź do daty” na bardziej intuicyjną – kalendarz z lupką. 

Problem 4: Problem z interpretacją ikony “przejdź do daty” w widoku głównym.

Problem 2: Problem z zaznaczeniem checkboxa przy wyborze załącznika

Rozwiązanie: Rozszerzenie obszaru zaznaczenia checkboxa o nazwę załącznika.

Rozwiązanie: Zmiana formatu wprowadzania daty na rok-miesiąc-dzień, aby umożliwić wyświetlanie dni w rzeczywistym układzie.

Problem 6: Nieintuicyjny sposób wprowadzania/wyszukiwania daty.

Problem 1: Nieintuicyjny sposób przewijania miesięcy w widoku głównym

Rozwiązanie: Dodanie strzałek do przewijania miesięcy oraz umożliwienie nawigacji gestami w obszarze kalendarza. 

Rozwiązanie: Po zapisaniu wydarzenia użytkownik wraca do widoku dnia, w którym wydarzenie zostało dodane.

Problem 3: Powrót do dashboardu po wprowadzeniu nowego wydarzenia.

Rozwiązanie: Zmiana etykiety „godzina rozpoczęcia” na “start wydarzenia”, aby użytkownik wiedział, że na tym etapie nie powinien uwzględniać czasu dojazdu.

Problem 5: Trudności z interpretacją etykiety "godzina rozpoczęcia" dla wydarzenia służbowego z dojazdem.

Wyniki testów użyteczności

W wyniku przeprowadzonej analizy zidentyfikowałam 6 problemów, które podzieliłam na 3 grupy:

• nawigacja (problem 1,2,3),
• interpretacja ikon  i etykiet (problem 4,5),
• wprowadzanie dat (problem 6). 

Mocne strony

Podczas badań respondenci podzielili się swoimi spostrzeżeniami na temat funkcjonalności, które szczególnie podobają im się w aplikacji. Były to:

• wyraźne oznaczenie czasu dojazdu w widoku tygodnia/dnia

• autouzupełnianie (np. godzina zakończenia wydarzenia) 

• wgląd do podsumowania dodawanego wydarzenia

• możliwość tworzenia  konta klienta,  dodawania do niego załączników i wglądu w historię wizyt

• możliwość tworzenia katalogu usług 

• informacje o kolizjach między wydarzeniami

Szczegóły dotyczące przeprowadzonych badań, analizy oraz dodatkowe wnioski i rekomendacje zostały ujęte w opracowanym raporcie. 

Podstawowe elementy identyfikacji wizualnej produktu

BeeThere to aplikacja, która powstała z myślą o osobach prowadzących intensywne życie zawodowe, szukających narzędzia, dzięki któremu będą mogły skutecznie nim zarządzać.

Zdecydowałam więc, że kolorami przewodnimi będą żółty i czarny, czyli kolory nawiązujące do ubarwienia pszczół - owadów kojarzących się z pracowitością i dobrą organizacją. 

Nazwa to gra słów, która wykorzystuje podobieństwo brzmienia słowa “bee”, czyli “pszczoła” do “be”, czyli “być”, a sam zwrot “be there”, czyli “bądź tam” nawiązuje do miejsc, w których powinniśmy się znaleźć np. miejsc, w których freelancerzy realizują swoje usługi. 

Nowoczesne, minimalistyczne logo składa się z prostej ikony kalendarza z subtelnym dodatkiem w postaci czułków, nawiązującym do tematu przewodniego.

UI Design

Style guide

Typografia

Ze względu na specyfikę aplikacji (duża ilość tekstu na ekranie) wybrałam krój bezszeryfowy -Figtree oraz zastosowałam skalę Major third.

Dzięki temu różnice między wielkościami czcionek są stosunkowo niewielkie, lecz wciąż pozwalają na hierarchizację treści, jednocześnie nie powodując wrażenia przepełnienia ekranu tekstem i pozwalając na zachowanie odpowiednich odstępów. 

Pozostałe elementy interfejsu

Kolory

Do kolorów przewodnich - żółtego (Amber) i czarnego (Woodsmoke) - dobrany został kolor beżowy (Bianca). Określono także kolorystykę komunikatów systemowych oraz kolory uzupełniające, które powinny być stosowane wyłącznie jako oznaczenia usług w katalogu.

Etykieta "z dojazdem"

Wydarzenia służbowe, które są realizowane "w terenie" oznaczone są etykietą "z dojazdem".

Korzyść dla użytkownika - informacja o konieczności dojazdu widoczna na pierwszy rzut oka; w widoku tygodnia/dnia użytkownik widzi ile czasu zaplanował na dojazd

Baza klientów

Baza klientów pozwala na zgromadzenie wszystkich potrzebnych informacji o kliencie oraz powiązanych z nim plików w jednym miejscu. Na koncie klienta, użytkownik może sprawdzić historię odbytych wizyt oraz wizyty zaplanowane w przyszłości. Ponadto aplikacje daje możliwość skontaktowania się z klientem bez konieczności kopiowania jego danych kontaktowych, dzięki funkcjom "połącz", "wyślij SMS", "wyślij e-mail".

Korzyść dla użytkownika - łatwe dotarcie do informacji o klientach, powiązanych z klientem załączników oraz szybki kontakt z klientem.

Katalog usług

Usługi w katalogu są konfigurowane samodzielnie przez użytkownika. Każda usługa musi mieć przypisany kolor. Ten sam kolor można przypisać wielu usługom, dzięki czemu za pomocą kolorów użytkownik może stworzyć grupy podobnych usług.

Do każdej usługi można przypisać domyślny czas trwania usługi, cenę oraz załączniki. 

Korzyść dla użytkownika - szybsze dodawanie nowego wydarzenia (m.in. wybór usługi z listy rozwijanej, automatyczne ustawienie godziny zakończenia wydarzenia), możliwości konfiguracji wydarzeń służbowych dostosowane do potrzeb użytkownika (m.in. dojazd, lokalizacja), łatwy dostęp do informacji o kliencie powiązanym z danym wydarzeniem.

Oznaczenia kolorystyczne 

Wydarzenia prywatne zawsze oznaczone są kolorem szarym. 

Wydarzenia służbowe oznaczone są kolorem przypisanym do danej usługi.

Korzyść dla użytkownika - wyraźne oddzielenie wydarzeń prywatnych od służbowych.

Makiety high-fidelity

Mając na uwadze, że aplikacja będzie zawierała dużo treści tekstowych, ważnym założeniem projektu stało się utrzymanie minimalistycznego wyglądu aplikacji. 

Jednolite tło, odpowiednie zagospodarowanie przestrzeni oraz brak zbędnych, rozpraszających uwagę elementów, pomogły uzyskać przejrzystość interfejsu.

Efektem końcowym projektu było powstanie MVP aplikacji BeeThere. Ponieważ był to projekt koncepcyjny, MVP nie zostało opublikowane. 

Cel projektu został osiągnięty. Zaprojektowana została aplikacja, która w znacznym stopniu odpowiada na specyficzne potrzeby grupy docelowej, dzięki takim funkcjonalnościom jak m.in.: wyraźne, graficzne rozróżnienie w kalendarzu wydarzeń prywatnych od służbowych, możliwość ustawienia czasu dojazdu i ukazanie go w widoku tygodnia/dnia, a także w sekcji “Najbliższe wydarzenia”, możliwość tworzenia katalogu usług, wraz z ustawieniem domyślnej ceny i czasu trwania usługi, możliwość tworzenia konta klienta oraz dodawania załączników zarówno do konta klienta, jak i do usługi.

WYNIKI

Realizacja projektu pozwoliła mi na zastosowanie w praktyce wiedzy z zakresu projektowania UX/UI. Nauczyłam się jak pracować zgodnie z koncepcją Design Thinking, jak ważny jest początkowy research i zrozumienie potrzeb użytkowników oraz testowanie wykreowanych rozwiązań, aby rzeczywiście móc te potrzeby zaspokoić. 

Gdybym posiadała budżet na realizację tego projektu, na pewno chciałabym pogłębić przeprowadzone badania, przede wszystkim powiększyłabym grupę badanych metodą IDI (z 3 do minimum 8) oraz grupę osób, które wzięły udział w testach użyteczności (z 2 do minimum 5). Myślę, że pozwoliłoby mi to jeszcze lepiej poznać potrzeby i bolączki potencjalnych użytkowników, co w konsekwencji przełożyłoby się na udoskonalenie aplikacji w kontekście jej użyteczności. 

Ponadto, gdybym miała więcej czasu na realizację projektu, przeprowadziłabym drugi test użyteczności, aby sprawdzić czy zmiany wprowadzone na bazie pierwszego testu, przyniosły oczekiwane rezultaty.

W przyszłości, gdybym mogła opracować pełną wersję tego produktu, na pewno chciałabym poszerzyć dostępne funkcjonalności o: tworzenie harmonogramów, raporty usług i przychodów, przypomnienia i widgety oraz automat SMS do potwierdzania wizyt.

WNIOSKI

ALEKSANDRA DOBRZAŃSKA

Telefon:

+48 733 669 413

Email:

aleksandra.m.dobrzanska@gmail.com