Case Studies

Strona internetowa dla branży fitness – miejsce agregujące elementy marki osobistej

Grupą, która ma bardzo duży wpływ na nasz styl życia, są przedstawiciele branży fitness – na przykład dietetycy. Wraz ze wzrostem rozpoznawalności ich marki osobistej rośnie też zakres oferowanych przez nich usług. Powstają plany żywieniowe, jadłospisy, książki, ebooki i wiele innych produktów, które mogą oferować swoim klientom. Strony internetowe stają się swoistym hubem tego wszystkiego i muszą w odpowiedni sposób operować między prezentacją niezbędnych informacji, sprzedażą produktów i usług, czy nawiązywaniem współpracy.

Klient
Patrycja Rublewska - FitPatka
Cel
Stworzenie nowej strony internetowej dla branży fitness
Okres współpracy
kwiecień i maj 2020
Liczba sprintów
6
Liczba osób w projekcie
3

Kontekst projektu

Pracę nad stroną Patrycji rozpoczęliśmy dzięki rekomendacji naszego klienta – Marka Bis z Centrum Szkoleń Sportowych. Z Markiem pracowaliśmy wielokrotnie i przy tym projekcie ponownie mieliśmy okazję wspólnie stworzyć coś nowego.

Sprint Pierwszy: Warsztaty startowe & budowa rozwiązania

 

Warsztat Kick-off

Nasz proces praktycznie zawsze rozpoczynamy od stacjonarnego warsztatu kick-offowego. (więcej o naszych warsztatach kick-off możesz dowiedzieć się tutaj). Tym razem musieliśmy zmierzyć się z nową rzeczywistością w związku z pandemią COVID-19 i taki warsztat przeprowadzić w formie zdalnej. Na warsztacie mieliśmy okazję lepiej poznać Patrycję i jej działalność oraz wspólnie przeszliśmy przez przygotowane wcześniej materiały, aby móc dokładniej zrozumieć kontekst projektu.

Podczas warsztatu ważne jest określenie celów, które powinny zostać osiągnięte. Zależało nam na poznaniu celu biznesowego strony internetowej dla branży fitness oraz oczekiwań względem naszej współpracy. Dzięki temu łatwiej nam całościowo wyobrazić sobie biznes klienta oraz jego potrzeby, które są z tym związane. Wypracowaliśmy aspekty działalności Patrycji, które muszą być uwzględnione, dokonaliśmy podziału oferowanych produktów i ustaliliśmy plan działania na pozostały czas projektu.

Po warsztacie zaktualizowany został dokument, który zawierał informacje o wszystkim, co udało się nam wspólnie wypracować, a do tej pory zawierał tylko informacje przekazane nam przed rozpoczęciem projektu.

 

Research

Następnym krokiem było przejście do fazy researchu. W tym etapie skupiliśmy się na skrupulatnej analizie konkurencji pod kątem stron internetowych i stosowanej stylistyki. Głównym zadaniem strony Patrycji miało być przede wszystkim zaprezentowanie szerokiego spektrum jej działań – od konsultacji dietetycznych, przygotowywanie różnorodnych jadłospisów przez własne produkty typu e-book, czy na prowadzeniu tematycznego profilu na Instagramie, kończąc. Dla Patrycji ważne było, aby strona nie tylko wspierała sprzedaż jej produktów, ale była również schludną i przejrzystą wizytówką jej marki osobistej. Analizę konkurencji przygotowaliśmy pod kątem rozwiązań bliźniaczych do działalności Patrycji. Dało nam to pogląd, jakie są aktualne wzorce funkcjonujące w branży w odniesieniu do określonych usług. Po skonfrontowaniu tego z trybem pracy i potrzebami Patrycji mogliśmy zacząć wypracowywać odpowiednie rozwiązania.

 

Architektura informacji

Ze względu na ograniczony czas na przygotowanie całego projektu, architekturę informacji ograniczyliśmy do zaprezentowania podstawowego flow użytkownika oraz zawartości podstron. Miało to być przede wszystkim przydatne dla developerów w późniejszej fazie projektu. Warto zaznaczyć, iż zespół developerski był obecny już od początku prac nad projektem. Było to bardzo wartościowe, ze względu na fakt, że już od początku mogliśmy prowadzić dyskusję na temat proponowanych rozwiązań, a developerzy mogli zwracać uwagę na ich potrzeby jeszcze przed rozpoczęciem projektowania.

Architektura informacji została przygotowana w oparciu o wszystkie uzyskane dotychczas dane oraz przeprowadzoną przez nas analizę konkurencji. Ciekawym aspektem w procesie jej powstawania było zastosowanie darmowej biblioteki elementów oferowanych przez twórców Figmy (więcej darmowych bibliotek Figmy znajdziecie tutaj). Dzięki temu, wszystko  nad czym pracowaliśmy mogło znaleźć się w jednym projekcie i pod jednym linkiem. Klient mógł na bieżąco obserwować postępy prac i w dowolnym momencie komentować wszystko, co znajdowało się wewnątrz narzędzia.

UX Design

Kolejną częścią sprintu było przygotowanie projektu makiet. Wielokrotnie wspominaliśmy już o tym, że w Project: People zależy nam na naturalnych doświadczeniach użytkownika, dlatego już na etapie tworzenia makiet staramy się tworzyć je w ten sposób, aby nie przypominały one tradycyjnych szkiców, a były bardziej przyjemne dla oka. Takie praktyki dają dobre efekty podczas prezentacji makiet. Dzięki temu użytkownik może skupić się na ich realnym celu, czyli proponowanej budowie określonych podstron.

Przygotowaliśmy makiety ukazujące główne elementy struktury strony internetowej dla branży fitness. Nie skupiliśmy się na poszczególnych state’ach czy standardowych flow jak np. rejestracja, a jedynie na tym co było ważne na poziomie zawartości danych podstron i ich sekcji.

We wstępnych ustaleniach strona miała być typowym one-pagem z funkcjonalnościami sklepu internetowego. Jednak w trakcie pracy nad projektem i poznawania kolejnych aspektów działalności Patrycji postanowiliśmy wyszczególnić dwie dodatkowe podstrony, które w szczegółowy sposób opowiadały o najważniejszych usługach – gotowych jadłospisach i współpracy dietetycznej. Pozwoli to między innymi na lepsze indeksowanie strony w wynikach wyszukiwania i pełniejsze opisanie oferowanych usług.

Finalnie powstały makiety:
– strony głównej
– podstrony współpracy dietetycznej
– podstrony jadłospisów
– strony sklepu
– karty jednego produktu
– podstrony FAQ
– podstrony kontaktu

Moodboard

Ostatnią częścią tego sprintu przed przejściem do projektowania było przygotowanie moodboardu. Ważnym aspektem było poznanie gustu Patrycji, kolorów, które są jej bliskie i które można powiązać z jej marką. W naszym moodboardzie zebraliśmy projekty, które niejednokrotnie bardzo się od siebie różniły. Dało nam to możliwość wykluczenia kierunków, które były nieodpowiednie i skierowaniu naszej uwagi w stronę, w którą pod kątem designu rzeczywiście powinniśmy podążać.

Sprint Drugi: UI Design i przygotowanie do wdrożenia

Po raz kolejny w fazie designu naszym głównym narzędziem była Figma. Wykorzystując wszystkie wcześniej zgromadzone tam materiały – architekturę informacji, makiety, moodboard mogliśmy swobodnie przekuć naszą dotychczasową pracę na finalny design strony Patrycji.

W ciągu tego tygodnia, na bieżąco pracowaliśmy z Patrycją i Markiem, aby każdy przygotowywany przez nas element spełniał ich oczekiwania. Było to dla nas też o tyle wydajne, że mogliśmy na bieżąco implementować otrzymywany od nich feedback. Staraliśmy się też wspólnie dyskutować na temat tzw. “microcopy”, czyli prostych treści jak na przykład CTA na przyciskach. Całość treści miała być przygotowana na podstawie zaproponowanych przez nas sekcji i innych elementów strony.

Projektując, cały czas mieliśmy z tyłu głowy aspekt mobilny. Mimo wszystko, duża część działań Patrycji odbywa się z wykorzystaniem Instagrama. Dlatego, aby uniknąć problemów po wdrożeniu, przygotowaliśmy widok mobilny do każdej zaprojektowanej przez nas podstrony.

Ostatnim elementem było przygotowanie całości projektu do wdrożenia. Plik został odpowiednio sformatowany, ekrany zostały ułożone względem ich przeznaczenia i całość została udostępniona do developerów. Dzięki wbudowanej opcji Figmy – “Code”, nie było potrzeby udostępniać niczego poza linkiem do naszego projektu. Funkcja ta, pozwala developerom uzyskać niezbędny kod css w oparciu o przygotowany design.

Aby możliwie najlepiej dopracować całość contentu, który był przygotowywany przez Marka i Patrycję, wsparła ich Katarzyna Golonka z naszego teamu marketingowego. Dzięki temu udało stworzyć treści spójne i dopasowane, które odpowiednio przekazują wszystkie niezbędne informacje.

Podsumowanie naszej pracy w liczbach i nie tylko

Każda strona internetowa jest inna. Każda potrzebuje specjalnego traktowania niezależnie czy to strona korporacji, kwiaciarni, czy właśnie dietetyka. Do każdego projektu podchodzimy indywidualnie, aby stworzyć możliwie najlepsze rozwiązania. Dbamy o to, aby nasze projekty spełniały potrzeby użytkowników i klientów.

Strona aktualnie jest w trakcie wdrażania i będzie miała swoją premierę w najbliższej przyszłości. Cały czas pozostajemy w kontakcie z Patrycją i deweloperami, aby nadzorować pracę nad wdrożeniem.

10

Godzin spędzonych na spotkaniach wideo

15

Zaprojektowanych ekranów

2

Sprinty intensywnej współpracy

Narzędzia wykorzystane w projekcie

Figma

Zespół projektowy, czyli kto za co odpowiadał

Autor Case Study

Paweł Nawara Product Designer w Project: People
Od najmłodszych lat związany z szeroko pojętym designem. Pracował przy projektach graficznych różnego typu (strony WWW, aplikacje mobilne, social media, DTP). Od dwóch lat najlepiej odnajduje się w Lean UX & UI Design.

Pracuje przy innowacyjnych projektach rozwiązując często złożone problemy. Jest na każdym etapie procesu. Od wstępnego pomysłu i rozmów z klientem, przez cały proces projektowania, aż do współpracy z deweloperami przy finalnym wdrożeniu produktu.

Mocno zaangażowany w różnego typu działania społeczne i organizację wydarzeń (Juwenalia UEK, DesignWays Conf). Aktywny członek organizacji studenckiej - NZS UEK, gdzie pomaga rozwijać się młodym i nastawionym na rozwój studentom poprzez mentoring czy szkolenia.

Pozostali członkowie zespołu

Katarzyna Golonka Lean Marketing Consultant
W biznesie od pięciu lat, podczas których zarządzała kilkunastoosobowym zespołem, kreowała cykle wydarzeń biznesowych, współtworzyła firmę i nią kierowała. Obecnie specjalizuje się w Content Marketingu oraz Personal Brandingu.

Pomaga firmom w odnalezieniu własnego “ja” w biznesie i komunikacji tego na zewnątrz (strategia marketingowa & biznesowa).

Zaangażowana w liczne działania społecznościowe. Jest certyfikowanym Trenerem Biznesu. Prowadzi warsztaty z pogranicza strategii & marketingu. Autorka tekstów dla portali branżowych, m.in. Nowy Marketing, Marketing w Praktyce, E-commerce & Digital Marketing.
Tomasz Osowski Lean UX & Service Designer w Project: People
Pomaga firmom stworzyć doskonałe doświadczenie użytkownika zapewniając jednocześnie odpowiednią rentowność biznesu. Jego zdanie to stworzyć produkt i usługi, które są potrzebne i przynoszą satysfakcję zarówno odbiorcom jak i właścicielom biznesu. Certyfikowany Trener Biznesu i rozwoju osobistego, Certyfikowany moderator Design Thinking. Przedsiębiorca od 6 lat szczerze zakochany w metodologii Lean. Zawsze stara się dostarczyć produkt jak najszybciej na rynek przy najmniejszym udziale kapitałowym. Współpracował z firmami: T-mobile, Ecard, inPost, ING, Nationale Nederlanden, Brainly, Publicis, Netguru. Organizator DesignWays Conf.

Case study to za mało?

Chcesz poznać cały proces i dowiedzieć się, jak mógłby wyglądać w Twojej organizacji?

Umów się na bezpłatną konsultację