Case study: budowa strony internetowej GAPR, cz. 1
Wiemy, że kejsy często są ciężkostrawne – albo pełne okrągłych zdań bez konkretów, albo cholernie nudne. Dlatego nasz materiał zrealizowaliśmy w formie wywiadu obfitującego w zdjęcia pokazujące proces pracy „od kuchni”. Czego dowiesz się w trakcie czytania tekstu?
- zobaczysz, jak krok po kroku wyglądało podjęcie wspólnych działań nad projektem,
- dowiesz się, w jaki sposób myśleliśmy,
- jak określiliśmy cele i zadania,
- co i dlaczego uzgadnialiśmy z klientem,
- jaki był sens kolejnych działań,
Przede wszystkim zobaczysz, jak krok po kroku przebiegały prace nad stworzeniem nowej wersji strony klienta. Zadanie było o tyle trudne, że oferta GAPR jest bardzo rozbudowana. Musieliśmy więc dobrze zastanowić się, co zrobić, by nie wystraszyć potencjalnego klienta przesytem treści. Ale po kolei:
Klient: Górnośląska Agencja Przedsiębiorczości i Rozwoju sp. z o.o.
Cel: stworzenie nowoczesnej strony www, w której „zmieszczą się” różnorodne usługi oferowane przez GAPR.
Case study zrealizowaliśmy w postaci wywiadu, który przeprowadzam z naszym Project Managerem i specjalistą od UX oraz… kendo. Zaczynamy!
Początek współpracy
Kamilu, jak rozpoczęła się współpraca?
W 2017 roku Górnośląska Agencja Przedsiębiorczości i Rozwoju (w skrócie: GAPR) poszukiwała agencji, która zaprojektuje od nowa ich rozbudowany serwis internetowy. Po dokładnej analizie tematu podjęliśmy się tego wyzwania.
Co było problemem do rozwiązania?
W ofercie GAPR znajdujemy szereg usług, które dla większości odbiorców mogą wydawać się co najwyżej luźno powiązane. Mamy tutaj:
- wynajem powierzchni,
- realizację projektów unijnych,
- usługi doradcze i szkoleniowe,
- a nawet usługi lotniskowe!
Wszyscy zgodziliśmy się co do tego, że stara strona www nie ilustrowała dobrze, czym zajmuje się GAPR. To właśnie od jasnego przekazu i przejrzystej architektury informacji zależało powodzenie projektu.
Dawna wersja strony GAPR
Jaka była strategia realizacji projektu?
Koniecznością było kompleksowe i wieloetapowe podejście do tematu. Poza programowaniem wiele uwagi poświęciliśmy na wypracowanie koncepcji na etapie projektowanie użyteczności i interfejsu, a także odpowiednie wykończenie projektu.
Od czego zacząć budowę tak dużej strony?
By określić wymagania i założenia dla tak złożonego projektu, nawet najdokładniej wypełniony brief nie załatwiłby sprawy. Przekonaliśmy klienta, że konieczne jest rozszerzenie koncepcyjnego etapu prac i zaprojektowanie użyteczności (user experience design czyli UX).
Co zrobiliśmy w ramach projektowania UX ?
Warsztaty
- wykonaliśmy dokładną analizę starej strony, jej statystyk oraz podobnych serwisów,
- przeprowadziliśmy warsztaty, których celem było zebranie wymagań i generowanie rozwiązań,
- opracowaliśmy interaktywne prototypy serwisu w dwóch wariantach interfejsu,
- przeprowadziliśmy testy na prototypach,
- wyniki testów wraz z analizą i syntezą wniosków przedstawiliśmy klientowi.
Projektowanie strony
Powiedz więcej o pierwszym etapie projektowania
W ramach analizy przyglądaliśmy się nie tylko innym agencjom rozwoju, ale także branżom, które miały podobny problem: jak zwięźle i zrozumiale przedstawić złożony temat i portfel usług? Wnioski wyciągnięte w tym pierwszym kroku towarzyszyły nam każdym kolejnym etapie realizacji. Wypracowaliśmy następującą myśl przewodnią: żeby w zrozumiały sposób przedstawić ofertę, musimy skupić się na potrzebach użytkowników i zgodnie z nimi uporządkować ofertę.
Fragment dokumentu koncepcyjnego z 25 maja 2017 r:
Problem:
12 głównych elementów nie jest linkami tego samego rodzaju, np. mamy tutaj linki do usług, ale także funkcjonalności strony (kalendarium) czy projektów podejmowanych przez GAPR. Takie pomieszanie kategorii treści i funkcjonalności utrudnia nawigację.
W związku z powyższym trudno też powiedzieć, by serwis wskazywał jasny punkt startowy i ścieżkę działania dla określonego użytkownika.
Rozwiązanie:
Precyzyjnie przedstawiamy oferowane usługi pogrupowane jako rozwiązania odpowiadające na określone potrzeby użytkowników, pozwala to skierować odpowiednie grupy użytkowników do odpowiednich miejsc głębiej w serwisie. Np. prezentacja usług w formie odpowiedzi na potrzeby lub wyszukiwarka z podpowiedziami.Ustaliliśmy, że głównymi grupami potrzeb klientów GAPRu są:
- Potrzebuję środków finansowych
- Chciałbym skorzystać z usług doradczych
- Potrzebuję biura lub lokalizacji dla mojego biznesu
- Jestem zainteresowany ofertą szkoleń
- Chciałbym nawiązać współpracę z innymi podmiotami gospodarczymi
szkic home
szkic strony
Co zyskujemy dzięki takim działaniom
Takie spojrzenie nie tylko porządkuje usługi w sposób odpowiadających zróżnicowanym grupom użytkowników, ale odpowiada na pytanie o potencjalne korzyści z nich płynące. Nasze pierwsze warsztaty rozpoczęliśmy od przedstawienia tej koncepcji i rozwinięcia jej.
W szerokim gronie (ok. 10 osób zarówno ze strony klienta, jak i zespołu wykonawczego) omówiliśmy rozwiązania stosowane przez konkurencyjne serwisy, a także opracowaliśmy wstępnie architekturę i layout stron. Warsztat zahaczyły nawet o elementy brandingu i namingu, gdyż w ich toku wypracowaliśmy nawet nowy slogan.
makieta strony głównej
Makieta strony cz. 2
Dzięki warsztatom UX udało się (nam i klientowi) wypracować wspólny punkt widzenia, który pomagał nam we wzajemnej komunikacji na dalszych etapach projektu. Wspólnie określiliśmy cele, problemy i razem wypracowaliśmy możliwe rozwiązania. Następnym etapem była weryfikacja tych rozwiązań.
Makieta – architektura strony www
Testy UX/UI
Jakie były kolejne kroki?
Stworzyliśmy interaktywne, uproszczone makiety serwisu w wariantach A i B. Różniły się elementami, których trafność chcieliśmy porównać. Zadaniem makiet było wstępne przywołanie koncepcji serwisu do życia oraz zderzenie jej z wrażeniami użytkowników w ramach testów użyteczności.
Testy przeprowadzone zostały na grupie 8 osób o różnym poziomie kompetencji internetowych, w różnym wieku i pełniących różne zawody. Każda osoba w toku testów została poproszona o wykonanie 7 zadań oraz odpowiedź na 5 pytań otwartych, w trakcie trwające około godziny sesji testowej ze specjalistą UX.
Efekty naszych prac – makiety oraz wnioski z testów – przedstawiliśmy w ramach drugiego warsztatu, w jego trakcie omówiliśmy, jaka była odpowiedź użytkowników oraz ustaliliśmy konkretne rozwiązania do zaprojektowania na etapie projektowania interfejsu.
testy
testy 2
Projektowanie interfejsu (UI design) – na czym polegało?
Cel tego etapu jest prosty: wszystkie wnioski z poprzedniego etapu muszą znaleźć swoje zwieńczenie w serwisie, który po akceptacji klienta zostanie następnie zaprogramowany.
Nasza pierwsza propozycja stawiała na lekkość, minimalizm, dużo światła oraz przewagę elementów wektorowych. Nie spotkała się z ciepłym przyjęciem, jednak byliśmy przygotowani na taki obrót sprawy i spokojnie omówiliśmy z klientem, czego jego zdaniem zabrakło projektowi.
Projekt home – 1
W nowym projekcie pozwoliliśmy sobie (za namową klienta) na modyfikację stosowanej przez GAPR palety barw, co znalazło zresztą odbicie w późniejszej identyfikacji wizualnej klienta w innych mediach. Zmodyfikowaliśmy również ikonografię, a w tle pojawiły się zdjęcia. Trafiliśmy w sedno, a po drobnych poprawkach nasza wizja została przyjęta.
Projekt home 2
Kropka nad i?
Czyli można powiedzieć, że nasze propozycje dość mocno wpłynęły na branding. Po takich modyfikacjach należało już tylko sfinalizować projekt?
Nie był to koniec projektowania. Przy serwisie tej skali musieliśmy dograć wszelkie szczegóły, zanim programiści rozpoczną swoją magię. W następstwie projektu strony głównej wykonaliśmy aż 22 projekty pochodne, które precyzyjnie przedstawiły koncepcję każdego szablonu i funkcjonalności, w różnych rozdzielczościach ekranu. Dopiero dogranie i zaakceptowanie wszystkich szczegółów pozwoliło nam rozpocząć najdłuższy etap projektu, czyli programowanie.
mobile
Ale o tym już w następnej części tekstu, z której dowiesz się o najciekawszych funkcjach serwisu i poznasz sposoby ich wdrożenia.
Pozostałe case studies:
- Droga na szczyt – projekt oficjalnego logo akcji #K2 dla Polaków
- Branding i budowa strony internetowej Yelonkowo
- Key visual i budowa strony dla AIB
- Rebranding firmy Robelit
