Max Nagtegaal
Designer
November 5, 2018
Design
Activeer focusmodus
Deactiveer focusmodus

Tap4Life app case: prototyping to save lives

At app & web agency Lightbase we make apps to be proud of. In order to do this, a lot of work comes into making a good app. When we take on a new project, we don’t just design and develop. We test the design first; with the client and preferably also with a group of potential users. Prototyping is essential. It provides us with the input we need to make an app the best it can be for the specific audience; which is always what we aim for.

A few months back we took on an exciting project. We got to make an app to save actual, real world lives. The app is called NeoTapLS and it’s a project from non-profit organisation Tap4Life. They already have an existing app out for Android. Our task is to completely redesign and rebuild it from the ground up, and to get it out on both Android and iOS. This new app is developed cross-platform, with ReactNative.

Screenshot of the old, existing app

The purpose of this app is to assess the heart- and breathing rates of newborn children in third world countries. Lots of babies in these countries get born in basic settings, with a lack of medical professionals and tools. The unfortunate result of this is often the loss of lives.

NeoTapLS is an effort to utilise the technology that’s in everybody’s reach, the smartphone, to assist during the birth of a child and to potentially save lives. The app’s main feature is to assess the heart rate of the newborn child. This is done by an assisting person who listens to the heart rate with a stethoscope and taps the phone screen accordingly. The app will assist, warn and advice the person throughout the process.

Final design of the app, in development as we speak

In order to make an app like this, a lot of testing is necessary. Right from the start it was a crucial objective for this app to have a design and structure that is clear to everyone, no matter the users experience with technology or barriers of language. For example, we made sure to use bright and clear colors in the resuscitation screen, each having their own meaning. Green color means the heart rate is good, yellow color means it’s low and red means it’s dangerously low (or high).

Not only do these colors have to be bright and clear to simply avoid confusion, the specialists at Tap4Life have learnt from practical situations that people can put their phone in a rubber glove when assessing the baby, thus the importance of the colored status being bright enough to shine through the glove. We have brightened these colors even further several times according to client feedback on our prototypes. Implementing results from practical lessons like this enhances the usability of the app in important ways.

Not only the visual side has to be clear and simple, also the text and copywriting are essential for an app like this. Since it’s functions are the most important in the most hectic situations, text needs to be short and simple. Also here we have made valuable changes according to the client’s feedback. For example, “Stop exercise” simply became “Stop”, a “Baby born” button was added on the start screen to further indicate the purpose, text is contrast-rich and important text is always in bold.

For the prototyping itself we have looked at several prototyping tools. We even switched over the entire project, from InVision Studio to Figma. In the end we went with Figma because it had better displaying on mobile browsers, which was an essential part of the real-life testing of the UI with end users. Figma also turned out to be perfect when discussing the prototype with the client, since you see each others cursors and design changes are updated live. It’s great to hear the “wow!” reaction when the client watches their feedback being implemented in front of their eyes.

First prototype, made in InVision Studio
Last version of the prototype, made in Figma

Figma also turned out to be great for the developer handoff. Developers can inspect any element and export images and code snippets.

At the time of writing we are wrapping up the development phase and we hope to have it in the hands of the people who need it within just a few weeks. Feel free to download the app once it comes out, we’d love to hear your thoughts and feedback!

If you need any help with development of an app or webapp yourself, we’re always here to talk! Check out our website https://lightbase.nl (in Dutch).

Share on Twitter