Zaznacz stronę

Akademia.pl 

Pierwsza część tego wpisu to przemyślenia (zostawiłam część z nich), jakie spisywałam w ramach zadania rekrutacyjnego na stanowisko UX/UI designer w Akademia.pl. Rekrutację udało mi się przejść pomyślnie, a co za tym idzie miałam później okazję przeprojektować stronę główną. Wynik swojej pracy zamieszczam pod koniec wpisu.

1. Użyteczność na stronie 

Na samym początku skupiłam się na przeanalizowaniu błędów projektowych, jakie obecnie występują na stronie i wypisaniu ich wraz z rekomendacjami zmiany.

Menu i nawigacja

Występują różne menu główne. Nie jest to uzależnione od opcji zalogowania, wyświetlają się one losowo. Wchodząc w moduł kursu pojawia się wyszukiwanie, którego nie ma nigdzie indziej na stronie. Jeśli dotyczy ono tylko danego kursu, powinno się pojawiać w innym miejscu. W tym miejscu sugeruje przeszukiwanie całej witryny, które nie jest dostępne na innych podstronach. Widać również, że menu nie trzyma się siatki.

W menu powtórzono tę samą podstronę, pod różną nazwą co wprowadza w błąd użytkownika. 

Widok kursów

PRZED

„BIBLIOTEKA, KURSY, PROGRAMY” czyli trzy różne nazwy określające to samo. Potrzebne jest zunifikowanie nazewnictwa.

  • Brak hierarchii w widoku kursów (np. data dodania lub stopień ukończenia). Przy czym kursy są rozbite na kilka stron, co utrudnia ich wyszukiwanie
  • Brak opcji filtrowania.
  • Dodatkowo praktyczna by była informacja, ile kursu jeszcze zostało, czy z ilu składa się modułów.

Subskrypcja OnePass wygląda jak jeden z kursów, a po wejściu w niego mamy tylko jeden film powitalny. Jest to opcja, którą wykupuje się czasowo. Potrzebna by była informacja, ile jeszcze pozostało dni do końca subskrypcji.

PROPONOWANE ZMIANY

  • Zmieniłam widoczność OnePass, tak, żeby nie wyglądał jak jeden z kursów, ale opcja, która jest aktualnie wykupiona. Powinna pojawić się tutaj informacja, ile pozostało czasu do końca subskrypcji. Można również dodać CTA z opcją odnowienia na kolejny miesiąc.
  • Dałabym wszystkie kursy na jedną stronę. Kursy umieściłabym najpierw te, które są aktualnie rozpoczęte. Na sam koniec dałabym ukończone w 100%.
  • Informacja przy kursach, że zostały uzupełnione o nowe materiały.
  • Informację o stopniu ukończenia kursu
  • Filtrowanie kursów
  • Opcja wyszukiwania.
  • Opcja, której tutaj nie zdążyłam zaprojektować, ale która jest również istotna, to zaznaczenie, które kursy są dostępne na stałe, a które tylko chwilowo w opcji OnePass.

Ustawienia

Wchodząc w ustawienia po prawej stronie na górze mamy link „Ustawienia”, który przenosi nas… do tej samej strony na której już jesteśmy.

Kolejna sprawa to informacje profilowe, a dokładnie profil społeczny. Można to fajnie wykorzystać, ale w tym momencie nie ma to żadnej funkcji. Czy inny kursant może podejrzeć mój profil? Jeśli tak, to czy ja też mogę zobaczyć jak on się prezentuje? Czy może to są informacje tylko dla administratorów? Czy jest to zalążek opcji, która będzie dopiero rozbudowywana? Jest info o społecznościach, ale na stronie tych społeczności nie widać.

PROPONOWANE ZMIANY

Zastanawiałam się jaką wartość mogłaby dać społeczność na samym portalu. Do tej pory cała aktywność społeczności odbywa się na FB i grupach odpowiadającym poszczególnym kursom. Nie każdy ma jednak FB. To co można by też wprowadzić to algorytm AI, który na podstawie informacji profilowych, przebytych kursów (ścieżek), dobierałby ludzi pod względem zainteresowań. Po co? Chociażby do tworzenia grup MasterMind. Użytkownik powinien otrzymać opcję wyboru czy jest taką funkcją zainteresowany. Jeśli tak – wyświetlałyby mu się profile innych zainteresowanych osób. Pozwoliłoby to bardziej usystematyzować informacje o użytkownikach. Na FB posty giną w zalewie nowych, i znalezienie odpowiedniej osoby do współpracy/nauki/biznesu jest utrudnione.

Dostępność

Sprawdzałam jak wygląda dostępność strony z poziomu klawiatury. Czytnik (np. VoiceOver na systemie MacOS) źle radzi sobie z nawigacją, widać, że strona nie ma ustawionego języka na polski.

Kolejna sprawa to przydałyby się napisy do filmów, lub tekst pod spodem do pobrania, dla osób niesłyszących.

Brak takich rozwiązań ogranicza ilość osób, które mogą w pełni korzystać z kursów.

Strona główna

Warto sprawdzić czy przy inaczej sformułowanym tekście na CTA nie byłoby więcej konwersji. Podtytuł w którym jest informacja o wyprobowaniu za darmo, może być pominięty przez studentów. Oprócz tego powtórzyłabym CTA z dołączeniem do Akademii również pod koniec strony, kiedy użytkownik przejrzy już wszystkie informacje, jako dodatkowa zachęta i żeby nie musiał cofać się do góry.

Obecnie niewidoczna jest obniżona cena kursu.

Co do reszty strony głównej:

Przeprojektowałabym widok z opiniami. Zastanowiłabym się czy nie dać na stronę główną dodatkowych informacji co zyskują po dołączeniu: m.in. mentoring, grupa na FB gdzie jest wsparcie, dożywotni dostęp do kursów, aktualizowane materiały, czy w przyszłości wsparcie AI.

Odtwarzanie kursów

Nowy design odtwarzania kursów:

Dodanie opcji wyboru, czy student Akademii chce mieć włączone autoodtwarzanie, czy preferuje tę opcje wyłączyć i mieć czas np. na zapoznanie się z materiałami dodatkowymi. Przy wybranej opcji autoodtwarzania, filmy mogłyby automatycznie same się uruchamiać, nie angażując w to użytkownika.

Również to co napisałam w poprzednim punkcie, czyli wprowadzenie napisów, byłoby sporym udogodnieniem dla części użytkowników.

Przerabiając kurs często „uciekają” materiały dodatkowe, które nie wszędzie się pojawiają, a które są wyświetlane pod filmem i pod łamaniem strony. Rozważyłabym opcję umieszczenia o nich informacji gdzieś przy odtwarzaniu (może na samej playliście?).

Brakuje dostępu do modułów z poziomu odtwarzanego filmu. Podczas przerabiania kursów, student może chcieć cofnąć się do materiałów z innego modułu, zobaczyć ile materiału zostało, ile jeszcze przed nim modułów etc. Teraz w tym celu musi wychodzić z odtwarzacza i szukać na innej stronie. Dałabym mu możliwość swobodnego przemieszczania się bez przeładowywania całej strony.

2. Propozycja wartości 

Na samym początku skupiłam się na przeanalizowaniu błędów projektowych jakie obecnie występują na stronie i wypisaniu ich wraz z rekomendacjami zmiany.

1. Społeczność

Budowanie społeczności na stronie mogłoby wykorzystywać algorytmy AI, i dobierać ludzi względem zainteresowań. To byłaby też dobra opcja dla tych, którzy nie posiadają konta na Facebooku, przez co nie otrzymują wsparcia od grupy czy mentorów.

2. System powiadomień

Aktualnie system powiadomień to jedynie e-maile, które często giną w folderze spam i mogą nie zostać odczytane. Dobrym rozwiązaniem byłoby wprowadzenie powiadomień na stronie, po zalogowaniu się lub bezpośrednio na telefon (po wyrażeniu zgody), jeśli zostałaby wprowadzona strona PWA. Dzięki temu jesteśmy na bieżąco ze wszystkimi informacjami (spotkania na żywo, uaktualnienia kursów, webinary itd.). Ikona Live dawałaby znać, że aktualnie odbywa się gdzieś spotkanie na żywo i można dołączyć.

3. PWA – Progressive Web App

Rozszerzenie strony Akademia.pl o PWA (Progressive Web App) dałoby nowe możliwości technologiczne:

  • więcej możliwości przy RWD
  • możliwość pobrania ikony na telefon, bez instalacji aplikacji
  • pominięcie sklepów z aplikacjami
  • jeden kod źródłowy dla wszystkich systemów
  • większa łatwość korzystania dla słabszych łączy
  • przyspiesza reakcje strony i jej czas ładowania nawet kilkukrotnie
  • działa w trybie offline
  • łatwo można dzielić się aplikacją za pomocą linków URL
  • PWA jest zawsze na czasie, dzięki skryptom (tzw. Service worker) aktualizującym ją na bieżąco
  • jednolite customer experience (CX) na wszystkich urządzeniach
  • wspiera świetnie omnikanałową ścieżkę klienta
  • adres URL i wysokie indeksowanie przez Google

 

3. Nowy design strony głównej 

Na podstawie swojej analizy i przemyśleń zaproponowałam inny wygląd portalu Akademia.pl. Ważne było dla mnie pokazanie realnej wartości jaką dostają studenci przerabiający kursy. Stąd wyeksponowanie opinii, sekcje z sukcesami studentów, ale także pokazanie instruktorów. W nagłówku pojawiły się przejścia do dwóch ankiet, które również miałam okazje projektować, a które miały stanowić dodatkowy materiał marketingowy, czyli: kalkulator cen kursu i ankieta dotycząca ścieżki studenta.

4. Branding

Pod lupę wzięłam również zmianę loga Akademia.pl. W tamtym czasie Akademia potrzebowała nowego logo portalu. Inspiracją miała być rakieta kosmiczna.