Case study · Product design
Kompleksowy projekt aplikacji medycznej – od audytu i architektury, przez design system i branding, po gotowe ekrany UI, social media, animacje i mailingi.
Kontekst
Klient przyszedł z pomysłem na aplikację łączącą lekarzy z pacjentami. Miał wstępnie zakodowany prototyp – realizowany wyłącznie przez developera, bez udziału projektanta. Potrzebował kogoś, kto uporządkuje produkt od podstaw i nada mu spójną formę.
Wzięłam na siebie cały zakres projektowy – od audytu istniejącego stanu, przez architekturę informacji, design system i branding, po pełne ekrany UI dla aplikacji mobilnej i webowej. Jedyna projektantka w zespole.
faza 01
Zmapowałam istniejący prototyp – niespójne nawigacje, brakujące stany, ad hoc dodawane funkcjonalności. Na tej podstawie zaprojektowałam od nowa:
01
Sitemapę
Podział na trzy sekcje nawigacyjne (Wiadomości, Finanse, Ustawienia).
02
Tab bar
Wiadomości jako centrum operacyjne lekarza (90% czasu w aplikacji).
03
User journey
Każdy proces (rejestracja, konsultacja, recepta) rozpisany jako osobna ścieżka.
04
Grid webowy
Dokumentacja responsywności z trybem 3 i 4 kolumnowym, breakpointy.
faza 02
Zbudowałam pełny, ztokenizowany i udokumentowany design system od zera, który obsłużył dwóch użytkowników (lekarz + pacjent), na dwóch platformach (mobile + web).
To nie zbiór kolorów i fontów – to narzędzie skalowalności i automatyzacji, które realnie optymalizuje czas pracy.
01
107 tokenów prymitywnych
Skala granatów dla lekarza, skala zieleni dla pacjenta, neutralne szarości, kolory sygnalizacyjne.
02
175 tokenów semantycznych
Cztery tryby kolorystyczne: Light Lekarz, Dark Lekarz, Light Pacjent, Dark Pacjent.
03
Typografia, size, radius, spacing
42 tokeny typo z responsywnymi wariantami. 62 tokeny size, 6 radiusów, 13 spacingu.
04
Biblioteka komponentów i patternów
37 komponentów, 11 patternów.
05
Dostępność
Od początku projektowałam design system z uwzględnieniem kontrastów i czytelności zgodnie z WCAG.
Zarówno w wersji jasnej, jak i ciemnej, wszystkie teksty oraz kluczowe elementy aktywne spełniają najwyższe standardy dostępności cyfrowej. Motyw ciemny zoptymalizowałam pod kątem pracy w nocnych warunkach oświetleniowych, minimalizując zmęczenie oczu przy długim kontakcie z ekranem.
faza 03
Klient komunikował się w zieleni – kolorystyce aplikacji skierowanych do pacjenta. Problem: głównym klientem płacącym miał być lekarz. Przeprowadziłam analizę i zidentyfikowałam rozbieżność. Zaproponowałam zmianę na paletę premium – głęboki granat, szafir, kobalt.
Zaprojektowałam sygnet, w którym litery C, M, D tworzą monogram wpisany w owalną formę kapsułki. Logo w wersjach: poziomej, pionowej, sygnet solo, na jasnym/ciemnym tle, digital i druk.
Zaprojektowałam też brand hero – postać 3D w formie kapsułki z sygnetem CMD. Pigułka pojawia się w filmach instruktażowych, w tipsach w interfejsie i jako asystent serwis desku.
faza 04
Zaprojektowałam natywną aplikację dla lekarza (iOS + Android), rozszerzoną wersję webową na tablety i desktopy, onboarding lekarza w przeglądarce oraz ankietę medyczną pacjenta.
Lekarz
Centrum to Wiadomości – lista chatów ze statusami, wyszukiwarka, filtry. 90% czasu lekarza. Z czatu dostęp do e-Recepty, e-Zwolnienia, e-Wizyty – pełne przepływy. Dashboard Finanse i Ustawienia.
Lekarz
Osobny layout – 3-kolumnowy: sidebar, lista chatów, treść rozmowy, kontekstowy panel pacjenta. Lekarz widzi jednocześnie listę, chat i dane medyczne. Na telefonie korzysta z natywnej aplikacji, na większych ekranach przechodzi do weba.
Lekarz
Mobile – stepper z 4 krokami. Web – split layout z brandingowym panelem i formularzem wymagającym minimum danych (e-mail + PWZ).
Lekarz
Każdy lekarz dostaje własną podstronę-wizytówkę ze swoim zdjęciem, opisem specjalizacji, cennikiem usług i przyciskiem kontaktu. Kiedy pacjent pyta o cenę – lekarz wysyła link i sprawa jest załatwiona.
Pacjent
Pacjent nie ma dostępu do aplikacji – pozostaje w swoich komunikatorach (iMessage, WhatsApp). Żeby nawiązać połączenie z lekarzem, przechodzi przez ankietę medyczną w przeglądarce. Wizualnie odróżniona – zielony tryb pacjenta z design systemu. Wersja mobilna i webowa.
faza 05
Social media
Posty statyczne i karuzele do Instagram, Facebook, LinkedIn. Budowane na tych samych tokenach co aplikacja.
Animacje
Krótkie wideo prezentujące funkcjonalności. Kreatywna koncepcja i realizacja.
Mailingi
Transakcyjne i marketingowe. Responsywne, jednokolumnowe, z dużymi CTA.
faza 06
Projekt nie kończy się na pliku w Figmie. Współpracowałam z zespołem frontendowym nad implementacją każdego komponentu – nie „wysyłałam projekt przez płot”, ale siadałam z developerami i razem ustalaliśmy, jak dany komponent powinien działać w kodzie.
01
Wspólne ustalanie wariantów
Razem z frontendem priorytetyzowaliśmy, co wdrażamy od razu, a co może poczekać.
02
Edge case'y
Stany ładowania, puste widoki, błędy walidacji – projektowane wspólnie z zespołem technicznym.
03
Developer jako współtwórca
Kiedy pattern był technicznie kosztowny, szukaliśmy wspólnie wariantu optymalnego wizualnie i technicznie.
04
Design System pod implementację
Nazewnictwo tokenów odzwierciedla strukturę CSS. Przełączenie trybu kolorystycznego to jedna zmiana – reszta podmienia się automatycznie.
faza 07
Projektowanie nie odbywało się w próżni – rozwiązania weryfikowałam na bieżąco z lekarzami, którzy uczestniczyli w spotkaniach projektowych.
Zaproponowałam udostępnienie prototypu do realnego użytku. Lekarze testowali go w codziennej praktyce.
Na bieżąco otrzymywałam informacje o wymaganiach systemowych, obowiązkach formalnych i brakujących funkcjach.
Identyfikowałam realne potrzeby lekarzy, których dotąd żadna aplikacja nie zaopiekowała.
Podsumowanie
Zaczęłam od zrozumienia (audyt, architektura, user journey). Zbudowałam fundament nastawiony na skalowalność (design system z czterema trybami kolorystycznymi, 37 komponentów, 11 patternów). Nadałam tożsamość (branding z sygnetem CMD). Zaprojektowałam ponad 100 ekranów na dwie platformy. Zaprojektowałam skalowalny system stron wizytówkowych. Zamknęłam komunikację wizualną w spójny system. Przeprowadziłam implementację z frontendem – każdy komponent działa w kodzie tak, jak został zaprojektowany.
Szukam projektantki.
A jakiej?
Takiej, co nie boi się Figmy, Excela i developera naraz.
Cześć. To ja. 🙂