Od wireframe'u 2022 do żywego prototypu 2026
Aplikacja na receptę, która działa na każdym telefonie — także takim, który zna tylko SMS-y.
W 2022 roku zaprojektowałem dla Sandoz (wraz z Mirumee) wireframe'y aplikacji, którą lekarz „przepisuje” pacjentowi jak lek — z myślą o całym świecie, także o krajach globalnego Południa, tanich telefonach z samym SMS-em i pacjentach, którzy nie czytają. Teraz zamieniłem je w działający prototyp PWA w Material 3 Expressive: dziesięć funkcji z case study, portal lekarza, symulator SMS i udostępnianie danych kodem jak BLIK.
Otwórz prototyp (otwiera się w nowej karcie)Zobacz, jak działa
01
Pacjent nie musi niczego instalować
Pierwszym punktem styku jest wiadomość SMS, RCS albo WhatsApp o treści i na numer wygenerowane przez lekarza. W podstawowej formie cały program działa tekstowo, w tej rozmowie. Instalowana aplikacja to dodatkowe funkcje.
- 1
Lekarz „przepisuje” program
W portalu lekarza wybiera rozpoznanie, leki i godziny przypomnień. Portal generuje treść wiadomości (np. HIV482) i numer, a lekarz drukuje pacjentowi kartkę: wyślij ją SMS-em albo na WhatsAppie.
/lekarz/przepisz
Sandoz Healthdr n. med. Katarzyna LewandowskaCentrum Medyczne Lipowa, ul. Lipowa 12, Warszawa Twój program zdrowia
dla: Michał Zieliński · Terapia HIV
1Wyślij SMS lub wiadomość WhatsApp z kodem
HIV482na numer 4848
albo
2Zeskanuj kod QR aparatem telefonu
Kod jest jednorazowy. Wiadomość w cenie zwykłego SMS-a.
- 2
Pacjent wysyła wiadomość z kodem
Od tej chwili asystent pyta o samopoczucie, przypomina o leku i przyjmuje pomiary w treści SMS-a.
- 3
Program działa w SMS-ach
Bez instalowania czegokolwiek. Przypomnienie o 7:30 pacjent potwierdza odpowiedzią „TAK”, godzinę leku zmienia komendą „ZMIEŃ 8:00”, ciśnienie wpisuje w treści wiadomości, a wieczorem asystent pyta o samopoczucie. Działa na każdym telefonie.
- 4
SMS z zaproszeniem do aplikacji
Po kilku dniach asystent proponuje aplikację: wykresy, wizyty, skaner dokumentów. Pacjent klika link, otwiera się sklep, a po instalacji aplikacja loguje go sama — jednorazowy token z linku zastępuje hasło.
- Sandoz Health · 4848
Michał, w aplikacji Sandoz Health zobaczysz wykresy ciśnienia i umówisz wizytę. Zainstaluj ją jednym kliknięciem:
Zainstaluj aplikację - Sandoz HealthGoogle Play · App StoreZainstaluj
- Zalogowano automatyczniebez hasła i bez kodu
- Sandoz Health · 4848
- 5
Na kolejnej wizycie: kod jak BLIK
Na kolejnej wizycie pacjent może udostępnić lekarzowi zawartość aplikacji: pomiary, leki, dokumenty. Pokazuje sześć cyfr ważnych 60 sekund, lekarz wpisuje je w portalu, a dane płyną z telefonu prosto na jego ekran (WebRTC).
02
Dla każdego telefonu, w każdym kraju
Sandoz działa w ponad 160 krajach, więc jednym z założeń było to, że Sandoz Health musi działać na całym świecie — także w krajach globalnego Południa. Pacjent z HIV może tam mieć najtańszy telefon bez aplikacji, słaby zasięg i drogi internet. Nie każdy też umie czytać.
Jedno przypomnienie, trzy sposoby
Najtańszy telefon
SMS — bez internetu i bez aplikacji
Bez czytania
Głos, obrazki i ikony zamiast tekstu
Smartfon
Pełna aplikacja, także offline
SMS to pełnoprawny kanał, nie dodatek
Rejestracja kodem, przypomnienia, potwierdzenie dawki słowem „TAK”, pomiary wpisane w treść („135/85”) i komendy „ZMIEŃ 8:00” czy „STOP” — na każdym telefonie.
WhatsApp tam, gdzie jest internet
W wielu krajach globalnego Południa WhatsApp jest podstawowym komunikatorem, a operatorzy często nie liczą za niego danych. Ten sam program — kod od lekarza, przypomnienia, odpowiedzi „TAK” i pomiary — działa więc także na WhatsAppie, bez opłaty za każdą wiadomość.
Dla osób, które nie czytają
Lekcje z narracją głosową i napisami, ilustracje i ikony zamiast akapitów, kolor zawsze razem z ikoną i słowem.
Słaby zasięg, drogi internet
Podstawowy program to same wiadomości, więc działa nawet przy słabym zasięgu. Aplikacja z Google Play i App Store działa offline i trzyma dane w telefonie, a do logowania nie potrzebuje adresu e-mail ani hasła — wystarczy numer telefonu.
Dyskrecja przy HIV
Dane zostają w telefonie pacjenta. Lekarz widzi je dopiero po podaniu kodu ważnego 60 sekund i tylko w wybranych kategoriach, a sesję można przerwać w każdej chwili. Program HIV łączy przypomnienia o terapii z lekcjami, które oswajają temat bez wstydu.
Lekarz jako punkt startu
Zamiast „pobierz aplikację” pacjent dostaje od lekarza kartkę z kodem i numerem SMS. Program zaczyna działać od pierwszej wiadomości, a aplikacja jest opcjonalnym krokiem dalej.
03
Dziesięć funkcji, jedna aplikacja
Wszystko, czego pacjent potrzebuje między wizytami, w jednym miejscu — od przypomnień o lekach po udostępnienie wyników lekarzowi.
Wersja SMS / RCS / WhatsApp
Cały program działa w zwykłej rozmowie: przypomnienia o lekach, potwierdzanie dawki odpowiedzią „TAK”, zmiana godziny komendą „ZMIEŃ 8:00” i pomiary wpisane w treść wiadomości.
Intuicyjna instalacja
Pacjent dostaje SMS z linkiem. Link otwiera aplikację w Google Play albo App Store, a po instalacji aplikacja od razu loguje pacjenta i pokazuje program od lekarza — bez zakładania konta, hasła i przepisywania kodów.
Edukacyjne stories
Krótkie historie o chorobie i lekach, które pacjent naprawdę dostał od lekarza: jak działa terapia, czego unikać, kiedy zgłosić się do lekarza. Do tego krótkie quizy i lekcje czytane na głos.
Dzienniczek pomiarów
Ciśnienie, cukier, waga, temperatura, tętno i saturacja — wpisane ręcznie albo z ciśnieniomierza czy glukometru. Wykresy pokazują, czy wyniki mieszczą się w normie, a wartość niebezpieczna od razu podpowiada, co zrobić.
Przypomnienia o lekach
Godziny leków ustawia lekarz. Pacjent potwierdza dawkę jednym dotknięciem, przesuwa godzinę, gdy zmienia mu się dzień, widzi serię dni bez pominiętej dawki i dostaje znać, zanim skończą się tabletki.
Wizyty i teleporady
Wyszukanie lekarza, wybór terminu w gabinecie albo online, przypomnienie dzień i godzinę przed wizytą oraz rozmowa wideo prosto z aplikacji.
Ocena objawów
Pacjent wskazuje, co go boli, i odpowiada na kilka prostych pytań. Dostaje podpowiedź, jak pilnie potrzebuje pomocy, a przy groźnych objawach — od razu numer 112.
Skaner dokumentacji
Zdjęcie wypisu, recepty czy wyniku badań zamienia się w czytelny dokument w telefonie: aplikacja prostuje kartkę, odczytuje tekst i sama rozpoznaje, co to za dokument.
Import dokumentacji
Recepty, skierowania i wyniki badań z Internetowego Konta Pacjenta i laboratoriów trafiają do aplikacji same. E-receptę można pokazać w aptece prosto z telefonu.
Udostępnianie lekarzowi
Na wizycie pacjent pokazuje sześciocyfrowy kod ważny minutę, jak w BLIK-u. Sam wybiera, co lekarz zobaczy, widzi, co lekarz właśnie ogląda, i kończy udostępnianie jednym ruchem.
1SMS z linkiem od asystenta
2Link otwiera aplikację w Google Play
3Instalacja jednym przyciskiem
4Aplikacja sama loguje pacjenta
5Program od lekarza czeka gotowy
1Wybór urządzenia
2Parowanie w trzech krokach
3Połączono — następnym razem samo
4Pomiar na żywo
5Wynik z oceną trafia do dzienniczka
Więcej ekranów
04
Dotknij, zanim otworzysz
Kod jak BLIK
Ważny 60 sekund. Po czasie cyfry mieszają się w nowy kod.
Przyjęcie dawki
Pigułka zmienia się w koło, a potem w ✓. Seria dni rośnie.
Abacavir + Lamivudine
0,6 g + 0,3 g · 7:30 rano
7:30rano
23 dni z rzędu
Kształty, które oddychają
Wskaźnik ładowania M3 Expressive: siedem kształtów, morf co 650 ms. Dotknij kafelka, aby zmienić kształt.
05
Material 3 Expressive od podstaw
Bez gotowej biblioteki: tokeny wygenerowane z koloru Sandoz, sprężyny przeliczone z dokumentacji Androida, 35 kształtów przeniesionych z AndroidX.
Kolor z jednego seeda #0460A9
Material Color Utilities, schemat Tonal Spot, specyfikacja 2025 — jasny, ciemny i trzy poziomy kontrastu.
- primary
#0661aa - primary-container
#66a6f4 - secondary-container
#d8e3f8 - tertiary-container
#dacdff - surface
#f9f9fe - surface-container-high
#e5e8f0 - error
#a83836 - success-container
#92f7bc
Google Sans Flex: osie ROND i wght
Przesuń, aby zobaczyć, jak zaokrąglenie i grubość zmieniają charakter nagłówka.
Dzień dobry, Michał!
Ruch: sprężyny, nie krzywe
Przestrzenne sprężyny mogą lekko przestrzelić cel, efekty (krycie, kolor) — nigdy.
ζ 0,6 · k 800ζ 0,8 · k 3800.2, 0, 0, 106
Jeden ekosystem
Wszystkie części dzielą te same dane w przeglądarce: kod wystawiony przez lekarza działa od razu w SMS-ie i w aplikacji.
07
Jak powstał
Najpierw specyfikacja i kontrakty, potem fundament, a na końcu funkcje — każda sprawdzona na zrzutach ekranu przez osobnego recenzenta.
- 1Wireframe'y 2022
UX trzech aplikacji Sandoz z zespołem Mirumee; Sandoz Health jako najbardziej rozbudowana.
- 2Specyfikacja
Case study rozpisane na ok. 230 wymagań, mapę tras, kontrakty danych i zasady ruchu.
- 3Fundament M3
Tokeny koloru i ruchu, typografia, kształty, biblioteka komponentów i powłoka w ramce telefonu.
- 4Funkcje i przeglądy
Dwie fale funkcji; po każdej osobny przegląd na zrzutach w trybie jasnym, ciemnym i na desktopie.
- 5Testy
Testy jednostkowe silników (normy, SMS, objawy, GATT, .ics) i Playwright dla kluczowych przepływów.
Stos technologiczny
- Next.js 16
- React 19
- Motion
- Material Color Utilities
- Dexie (IndexedDB)
- Web Bluetooth
- WebRTC
- WebOTP
- Tesseract.js
- pdf-lib
- Playwright
- Vitest