Architektura informacji · UX · UI
Rennes School of Business
Architektura informacji i hierarchia treści uporządkowane dla rozbudowanej strony szkoły biznesu.
- Klient
- Rennes School of Business
- Typ projektu
- Architektura informacji · UX · UI
- Moja rola
- Architektura informacji, UX, projekt interfejsu i hierarchii treści
- Zakres
- Architektura informacji, Hierarchia treści, Projekt interfejsu, System komponentów
Kontekst
Bardzo dużo treści i kilka grup odbiorców na jednej stronie: kandydaci, studenci, partnerzy biznesowi i media.
Nawigacja odzwierciedlała strukturę organizacyjną szkoły, a nie powody, dla których ludzie na tę stronę wchodzą.
Efekt: użytkownik gubił się, zanim znalazł to, po co przyszedł, a najważniejsze ścieżki tonęły w treściach dla wszystkich pozostałych.
Główne cele
- 01Ułatwić odkrywanie i poznawanie programów szkoły.
- 02Zaprojektować prostszą nawigację — spójną i skoncentrowaną na użytkowniku.
- 03Usprawnić całą ścieżkę kandydata i pozostałych interesariuszy.
- 04Wdrożyć czystszy, bardziej intuicyjny design zgodny z istniejącą strukturą strony.
Kluczowe wyzwania
01
Ograniczenie częściowego redesignu.
Aktualizacji podlegały tylko wybrane podstrony, więc nowy design musiał płynnie wtopić się w istniejącą stronę, nie tworząc niespójności.
02
Optymalizacja ścieżki użytkownika.
Zrozumienie, jak ludzie faktycznie poruszają się po stronie, i usprawnienie tej ścieżki przy zachowaniu intuicyjności interakcji.
03
Równowaga prostoty i głębi.
Nowy design musiał być atrakcyjny wizualnie i przyjazny użytkownikowi, nie spłycając przy tym złożonych informacji o programach.
Proces
- 01Zrozum
- 02Zdefiniuj
- 03Wymyśl
- 04Zaprojektuj i wdróż
Badania użytkowników
01
Ocena heurystyczna
— przegląd problemów z użytecznością obecnej strony.
02
Analiza ścieżek użytkownika
— zidentyfikowanie miejsc, w których użytkownicy mieli trudność ze znalezieniem informacji.
03
Benchmark konkurencji
— analiza stron podobnych instytucji pod kątem dobrych praktyk.
Strategia projektowa
01
Kształtowanie architektury
- Uproszczona kategoryzacja programów dla szybszej, bardziej intuicyjnej nawigacji.
- Reorganizacja kluczowych sekcji treści, żeby najważniejsze informacje było widać od razu.
02
Usprawnienia UI i UX
- Spójny, nowoczesny język wizualny, wtapiający się w istniejącą stronę przy jednoczesnej poprawie użyteczności.
- Elementy interaktywne — rozwijane listy i filtry — usprawniające wybór programu.
- Stopniowe ujawnianie treści (progressive disclosure), żeby nie przytłaczać użytkownika naraz.
03
Optymalizacja ścieżki
- Jaśniejsza, krok po kroku ścieżka dla osób szukających programu.
- Lepsze rozmieszczenie CTA, zwiększające zaangażowanie i konwersję.
- Poprawiona responsywność mobilna dla szerszej grupy odbiorców.
Wireframe’y i prototypy
Zacząłem od wireframe’ów niskiej wierności, żeby przetestować różne układy i ścieżki użytkownika. Po kilku iteracjach opartych na feedbacku zespołu przeszedłem do projektów wysokiej wierności, dopracowując elementy wizualne przy zachowaniu użyteczności.
Testy użyteczności
Przeprowadziłem testy z potencjalnymi użytkownikami, żeby zebrać feedback i zaadresować problemy — m.in. niejasne etykiety CTA i niespójne odstępy. Zadbałem też o dobre praktyki dostępności, żeby strona była w pełni inkluzywna.
Decyzja
Uporządkowałem nawigację wokół intencji użytkownika zamiast wokół schematu organizacyjnego. Każda główna grupa dostała własną ścieżkę wejścia, a treści wspólne zeszły o poziom niżej.
„Struktura strony ma odpowiadać na pytania, a nie opisywać organizację.”
Rezultat
Nawigacja odpowiada teraz na pytanie "po co tu jestem", a nie na strukturę organizacyjną szkoły — kandydat, student i partner biznesowy mają własną ścieżkę wejścia zamiast wspólnego, przeciążonego menu. Kluczowe informacje są widoczne od pierwszego ekranu, nie ukryte kilka kliknięć głębiej.
System komponentów jest udokumentowany i gotowy do rozbudowy — zespół Rennes SB projektuje kolejne podstrony programów według tych samych zasad, bez potrzeby konsultowania każdej z nich osobno.
Masz podobny temat?
Na 30-minutowej rozmowie sprawdzimy, czy pasuję do projektu. Po spotkaniu będziesz wiedzieć, jaki zakres ma sens i co powinno wydarzyć się dalej.