NeoRoo

A Lifesaving bio-medical device (BMD) based app in the ‘Helping babies survive suite’ to prevent neonatal mortality.

Context

UX Designer (Freelancer)
NeoInnovate Collaborative Consortium

Duration

5 months (Research through development)

Tools Used

Figma, Adobe Illustrator, Adobe Photoshop, Whiteboard

Project Proud Moments

Team

My Contributions

  • Collaborated with a UX researcher to understand the needs & goals.
  • Led end-to-end design for the NeoRoo app.
  • Conceptualized interactions, user flow and other marketing visuals.
  • Prototyped end to end workflow and Handed off designs.

Project Background

Every year 15 million pre-term babies are born. 1 million of them die due to pre-term birth complications and many survivors face lifetime disabilities
World Health Organization (WHO)
Common complications include

How is Hypothermia currently handled?

Radiant Warmers
Kangaroo Mother Care
Incubators

However, the above 3 methods have several disadvantages

Identified Painpoints

Dr. Sherri Bucher researched health facilities in Kenya to understand the difficulties faced by care providers in saving pre-term babies. Her research uncovered shocking results on the extreme shortage of expensive medical resources. Below are some of the pictures proving the need for affordable medical devices.

Personas

Due to travel restrictions, I did not have the opportunity to visit Kenya Health Facility in person. To help myself empathize with the user, I built personas' from the insights I gathered from the researcher.

Neowarm: A Patented Bio-Medical device

NeoInnovate team has developed the patented self-warming Device that utilizes wireless sensors to continuously monitor infants' vital signs (Temperature, Blood Pressure, Heart Rate, and Respiration Rate). The NeoWarm device has 3 modes.

What does NeoWarm do?

The sensors attached to the device detect the baby's temperature and alert through a change in diode color. The device was tested with the users for comfort and proved to be technically, economically, and legally feasible for an affordable price. Below are some of the pictures from when the device was deployed for testing.

Wiring the thoughts: Ideation Process

I received knowledge transfer and documentation from the researcher. I jotted down the pain points and created two user profiles: Family Members and Care Providers. Sketched an initial flow of the app covering the essential experiences for both the identified user profiles. From the research insights, parents and nurses needed an easy tool that could keep them informed throughout the intensive care period.

Information Architecture

Visual Guide

Components

The face of the app: Logo Design

I made different versions of the logo to depict the app’s purpose with basic shapes. I flashed the top 3 versions to 10 diverse audiences. Although 8/10 liked the second one, the principal researcher voted for the first one - The ring with ‘Helping Babies Survive’ had restrictions for open source apps.

This app and Neowarm device can not only be used by the Mother, but also by anyone in the family. So, to be gender-neutral, I did not add any extra cues and kept it simple with geometrical shapes.

Transforming Ideas to Prototype

Iteration 1 (Please click the image to view a clearer version)

To get quick feedback on

Feedback on Functional & Visual Cues
I sought feedback on very crude version of the screens from 2 researchers involved in the user researchers, 2 Interaction designers. Below are some of the feedback, I received.
  • Text is hard to read with the background color.
  • Needed a clear indication of baby's temperature that calls to action
  • Bottom Nav bar feels heavy
  • Search bar could be helpful to search from list of babies
  • Graph readings on X and Y axis can be straightened - Easier to read

Iteration 2

Feedback from Interaction Designers

High-fidelity: App Feature Highlights

After 3 Iterations, I came up with the refined version. I envisioned 3 modes of rings that are shown upfront to show the baby's temperature with color status (Matching the color in LED diodes of the NeoWarm device).

Throughout the design, I followed minimalism to reduce cognitive load and provide an elegant design to the users of this app. Below are some of the feature highlights from high-fidelity prototype.

Iconography

Using Icons that are universal and intuitive contributes to reducing cognitive load.

Tool Tip

Seeing an 'i' icon on the chart, users tend to click for more information. I added two information tooltips to provide a summary of changes in vitals.

Temperature Bar

When the user sees a graph with readings on 'Temperature', they always think back to process what the number means. Eg. 37.5 degree is normal.
Using the stacked color bar on the 'Y' axis of the chart provides an easy way to infer the temperature readings(Resembling a thermometer - Cognitive representations - Mental model law)

KMC

Parents provide 'Kangaroo Mother Care' but they have no idea how well they are doing as parents for their babies that need their warmth. This chart is visualized to equip them with the number of hours they provided Skin-Skin care. Added a goal line to gamify their contribution to their baby's health.

Trainer

The training module with videos are super helpful for providing essential care when there are not enough care providers guiding the new parents.

User Testing

With the help of a researcher, I conducted a cognitive walkthrough with 9 participants in 2 sets. The group included a diverse set of participants from pediatrics, and biomedical departments. As there were ethical regulations needed to test the app overseas with real users, I chose cognitive walkthrough approach to quickly get feedback on the complexity and learnability of the user interface. Overall, 90% of the tasks were completed effortlessly. The app is developed and usability sessions with real users are being planned to conduct on the deployed app.

In the deployed app, we plan to measure the below metrics

Reflections

Working towards a cause that could provide voice to voiceless babies feels great. This project specifically expanded my visuals skills and I am thankful to all my teammates & industry experts who provided valuable feedback to iterate, brainstorm and finalize the product design to help the needy.

What I could have done better?

The project had plans for Participatory design sessions. Since the traveling was restricted during COVID, I had limited resources to interact with users. However, researchers who visited health facilities were able to provide feedback to improve the product.

Biggest Learnings

Designing with Constraints

Since the app is specifically designed for people in Kenya, understanding the user environment was essential to make ethical decision on every interaction. Some of the major decisions was made for
1. Choosing to design for android
2. Handling low / no internet connectivity
3. Different levels of user literacy

Incorporating Minimalism

The device is expected to work seamlessly in the health workflows. So, the design is required to minimize the cognitive load in every possible way by keeping the minimal design principles at the core.

Quick Iterations

In short span of time, I laid out different visual cues to gain feedback from different perspective. I learned that iterations makes a meaningful way for the product to stay robust in users hands for long time.

Thanks to Sponsors

Next Project
GP © 2022