Projekt strony internetowej Learn Grasshopper
LearnGrasshopper.com to platforma edukacyjna stworzona przez Krzysztofa Wojsława dla architektów, inżynierów i specjalistów z branży AEC, którzy chcą rozwijać umiejętności związane z Grasshopperem, automatyzacją pracy oraz programowaniem.
Moim zadaniem było zaprojektowanie rozbudowanej strony internetowej platformy — od architektury informacji i głównych widoków po sposób prezentacji oferty szkoleń i rozbudowane strony poszczególnych kursów.
Projekt obejmował m.in. stronę główną, Trainings, strony szkoleń, Student Stories, Upcoming Workshop, Free Resources, Previous Workshops, Downloads oraz About. Wszystkie widoki zostały zaprojektowane również z myślą o urządzeniach mobilnych.
Jak zamienić rozbudowaną ofertę szkoleń w czytelną ścieżkę rozwoju?
Jednym z najważniejszych wyzwań projektu nie było samo pokazanie dostępnych kursów. LearnGrasshopper oferuje szkolenia dla osób znajdujących się na bardzo różnych etapach rozwoju — od pierwszego kontaktu z Grasshopperem, przez wykorzystanie go w konkretnym oprogramowaniu, aż po bardziej zaawansowaną automatyzację i programowanie.
Projektując serwis, nie chciałem więc tworzyć kolejnego katalogu składającego się z szeregu podobnych kart kursów.
Kluczowym zadaniem było pokazanie użytkownikowi, gdzie znajduje się obecnie, które szkolenie odpowiada jego poziomowi i jaki może być jego kolejny krok.
Oferta została potraktowana jako ścieżka rozwoju, po której kursant może poruszać się wraz ze wzrostem swoich umiejętności.
Trzy kierunki zamiast jednej listy kursów
Na początku użytkownik może określić, czego właściwie chce się nauczyć.
Pierwszy kierunek prowadzi przez naukę Grasshoppera i programowania wizualnego. Drugi skupia się na wykorzystaniu Grasshoppera do automatyzacji pracy w takich narzędziach jak Revit czy Tekla. Trzeci prowadzi bardziej zaawansowanych użytkowników w stronę programowania tekstowego w Pythonie i C#.
Podział został więc oparty nie tylko na tematyce kursów, ale przede wszystkim na celu i aktualnym poziomie użytkownika.
Dzięki temu osoba odwiedzająca stronę nie musi na początku rozumieć całej oferty LearnGrasshopper. Może wybrać interesujący ją kierunek, a dopiero później poznać szkolenia znajdujące się na danej ścieżce.
Wizualna ścieżka prowadząca przez kolejne szkolenia
Samo podzielenie kursów na kategorie nadal nie pokazywało jednak zależności między kolejnymi etapami.
Dlatego jednym z głównych elementów strony Trainings stała się kolorowa linia przechodząca przez kolejne grupy szkoleń.
Zielona ścieżka odpowiada nauce Grasshoppera, niebieska prowadzi w stronę automatyzacji pracy w oprogramowaniu, a fioletowa przechodzi do programowania w Pythonie i C#.
Element nie pełni wyłącznie funkcji dekoracyjnej. Jego zadaniem jest wizualne połączenie oferty i pokazanie, że poszczególne szkolenia mogą być częścią większej drogi rozwoju.
W ten sposób strona Trainings stała się bardziej mapą możliwości niż tradycyjnym katalogiem produktów.
Informacje potrzebne jeszcze przed wejściem na stronę kursu
Kolejnym elementem było zaprojektowanie kart szkoleń w taki sposób, żeby użytkownik nie musiał otwierać każdego kursu osobno tylko po to, aby sprawdzić, czy jest on dla niego odpowiedni.
Już na poziomie listy można zobaczyć najważniejsze informacje dotyczące szkolenia: jego poziom, wymagania, cel, prowadzącego oraz podstawowe informacje pomagające ocenić, do kogo jest skierowane.
Dzięki temu karta nie jest wyłącznie odnośnikiem do kolejnej strony. Jest pierwszym etapem podejmowania decyzji.
Przy rozbudowanej ofercie edukacyjnej było to szczególnie istotne, ponieważ dwóch użytkowników odwiedzających tę samą stronę może mieć zupełnie inne doświadczenie, potrzeby i oczekiwania wobec szkolenia.
Jedna strona, różne sposoby wejścia użytkownika
Strona Trainings była tylko jednym z elementów większego serwisu.
LearnGrasshopper potrzebował również strony głównej, sekcji z historiami kursantów, informacji o warsztatach, darmowych materiałów, wcześniejszych wydarzeń, plików do pobrania oraz strony przedstawiającej markę i osoby stojące za szkoleniami.
Wyzwaniem było więc zaprojektowanie wielu różnych typów treści przy zachowaniu jednej, spójnej architektury i języka wizualnego.
Użytkownik mógł trafić do serwisu z różnym celem: szukać konkretnego szkolenia, dopiero poznawać LearnGrasshopper, pobrać darmowy materiał, przeczytać historię innego kursanta albo sprawdzić najbliższy workshop.
Każdy z tych scenariuszy wymagał nieco innego układu strony, ale wszystkie musiały sprawiać wrażenie elementów tego samego produktu.
Rozbudowane podstrony poszczególnych szkoleń
Osobnym etapem projektu były strony konkretnych kursów.
W tym przypadku użytkownik zna już temat szkolenia, dlatego rola strony zmienia się z nawigacyjnej na informacyjną i sprzedażową.
Landing page musi odpowiedzieć między innymi na pytania: dla kogo jest szkolenie, czego można się nauczyć, jakie umiejętności są wymagane, kto prowadzi kurs, jak wygląda program i w jaki sposób przebiega nauka.
W projektowanych stronach pojawiały się więc m.in. informacje o grupie docelowej, prowadzących, efektach szkolenia, programie i agendzie, przykładowych lekcjach, opiniach uczestników, społeczności, materiałach dodatkowych, dostępnych wariantach oferty oraz najczęściej zadawanych pytaniach.
Duża ilość informacji wymagała odpowiedniej hierarchii. Użytkownik powinien móc szybko przeskanować stronę i znaleźć odpowiedź na najważniejsze pytania, a jednocześnie mieć możliwość wejścia głębiej w szczegóły przed zakupem szkolenia.
Projekt oparty na istniejącym systemie, ale gotowy do dalszego rozwoju
Wraz z rozwojem LearnGrasshopper pojawiały się kolejne szkolenia i nowe typy stron.
Dlatego istotne było stworzenie rozwiązania, które nie będzie działało wyłącznie dla kilku pierwszych widoków.
Powtarzalne komponenty, sposób prezentowania szkoleń, sekcje z prowadzącymi, opinie, przyciski, karty oraz oznaczenia poszczególnych ścieżek tworzą wspólny system, który można rozwijać wraz z platformą.
Przy kolejnych projektowanych podstron mogłem korzystać z wcześniej wypracowanego języka wizualnego, dostosowując kolorystykę i strukturę do konkretnego szkolenia, zamiast za każdym razem projektować serwis od początku.
Desktop był tylko jednym z projektowanych widoków
Przy tak rozbudowanych stronach równie ważne było przeniesienie całej struktury na mniejsze ekrany.
Nie chodziło jedynie o zwężenie desktopowego layoutu. Długie sekcje, karty, rozbudowane podstrony i elementy prowadzące użytkownika przez ofertę musiały zachować właściwą hierarchię również na telefonie.
Dlatego dla projektowanych stron przygotowywałem również widoki mobilne, dostosowując układ treści, kolejność elementów i sposób prezentowania poszczególnych komponentów do znacznie mniejszej przestrzeni.
Spójny język wizualny dla technicznej platformy edukacyjnej
Charakter LearnGrasshopper wymagał połączenia dwóch światów.
Z jednej strony jest to platforma dotycząca zaawansowanych i technicznych zagadnień: Grasshoppera, automatyzacji, Revita, Tekli czy programowania. Z drugiej strony strona musi być przystępna dla osoby, która dopiero rozpoczyna naukę.
Dlatego warstwa wizualna wykorzystuje charakterystyczne, intensywne akcenty kolorystyczne, ale zestawia je z dużą ilością białej przestrzeni i prostą hierarchią informacji.
Kolor pełni przy tym funkcję nie tylko brandingową. Pomaga rozróżniać kierunki nauki i porządkować rozbudowaną ofertę.
Geometryczne elementy nawiązujące do computational design dodatkowo budują charakter marki, nie konkurując jednocześnie z właściwą treścią.
Efekt końcowy
W efekcie powstał rozbudowany serwis, który nie traktuje szkoleń jako zbioru niezależnych produktów.
Architektura strony, podział oferty i język wizualny zostały zaprojektowane wokół drogi użytkownika — od pierwszego kontaktu z Grasshopperem, przez rozwój umiejętności i zastosowanie ich w konkretnym oprogramowaniu, aż po bardziej zaawansowaną automatyzację i programowanie.
Najważniejszym zadaniem projektu było przełożenie rozbudowanej oferty edukacyjnej na strukturę, którą można szybko zrozumieć.
Użytkownik ma nie tylko znaleźć kurs. Powinien również wiedzieć, dlaczego dany kurs jest dla niego odpowiedni i jaki może być następny etap jego rozwoju.
Masz projekt
do zrealizowania?
Opisz, czego potrzebujesz, oraz podaj planowany termin i budżet. Na tej podstawie zaproponuję zakres, termin realizacji i wstępną wycenę — zazwyczaj w ciągu 24 godzin.
