Case study · UX/UI · 2025–2026
eduVULCAN
Od bloga do serwisu, który łączy potrzeby uczniów, rodziców i nauczycieli.
01 — Zrozumieć kontekst
Jedna witryna, różne powody wizyty
Punktem wyjścia była witryna pełniąca przede wszystkim funkcję bloga, z ograniczonym dostępem dla osób niezalogowanych. Nowa strona miała szerzej przedstawiać wartość eduVULCAN i porządkować drogę do najważniejszych obszarów ekosystemu.
Projekt obejmował potrzeby uczniów, rodziców i nauczycieli. Musiał jednocześnie uwzględniać osoby poznające produkt oraz użytkowników, którzy mieli już konto i wracali w konkretnym celu.
Na czym opierałem decyzje
W projekcie nie prowadziliśmy bezpośrednich badań z użytkownikami. Korzystaliśmy z podstawowych metryk GA4 oraz feedbacku z rynku, w tym ocen aplikacji. Te źródła stanowiły kontekst dla decyzji dotyczących struktury i prezentacji treści.
Według informacji z okresu współpracy aplikacja miała ponad milion pobrań i ponad 1500 ocen w sklepie. Liczby opisują skalę produktu, a nie rezultat przebudowy witryny.
02 — Określić zakres
Publiczna witryna jako łącznik
Odpowiadałem za szkielet architektury informacji oraz przełożenie go na UI i klikalny prototyp do wdrożenia. Mój zakres obejmował całą publiczną witrynę i sposób prowadzenia użytkownika do kolejnego obszaru.
Architektura → interfejs
Struktura informacji, nawigacja, UI publicznych podstron i klikalny prototyp.
Konto i dostępy
Wewnętrzna struktura konta, profile dzieci i zarządzanie dostępami były już zaprojektowane.
Uwzględniałem konto jako istniejące środowisko, do którego kieruje publiczny serwis. Rozwój e-commerce pozostawał kierunkiem na przyszłość.
03 — Architektura doświadczenia
Strukturę serwisu porządkowałem wokół dwóch wymiarów: kim jest odbiorca i co chce zrobić podczas wizyty. Sam podział na ucznia, rodzica i nauczyciela nie obejmował wszystkich scenariuszy.
- Orientacja: umożliwić poznanie oferty bez konieczności rozpoczynania od konta.
- Różne punkty wejścia: uwzględnić stronę główną, odnośniki z aplikacji oraz bezpośrednie linki do artykułów.
- Widoczny kolejny krok: połączyć treści i ofertę z przejściem do istniejącego konta.
Mapa architektury informacji
Konteksty wejścia → obszary treści → przejście do istniejącego konta.
Schemat przedstawia główne obszary i zależności, a nie pełną listę pozycji menu.
Trzy role, różne potrzeby
Nawigacja łączy perspektywę ucznia, rodzica i nauczyciela z celem ich wizyty
04 — Cztery potrzeby, cztery ścieżki
Poznaję produkt
Eksploracja serwisu i odnalezienie obszaru odpowiadającego potrzebie.
Wracam do konta
Szybkie przejście do istniejącego środowiska i swoich dostępów.
Czytam artykuł
Wejście z Instagrama lub Facebooka bezpośrednio do materiału.
Szukam kursu
Poznanie oferty oraz warunków dostępu w ramach abonamentu.
Przykład: od potrzeby edukacyjnej do konta
Osoba szukająca kursu, np. przed egzaminem ósmoklasisty, potrzebowała odnaleźć ofertę i zrozumieć zasady korzystania. Kursy były dostępne w ramach aktywnego abonamentu konta w dzienniku ucznia.
Mój zakres kończył się na publicznej witrynie i przejściach do konta. Wewnętrzna struktura konta była już zaprojektowana. E-commerce pozostawał kierunkiem przyszłego rozwoju.
Zobacz wszystkie cztery przepływy
Ścieżka pokazana na ekranach
Diagram porządkuje kolejne kroki. Widoki interfejsu pokażą, jak użytkownik przechodzi od punktu wejścia do wybranego działania.
Strefa językowa na dużym i małym ekranie.
Od poznania oferty do wyboru kursu.
Użytkownik przechodzi ze strefy językowej Hello! do informacji o kursach, a następnie do oferty Fluentbe. Ścieżka łączy poznanie możliwości nauki z konkretnym kolejnym krokiem — przejściem do zewnętrznego serwisu.
05 — Od struktury do interfejsu
Architekturę informacji przełożyłem na UI całej publicznej witryny oraz klikalny prototyp do wdrożenia. Priorytetem była hierarchia treści i widoczność działań na najważniejszych etapach ścieżki klienta.
Jak strona prowadzi użytkownika
Od poznania wartości eduVULCAN, przez treści i korzyści dla odbiorców, po pozostanie w kontakcie. Wybierz sekcję i zobacz jej zadanie.
Pierwszy kontakt
Pierwszy ekran przedstawia korzyści eduVULCAN i kieruje do poznania możliwości usługi.
Pełny zrzut strony głównej · wybierz sekcję, aby przejść do jej fragmentu.
Dwa tryby wyświetlania
Porównanie standardowego widoku witryny i trybu wysokiego kontrastu.
Od zainteresowania językiem do wyboru kolejnego kroku
Strefa Hello! łączy materiały do nauki, test poziomujący i ofertę kursów językowych. Układ daje użytkownikowi kilka sposobów rozpoczęcia nauki.
