Barbara Bolimowska
UX/UI Designer
Redesign platformy szkoleniowej EDUCADO
Redesign platformy szkoleniowej EDUCADO
Wstęp
Cel projektu
W związku ze zmianą strategii biznesowej na platformie educado.pl moim zadaniem było:
Przeprojektowanie struktury serwisu zawężając ofertę do dwóch głównych segmentów: oświata oraz kadry i księgowość.
Odświeżenie interfejsu, bez ingerencji w infrastrukturę techniczną.
Informacje
Typ projektu: komercyjny
Rok realizacji: 2023
Dla kogo: Wiedza i Praktyka Sp. z o.o.
WWW: educado.pl
Moja rola w projekcie
Audyt UX platformy.
Architektura informacji.
Makiety HI-FI.
UI – poprawa estetyki i spójności.
Testy użyteczności.
Przygotowanie finalnego projektu oraz specyfikacji wdrożeniowej dla IT.
Audyt UX
Na start projektu przeprowadziłam szczegółowy audyt UX, który pozwolił zidentyfikować kluczowe problemy w obszarze użyteczności i czytelności treści.
Kluczowe problemy wykryte w trakcie audytu
Układ treści
Brak hierarchii wizualnej, problemy z czytelnością na urządzeniach mobilnych.
Estetyka i spójność graficzna
Niespójne elementy interfejsu, przestarzała kolorystyka i typografia.
Ścieżki użytkownika
Wiele punktów wyjścia do jednego celu, brak jednoznacznych CTA.
Architektura informacji
Po przeprowadzeniu audytu UX opracowałam nową strukturę serwisu, dostosowaną do uproszczonej oferty.
Proces
Jasny podział
Wprowadziłam jasny podział na dwa segmenty użytkowników – Oświata oraz Kadry i Księgowość.
Skrócenie ścieżek
Skróciłam ścieżki dotarcia do konkretnej oferty oraz wyeliminowałam niepotrzebne odnośniki i kategorie.
Nowa architektura
Rozrysowałam nową architekturę informacji.
Projekt interfejsu
Projekt platformy EDUCADO nie wymagał tworzenia interfejsu od zera, ponieważ system już funkcjonował. Moim zadaniem było przeprojektowanie kluczowych ekranów, uproszczenie struktury oraz wdrożenie poprawek z zakresu UX/UI.
Proces
Praca na istniejącym materiale
Na większości stron pomijałam etap makiet lo-fi, bazując na istniejących widokach serwisu i wprowadzając zmiany bezpośrednio na poziomie graficznym. Dzięki temu proces był dynamiczny i szybciej dopasowywał się do potrzeb projektu.
Makiety LO-FI wspierające reorganizację
Tam, gdzie konieczna była przebudowa nawigacji lub usprawnienie przepływu użytkownika, przygotowałam proste makiety LO-FI, by wesprzeć reorganizację struktury i funkcji.
Uspójnienie i estetyka
Usprawniłam hierarchię informacji, zoptymalizowałam CTA (wezwania do działania) i wzmocniłam kontrasty, a także unowocześniłam wygląd platformy, dostosowując go do aktualnych standardów e-learningowych.
Priorytety projektowe.
Redesign strony głównej
Uproszczenie układu oraz dostosowanie treści do dwóch głównych grup odbiorców.
Optymalizacja ściezek użytkownika
Poprawienie ścieżek użytkownikaeliminując zbędne kroki i upraszczając dostęp do zakupu.
Poprawa dostępności
Zastosowanie kontrastów kolorystycznych zgodnie z zasadami WCAG.
Uspójnienie stylu wizualnego
Dostosowanie kolorystyki, ikonografii i elementów interfejsu do nowoczesnych standardów e-learningowych.
Nowy UI oraz architektura menu.
Case study i testy użyteczności
Sekcja Webinarów posłuży jako przykład do zaprezentowania efektów redesignu oraz wyników testów użyteczności. Głównym celem przebudowy tego widoku było zapewnienie użytkownikowi błyskawicznego dostępu do kluczowych informacji o webinarach i zachęcenie do podjęcia natychmiastowych działań, takich jak rezerwacja miejsca czy odtworzenie nagrania.
Widok strony z webinarami przed i po zmianie.
Najważniejsze zmiany.
Uspójniony layout i treść ATF
Zamiast ogólnych zalet, użytkownik od razu widzi konkretny webinar z CTA, ekspertem, terminem i godziną.
Kafelki z kolejnymi webinarami
Pod głównym webinarem pojawiają się miniatury kolejnych – oferta wygląda na bogatszą i lepiej zorganizowaną.
Lepsza ekspozycja oferty „tu i teraz”
Informacje przedstawione wizualnie – zdjęcie, tytuł, tagi, przyciski – wspierają szybką decyzję.
Lepsza hierarchia informacji
Ujednolicono układ: tytuł, ekspert, terminy i CTA znajdują się w jednym komponencie – bez potrzeby przewijania.
Dodanie breadcrumbów
Wprowadzono nawigację breadcrumbową, która poprawia orientację i kontekst użytkownika w strukturze serwisu.
Dostosowanie do WCAG
Wprowadzono nawigację breadcrumbową, która poprawia orientację i kontekst użytkownika w strukturze serwisu.
Testy użyteczności
Po zakończeniu prac nad makietami i interfejsem przeprowadziłam testy jakościowe z użytkownikami, których celem było sprawdzenie intuicyjności nowego układu i identyfikacja ewentualnych punktów tarcia.
Przebieg testów z użytkownikami.
Uczestnicy
8 osób – w tym dyrektorzy szkół, nauczyciele i pracownicy administracyjni (grupy docelowe platformy Educado).
Forma testów
Zdalna – screen sharing + wywiad, testy były moderowane.
Iteracje
I tura (4 osoby): wskazano potrzebę drobnych poprawek – m.in. doprecyzowanie etykiet i lepsze wyróżnienie CTA. II tura (4 osoby): po zmianach użytkownicy nie zgłosili już barier – nowy interfejs oceniono
Kluczowe problemy wykryte w testach.
Wzmocnienie widoczności informacji o ekspercie
Użytkownicy wskazali, że informacje o prowadzącym są zbyt mało widoczne, co zmniejszało ich zaufanie i chęć zakupu.
Zmiana
Umieściłam informację o ekspercie bezpośrednio pod tytułem szkolenia – to jedno z pierwszych miejsc, na które użytkownik kieruje.
Zmiana
Zaleciłam programistom dodanie klikalnego linku do podstrony z pełnym bio oraz innymi szkoleniami tego eksperta.
Doprecyzowanie informacji o czasie trwania szkolenia.
Użytkownicy mylili oznaczenie czasu trwania z godziną rozpoczęcia szkolenia – co prowadziło do nieporozumień.
Zmiana
Dodałam napis „Czas trwania szkolenia”
Zmiana
Przeorganizowałam układ informacji: Data - Godzina rozpoczęcia - Czas trwania - Informacja o czacie na żywo.
Dzięki tej kolejności użytkownik widzi dane logicznie i czytelnie – to poprawia orientację i ogranicza ryzyko błędnych interpretacji.
Widok strony z opisem szkolenia przed i po zmianie.
Podsumowanie
Projekt redesignu EDUCADO był okazją do uporządkowania struktury dużej platformy edukacyjnej i dostosowania jej do zmieniającej się strategii biznesowej.
Dzięki audytowi UX i pracy nad architekturą informacji udało się stworzyć bardziej przejrzysty, intuicyjny serwis z nową ofertą dostosowaną do dwóch kluczowych segmentów odbiorców.
