Case Studies

Strona internetowa, która NAPRAWDĘ sprzedaje – design platformy e-learningowej dla Kursy Lean

Klient:
Kursy Lean / Lean Action Plan
Cel:
redesign platformy i ułatwienie zakupów przez stronę z kursami
Okres współpracy:
styczeń-marzec 2020
Liczba sprintów:
3
Liczba osób w projekcie:
2

Kontekst projektu:

Po 5 sprintach poświęconych badaniom (o których więcej przeczytasz tutaj), nastąpiło przekazanie projektu w ręce designera.

Prace zawsze staramy się organizować w taki sposób, by wypracowane przez klienta wyniki badań zostały przedstawione designerowi odpowiednio wcześniej – z reguły rezerwujemy na to ok. pół sprintu. Organizujemy wewnętrzne spotkanie kick-offowe i zapewniamy zespołowi czas na dokładną analizę materiału oraz  swobodną dyskusję na temat celów nadchodzącego etapu projektu.

Tak też było w tym przypadku. Paweł, który odpowiadał za realizację projektu graficznego, rzetelnie przeanalizował przygotowaną wcześniej dokumentację. Dzięki temu pracę rozpoczynał z gotowymi pomysłami i rozwiązaniami, ze świadomością sposobu myślenia użytkowników portalu Kursy Lean, wyzwań z jakimi się mierzą i potrzeb, które chcą zaspokajać korzystając z oferty naszego klienta.

W przypadku tego projektu, poza wypracowanymi w trakcie badań rekomendacjami, nasz designer miał także do dyspozycji wcześniejszy projekt strony internetowej oraz dane na temat tego, w jaki sposób użytkownicy wchodzą z tym projektem w interakcje (a to dzięki odpowiednio skonfigurowanej analityce w Google Analytics oraz przygotowanym mapom ciepła w hotjar.com).

Taka analiza wraz z materiałami opracowanymi w trakcie badań okazały się kluczem do uzyskania rezultatów, na których zależało klientowi:

Sprint 5 – UX design – jak zrobić efekt “WOW” na kliencie

UX to wszystko, co towarzyszy odbiorcy w trakcie interakcji z portalem lub aplikacją. W przypadku projektu dla Kursy Lean, wrażenie, które chcieliśmy wywrzeć na odbiorcy, można sprowadzić do krótkiego: “WOW”, dlatego w trakcie procesu skupiliśmy na poniższych elementach:

  • Interfejs
  • Nawigacja
  • Struktura
  • Intuicyjność
  • Łatwość dostępu

By zadbać o to, by każdy element był dopracowany i spójny z innymi, prace zawsze zaczynamy od przygotowania makiet (inne sformułowania, z którymi możesz się spotkać, to np. wireframe’y). Są to “szkice” docelowej strony internetowej, które służą opracowaniu wstępnej struktury strony, zawartości, a wraz ze wzrostem szczegółowości makiet, także dopracowaniu wrażeń użytkownika. W warunkach warsztatowych pierwsze szkice często powstają na kartce papieru, jednak w przypadku tego projektu – z uwagi na jego stopień zaawansowania i wcześniejsze prace badawcze – Paweł od razu wykorzystał Figmę.

Co do zasady, wyróżnia się dwa typy makiet:

  • Makieta lo-fi, czyli makieta o niskim poziomie szczegółowości. Powstaje najczęściej w początkowej fazie projektowania, która przedstawia każdą podstronę z dużego oddalenia, obejmując jedynie podstawowe i kluczowe elementy danego ekranu.
  • Makieta hi-fi, czyli makieta o wysokim poziomie szczegółowości. Powstaje zazwyczaj w oparciu o wcześniej stworzone makiety lo-fi i jest bardzo zbliżona do wersji końcowej produktu.

W przypadku projektu dla Kursy Lean zdecydowaliśmy się na wybór opcji hybrydowej. Rozpoczynaliśmy od makiet bardzo ogólnych (przygotowywanych jednak od razu w sposób profesjonalny, z wykorzystaniem programu Figma, który umożliwiał łatwą rozbudowę i modyfikację projektu). Makiety były dopracowywane w miarę postępu prac, zgodnie z podejściem zwinnym. Oczywiście, co chcemy podkreślać na każdym kroku, działo się to przy bliskiej i intensywnej współpracy z klientem. Bez tego nie moglibyśmy liczyć na takie powodzenie projektu.

Ponieważ różne elementy interfejsu wymagały uwagi na innym aspekcie, chcieliśmy poświęcić sto procent energii i uwagi na to, co w tym konkretnym momencie projektu jej wymagało. Zmapowane wcześniej wyzwania, ułożone w kolejności od najbardziej do najmniej wymagającego, odzwierciedlały kolejność działań w trakcie projektowania UX. 

Przykład? Oto on. Dzięki badaniom wiedzieliśmy, jak ważne było skupienie naszej uwagi na ścieżce, jaką przebywa użytkownik od wejścia na stronę do zakupu kursu. Dlatego budowa intuicyjnego i przejrzystego flow zakupowego miało najwyższy priorytet i to na tym zespół projektowy skupił swoją uwagę na samym początku. Dopiero potem rozbudowywaliśmy projekt o szczegóły i dodatkowe elementy.


Uzasadniając nasze podejście, warto odpowiedzieć na pytanie: “Dlaczego w ogóle decydujemy się rozpocząć prace od przygotowania makiet, zamiast od razu rzucić się w wir projektowania ostatecznego designu?”

Po pierwsze, stworzenie makiety zajmuje znacznie mniej czasu, niż przygotowanie całego wyglądu docelowego produktu – a dobrze zaprojektowane makiety pozwalają później dużo szybciej i bardziej dynamicznie pracować nad finalnym designem. Wprowadzanie zmian na widokach “bardziej ogólnych” jest prostsze, szybsze, a zatem lepiej dostosowane do zwinnego sposobu pracy. 

Nie bez znaczenia jest także fakt, że podczas makietowania uwaga zespołu projektowego (do którego zaliczamy zarówno designera, jak i osoby po stronie klienta) skupiona jest na projektowaniu interakcji pomiędzy użytkownikiem a systemem. Nie na designie, czyli na mniej istotnych w początkowych etapach projektu kolorach, fontach, grafikach itd.

Na tym etapie procesu projektowania jest to absolutnie kluczowe, ponieważ zbyt duże skupienie na kwestiach stricte wizualnych odciąga uwagę od szerszego spojrzenia na projekt.

Projektowanie UX jest procesem niezwykle iteracyjnym, opartym o ciągłą komunikację z klientem. W praktyce oznacza to konieczność wspólnego podejmowania wielu decyzji projektowych. Designer przygotowuje kilka propozycji, eksperymentuje, szuka najlepszego rozwiązania – a klient weryfikuje te rekomendacje w oparciu o własne doświadczenie i znajomość swoich odbiorców. Jest to etap, w którym bardzo istotna jest otwartość i wzajemne zaufanie. Mieliśmy to szczęście, że w przypadku tego projektu mogliśmy liczyć ze strony klienta na jedno i drugie.

Dlatego po niespełna dwóch tygodniach, mając gotowe makiety i pomysł na przekucie ich w ostateczny projekt portalu, mogliśmy przystąpić do projektowania UI, czyli gotowego interfejsu, oddanego następnie developerom do wdrożenia.  

Sprint 6 i 7 – UI design – ostateczny projekt portalu

Przyjętą w Project: People praktyką projektowania nowych portali jest fakt, że zarówno wstępne makiety, jak i dopracowane i gotowe do wdrożenia projekty portali czy aplikacji (czyli UI właśnie), realizuje najczęściej ten sam Product Designer. Szerokie kompetencje i świadomość różnych perspektyw przy projektowaniu nowego produktu cyfrowego pozwalają oszczędzać czas i pozytywnie wpływa na jakość projektu.

Paweł, już na etapie projektowania UX mógł “przy okazji” zastanawiać się nad rozwiązaniami, które będzie mógł zastosować później, projektując finalną postać interfejsu. Dzięki temu prace nad UI designem trwały tak krótko (biorąc pod uwagę, jak skomplikowany był to proces).

Etapy prac w tych dwóch sprintach zostały zaplanowane zgodnie z powszechnie przyjętymi standardami i składały się z:

  • gotowego projektu strony głównej, 
  • weryfikacji obranego kierunku, 
  • poprawek do przygotowanego projektu, 
  • stworzenia wszystkich pozostałych podstron, 
  • opracowania wersji mobilnych (zgodnie z podejściem mobile-first).

“Holistyczne podejście do projektu” to to, co często pojawia się w ankietach feedbackowych od naszych klientów. Jesteśmy z tego dumni i robimy wszystko, by ta opinia na temat Project: People powtarzała się także w przyszłości. Jak konkretnie to robimy? W przypadku prac dla KursyLean.pl poza przygotowaniem designu nowej strony internetowej, zatroszczyliśmy się także o…

  • przygotowanie rekomendacji do tego, jak powinny wyglądać okładki sprzedawanych kursów i inne zdjęcia wykorzystane na stronie internetowej

W trakcie badań z użytkownikami okazało się, że wykorzystywane wcześniej materiały promocyjne poświęcone kursom budziły wątpliwości potencjalnych odbiorców.

Zaproponowaliśmy, aby na zdjęciach znalazły się osoby wykonujące czynności związane z kursem lub przedmioty nawiązujące do tematyki.

Radziliśmy również, aby kolorystykę / temperaturę barw grafik dobierać do poziomu zaawansowania kursu.

Poza rekomendacjami, które klient może wykorzystać do nowych kursów, przygotowaliśmy materiały do istniejących produktów.

  • przygotowaniu projektu pod wdrożenie

Wcześniejsze doświadczenia z developerami odpowiedzialnymi za wdrożenie platformy pozwoliły nam przygotować ten projekt w sposób maksymalnie “dev-friendly”. Postaraliśmy się, by wszystkie elementy były opisane i przygotowane w formie gotowej do wykorzystania. Podobnie podeszliśmy do wszystkich kwestii związanych z docelowym zachowaniem portalu: jak powinno wyglądać menu, co powinno się wydarzyć po kliknięciu w konkretnym miejscu itd. 

Dla klienta istotnym było, żeby nie musiał zarządzać pracami wdrożeniowymi z uwagi na brak dedykowanych zasobów wewnętrznych

Zastosowane kolory – początkowo w barwach klienta, później zmiana w kierunku barw bardziej stonowanych. Uzasadnienie: psychologia koloru. 

Sprint 8 – Style Guide – klucz do spójności wizualnej

Budowanie spójności wizualnej wymaga podjęcia wielu decyzji i konsekwentnego trzymania się ich. Wydaje się, że to bułka z masłem, ale w świecie, gdzie w każdej minucie natykamy się na nowe pomysły, takie stanowcze podejście jest trudniejsze niż wytrwanie w diecie.

Niezwykle przydatnym narzędziem jest Style Guide, który stanowi zbiór wytycznych, sugerujących jak używać elementów identyfikacji wizualnej marki.

Jest to istotne zwłaszcza w przypadku projektów, które ciągle żyją. A KursyLean.pl bez wątpienia cały czas ewoluuje. Na platformie pojawiają się nowe kursy, klient organizuje kolejne akcje promocyjne swoich produktów cyfrowych. A to wszystko wymaga nowych materiałów.

Dlatego ostatni sprint poświęciliśmy na przygotowanie prostego Style Guide, który zawierał m.in. 

  • reguły dot. kolorów  
  • reguły dot. typografii (jaki font, jakiej wielkości, zasady dot. pogrubiania lub przechylania czcionki)
  • reguły dot. marginesów i przestrzenii w materiałach graficznych
  • reguły dot. cieni, zaokrągleń elementów w materiałach graficznych
  • dobre praktyki, tzw. “dos and don’ts”
  • przykładowe materiały, które mogą być reużywane przez klienta

Choć nie było potrzeby tworzenia rozbudowanego dokumentu jak w międzynarodowej korporacji, przygotowane zasady pomagają klientowi do dzisiaj w samodzielnym kreowaniu nowych materiałów graficznych, które można podziwiać na ich stronie internetowej lub mediach społecznościowych.

To bez wątpienia był intensywny czas. 4 sprinty, w trakcie których powstała nowa platforma, wypełnione mnóstwem wyzwań, którym musieliśmy stawić czoła. 4 tygodnie ożywionej komunikacji z klientem. Godziny wideokonferencji, hektolitry wypitej kawy. I wyniki, na które po kilku miesiącach patrzymy z dreszczem satysfakcji:

Czy cały wysiłek się opłacił? Zdecydowanie tak! Sprawdź, co o projekcie mówi klient:

Dzięki wspólnym dyskusjom i komunikacji na bardzo wysokim poziomie udało nam się wypracowywać właściwe rozwiązania. Czujemy, że dzięki temu nasza strona została dostosowana zarówno do odbiorców, jak i do naszego modelu biznesowego.

Krzysztof Pawłowski, Partner Zarządzający, Lean Action Plan

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ę

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.