AURA: budowa aplikacji mobilnej w React Native dla medtechowego startupu z Londynu

Wyzwanie:

Klient przyszedł do nas z nietypowym zadaniem. Potrzebował aplikacji dla pacjentów szpitala. Pacjent miał sam zmierzyć ciśnienie krwi, zeskanować wynik i wysłać go do szpitala, zamiast badać się na miejscu pod okiem personelu medycznego.

Na stole był tylko pomysł, więc całą aplikację zaprojektowaliśmy i zaprogramowaliśmy od zera.

Z aplikacji mieli bez problemu korzystać zarówno zwykli użytkownicy, jak i starsi pacjenci czy osoby z różnymi schorzeniami. Musiała więc być maksymalnie prosta w obsłudze i mieć starannie dopracowany UX, żeby ludzie naprawdę używali jej na co dzień.

Projektując aplikację, określiliśmy najważniejsze problemy zdrowotne, które trzeba było wziąć pod uwagę:

1. Problemy ze wzrokiem (słabe widzenie, trudność z dostrzeganiem i obsługą drobnych elementów interfejsu, potrzeba wyraźnego kontrastu)

2. Problemy ze słuchem

3. Ograniczenia ruchowe (w tym słaba koordynacja, drżenie rąk, artretyzm lub osłabione czucie dotyku)

4. Ogólne problemy zdrowotne (brak skupienia, kłopoty z pamięcią, zmęczenie, trudności z koncentracją)

Do tego projekt interfejsu musiał uwzględniać Dynamic Text Size oraz natywne elementy iOS i Androida, co znacznie utrudniło tworzenie aplikacji.

Proces:

Zaczęliśmy od przygotowania wireframe'ów i design systemu.

Projekt interfejsu musiał uwzględniać Dynamic Text Size oraz natywne elementy iOS i Androida, co podniosło poprzeczkę.

Zaprojektowaliśmy uporządkowaną hierarchię typograficzną, a w testach uwzględniliśmy Dynamic Text Size.

Oto kilka innych rozwiązań UX/UI, które wdrożyliśmy:

• Daliśmy użytkownikom jasne instrukcje i podpowiedzi, co mogą lub powinni zrobić w aplikacji
• Zastosowaliśmy duże pola dotyku dla przycisków i zadbaliśmy o to, by wszystkie interaktywne elementy były w zasięgu kciuka (dosłownie „reguła kciuka” ;) )
• Opracowaliśmy zasady stosowania kolorów: sprawdziliśmy kontrasty między nimi i uwzględniliśmy różne zaburzenia widzenia barw
• Zostawiliśmy w interfejsie dużo wolnej przestrzeni, żeby nie przeładować ekranu informacjami
• Zaprojektowaliśmy uporządkowaną hierarchię typograficzną, a w testach uwzględniliśmy Dynamic Text Size. Wykorzystaliśmy natywne kroje i rozmiary tekstu iOS oraz Androida, żeby łatwiej dobrać kontrast (bold i semibold).
• Całkowicie zrezygnowaliśmy z sygnałów dźwiękowych i wibracji jako sposobu komunikacji z użytkownikiem
• Użyliśmy natywnych komponentów, żeby aplikacja była dla użytkowników maksymalnie intuicyjna.

Na etapie programowania postawiliśmy na React Native. Aplikacja musiała być dostępna zarówno na iOS, jak i na Androida, a React Native pozwolił nam zaoszczędzić około 30% czasu programowania.

Zbudowaliśmy back-end aplikacji, który zapisuje wyniki lokalnie na urządzeniu.

Zdecydowaliśmy się też wdrożyć skaner kodów QR, dzięki czemu dane z ciśnieniomierza można łatwo zeskanować i wysłać do szpitala.

Rezultat:

Stworzyliśmy bardzo intuicyjną aplikację mobilną, dzięki której starsze osoby mogą samodzielnie się zbadać. Ścieżki użytkownika dopasowaliśmy do ich potrzeb w 100%. Powiększyliśmy ikony i zastosowaliśmy skalowaną czcionkę, a wygląd aplikacji pozostał spójny.

Trzymaliśmy się minimalistycznego i prostego designu, dzięki czemu ikony są dobrze widoczne na tle pozostałych elementów aplikacji.

W efekcie użytkownicy szybko i łatwo skanują oraz zapisują wyniki, a dane diagnostyczne wysyłają prosto do lekarzy.

Pacjenci mogą korzystać z aplikacji w domu, bez dodatkowego stresu, i nie muszą jechać do szpitala. Oszczędzają czas, a personelowi medycznemu dużo łatwiej się pracuje. Pielęgniarki i diagności po prostu odbierają dane z badań, zamiast wykonywać je samodzielnie na miejscu.