Services

    Services

    About usBlog

    Contact

Redesign strony internetowej Foodeli.pl - realizatora dostaw żywności, oprogramowania do planowania dostaw i zarządzania restauracją - studium przypadku UX

Screenshot 1

Wstęp

Foodeli to polskie przedsiębiorstwo, którego główną misją jest całkowita automatyzacja procesów zamawiania i dostarczania jedzenia przez klientów placówek gastronomicznych za pomocą oprogramowania Foodeli Cloud. Foodeli od 2018 roku realizuje zamówienia od firm takich jak restauracje, bary, pizzerie etc. dostarczając je bezpośrednio do klientów w okolicy realizacji dowozów.

Problem

Podczas gdy Foodeli z powodzeniem stworzyło oprogramowanie i usługę dostarczania żywności poprzez połączenie lokalnych firm z autorskim programem logistycznymi, naszym wyzwaniem było zbadanie różnych sposobów, w jakie moglibyśmy rozszerzyć ich obecny łańcuch usług, uwzględniając inne rodzaje zaangażowania klientów na poziomie indywidualnym.

Podstawowe potrzeby biznesowe, które zdefiniowaliśmy to:

  • Poprawa zrozumienia i świadomości ludzi na temat wpływu dostaw żywności i logistyki skupionej wokół niej (zwłaszcza po i podczas pandemii Covid-19)
  • Zwiększenie indywidualnego wkładu możliwych klientów na poziomie indywidualnym w istniejące już usługi i oprogramowanie Foodeli

Rozwiązanie

Zaprojektujemy stronę internetową Foodeli.pl, aby zapewnić potencjalnym klientom/użytkownikom kluczowe i znaczące informacje na temat wszystkich dostępnych możliwości współpracy B2B z Foodeli. Wyszczególnimy wszystkie składowe wchodzące w skład oprogramowania Foodeli, a także łatwe sposoby przystąpienia klientów w obrębie tych, już świadczonych usług. Wspomożemy budowę zaufania do Foodeli, zwiększymy świadomość społeczności na temat ich celów związanych z wdrożeniem całkowicie bezemisyjnej floty pojazdów, która będzie proekologiczna i zostawi pozytywny impakt dla przyszłych pokoleń, a także ostatecznie zachęcimy wyszczególnione sektory użytkowników do zaangażowania się w działalność Foodeli.

Screenshot 2

Badania

Aby lepiej zrozumieć, jak moglibyśmy skuteczniej zająć się problemami Foodeli i opracować nowy projekt strony internetowej, przeprowadziliśmy serię ankiet offline i online. Pytania, które zadaliśmy to między innymi:

  • Kiedy myślisz o firmach oferujących usługi dostaw jedzenia w mieście, w którym się znajdujesz, z czym zazwyczaj je kojarzysz?
  • Jakie oprogramowanie przychodzi Ci na myśl, gdy myślisz o najważniejszych segmentach działalności Twojej firmy tj. komunikacji z klientem lub logistyce wewnętrznej?
  • W jaki sposób uzyskujesz dostęp do informacji o usługach B2B, w które chcesz się zaangażować?
  • Jakie czynniki wpływają na Ciebie najbardziej przy podejmowaniu decyzji, z którymi firmami chcesz się związać w zakresie świadczonych usług i produktów?
  • Co powstrzymuje Cię jako właściciela restauracji, przed większym zaangażowaniem w modelu B2B, z innymi firmach oferującymi usługi dostarczania zamówień, bądź dedykowanego oprogramowania dla przedsiębiorstw o takim samym profilu?

Po przeprowadzeniu ankiet wśród 120 respondentów, zdecydowaliśmy się użyć mapowania pokrewieństwa, aby odnaleźć powtarzające się wspólne wątki i tematy wśród zebranych danych. W wyniku tego działania byliśmy w stanie odkryć kilka głównych trendów, którymi musieliśmy się zająć w kolejnej fazie naszego procesu projektowania.

Niektóre z głównych punktów “bólu”, które zidentyfikowaliśmy to:

  • Większość respondentów odczuwało, że nie ma wystarczająco dużo pieniędzy, czasu i ludzi, aby wnieść swój wkład w przynoszącą korzyści współpracę w obszarze B2B
  • Niektórzy respondenci chcieliby skorzystać z usług o profilu tych oferowanych w ankietach, ale nie byli pewni, od czego zacząć
  • Większość z uczestników badania odczuwało, że nie może liczyć na ofertę dostosowaną do ich potrzeb biznesowych
  • Niektórzy z respondentów wykazali, że przed rozpoczęciem współpracy chcieliby w prosty, ale spersonalizowany sposób omówić obszary, w których działa ich firma i porównać je z obszarami potencjalnego partnera

Druga tura badań - analiza danych zastanych

Aby zweryfikować nasze ustalenia, przeprowadziliśmy badania wtórne koncentrujące się w szczególności na tym, dlaczego osoby pracujące w sektorze gastronomii i dostaw jedzenia nie angażują się w prosty sposób we współpracę z innymi podobnymi firmami świadczącymi dedykowane dla tych biznesów usługi B2B. Obszerne badania dotyczące tej i innych kwestii zostały przeprowadzone przez naukowców Teck-Chai Lau z Uniwersytetu Taylor i Davida Ng Ching Yat z Uniwersytetu Tunku Abdul Rahman, którzy omówili zamawianie jedzenia online jako nową formę spożywania pokarmów (nowy styl życia). Ponadto, przejrzeliśmy publikację "An empirical study of online food delivery services from applications perspective" napisaną przez naukowców R. Ramesha, Sundramurthy Venkatesa Prabhua, Bashyam Sasikumarb, B.S. Kiruthika Devic, P. Prasathd, S. Praveena Rachel Kamala, a także inne publikacje akademickie związane z “wojnami” o dostarczanie jedzenia w obrębie restauracji. Odnaleźliśmy również porównanie usług zamawiania i dostarczania jedzenia z restauracji przed i podczas pandemii. Chociaż wymienione wątki i konkluzje w nich zawarte były w dużym stopniu zgodne z naszymi ustaleniami tj. iż brak środków pieniężnych, czasu i zasobów ludzkich to najczęstsze bariery zaangażowania innych przedsiębiorstw w usługi b2b w tym zakresie to kwerenda naukowa ujawniła również inne ważne spostrzeżenie: zwykłemu przedsiębiorcy trudno jest sprostać licznym oczekiwaniom ze strony konsumentów, którzy w ostatnich latach w znacznej liczbie zaczęli traktować dostawy restauracyjne jako jeden ze standardowych elementów codziennego życia.

Synteza - Archetypy klientów Foodeli

Na podstawie zidentyfikowanych wzorców w naszej mapie pokrewieństwa i analizie danych zastanych, stworzyliśmy podstawowe archetypy użytkowników Foodeli.pl:

Nowoczesny przedsiębiorca

ktoś, kto potrzebuje partnera w automatyzacji własnych procesów biznesowych, ale uważa, że jest to kosztowne i wymaga dużych nakładów.

Kierownik/manager restauracji lub szef kuchni

ktoś, kto zarządza restauracją lub inną firmą cateringową i ma problem z obsługą zamówień na dostawy jedzenia

Kierowca

osoba szukająca pracy jako kierowca (z własnym samochodem lub bez)

Analiza starej strony internetowej

Przyjrzeliśmy się stronie internetowej Foodeli, aby określić jej istniejące obszary, które możemy wykorzystać lub ulepszyć oraz stworzyliśmy nowe sekcje, podstrony i komponenty aby zaspokoić potrzeby zarówno biznesu, jak i standardowych użytkowników. Stwierdziliśmy, że stara strona była bardziej skierowana do sieci gastronomicznych, zamiast do mniejszych i średnich przedsiębiorstw, czy kierowców. Działaliśmy poprzez systematyczne eliminowanie jeden po drugim braków i innych ograniczeń, które uwidoczniły się w tamtym czasie:

  • Niejasna nawigacja i nieprzyjemna kolorystyka strony
  • Brak informacji i zasobów na temat usług i oprogramowania Foodeli
  • Nieefektywnie wykazany proces współpracy B2B dla innych przedsiębiorców
  • Ograniczone możliwości współpracy dla przedsiębiorców, którzy nie pasują do schematu działania dużych sieci gastronomicznych
  • Brak jasnej oferty zatrudnienia dla kierowców
Screenshot 3

Mapowanie ścieżki użytkownika

W celu zwizualizowania funkcjonowania strony internetowej Foodeli oraz możliwych doświadczeń emocjonalnych z perspektywy użytkownika (usera strony), stworzyliśmy serię możliwych map ścieżek użytkownika. Chcieliśmy, aby te mapy ilustrowały wszelkie potencjalne scenariusze interakcji użytkownika z witryną Foodeli, w tym:

  • proces nawiązywania partnerstwa B2B z potencjalnie zainteresowanymi firmami
  • proces pozyskiwania i zatrudniania nowych kierowców
  • proces zapoznawania się z informacjami o oprogramowaniu Foodeli

Analiza porównawcza

Aby zdobyć większą inspirację i zidentyfikować najlepsze praktyki dla flow naszego redesignu strony internetowej, przeprowadziliśmy dodatkowo analizę konkurencji. Zaczęliśmy od przyjrzenia się stronom internetowym innych międzynarodowych usług dostarczania jedzenia, w tym DoorDash, Glovo, UberEats, Deliveroo i wielu innych. Dwie wspólne cechy, które zidentyfikowaliśmy na wszystkich tych stronach to umieszczenie przejrzystej, oddzielnej podstrony, która zajmuje się wyłącznie zatrudnianiem nowych kierowców oraz zwielokrotniony navibar w postaci slidera/baneru na stronie głównej (ultra łatwy dostęp!).

Szkice

Kiedy już uporządkowaliśmy wszystkie nasze wnioski/konkluzje/schematy i zdefiniowaliśmy nasze rozwiązania, zaczęliśmy realizować potencjalne projekty strony. Prace rozpoczęliśmy od długopisu i kawałka papieru. Każdy członek zespołu zaprojektował propozycje dla każdej z podstron w oparciu o przeprowadzone badania, podkreślając obszary, które uważał za ważne i przenosząc cechy, które wyraźnie odnosiły się do rozwiązań bieżących problemów zidentyfikowanych w obszarze starej strony Foodeli. Przeprowadziliśmy trzy rundy brainstormingu z pomysłami, z których wyłoniliśmy ostateczny projekt, w którym realnie każdy członek zespołu miał swój wkład.

Wireframing

Po zdefiniowaniu podstawowych funkcjonalności, które musieliśmy zawrzeć w naszym rozwiązaniu, umieściliśmy je na prototypowych makietach w środowisku internetowym Figma. Udało nam się przeprowadzić testy użyteczności z udziałem 5 uczestników. Mamy wdrożone standardy, gdzie zaangażowani obserwatorzy nie muszą się obawiać krytycznego spojrzenia i dają nam jasne komunikaty, co musimy jeszcze poprawić w projekcie. Często stawiamy na oryginalny układ strony, dlatego w pierwszej kolejności zadbaliśmy o estetykę, odpowiednie uporządkowanie komponentów pól graficznych, tekstowych, przycisków, a także innych podstawowych elementów. Okazało się, że dzięki początkowej, zróżnicowanej pracy w wielu obszarach, w niesamowicie szybki sposób zmieniliśmy poprzedni projekt Foodeli - praktycznie nie do poznania. W ostatniej fazie testów poprawiliśmy kilka drobnych problemów z oznakowaniem nawigacji i rozmieszczeniem tytułów bloków tekstowych. Przeprowadziliśmy kilka rund iteracji w oparciu o testy automatyczne i informacje zwrotne od testerów, aby upewnić się, że makiety zawierają wszystko, czego potrzebowaliśmy. Kiedy funkcjonalność naszego projektu była już przetestowana i gotowa, przeszliśmy do projektowania UI. W tym samym czasie zaangażowaliśmy działania deweloperskie.

Chcieliśmy zapewnić potencjalnemu klientowi, że będzie czuł się pewnie w obszarze funkcjonowania strony i zrozumienie założenia biznesowe Foodeli, więc upewniliśmy się, że włączyliśmy ten aspekt do kilku różnych funkcji na stronie, w tym:

Screenshot 4
  1. Stworzenie banera na stronie głównej w postaci uproszczonej nawigacji, której podział został oparty o potrzeby poszczególnych archetypów klientów Foodeli,
  2. Całkowicie uproszczony panel śledzenia zamówień
  3. "Dlaczego Foodeli" prosty przegląd prezentujący najważniejsze wartości panujące w przedsiębiorstwie Foodeli,
  4. Maksymalnie uproszczony i atrakcyjny wizualnie panel przekierowujący na podstronę odnoszącą się wyłącznie do możliwości zatrudnienia w Foodeli w charakterze kierowcy,
  5. Cała sekcja (dostępna z navibaru) odnosząca się wyłącznie do oprogramowania Foodeli, w skład której wchodzą podstrony takie jak moduł administracyjny, moduł restauracyjny oraz aplikacja dla kierowców.

W końcowej fazie projektu z powodzeniem przeszliśmy przez testy UI. Prace programistyczne przebiegały bez problemów - to pełna zasługa Aleksandra! :) W procesie twórczym, nasza fantastyczna graphic designerka Karolina stworzyła autorską animację, która idealnie komponuje się z lekkością układu strony. Na uwagę zasługuje również prosta, oryginalna karuzela, która w pewnym sensie jest kolejnym navbarem ułatwiającym szybką nawigację pomiędzy poszczególnymi elementami oprogramowania. Zdecydowaliśmy się również na ulepszony układ na podstronie Kierowcy, który w dalszym ciągu utrzymuje spójne ID firmy, nadając witrynie bardziej dynamiczny i nowoczesny kierunek. Formularze są przejrzyste i maksymalnie uproszczone w zakresie komunikacji z partnerami, znajdują się na ponad 4 podstronach.

Techniki UX

  • Flow użytkownika
  • Archetypy użytkownika
  • Szkicowanie
  • Wireframing
  • Testowanie UI
  • Analiza problemów
  • Ankiety
  • Badania online
  • Analiza konkurencji
  • Mapowanie

Czas

4

tygodnie

Materiały

React
React
Tailwind
Tailwind
NextJS
NextJS
Node
Node
Visual Studio
Visual Studio
Figma
Figma
Envato
Envato
After Effects
After Effects
Illustrator
Illustrator
Photoshop
Photoshop
Jira
Jira
Slack
Slack
soul
soul
sticky notes
sticky notes
pens
pens

Prostota to także prawdziwy zwycięzca, jeśli chodzi o redesign a także propozycję biznesową - oprogramowanie Foodeli ma dwie przejrzyste oferty, jedna z nich to opcja freemium. Testowanie oprogramowania Foodeli również jest darmowe. Na końcu możemy wspomnieć, iż proces twórczy często przynosi ciekawe dodatki, jak choćby dostęp do Messengera z ciekawej animacji umieszczonej na podstronie Restauracja. Oczywiście proces wdrażania takiej strony stworzył wiele dodatkowych zmian, ale nie wpłynęło to w żaden negatywny sposób na przepływ projektu - dzięki zarządzaniu w oparciu o agile nadzorowanym przez Adriannę. Jest to ważne podczas pracy w zespole nad jakimkolwiek projektem: zrozumienie celów biznesowych pomaga każdemu z uczestników aktywnie zaangażować się w proces rozwoju produktu lub usługi digitalnej.

Screenshot 5

Oczywiście stronę Foodeli pozostawiamy do oceny szerszej publiczności, ale mamy nadzieję, że przedstawione tutaj studium przypadku jasno pokaże procesy obowiązujące w naszym software housie. Każdy taki projekt angażuje innych ludzi, inną tematykę i inny proces. Ze swojej strony będziemy stale pracować nad tymi obszarami strony, aby osiągnąć jeszcze lepszą jej optymalizację w przyszłości.

Frontend development: Aleksander Bondar
Graphic design: Karolina Klimczuk
Management: Mateusz Dudzicz & Adrianna Gregorczuk

Rozwiń swoją strategię cyfrową

Zostaw swój email, aby otrzymać wiadomość z naszą ofertą. Zobacz jak szybko możemy stworzyć dla Ciebie niestandardowy landing page lub aplikację.


Aexol sp. z o.o., Mławska 4/U7, 15-213 Białystok, Poland, EU

KRS: 0000602817, REGON: 363749060, NIP: PL5423253283