Projekt strony internetowej kombinezonu mollii.pl - case study
Nowoczesna strona www projektowana równolegle w podejściu mobile i desktop first. Zgodna z wybranymi standardami WCAG 2.2 oraz zoptymalizowana pod kątem UX i dostępności.
Strona, która prowadzi pacjenta dokładnie tam, gdzie trzeba
W branży medycznej dobry design musi być czytelny, dostępny i intuicyjny. Dlatego projekt Mollii.pl powstał wokół trzech rzeczy: WCAG, prostego UX i wyrazistego języka wizualnego.
To projekt, w którym projektowanie UX/UI spotkało się z istniejącą identyfikacją marki i konkretnym celem biznesowym: skutecznie prowadzić pacjenta do kontaktu.
Problem
Produkt potrzebował pierwszej strony internetowej, która uporządkuje informacje dla pacjentów i zapewni czytelną drogę do kontaktu z placówką.
Zakres
Zaprojektowałem UX/UI na komputery i urządzenia mobilne, opracowałem układ treści i pomagałem w ich redakcji. Nadzorowałem wdrożenie, za którego wykonanie techniczne odpowiadał osobny wykonawca.
Pochodzenie marki
Firma miała już swoją identyfikację wizualną, opartą na eleganckim granacie. Mollii jest jednak osobnym produktem - rozwiązaniem, które dla pacjentów może oznaczać naprawdę dużą zmianę.
Dlatego zachowaliśmy wizualne DNA marki, ale daliśmy produktowi własną przestrzeń.
Niebieski gradient inspirowany kosmosem buduje poczucie technologii, nowoczesności i odkrywania nowych możliwości. Mollii.pl jest częścią większej marki, ale od pierwszego ekranu wiadomo, że opowiada własną historię.
Ograniczenia
Strona musiała zachować związek z istniejącą identyfikacją firmy, jednocześnie wyróżniając produkt. Istotne były czytelność treści, nawigacja i kontrasty kolorów.
Decyzja
Zachowałem granat marki i rozwinąłem go o charakterystyczny gradient. Wezwania „Zostaw kontakt” rozmieściłem w kilku miejscach strony, a pozycję kontaktową wyróżniłem w menu. Kontrasty kolorów sprawdzałem podczas projektowania w Figmie przy użyciu wtyczek.
Dostępność, jako fundament
W projekcie medycznym WCAG nie jest funkcją premium. Jest podstawą.
Czytelna hierarchia treści, odpowiednie kontrasty, przewidywalna nawigacja i wyraźne elementy interaktywne zostały uwzględnione już na etapie projektowania interfejsu.
Bo dobra strona nie powinna wymagać od użytkownika wysiłku, żeby zrozumiał, co ma zrobić dalej.
Przy projektowaniu i wdrożeniu serwisu uwzględniono wybrane zasady dostępności cyfrowej opisane w WCAG 2.2. Dotyczyły one w szczególności czytelności i kontrastu treści, logicznej struktury nagłówków, tekstów alternatywnych dla istotnych grafik, czytelnych elementów interaktywnych oraz poprawnego działania serwisu przy różnych rozmiarach ekranu.
Jeden cel. Zero zgadywania
Najważniejszym zadaniem UX było doprowadzenie pacjenta do sekcji „Zostaw kontakt”.
Dlatego wezwanie do działania nie czeka na samym dole strony.
Pojawia się w kluczowych momentach ścieżki użytkownika, a w menu zostało dodatkowo wyróżnione obramowaniem. Pacjent może przejść do kontaktu wtedy, kiedy jest gotowy - bez szukania formularza i bez cofania się przez stronę.
Wynik
Powstał projekt pierwszej strony produktu w wersjach na komputer i telefon, następnie wdrożony pod moim nadzorem. Informacje o produkcie i przejście do kontaktu zostały połączone w jednej witrynie.
Design, który pracuje dla biznesu
Mollii.pl to dobry przykład projektu, w którym decyzje wizualne wynikają bezpośrednio z potrzeb użytkownika i celu biznesowego. Tutaj UX, identyfikacja wizualna i marketing musiały działać jako jeden spójny system.
Nie projektowałem więc interfejsu wyłącznie po to, żeby dobrze wyglądał. Każdy element miał konkretne zadanie: uporządkować informacje, ułatwić pacjentowi poruszanie się po stronie i prowadzić go w stronę kontaktu.
Właśnie tak podchodzę do projektowania stron internetowych dla firm - zaczynam od problemu, odbiorcy i celu, a dopiero później szukam dla nich właściwej formy wizualnej.
Dzięki temu design nie jest dekoracją dodaną na końcu projektu. Staje się częścią sposobu, w jaki marka komunikuje się z użytkownikiem i realizuje swoje cele.
Więcej o stronach internetowych w branży medycznej przeczytasz w artykule o projektowaniu stron internetowych dla branży medycznej.
Dowód
Ekrany i opis projektu oraz opublikowana strona Mollii.pl.
