Redesign serwisu internetowego klubu sportowego, ułatwiający dostęp do oferty, informacji i zapisów na zajęcia.
Redesign strony internetowej klubu sportowego Korona 1919 – czyli przeprojektowanie rozbudowanej struktury informacji, uproszczenie nawigacji oraz stworzenie bardziej intuicyjnej ścieżki dla sekcji sportowych, zapisów i kontaktu.
Informacje o projekcie
TYP PROJEKTU:
Redesign strony www
CZAS TRWANIA:
4 miesiące – realizowany etapami
WSPÓŁPRACA:
- Zarząd klubu
- Trenerzy sekcji
- Zewnętrzny zespół developerski
MOJA ROLA:
- UX Research
- Analiza danych zastanych
- Analiza konkurencji
- UX/UI Design
- Prototypowanie
- Testy użyteczności
Celem projektu było uporządkowanie serwisu internetowego klubu sportowego tak, aby użytkownicy mogli łatwiej odnaleźć interesujące ich informacje i szybko przejść do najważniejszych działań, takich jak wybór sekcji i zapis dziecka na zajęcia.
Od czego się zaczęło
Potrzeba redesignu pojawiła się w wyniku rozmowy z Panią Prezes klubu, która wskazała na problemy z czytelnością i funkcjonalnością obecnej strony. Serwis, mimo że powstał stosunkowo niedawno, nie odpowiadał już współczesnym standardom projektowania stron internetowych.
Pierwszy etap – diagnoza
PROBLEMY OBECNEJ STRONY
- Zapisy ukryte w treści – informacja o zapisach na zajęcia znajdowała się w środku długiego bloku tekstu i była dostępna jedynie poprzez zwykły link. Brak wyraźnego CTA sprawiał, że kluczowa akcja była trudna do zauważenia, a użytkownik musiał przeszukiwać treść, żeby znaleźć właściwą ścieżkę do zapisu.
- Rozproszone informacje – informacje dotyczące jednej sekcji lub konkretnej usługi były rozmieszczone w różnych miejscach strony, a część z nich znajdowała się poza główną strukturą serwisu. Użytkownik musiał przechodzić między podstronami i samodzielnie łączyć informacje, zamiast otrzymać je w jednym, logicznym miejscu.
- Nieintuicyjna nawigacja – struktura menu i sposób prowadzenia użytkownika nie odpowiadały jego naturalnym sposobom szukania informacji. Dotarcie do niektórych treści wymagało wykonania kilku niepotrzebnych kroków.
- Brak czytelnego przeglądu aktualności – sekcja aktualności wyświetlała całe artykuły (wraz ze zdjęciami i pełną treścią) jeden pod drugim, zamiast prowadzić użytkownika do osobnych podstron. W przypadku materiałów dostępnych pierwotnie jako PDF ich zawartość była dodatkowo wklejana bezpośrednio na stronę. Aby dotrzeć do starszej informacji, użytkownik musiał przewijać przez długie bloki treści, zamiast szybko przejrzeć listę aktualności i wybrać interesujący go materiał.
How might we?
01
Jak możemy ułatwić użytkownikom odnalezienie i rozpoczęcie procesu zapisu na zajęcia?
02
Jak możemy uporządkować informacje, aby użytkownik mógł znaleźć wszystkie najważniejsze informacje w jednym, logicznym miejscu?
03
Jak możemy zaprojektować prostą i intuicyjną nawigację, która pozwoli użytkownikom szybko dotrzeć do interesujących ich treści?
04
Jak możemy zaprezentować aktualności w sposób, który pozwoli użytkownikom szybko przejrzeć dostępne informacje i znaleźć interesujący ich artykuł?
Analiza konkurencji
Przeprowadziłam analizę konkurencji stron internetowych innych klubów sportowych, porównując sposób organizacji treści, nawigację, prezentację sekcji sportowych oraz ścieżki prowadzące do zapisów i kontaktu.
- Sekcje są głównym punktem wejścia. Oferta sportowa jest łatwo dostępna z głównej nawigacji, a użytkownik może szybko przejść do wybranej dyscypliny.
- Informacje o zajęciach są uporządkowane. Najważniejsze informacje, takie jak grupy, harmonogram, zasady zapisów i kontakt, są prezentowane w jednym miejscu.
- Zapisy są wyraźnie eksponowane. Użytkownik nie musi szukać linku wśród treści, przejście do zapisów jest jasno oznaczone.
- Poszczególne sekcje mają spójny schemat. Mimo różnic między dyscyplinami sposób prezentowania podstawowych informacji pozostaje podobny, dzięki czemu użytkownik łatwiej odnajduje się w serwisie.
- Aktualności jako lista, nie ściana tekstu. Karty z tytułem, zdjęciem i krótkim opisem pozwalały szybko przejrzeć zawartość i wybrać interesujący artykuł lub wydarzenie. Wyszukiwarka i kategorie dodatkowo ułatwiają dotarcie do konkretnych informacji.
Wyzwania projektowe
Różne potrzeby, jeden system
Początkowo część trenerów nie widziała potrzeby zmian – skoro zapisy i komunikacja funkcjonowały, nie było potrzeby ich zmieniać. Każda sekcja miała inny sposób prowadzenia zapisów – część korzystała z maila, a część z systemu ActiveNow. Zamiast narzucać jeden sposób działania, podczas rozmów skupiłam się na poznaniu potrzeb i ograniczeń poszczególnych sekcji. Pozwoliło to znaleźć obszary, które można było ujednolicić na poziomie strony i sposobu prezentowania informacji, przy jednoczesnym zachowaniu dotychczasowych form zapisów.
Badania – wywiady pogłębione
Aby lepiej zrozumieć potrzeby i sposób funkcjonowania klubu, przeprowadziłam wywiady pogłębione z trzema grupami interesariuszy: przedstawicielami zarządu, trenerami poszczególnych sekcji oraz użytkownikami serwisu (rodzicami szukającymi zajęć dla swoich dzieci).
Rozmowy pozwoliły mi spojrzeć na serwis z różnych perspektyw: celów organizacji, potrzeb osób prowadzących sekcje oraz rzeczywistych potrzeb użytkowników. Dzięki temu mogłam zidentyfikować zarówno problemy związane z samą stroną, jak i ograniczenia oraz procesy funkcjonujące poza nią.
11 wywiadów
- 2 z osobami z zarządu klubu
- 4 z trenerami sekcji
- 5 z użytkownikami (rodzicami)
Jaką rolę powinna pełnić strona internetowa w komunikacji klubu?
„Przede wszystkim powinna pełnić funkcję informacyjną i ułatwiać kontakt z klubem. Przy każdej sekcji powinny znaleźć się informacje o zapisach oraz dane kontaktowe do osoby koordynującej daną sekcję.”
Jak wygląda idealna strona z Pana/i perspektywy?
„Strona powinna być przede wszystkim informacyjna, spójna i łatwa do przeglądania. Ważne informacje powinny być przedstawione krótko i w czytelny sposób, np. wyróżnienie ważnych treści, takich jak zapisy.”
Czego szukał/a Pan/i na stronie w pierwszej kolejności?
„Na początku chciałam dowiedzieć się, jakie są sekcje na stronie. Czy są to tylko sekcje sportowe, czy są też zajęcia rekreacyjne. Chciałam też poznać harmonogram, żeby dopasować zajęcia do planu tygodnia.”
Jak przebiegał proces zapisów?
„Trudno było mi odnaleźć się na stronie, nie ma intuicyjnej nawigacji, dużo jednolitego tekstu, przez co ciężko znaleźć informacje o zajęciach, które mnie interesowały. Nie mogłam też znaleźć linku do zapisów.”
Zidentyfikowałam następujące problemy (pain points):
Do transkrypcji wywiadów wykorzystałam Dovetail, a następnie wspomogłam się AI w analizie transkrypcji oraz materiałów z analizy danych zastanych. Pozwoliło mi to szybciej uporządkować dużą ilość informacji, zidentyfikować powtarzające się wzorce i połączyć wyniki różnych źródeł w spójny obraz potrzeb użytkowników i klubu.
Kluczowe odkrycia
Trudność w dotarciu do zapisów
Zapisy powinny być wyraźnie wyeksponowanym elementem strony sekcji i stanowić naturalny kolejny krok po zapoznaniu się z ofertą.
Aktualności powinny wspierać szybkie przeglądanie
Forma kart, krótkich zajawek, kategorii i wyszukiwarki pozwala szybciej skanować dostępne treści i dotrzeć do konkretnego artykułu.
Nieintuicyjna nawigacja
Menu powinno umożliwiać bezpośredni dostęp do najważniejszych obszarów serwisu, a nazwy pozycji powinny jasno odpowiadać miejscom, do których prowadzą.
Różne sekcje, jeden spójny system
Sekcje klubu różnią się ofertą, sposobem prowadzenia zajęć i procesem zapisów. Strona powinna jednak zapewniać spójny sposób prezentowania informacji, niezależnie od specyfiki danej sekcji.
Oferta powinna być łatwa do poznania i porównania
Użytkownik powinien móc szybko sprawdzić, jakie sekcje i zajęcia oferuje klub, a następnie przejść do informacji o wybranej sekcji i jej harmonogramu.
User personas
Na podstawie wywiadów pogłębionych wyodrębniłam dwie główne grupy użytkowników: przedstawicieli klubu oraz rodziców poszukujących zajęć dla swoich dzieci. Dla każdej grupy stworzyłam personę, uwzględniając jej cele, potrzeby i problemy związane z korzystaniem ze strony internetowej.
Tomek Gibki
Trener gimnastyki
Tomasz jest trenerem gimnastyki. Chciałby, aby informacje dotyczące sekcji były czytelne, aktualne i łatwe do znalezienia, a użytkownicy mogli szybko dowiedzieć się, jak wyglądają zajęcia i jak się na nie zapisać.
Cele
- zapewnić aktualne informacje o zajęciach i zapisach
- ułatwić rodzicom i zawodnikom znalezienie potrzebnych informacji
- ograniczyć liczbę pytań wynikających z braku informacji na stronie
- zachować sposób organizacji zapisów właściwy dla danej sekcji
- mieć prosty sposób zarządzania i aktualizowania treści
Punkty bólu
- różne sekcje mają różne sposoby prowadzenia zapisów
- użytkownicy mają problemy z odnalezieniem informacji o zapisach
- część informacji jest rozproszona lub trudna do znalezienia
- konieczność odpowiadania na pytania, na które odpowiedzi powinny być dostępne na stronie
- obawa przed zmianami, jeśli obecny sposób działania sekcji jest już sprawdzony i funkcjonuje
Urszula Konieczna
Project Managerka
Urszula jest mamą dziecka w wieku szkolnym i szuka dla niego odpowiednich zajęć sportowych lub rekreacyjnych. Chce szybko sprawdzić dostępne sekcje, dopasować zajęcia do planu tygodnia i bez problemu znaleźć informacje potrzebne do zapisu.
Cele
- szybko sprawdzić, jakie sekcje i zajęcia oferuje klub
- znaleźć zajęcia odpowiednie dla wieku i poziomu dziecka
- sprawdzić harmonogram
- łatwo znaleźć link lub sposób zapisu
- szybko skontaktować się z odpowiednią osobą w razie pytań
Punkty bólu
- nieintuicyjna nawigacja i konieczność wykonywania kilku kroków, aby dotrzeć do konkretnej sekcji
- informacje potrzebne do podjęcia decyzji są rozproszone
- trudność w odnalezieniu linku do zapisów
- bloki tekstu utrudniają szybkie znalezienie najważniejszych informacji
Architektura informacji i nawigacja
Analiza obecnej struktury wykazała, że problemem nie była liczba pozycji w menu, ale sposób organizacji i powiązania treści. Przebudowałam architekturę informacji tak, aby użytkownicy mogli szybciej dotrzeć do najważniejszych obszarów serwisu, a nazwy kategorii jasno wskazywały, jakie informacje znajdą na poszczególnych podstronach.
Stara nawigacja
Na stronie głównej znajdowały się: aktualności, informacje o współpracy partnerskiej, sekcje sportowe oraz nasze obiekty – basen, sauna i hala sportowa. Hala sportowa prowadziła jednak do krótkiej historii klubu. Część treści była powielona, a niektóre elementy prowadziły do podstron, których zawartość nie odpowiadała ich nazwom.
Kliknięcie „Sekcje sportowe” prowadziło do osobnej podstrony z listą sekcji. Dopiero z tego poziomu użytkownik mógł wybrać konkretną dyscyplinę i przejść do jej informacji.
„O nas” prowadziło do krótkiej podstrony zawierającej informacje o historii klubu. Pozostałe informacje dotyczące klubu nie były zebrane w jednym, logicznym miejscu.
Nowa architektura informacji
Nowa nawigacja
Nowa nawigacja bezpośrednio prowadzi do najważniejszych obszarów serwisu, a rozwijane menu umożliwiają szybki dostęp do konkretnych sekcji, obiektów oraz informacji o klubie. Powrót do strony głównej jest możliwy poprzez kliknięcie logo klubu.
UI i główne funkcjonalności
Na podstawie wniosków z badań oraz nowej architektury informacji zaprojektowałam interfejs serwisu, który porządkuje treści i ułatwia dostęp do najważniejszych informacji. Kluczowe rozwiązania skupiają się na wyborze sekcji, zapisach na zajęcia, aktualnościach oraz szybkim dostępie do informacji o klubie i jego obiektach.
Strona główna
Strona główna została zaprojektowana jako punkt wejścia do najważniejszych treści serwisu. Użytkownik może szybko sprawdzić, co dzieje się w klubie, poznać dostępne sekcje oraz dowiedzieć się, dlaczego warto wybrać Koronę.
Mobile
GŁÓWNE FUNKCJE STRONY GŁÓWNEJ
Aktualności
Najnowsze informacje są prezentowane w formie czytelnych kart, dzięki czemu użytkownik może szybko sprawdzić, co aktualnie dzieje się w klubie, i przejść do interesującego go artykułu.
Jakie są korzyści?
- Szybki dostęp do najnowszych informacji.
- Łatwiejsze przeglądanie i wybór treści.
- Najważniejsze komunikaty widoczne już na stronie głównej.
Wybór sekcji
Sekcje sportowe zostały wyeksponowane bezpośrednio na stronie głównej, dzięki czemu użytkownik może szybko poznać ofertę klubu i przejść do interesujących go zajęć.
Jakie są korzyści?
- Szybsze poznanie dostępnej oferty.
- Łatwiejsze znalezienie zajęć odpowiadających potrzebom użytkownika.
Dlaczego warto wybrać Koronę?
Najważniejsze wartości i mocne strony klubu zostały przedstawione w krótkiej, łatwej do zeskanowania formie, pomagając użytkownikowi lepiej poznać Koronę jeszcze przed wyborem konkretnych zajęć.
Jakie są korzyści?
- Szybsze poznanie najważniejszych atutów klubu.
- Budowanie zaufania przed podjęciem decyzji.
- Łatwiejsza ocena, czy klub odpowiada oczekiwaniom użytkownika.
Spójny system stron sekcji
Każda sekcja działa nieco inaczej, dlatego zamiast ujednolicać ich procesy, stworzyłam wspólny schemat prezentowania informacji. Użytkownik w podobnych miejscach znajdzie opis zajęć, trenerów, informacje praktyczne oraz sposób zapisu.
GŁÓWNE FUNKCJE STRONY SEKCJI
Informacja o korzyściach z uprawiania danej dyscypliny
Użytkownik od razu widzi, co może zyskać dzięki treningom, jakie umiejętności, sprawności i cechy rozwija dana dyscyplina. Pomaga mu to ocenić, czy zajęcia odpowiadają jego potrzebom lub potrzebom dziecka.
Jakie są korzyści?
- Szybsze dopasowanie zajęć do potrzeb dziecka.
- Lepsze zrozumienie wartości zajęć – użytkownik widzi nie tylko, czym jest dana dyscyplina, ale też co daje jej uprawianie.
Poznaj trenerów
Lista trenerów pozwala użytkownikowi poznać osoby prowadzące zajęcia oraz sprawdzić, kto odpowiada za daną grupę lub sekcję.
Jakie są korzyści?
- Większe zaufanie do klubu – użytkownik wie, kto będzie prowadził zajęcia.
- Szybszy kontakt z właściwą osobą.
Jasny proces zapisów
Poszczególne sekcje korzystają z różnych metod zapisów, dlatego dla każdej z nich proces został jasno opisany krok po kroku, wraz z najważniejszymi informacjami. Wyraźny przycisk CTA prowadzi bezpośrednio do zapisu lub właściwego sposobu kontaktu.
Jakie są korzyści?
- Szybsze przejście do zapisu – bez szukania linków w treści.
- Mniejsze ryzyko zagubienia – użytkownik jest prowadzony krok po kroku.
- Spójne doświadczenie – mimo różnych metod zapisów w poszczególnych sekcjach.
- Mniej pytań do klubu i trenerów – wszystkie potrzebne informacje są dostępne w jednym miejscu.
Kontakt i lokalizacja
Każda sekcja posiada własny blok kontaktowy z numerem telefonu, dokładnym miejscem prowadzenia zajęć oraz linkami do jej kanałów w social media. Dzięki temu użytkownik nie musi szukać tych informacji w innych częściach serwisu.
Jakie są korzyści?
- Szybszy kontakt – numer telefonu jest dostępny bezpośrednio na stronie sekcji.
- Łatwiejsze dotarcie na zajęcia – podany jest konkretny budynek, piętro lub inny adres.
Aktualności
Aktualności zostały uporządkowane w formie kart z oznaczeniem sekcji oraz możliwością filtrowania treści. Dzięki temu użytkownik może szybciej przeglądać informacje i łatwiej dotrzeć do aktualności, które go interesują.
Jakie są korzyści?
- Szybsze przeglądanie aktualności
- Łatwiejsze odnalezienie treści konkretnej sekcji
- Czytelniejsza i bardziej uporządkowana prezentacja informacji
Oznaczenie sekcji, której dotyczy aktualność
Szybkie filtrowanie aktualności według dyscypliny
Historia klubu
Informacje historyczne zostały zebrane w jednym miejscu zamiast powielać je na stronach poszczególnych sekcji. Historia klubu została przedstawiona w formie osi czasu obejmującej najważniejsze wydarzenia – m.in. zmiany nazwy, rozwój infrastruktury oraz powstawanie kolejnych sekcji. Poszczególne wydarzenia można rozwinąć, aby poznać ich szerszy kontekst.
Jakie są korzyści?
- Wszystkie informacje historyczne w jednym miejscu
- Łatwiejsze poznanie historii i rozwoju klubu
- Szybkie skanowanie najważniejszych wydarzeń
- Szczegółowe treści dostępne bez przeciążania strony
Chronologiczny przegląd najważniejszych wydarzeń
Możliwość rozwinięcia dodatkowych informacji
