Rzeszowskie
Zakłady
Ortopedyczne
rodzaj projektu:
Zakres prac:
programy:
STRONA INTERNETOWA
CASE STUDY
ui i ux
Figma, Adobe illustrator, Adobe photoshop
Rzeszowskie Zakłady Ortopedyczne to firma zajmująca się wykonywaniem protez nóg oraz rąk. Jest to rodzinny biznes założony przez mariusza grelę. Jego ojciec przeszedł amputację, z którą wiązało się wiele negatywnych doświadczeń, dlatego ich firma wyróżnia się dbałością o pacjenta i profesjonalizmem.
rodzaj projektu:
strona internetowa
UX, UI, research, testy, badania użyteczności
Zakres prac:
na podstawie scenariusza
programy:
Figma, Adobe illustrator
Strona łącząca w sobie dwa blogi i pasje Gabrieli Figiel-Oleś - bizneswoman, która oprócz prowadzenia nagradzanego salonu kosmetycznego zajmuje się naturalną kuchnią oraz kosmetykami.
Problemy oraz cele projektu
Klienci czuli, że ich strona nie kreuje profesjonalnego wizerunku i nie oddaje charakteru firmy. Ponadto mieli problemy z zarządzaniem nią z powodu przestarzałego CMS. Strona była chaotyczna i przeładowana informacjami, występowały również błędy w wyświetlaniu się elementów. Po określeniu problemów, jakie trzeba rozwiązać, wspólnie z klientem ustaliłam cele projektu.
Celami projektu było:
1. Stworzyć stronę, która pozwoli wykreować profesjonalny i przyjazny pacjentom wizerunek.
2. Poprawić doświadczenie użytkownika, dostępność i responsywność.
3. Edukowanie pacjentów oraz pomoc w problemach, jakie napotykają.
Zakres prac
W ramach projektu:
1. Zebrałam wymagania projektowe (życzenia klienta, ograniczenia techniczne itp.).
1. Przeprowadziłam research konkurencji, aby stwierdzić, jak klient może wyróżnić się na jej tle.
2. Przeanalizowałam strukturę informacji i stworzyłam nową mapę strony.
3. Zebrałam informacje na temat użytkowników i zaprezentowałam je w postaci person oraz mapy doświadczenia użytkownika (experience map).
4. Wykonałam makietę high-fidelity wraz z design systemem.
5. Stworzyłam prototyp i za jego pomocą przeprowadziłam testy użyteczności i na ich podstawie dokonałam odpowiednich zmian w projekcie.
6. Przekazałam projekt do wdrożenia (hand-off).
7. Współpracowała z developerem w trakcie wdrożenia.
8. Zaproponowałam sposoby na monitorowanie skuteczności strony.
Mapa strony
Przeanalizowałam dokładniej stronę, aby zidentyfikować obszary, w których mogę poprawić doświadczenie użytkownika. Design miał zostać całkowicie zmieniony, więc nie skupiałam się na tym aspekcie. Natomiast struktura strony była bardzo rozbudowana i chciałam zobaczyć, czy możliwe jest jej uproszczenie. W tym celu stworzyłam mapę strony używając Figma Jam, co pozwoliło mi na swobodne przemieszczanie jej elementów i na tej podstawie zaplanowałam nową, prostszą strukturę.
Experience map
Wykorzystując zebrane informacje skonstruowałam dwie proste mapy doświadczenia. Pierwsza przedstawia typowy proces, przez jaki przechodzą pacjenci, zwykle negatywny, oraz problemy z nim związane. Druga pokazuje bardziej pozytywne doświadczenie jakie pacjent może mieć. Mapy pomogły mi zobaczyć różnicę pomiędzy obydwoma procesami i zaplanować, jak nowa strona może pomóc pacjentom poprzez dostarczenie odpowiednich informacji. Drugą mapą posługiwałam się projektując podstronę "Krok po kroku".
Persony
Tworząc persony posługiwałam się między innymi mapą doświadczenia użytkownika oraz informacjami dotyczącymi sposobu, w jaki klienci trafiają na stronę. Osobne miejsce poświęciłam emocjom, jakie towarzyszą użytkownikom od amputacji do otrzymania protezy, aby wziąć pod uwagę jak mogą one wpłynąć na to, jak klienci korzystają ze strony. Persony pozwoliły mi wczuć się w sytuację użytkowników w trakcie projektowania.
Szkice
Na tym etapie zaplanowałam wstępny układ strony. Zazwyczaj korzystam z ołówka i papieru, ponieważ jest to najszybszy i najtańszy sposób. Dodatkowo zapisuję swoje uwagi i pomysły, co pomaga mi lepiej zorganizować pracę i nie zapomnieć o niczym ważnym.
Design
Klientom zależało na zachowaniu kolorystyki występującej w logo. Strona miała sprawiać profesjonalne, przyjazne i ciepłe wrażenie, ale jednocześnie przywoływać skojarzenia z medycyną. Zastosowanie białego tła i chłodnych kolorów daje wrażenie "czystości", są to też kolory powszechnie używane na stronach medycznych. Nieregularne plamki wypełnione subtelnymi niebieskimi i pomarańczowymi gradientami urozmaicają projekt i pozwalają go ocieplić, a użycie ciepłego i wesołego koloru jako akcentu łagodzi wrażenie "sterylności". Z tego samego powodu zaokrągliłam rogi elementów oraz użyłam delikatnego cienia o dużym rozmyciu. Cień dodaje ciekawy efekt trójwymiarowości.
Ponieważ dużą część klientów firmy stanowią osoby w podeszłym wieku, zastosowałam większy rozmiar fontu w tekstach (18px) i zadbałam o odpowiedni kontrast pomiędzy tekstem a tłem, w tym na przyciskach.
Testy i wyniki
Prototyp posłużył mi do przeprowadzenia tzw. "testów korytarzowych". W trakcie testu poprosiłam użytkowników o znalezienie informacji na temat protez, danych kontaktowych oraz ogólną ocenę przejrzystości strony. W wyniku testów dodałam klikalny numer telefonu obok logo w menu oraz zmieniłam kolejność sekcji na podstronie "O nas".
Filmiki instruktażowe
Jednym z ulepszeń, jakie zaproponowałam, było nagranie krótkich filmów instruktażowych dotyczących bandażowania i zakładania protezy. Poprzednio instrukcje były pokazane w formie rysunków z opisami. Filmy są łatwiejsze do przyswojenia i zrozumienia, ponieważ pacjent musi tylko naśladować czynności widoczne na ekranie.
*Miniatury zostały rozmyte na potrzeby prezentacji projektu.
Podstrona "Krok po kroku"
Podstronę "Krok po kroku" zaprojektowałam jako swoisty przewodnik dla pacjentów. W trakcie pracy nad nią posługiwałam się dostarczonym przez klienta ebookiem "ABC protez" oraz mapą doświadczenia użytkownika. Celem tej podstrony jest sprawienie, że pacjent na każdym etapie procesu zaprotezowania będzie mógł dowiedzieć się, jakie dalsze kroki może podjąć. Stanowi ona również punkt wyjścia do eksploracji reszty strony. Przy każdym kroku umieściłam odnośniki do odpowiednich postron oraz powiązane z nimi informacje, tak aby wyeliminować konieczność szukania informacji przez pacjenta.
Wersja mobilna
Projektując wersję mobilną strony zadbałam o odpowiednie odległości pomiędzy elementami, aby uniknąć przypadkowych kliknięć. Zwiększyłam rozmiary przycisków oraz zmieniłam układ w tabelach z kodami NFZ. Zwykle używany hamburger zastąpiłam napisem "Menu". Jest to spowodowane m.in. tym, że wielu użytkowników strony to osoby starsze, które mogą mieć problem z rozpoznaniem hamburgera. Również z tego powodu slidery ze zdjęciami można przesuwać również strzałkami, a nie tylko za pomocą gestu.
Monitowanie rezultatów
Na nowej stronie został wdrożony Google Analytics. Zebranie danych o użytkownikach, w tym demograficznych ( w szczególności na temat wieku), tego, skąd użytkownicy trafiają na stronę i w jakiej liczbie, ile czasu spędzają na poszczególnych podstronach, współczynnika odrzuceń oraz ilości kliknięć w numer telefonu i zapytań z formularza pozwoli ocenić efektywność strony oraz wdrożyć ewentualne ulepszenia w przyszłości. Zaproponowałam również użycie Hotjar do głębszego wglądu w aktywność użytkowników oraz przeprowadzanie krótkich ankiet w siedzibie firmy, aby ocenić czy klienci korzystają ze strony i czy była ona dla nich pomocna.