Jak powstaje cyfrowa szkoła? 7 zasad projektowania serwisów i aplikacji dla uczniów i rodziców

Przy wyborze szkoły uczeń sprawdza kierunki, profile i dostępne lokalizacje. Rodzic szuka zasad rekrutacji, informacji o organizacji nauki i możliwościach dalszego rozwoju. Po rozpoczęciu nauki pojawiają się kolejne potrzeby: bieżąca komunikacja, ważne dokumenty i szybki dostęp do potrzebnych narzędzi.

Cyfrowa szkoła to połączony ekosystem serwisu, portalu ucznia i aplikacji mobilnej. Każdy z tych kanałów ma inne zadanie, ale wszystkie powinny prowadzić użytkownika według tej samej logiki i mówić do niego zrozumiałym językiem. Dlatego projekt zaczyna się od poznania ludzi i uporządkowania informacji, a nie od wyboru kolorów czy technologii.

Taki był punkt wyjścia współpracy TEB Edukacja i Crafton. Proces objął badania ilościowe i jakościowe. Zespół TEB wniósł wiedzę o uczniach, rodzicach, rekrutacji i codziennym działaniu sieci szkół. Crafton odpowiadał za architekturę informacji, projektowanie UX/UI oraz wdrożenie. Z tych doświadczeń wybraliśmy siedem zasad przydatnych przy tworzeniu serwisu, portalu lub aplikacji dla organizacji edukacyjnej.

TL;DR

• Cyfrowa szkoła łączy serwis, portal ucznia i aplikację mobilną. Każdy kanał ma inne zadanie, ale wszystkie powinny korzystać ze wspólnej logiki.
• Projekt zaczyna się od poznania potrzeb ucznia i rodzica oraz ułożenia oferty według ich pytań.
• Dostępność, zarządzanie treścią i podział odpowiedzialności trzeba zaplanować od początku, a po wdrożeniu obserwować zachowanie użytkowników.
• TEB wniósł wiedzę o edukacji i rekrutacji, a Crafton odpowiadał za architekturę informacji, UX/UI oraz wdrożenie.

1. Zacznij od decyzji ucznia i rodzica, nie od strony głównej

Prace nad serwisem łatwo zacząć od menu albo układu strony głównej. Wcześniej trzeba jednak odpowiedzieć na prostsze pytania:

• Z czym przychodzi uczeń?
• Czego potrzebuje rodzic?
• Które informacje sprawdzają wspólnie?
• Kiedy pojawia się potrzeba rozmowy z doradcą lub placówką?
• Co utrudnia przejście od zainteresowania do wyboru szkoły?

Uczeń i rodzic uczestniczą w tej samej decyzji, ale patrzą na nią z różnych stron. Ucznia może interesować konkretny zawód, profil albo atmosfera szkoły. Rodzic częściej sprawdza lokalizację, formalności i dalsze możliwości edukacyjne.

Dlatego projekt nowego serwisu TEB poprzedziły badania ilościowe i jakościowe. Nie chodziło w nich o zebranie pomysłów na wygląd strony. Zespoły chciały zrozumieć, jak obie grupy szukają informacji i co pomaga im podjąć decyzję. Dopiero na tej podstawie można było zaplanować strukturę serwisu.

TEB Edukacja: „Uczeń i rodzic analizują tę samą ofertę, ale zwracają uwagę na inne informacje. Chcieliśmy, aby serwis wspierał obie perspektywy i ułatwiał wybór szkoły oraz kierunku”.

Zanim zaczniesz projektować, nazwij najważniejsze decyzje użytkowników i sprawdź je w badaniach. Bez tego nawet atrakcyjna strona może odpowiadać na pytania, których nikt nie zadaje.

2. Ułóż ofertę według pytań użytkownika

Organizacja dobrze zna nazwy swoich jednostek i wewnętrzny podział odpowiedzialności. Kandydat nie powinien jednak poznawać tego schematu, aby znaleźć właściwy kierunek.

Dobra architektura informacji przekłada złożoną ofertę na kilka pytań:

1. Jakie mam możliwości?
2. Która szkoła lub profil pasuje do moich zainteresowań?
3. Czy ta oferta jest dostępna w moim mieście?
4. Czym różnią się poszczególne opcje?
5. Co mogę zrobić dalej?

W przypadku TEB wyzwaniem było połączenie w jednym serwisie czterech typów szkół: liceum, technikum, liceum plastycznego i edukacji domowej. Każdy z nich ma własną specyfikę. Razem powinny jednak tworzyć ofertę, po której uczeń i rodzic poruszają się bez znajomości struktury TEB.

Na stronie szkół średnich TEB można zacząć od typu szkoły, kierunku albo miasta. Użytkownik nie musi więc znać z góry nazwy konkretnej oferty.

Porównanie czterech typów szkół TEB pomaga rozpocząć wybór właściwej oferty.

Szymon Kubala – Crafton: „Architektura informacji nie powinna kopiować struktury organizacji. Ma skracać drogę od pytania ucznia lub rodzica do konkretnej szkoły, kierunku i kolejnego kroku”.

Najprostszy test? Poproś użytkownika o znalezienie wybranego kierunku w danym mieście. Szybko zobaczysz, czy nazwy kategorii i układ menu są dla niego zrozumiałe.

3. Ułatw kandydatowi drogę od zainteresowania do decyzji

Nie każdy kandydat wie od razu, jakiego kierunku szuka. Jedna osoba ma już konkretny plan. Druga interesuje się grafiką, programowaniem albo sportem, ale dopiero poznaje dostępne możliwości.

Sam katalog kierunków nie wystarczy. Serwis powinien najpierw pomóc odkryć możliwe ścieżki, potem ułatwić ich porównanie, a na końcu jasno wskazać, co można zrobić dalej. Może to być przejście do szczegółów rekrutacji, kontakt z placówką albo rozmowa z doradcą.

Jednym z takich punktów wejścia jest krótki quiz na stronie TEB, który pomaga uczniowi dopasować kierunek do jego zainteresowań.

Krótki quiz pomaga uczniowi przejść od zainteresowań do wyboru kierunku.

Oferta szkół średnich TEB łączy informacje o czterech typach szkół z kierunkami i profilami. Dzięki temu uczeń może przejść od ogólnego zainteresowania do oferty dostępnej w wybranym mieście.

Dobra podstrona odpowiada na trzy pytania: co tu znajdę, czy to pasuje do mojej sytuacji i jaki jest następny krok?

4. Włącz dostępność do procesu od pierwszego dnia

Dostępność wpływa na strukturę treści, nawigację, kontrast, formularze, obsługę klawiaturą i komunikaty o błędach. Gdy zespół zajmuje się nią dopiero pod koniec projektu, poprawki stają się trudniejsze i łatwo tracą spójność.

Crafton mierzył się z podobnym zadaniem przy serwisie Uniwersytetu Ekonomicznego w Poznaniu. Korzystają z niego kandydaci, studenci, absolwenci i pracownicy. Projekt objął audyt UX, badania dostępności, architekturę informacji oraz przygotowanie narzędzi dla wielu redaktorów.

Sam dostępny interfejs nie wystarczy. Jeśli nowe materiały będą publikowane bez odpowiednich zasad, jakość serwisu z czasem spadnie. Redaktorzy potrzebują więc narzędzi i jasnych wskazówek.

Dostępność uwzględnij w badaniach, projekcie, wdrożeniu i testach. Po uruchomieniu serwisu włącz ją także do codziennej pracy z treścią.

5. Zaprojektuj serwis, portal i aplikację jako jeden ekosystem

Potrzeby użytkownika zmieniają się wraz z jego relacją ze szkołą. Przed rekrutacją liczy się przede wszystkim oferta i pomoc w wyborze. Po rozpoczęciu nauki rośnie znaczenie bieżącej komunikacji oraz szybkiego dostępu do informacji.

Każdy kanał ma więc inne zadanie:

• serwis przedstawia ofertę i pomaga rozpocząć rekrutację;
• portal obsługuje bardziej rozbudowane sprawy związane z nauką;
• aplikacja daje szybki dostęp do najczęściej używanych funkcji.

Nie muszą wyglądać identycznie. Powinny jednak korzystać ze spójnego nazewnictwa i podobnych zasad nawigacji. Trzeba też zaplanować miejsca, w których użytkownik przechodzi między kanałami, oraz odpowiedzialność za dane i treści.

Współpraca TEB i Crafton objęła serwis łączący cztery typy szkół, portal dla uczniów oraz aplikację mobilną. Zakres prac przedstawia case study cyfrowego ekosystemu TEB Edukacja.

Case study TEB Szkoły Średnie: serwis łączący cztery typy szkół w jednym ekosystemie.

Najpierw opisz zadanie każdego kanału i cały proces z perspektywy użytkownika. Dopiero potem zdecyduj, które funkcje trafią do serwisu, portalu lub aplikacji.

6. Pamiętaj o osobach, które zarządzają treścią

Użytkownik widzi gotową ofertę. Po drugiej stronie pracują redaktorzy, zespoły marketingowe i pracownicy placówek. To oni aktualizują informacje o kierunkach, miastach i terminach rekrutacji.

Przy dużej liczbie szkół łatwo o rozbieżności. Ręczne kopiowanie tych samych informacji sprzyja błędom, a niejasne zasady akceptacji opóźniają publikację.

Jeszcze przed wdrożeniem warto ustalić:

• które informacje są wspólne dla całej organizacji;
• co można zmieniać lokalnie;
• kto publikuje i zatwierdza treści;
• jak system ograniczy duplikaty;
• co dzieje się z nieaktualną ofertą;
• jak zespół będzie kontrolował jakość i dostępność nowych materiałów.

Dobry system zarządzania treścią ogranicza powtarzalną pracę i pomaga utrzymać ofertę w porządku. Sama możliwość edycji tekstu to za mało.

7. Publikacja nie kończy pracy nad produktem

Oferta szkół się zmienia. Dochodzą nowe kierunki, treści i potrzeby użytkowników. Serwis powinien rozwijać się razem z nimi.

Po uruchomieniu warto obserwować:

• od czego użytkownicy zaczynają wybór;
• których informacji szukają najczęściej;
• gdzie rezygnują z dalszych kroków;
• jakie pytania trafiają do doradców i placówek;
• co najczęściej wymaga aktualizacji;
• jak wyglądają przejścia między serwisem, portalem i aplikacją.

Takie dane pomagają ustalać priorytety. Zespół może rozwijać produkt etapami, zamiast przebudowywać całość przy każdej zmianie.

Przed publikacją ustal, co będzie mierzone, skąd zespół weźmie informacje zwrotne i kto zdecyduje o kolejnych zmianach.

Co zyskują uczeń, rodzic i organizacja?

Każda grupa korzysta z tego systemu inaczej.

TEB może dzięki temu przedstawić cztery typy szkół w jednym miejscu bez zacierania różnic między nimi. Uczeń może zacząć od ogólnego pytania o swoje zainteresowania, a skończyć na konkretnej ofercie w wybranym mieście.

Wygląd strony nie wystarczy jednak do oceny jej skuteczności. Potrzebne są dane o zachowaniu użytkowników i realizacji celów organizacji. Dopiero one pokażą, co rzeczywiście działa, a co wymaga poprawy.

Jak wybrać agencję UX/UI do projektu w edukacji?

Portfolio pokazuje wygląd gotowego produktu, ale niewiele mówi o drodze do tego efektu. Przed wyborem agencji UX/UI lub partnera technologicznego zapytaj:

1. Jak zespół zbada potrzeby różnych grup użytkowników?
2. W jaki sposób sprawdzi, czy struktura rozbudowanej oferty jest zrozumiała?
3. Kiedy i jak przetestuje dostępność?
4. Kto odpowiada za projekt UX/UI, wdrożenie, treści i integracje?
5. Jak będzie wyglądało utrzymanie oraz rozwój po publikacji?
6. Czy zespół potrafi pokazać rzeczywisty zakres wcześniejszych projects, a nie tylko atrakcyjne ekrany?

Najczęściej zadawane pytania

Jak zaprojektować stronę internetową dla szkoły lub uczelni?

Zacznij od określenia grup odbiorców i decyzji, które mają podjąć. Następnie zaplanuj badania, architekturę informacji, prototypy, testy, projekt UX/UI i wdrożenie. Od początku uwzględnij też dostępność, rekrutację, lokalne warianty oferty oraz pracę redaktorów.

Czym projektowanie UX w edukacji różni się od projektowania zwykłego serwisu firmowego?

Serwis edukacyjny obsługuje kilka grup, które wykonują różne zadania. Kandydat, rodzic, uczeń, nauczyciel i pracownik szukają innych informacji. Oferta może się też zmieniać zależnie od miasta, placówki i terminu rekrutacji.

Jak pogodzić potrzeby uczniów i rodziców w jednym serwisie?

Zbadaj obie grupy osobno, a potem sprawdź, kiedy podejmują decyzję wspólnie. Serwis może pozwalać zacząć wyszukiwanie na kilka sposobów. Każdy z nich powinien jednak prowadzić do jasnego opisu szkoły, kierunku, lokalizacji i dalszych kroków.

Jak połączyć stronę szkoły, portal ucznia i aplikację mobilną?

Najpierw określ rolę każdego narzędzia. Potem uzgodnij nazewnictwo, zasady nawigacji, przepływ danych, przejścia między kanałami i odpowiedzialność za treści. Interfejsy mogą wyglądać inaczej, ale użytkownik powinien od razu rozumieć, jak działa każde narzędzie.

Od wiedzy o uczniach do działającego systemu

Organizacja edukacyjna wnosi wiedzę o uczniach, rodzicach i swoich procesach. Zespół projektowy przekłada ją na strukturę informacji, interfejs i technologię.

W projekcie TEB serwis, portal i aplikacja odpowiadają na różne etapy tej samej relacji. Serwis pomaga poznać ofertę. Portal i aplikacja wspierają ucznia później, gdy zaczyna korzystać z narzędzi szkoły.

Sprawdź ofertę szkół średnich TEB i zobacz, jak liceum, technikum, liceum plastyczne oraz edukacja domowa zostały połączone w jednym serwisie.

Nota redakcyjna

Tekst powstał we współpracy TEB Edukacja i Crafton na podstawie doświadczeń z projektowania cyfrowego ekosystemu TEB.