WSAIB

Responsywna strona dla uczelni wyższej oparta o CMS JOOMLA

ZADANIE:

Dostaliśmy za zadanie zaprojektowanie, a następnie wdrożenie nowego serwisu dla Wyższej Szkoły Administacji i Biznesu im. Eugeniusza Kwiatkowskiego w Gdyni. Kluczowym wymaganiem od strony klienta było oparcie strony o system CMS Joomla w jego najnowszej wersji.

Wykorzystywane technologie

  • Joomla 3.4
  • HTML5/CCS/RWD
  • jQuery / Ajax
Case study

Rozpoczynając pracę nad nową odsłoną strony internetowej Wyższej Szkoły Administracji i Biznesu im. Eugeniusza Kwiatkowskiego w Gdyni wiedzieliśmy, że naszym głównym celem jest osiągnięcie efektu, w którym użytkownik już od samego początku będzie otoczony realnym wrażeniem, że zadbano o każdy detal. Te szczegóły miały maksymalizować komfort, przyjemność i funkcjonalność poruszania się po kartach witryny.

Praca nad tym ambitnym projektem została podzielona na kilka etapów. Po szczegółowych konsultacjach z klientem ustaliliśmy, że strona powinna skutecznie realizować cele sprzedażowe oraz rzetelnie i atrakcyjnie prezentować bogatą ofertę dydaktyczną szkoły.

W celu zarysowania wstępnych założeń oraz określenia sytuacji, postanowiliśmy rozpocząć analizę danych wyjściowych, które uzyskaliśmy dzięki narzędziu Google Analytics, podpiętego do starszej wersji strony.

Zobacz film
Ankieta2

Bardzo ważne było też dla nas zrozumienie realnych potrzeb użytkowników, co ma ogromne przełożenie na późniejsze efekty. Stworzyliśmy i zrealizowaliśmy więc badanie ankietowe, w której grupą odbiorczą byli sami zainteresowani (potencjalni klienci) – licealiści, aktualni studenci oraz pracownicy uczelni.

Ogólny obraz całości, na podstawie którego wysnuliśmy konkretne wnioski, wyłonił się wiec na podstawie:

  • szczegółowych wyników ankiety,
  • obserwacji użytkowników podczas używania strony,
  • konfrontacji wynikówprzedstawionych przez Google Analytics na poprzedniej wersji strony z celami biznesowymi, które przedstawił klient.

Kolejny etap prac obejmował przygotowanie sylwetek (person), które odzwierciedlają najważniejsze grupy użytkowników strony. Było to możliwe na podstawie wcześniej przeprowadzonych szczegółowych badań, analiz i spotkań z kluczowymi intersariuszami.

Następnie spróbowaliśmy się wcielić w rolę użytkowników, odwiedzających potencjalną stronę internetową, wytyczyliśmy najistotniejsze scenariusze użycia serwisu oraz odnaleźliśmy zasadnicze ścieżki poruszania się po stronie. W tym czasie powstała także lista zagadnień i tematów wykorzystana w technice sortowania kart.

Wszystkie powyższe działania umożliwiły nam stworzenie pierwszego diagramu całej strony ze wstępnym rozdzieleniem i opisaniem typów kontentów. Z uwagi na architekturę Joomli, która miała pełnić rolę CMS, podział okazał się bardzo przydatny. Powstała także wstępna lista modułów oraz komponentów, na których miał być oparty cały serwis.

Po określeniu najważniejszych informacji, tj. ustaleniu bazowych typów, ilości treści w poszczególnych obszarach oraz posiadając wstępny diagram, rozpoczęliśmy rozmowy z klientem i przedstawiliśmy efekty naszych wnikliwych obserwacji. Dzięki tej interakcji mogliśmy błyskawicznie poprawić i zweryfikować dotychczasowe działania z wizją kontrahenta oraz przygotować wstępne szkice całej strony (tzw. wireframe).

Aby móc jak najszybciej i najefektywniej testować i wprowadzać wszelkie zmiany, równocześnie prowadziliśmy prace nad warstwą graficzną interfejsu. Efektem była kreatywna koncepcja strony głównej oraz trzech wybranych podstron. Ponadto wykreowaliśmy kompletną makietę funkcjonalną o małym stopniu szczegółowości (w wersji low-fidelity).

Wszystkie powyższe etapy wieńczyła akceptacja klienta. Dopiero wówczas skupiliśmy się na projektowaniu wszelkich podstron według wcześniej wytyczonego schematu oraz przygotowaniu prototypu całej witryny w docelowej wersji graficznej strony (tzw. high-fidelity). Wszystkie wykreowane funkcjonalności zostały szczegółowo opisane oraz poddane dokładnym testom.

Makieta wykonana w Axure stała się postawą kolejnych testów. Wyznaczyliśmy trzy najważniejsze grupy potencjalnych użytkowników: licealistów, studentów oraz wykładowców.

Seria testów, które zostały przeprowadzone zdalnie, badała przede wszystkim atrakcyjność grafiki, istotne funkcjonalności oraz najczęściej pojawiające się scenariusze użycia. Badanie to umożliwiło weryfikację i natychmiastowe korygowanie błędów, na które zwrócili uwagę testerzy.

  • Makieta funkcjonalna

  • Wskazywanie pozytywnych rozwiązań

  • Ocena warstwy graficznej i funkcjonalnej