Good Medica

UX/UI Design i Rozwój Aplikacji Medycznych

Mateusz Mrozek
UX/UI Design & Projektowanie Aplikacji
Jako UX/UI Designer i specjalista od Product Designu, koncentruję się na tworzeniu intuicyjnych i angażujących doświadczeń cyfrowych. Od badań użytkowników i strategii, przez prototypowanie i design systemy, aż po dopracowany UI Design – projektuję aplikacje mobilne i webowe, które rozwiązują realne problemy i są przyjemne w obsłudze.
Dłonie Mateusza Mrozka pracującego nad tabletem, na ekranie widoczna architektura informacji projektu aplikacji. Ilustracja procesu UX/UI designu.

Projekt: Aplikacje do sterowania urządzeniami medycznymi

Projekt Good Medica polegał na kompleksowym projektowaniu UX/UI aplikacji sterujących zaawansowanymi urządzeniami medycznymi. Było to złożone wyzwanie, ponieważ interfejsy musiały być nie tylko intuicyjne w obsłudze dla personelu medycznego, ale także absolutnie precyzyjne i bezpieczne.
Moja praca obejmowała tworzenie rozwiązań dla różnych typów urządzeń, zapewniając spójność i efektywność w codziennej pracy lekarzy i techników. To Case Study pokazuje moje podejście do designu aplikacji w branży medycznej, gdzie każdy detal ma znaczenie.
Zbliżenie na panel sterowania szyny rehabilitacyjnej Orto Flex L2. Wyświetlony główny ekran aplikacji Good Medica, zaprojektowany z myślą o intuicyjnym UX/UI dla urządzeń medycznych.

Cel: Zapewnienie intuicji i efektywności w branży medycznej

Głównym celem projektu Good Medica było stworzenie aplikacji medycznych, które w znaczący sposób uproszczą i usprawnią pracę personelu. Kluczowe było zapewnienie intuicyjności obsługi nawet dla najbardziej złożonych funkcji, co miało minimalizować ryzyko błędów i zwiększać bezpieczeństwo pacjentów.
Dodatkowo, dążyłem do optymalizacji workflow, redukcji czasu szkolenia użytkowników oraz stworzenia interfejsu, który wzbudza zaufanie i profesjonalizm, odpowiadając na wysokie standardy branży medycznej.

Proces projektowy UX/UI: Od researchu po testy użyteczności

Mój proces projektowy dla aplikacji Good Medica był wieloetapowy i ściśle oparty na metodologii User-Centered Design. Każda faza miała na celu dogłębne zrozumienie potrzeb użytkowników i biznesu, aby dostarczyć jak najbardziej efektywne i użyteczne rozwiązanie.
Koncepcja
Sterowanie
Wygląd
Implementacja
Omówienie urządzenia
Rozpisanie funkcji
Konsultacje z twórcą
Etap UX - framework
Testy funkcjonalności
Etap UX po testach
Etap UI
Testy z użytkownikami
Instrukcja obsługi
Wdrożenie
Tydzień 1
Tydzień 2
Tydzień 3
Tydzień 4

Badania UX i analiza potrzeb użytkowników

Proces rozpocząłem od dogłębnych badań UX, które objęły analizę potrzeb przyszłych użytkowników – lekarzy i techników medycznych. Stworzyłem persony użytkowników oraz mapy user journeys, aby dokładnie zrozumieć ich codzienne wyzwania, środowisko pracy i interakcje z urządzeniami. Analiza konkurencji i najlepszych praktyk w projektowaniu aplikacji medycznych również była kluczowym elementem tej fazy.

Architektura informacji i projektowanie flow użytkownika

Na podstawie zebranych danych, opracowałem architekturę informacji aplikacji, czyli logiczną strukturę treści i funkcji. Następnie zaprojektowałem flow użytkownika, czyli ścieżki, jakie użytkownik będzie pokonywał, aby wykonać określone zadania. Celem było stworzenie intuicyjnej i efektywnej nawigacji, która zminimalizuje frustrację i przyspieszy wykonanie kluczowych czynności.
Figma – wstępny framework zbudowany w FigJam i iteracyjnie dopracowany z klientem

Wireframing i Prototypowanie Interaktywne

Kolejnym krokiem było stworzenie wireframe'ów – niskopoziomowych szkiców, które skupiły się na rozmieszczeniu elementów i funkcjonalności. Po ich zatwierdzeniu, przystąpiłem do budowy interaktywnych prototypów. Dzięki nim mogliśmy wcześnie przetestować kluczowe interakcje i przepływy w aplikacji, zanim jeszcze zainwestowaliśmy w szczegółowy UI Design. To pozwoliło na szybką walidację pomysłów i iteracyjne udoskonalanie rozwiązań.
Figma – interaktywny wireframe prezentujący ścieżki użytkownika i zastosowanie architektury informacji w praktyce

Projektowanie interfejsu (UI Design) i tworzenie komponentów

Faza UI Designu w narzędziu Figma nadała aplikacji finalny wygląd, zgodny z estetyką i wymogami branży medycznej. Stworzyłem czyste, czytelne i estetyczne interfejsy, dbając o każdy piksel i spójność wizualną. Zaprojektowane komponenty były gotowe do użycia w Design Systemie, co przyspieszyło dalszy rozwój i zapewniło jednolity wygląd wszystkich aplikacji.
Figma – interfejs graficzny na bazie wcześniejszego wireframe’a zgodny z tożsamością wizualną marki i design systemem
Adobe Illustrator – wektorowe elementy graficzne

Testy użyteczności i iteracje

Po zaprojektowaniu prototypów i UI, przeprowadziłem testy użyteczności z rzeczywistymi użytkownikami (personel medyczny). Zbierane w ten sposób feedback był kluczowy do identyfikacji potencjalnych problemów i obszarów do poprawy. Proces testowania i iteracyjnego doskonalenia był nieodłączną częścią projektu, gwarantując, że finalne aplikacje są maksymalnie użyteczne i efektywne.

Projektowanie interfejsu (UI Design) i tworzenie komponentów

Faza UI Designu w narzędziu Figma nadała aplikacji finalny wygląd, zgodny z estetyką i wymogami branży medycznej. Stworzyłem czyste, czytelne i estetyczne interfejsy, dbając o każdy piksel i spójność wizualną. Zaprojektowane komponenty były gotowe do użycia w Design Systemie, co przyspieszyło dalszy rozwój i zapewniło jednolity wygląd wszystkich aplikacji.
Figma – interfejs graficzny na bazie wcześniejszego wireframe’a zgodny z tożsamością wizualną marki i design systemem
Adobe Illustrator – wektorowe elementy graficzne
Urządzenie medyczne MassageMed z wyświetloną aplikacją sterującą. Interfejs UX/UI do terapii masażem.

Design system: Spójność i skalowalność aplikacji

Kluczowym elementem projektu Good Medica było stworzenie kompleksowego Design Systemu. Opracowałem szczegółową bibliotekę komponentów UI, wytyczne dotyczące typografii, kolorystyki, ikonografii (w tym specyficznej dla medycyny) i interakcji.
Wdrożenie Design Systemu zapewniło nie tylko spójność wizualną wszystkich aplikacji Good Medica, ale także znacząco przyspieszyło proces developmentu i skalowanie produktu. Jest to fundament, który pozwala na efektywną pracę zespołów projektowych i developerskich w przyszłości.
Font
Montserrat
Styl
Bold
Wielkość
40 | 35 | 24
#EBEBEB
#2172AC
#FFFFFF
#1BCB26
#E12948
#2B2A29

Osiągnięte wyniki i korzyści dla klienta

Realizacja projektu UX/UI dla Good Medica przyniosła wymierne korzyści:
Zwiększona intuicyjność:
Aplikacje stały się znacznie łatwiejsze w obsłudze dla personelu medycznego, skracając czas potrzebny na naukę.
Zminimalizowanie błędów:
Intuicyjny interfejs i przemyślane flow użytkownika redukują ryzyko pomyłek w krytycznych operacjach medycznych.
Spójność wizualna i funkcjonalna:
Dzięki Design Systemowi wszystkie aplikacje prezentują się jednolicie, budując zaufanie do marki.
Efektywność pracy:
Zoptymalizowane procesy w aplikacjach przekładają się na szybsze i bardziej efektywne wykonywanie zadań przez personel.
Wzmocnienie wizerunku:
Nowoczesne i dopracowane interfejsy podnoszą prestiż marki Good Medica jako lidera w technologii medycznej.
Współpraca
Szukasz eksperta od UX/UI Designu do projektu aplikacji?
Oferuję kompleksowe usługi UX/UI Designu i Product Designu dla aplikacji mobilnych i webowych. Od badań użytkowników i prototypowania, przez projektowanie interfejsów (UI), po tworzenie Design Systemów – pomagam firmom budować intuicyjne i angażujące produkty cyfrowe. Moje portfolio aplikacji pokazuje moje doświadczenie w tworzeniu rozwiązań, które naprawdę działają.
Skontaktuj się, aby omówić Twój projekt aplikacji – od analizy potrzeb po dopracowany interfejs.
Dwa smartfony z wyświetlonymi różnymi motywami zaprojektowanej aplikacji mobilnej. Przykładowy UI design aplikacji na białym tle.
Inne projekty
Zobacz też inne moje realizacje
Poniżej znajdziesz kilka wybranych projektów, które realizowałem. Aby zobaczyć wszystkie, przejdź tutaj.