AURA: building a mobile app with React Native for a medtech startup from London

Challenge:

The Client came to us with a unique challenge: to create an app for hospital patients that would allow scanning the results of their self-performed blood pressure test and sending them to the hospital, instead of doing the test onsite by the medical staff.

There was only an idea on the table, so execution required making everything from scratch, including full design and the entire development.

The application had to be designed to enable its trouble-free use by regular users as well as elderly patients or patients with various conditions. It had to be as simple as possible in terms of usability, with the carefully polished UX to reduce the risk of people not using it daily.

While designing the app we identified some key health issues that had to be taken into consideration:

1. Problems with eyesight and vision (poor eyesight, difficulty to see and interact with small design elements, inability to see without a good contrast)

2. Hearing problems

3. Motor limitation (including poor coordination, shaky hands, arthritis or loss of skin sensitivity)

4. General health issues (lack of concentration, forgetfulness, tiredness, problems with concentration)

Also, the design had to include Dynamic Text Size as well as native iOS and Android elements, which made the development of the app far more challenging.

Process:

We started with crafting wireframes and preparing a design system.

The design had to include Dynamic Text Size as well as native iOS and Android elements, which additionally raised the bar.

We have designed a structured type hierarchy, where the Dynamic Text Size was included in tests.

Here are some other UX/UI solutions we have implemented:

• Providing users with clear directions and tips on what they can or should do within the app
• Implementing large Touch Targets for buttons and considered that all the interactive elements should be within reach of the thumb (a “rule of thumb” ;) )
• Creating a style guide for colors, by studying the contrasts between colors and taking into account various color vision disorders
• Designing the app for white space: avoiding crowding the screen with information
• Designing a structured type hierarchy, where the Dynamic Text Size was included in tests. We used native iOS and Android fonts and Text Size to help determine contrast (bold and semibold).
• We have completely given up sound signals or vibrations as a way of interacting with users
• We used native components to make the application as intuitive as possible for users.

For the development phase, we decided to go with React Native. The app had to be available both on iOS and Android and using React Native saved us around 30% of development time.

We have created a backend for the app to save results locally on the device.

We also decided to implement the QR code scanner, so the data from the blood pressure measuring device could be easily scanned and sent to the hospital.

Outcome:

We created a highly intuitive mobile application suited for elderly people to perform self-diagnosis. The app flow was 100% adapted to their needs - we used enlarged icons and scaled font without damaging the flow of the application's appearance.

We stuck to minimalistic and simple design so the icons are easily visible among other app elements.

As a result, scanning and saving results is very easy and quick for the users, as well as sending the diagnostic data straight to the doctors.

Patients can use the app at home, without any additional stress and the need for commuting to the hospital. It saves their time as well as makes the work of medical staff far easier. Nurses and diagnosticians can just collect the data from the tests without the necessity of performing the tests by themselves onsite.