Role: UI Designer
Duration: 4 weeks, 3 sprints
Platform: Android Tablet
Tools: Sketch, Principle, Framer X, Keynote
Neopenda is a biotech startup that aims to provide low-cost medical solutions for patients and medical professionals in developing countries. In this project, I designed an Android tablet interface and created a style guide based on user tests.
Interested in how I made this?
View my full case study below!
The babies need help, and so do the nurses
Sometimes it is 150 babies for you alone… it makes us ineffective. It commonly encroaches on the monitoring, because by the time you start on the first baby, when you reach the last baby you may not find the last baby surviving.
— Damalie Mwogererwa, Ugandan Nurse
Each year, nearly 2.5 million babies died from preventable conditions in developing countries partially because of poor resources in health facilities. Nurses in these countries are heavily overwhelmed by the tremendous workload.
To address this issue, a UX team had previously worked with Neopenda and developed a wireframe solution for these nurses. Our goal was to create an interface based on their wireframes and improve the usability of the app for Ugandan nurses.
We kicked off the project
In order to have a deeper understanding of the project and our users, we had a kick-off meeting with our client, Teresa Cauvel, the co-founder and CTO of Neopenda. The main takeaways are:
Consider the alarm fatigue. Multiple alarms going off at the same time may be common in our users’ working environment.
Use Without Thinking
According to Tess, our users are overwhelmed by their day-to-day work. This application should make their lives easier without adding any learning curve or workload.
VISUAL COMPETITIVE ANALYSIS
Making important info visible is the key
We conducted a visual competitive analysis to evaluate the strengths and shortcomings of our competitors including Welch Allyn, GE Healthcare, lifebox, Owlet, and bempu health.
Uses big, bold nubers in 4 colors to show different vital signs. The dark interface makes the numbers and buttons pop.
Uses big numbers. The red represent emergency; yellow, warning; and blue, within the range. Also uses dark background to make the numbers pop.
Dark interface. Uses less aggressive colors (lime and pink) to show the vitals.
Uses a lot of icons and baby-friendly colors, such as mint, peach, lilac and grey to show the cute and light-hearted vibes.
Uses whimsical colors, rounded UI elements, sans serif font, and thin line to show baby-friendly feel.
Traditional vital machines tend to have a dark interface in order to create contrasting colors for important information.
Visible from Afar
Large, visible, sans-serif font is used to ensure readability from a distance.
We strived for a clear, visible, and intuitive design
With the information from the kick-off meeting and visual competitive analysis, we came up with three design principles:
Invert The Pyramid
Put the most important and pressing information in the most visible and prominent locations, expressing a clear hierarchy, ensuring color contrast accessibility, and reducing decision fatigue.
Birds Eye View
Our dashboard should make important information easily visible at a glance.
Don’t Reinvent The Wheel
Use familiar patterns, language, and conventions that require minimal learning curves, assumptions, or onboarding to understand.
I created three visual concepts
In this stage, I wanted to see our users’ perspectives on dark, light, and mixed interfaces, so I created three divergent style tiles accordingly. I created these style in portrait form to accommodate the methods we used for desirability testing.
- In order to make the dark interface less overwhelming, I used dark blue with a slight gradient.
- The gradient CTA buttons lights up the dark interface.
- Magenta was to alert our users of critical events because it shows the difference but not as overwhelming to our users who are prone to have alarm fatigue.
- Each datum point shows vital reading. Users can easily tell if something goes wrong by the color of the circle.
- I used icons as the indicators of the vital signs. If something goes wrong, the icons turn red. Users can take a closer look at the readings if needed. Additionally, this design helps users distinguish RR and PR from afar.
- I filled up the trend area with colors and texture. Green meant normal and red with the texture meant critical. I added texture on purpose for people who may have color deficiency/blindness so that they can still tell which part is in critical without telling the colors.
- I doubted the layout of original vital cards, so created a horizontal one for user testing to see if it’s more readable.
- I used a red line and a blue line to show the standard range of the temperature. Users can easily tell if the temperature goes lower (blue) or higher (red) than the standards.
Our users directed my design
In total, my teammates and I showed 12 style tiles to each user. In order to lessen our users’ burden, we used the technique of “triading,” in which we showed 3 randomized style tiles on one screen every time for 4 rounds. Each user was tested with different randomized style tiles to minimize the bias. Users also compared the style tiles within each round and choosed the favorite one. Through this method, we were able to know what our users like and dislike and what works the best among different designs.
We recruited 3 Ugandan users, with the help of our client, and 4 US nurses, from our personal connections. All interviews were done remotely. The feedback was surprising.
Light interface? Dark interface?
Half of the users preferred the dark interface, and the other half preferred the light one.
Most of the users preferred the color usage of The Daytime and The Sunshower because they could see what is important and what is not; while The Moonlight does not have the strong hierarchy in terms of showing the emergency. Some users also pointed out that blue (on The Daytime) is not a good color to show emergency.
Dark interface is easy to the eye, especially during the night shift.
— Aaron, US Nurse
Light interface keeps me awake during the night shift.
— Cindy, US Nurse
Users wanted to scan across the big numbers
Some users indicated that the horizontal display of vital signs is easier to scan, and they could compare the readings of a specific vital vertically.
Many users mentioned the icons were too large on The Sunshower. The vital readings should be the most important information and should be legible when being seen from afar.
It’s easier for me to scan across the readings than view the vitals in a square.
— Aaron, US Nurse
The icons are huge. I can’t even see the numbers.
— Dorothy, Ugandan user
Detailed trend graphs were essential
Our users mentioned that my trend graphs didn’t have enough information, such as detailed x- and y-axis, yet most of the users like the trend graph on The Sunshower. The fill-in trend helped them to quickly track the time (x-axis) of the critical events, and the texture makes the critical event more prominent.
What are the units of the x-axis and y-axis? I need them to read the graph.
— Sydney, US Nurse
It’s easier to tell what time it is for each dot with the fill-in graph.
— Juliet, Ugandan Nurse
My final design direction
Based on the desirability testing, I decided to move forward with combination of The Daytime and The Sunshower because users felt that it's easy to digest the information on The Daytime; while they could quickly find the data they need on the trend graph of The Sunshower.
The combination is also aligned with our design principles. With the strong hierarchy, users could easily track down the most important information. With the new layout of the vital cards, users can easily scan across the vital readings. Finally, the UI elements displayed on the design were familiar to them.
I iterated the wireframes based on the design principles
Before working on high-fidelity mockups, I evaluated the wireframes based on our research to further iterate the UX design and improve the usability.
The Side Panel
The functions of the side panel are 1) to give users a quick look of each baby’s status 2) to quickly scrolling to the corresponding vital card when the number is tapped. However, the original solution was not the best to achieve these functions.
- The sizing of the list was not friendly to big fingers.
- The icons are confusing as they don’t have labeling and they look like buttons.
- I removed the icons and replaced the list with buttons, which are more friendly to big fingers.
- In order to alert users, the buttons turn red if the corresponding baby is in an emergency state.
The Vital Cards
The vital cards provide real-time vital sign readings, which our users can easily tell what is going on of each baby. However, the layout of the vital cards may not be intuitive to our users.
- In this layout, users have to read the numbers in a Zigzag or circle around. This is not an effective way to read when there are many cards on the dashboard.
- According to our users, this layout helped them scan across the numbers quickly and allowed them to compare the vital signs with other cards in the same column.
The New Patient Form
The new patient form is where our users input new patient information when a new baby enters the system. The original form contained overwhelming information and was not easy to digest.
- In the original design, users had to input all the information on one page. It is overwhelming to see all the options at once.
- "Alarm Limits" allowed users to change the standard ranges of vitals. It's supposed to be the same for every patient unless there is special needs, meaning that it's redundant for users to input the same numbers everytime.
- I separated the form into three steps. Each step has the similar way to input (typing or tapping), so that users don’t need to switch around the input methods.
- All the information is pre-filled with standard numbers on the third step, alarm limits, because we don’t encourage our users to make any changes.
HIGH-FIDELITY MOCKUPS AND MORE USER TESTINGS
I tested key screens with more users and iterated on the feedback
In this stage, I created key screens—dashboard in the resting state, dashboard in the alert state, and the trend graph—and reviewed remotely with 2 Ugandan nurses, 1 US doctor, and 2 US nurses to get more insights on refined style direction within high fidelity mockups.
The dashboard is where users can have a glance of patients' vitals. When any critical event happens, the number on the side panel as well as the vital signs of the corresponding patient starts flashing, notifiying the users that something's going wrong.
- Users knew how the new side panel works instantly.
- Users thought design was too white in the resting state, yet they noticed a strong contrast in the alert state.
- Our users mentioned that the red was not “dangerous” enough in the alert state.
- Some users thought that the numbers look very crowded and hard to read.
- To make the interface less white and keep the high contrasting in emergency state ,I applied light blue to the interface.
- Used more vibrant red to show the critical events.
- I made the vital cards larger, giving the vital readings more breathing room. Users can still have an overview of all the vitals from the side panel.
- I rearranged the buttons of the vital cards, making mute and locate buttons the most prominent since they were the most used buttons during the user testing. The trends button was placed on the very right, aligned with the vitals, becasue it's supposed to provide more information about the vitals.
The trend graph is an important function for users to track the time and critical events. They also user it at shift transition as a way of communications, so that the user from the next shift what has happend before and what's happening now.
- Our users found the fill-in colors helpful to track back to the x-axis.
- Users wanted to see bigger graphs.
- Users wanted to see the standard vital range, detailed time of critical events, and the date. The information is used for work shift transition.
- Used full-screen to show a larger graph.
- Added a call-out box to indicate the start time of the critical event.
- Added vertical lines to help users track back to x- abd y- axis.
Final iteration and testing
Based on the feedback, I kept iterating and created more screens for usability testing. We then conducted usability test with 5 US medical professionals remotely. I asked users to complete a task flow within a given scenario. By doing so, we were able to know if our visual design successfully makes the user experience work.
01 Add New Patient
A new baby named Joe Smith was just born and left under your care, what would you do as the nurse on duty?
02 Alarm Triggered
(After adding the patient, the notification popped up.)
What do you notice happening? What does that mean? How will you respond?
03 Trend Graphs
The nurse on duty after you asks how she can see what was going on with Joe during your shift, What do you tell her and show her using this app?
Our users liked the alarm notification system and the trend graphs in general
Users didn’t notice that they can tap some buttons, e.g. the button on the critical area of trend graphs. Need to make buttons more obivous.
Final product reveal
I prototyped my design with Framer X, for user testing, and Principle, for the final deliverable. Framer X provides the option to export the prototype as a web page, which is easier for remote testing; whereas Principle allowed me to create more microinteractions for the prototype.
The following walkthrough was done and filmed with Principle.
The Overview of Dashboard
The dashboard displayed all the vital cards of connected vital monitors. The side panel worked as an indicator as well as a scrolling tool. Users can see if there is any critical events or just simply tap the number and scroll to the corresponding vital card.
Adding a New Patient
By hitting the "Add Patient" button, users are prompted to the 3-step form. Each step has the similar to input data, so that they don't need to switch around input methods.
On the step 3, Alarm Limits, all the boxes were pre-filled with standard ranges, so that users don't need to fill it every time for a new patient, unless they want a customized range. If users change anything on the Alarm Limits form, a pop-up will make sure if the changes were intended. By doing so, we can prevent users from mistakenly altering the standard ranges.
After completing the form, users can quickly scan through the information, and make any changes to the individual step if needed. Once users hit the confirm button, they will be led to the patient list page, where they will see the newly added patient highlighted.
There are occasions when our users have to leave the dashboard and work on other things with the app. Here, I introduced the notification system. If something critical happens and our users are not on the dashboard screen, the big, red pop-up notification with patient number and name slides out from the right with a sound, notifying users that something's going wrong. Users can simply tap the notification, which brings them back to the dashboard with the critical vital card highlighted.
Users can check the records of vitals on Trends. They can view either the alarm history or the trend graphs. On the trend graph, the red-shaded area indicates the critical event. Users can tape the button to see the detailed timeline of the event. They can also view the graphs in different increments or durations. This helps them communicate during shift transition.
You can also check out the prototype done with Framer X. This is the prototype for user testing, so you may want to follow the user task flow.
A guideline for future designers and developers
I created this 40-page style guide for future designers and developers to build the interface that is consistent with my design. I specifically included the rules and mechanisms of microinteractions to ensure that our users have good experiences in every interaction with the interface. This style guide was handed off to our clients for future interface development.
Things I wish I had time to do…
The Mute Function
Future developers need to reconsider the timeline for the mute buttons because the medical treatments to different critical events may not be instantly effective. Think about how to define the timelines for each event in order to effectively alert the users without overwhelming them.
Future developers/designers need to find out a way to ensure that the mute button is hit only after the user has checkedthe baby that triggers the alarm.
New Patient Form Content
The content of the new patient form needs to be tested by Ugandan nurses as the procedure may be different in Uganda than in the US.
Give users capability of customization such as the preset alarm limits, the length of mute, and colors (for accessibility).
What I learned from this project
It was a fruitful project that I got to polish my skills and learned something new. I was able to create a visual system that help users quickly adapt to the interface without even noticing. Additionally, I tried my best to create a detailed style guide that helps future developers build the interface that is close to my design. Finally, I stepped out of my comfort zone and explored other prototyping tools to meet the needs of our client and users.
With that, I still have something to improve on in the future. Because of the time constraint, we weren’t able to recruit enough Ugandan nurses for user testings. Next time, I would try to recruit new users a lot ahead of time; especially for the users that are in different countries and needed to be interviewed remotely.
All in all, it was a great experience working with the client and my teammates. Through this design, I get to potentially save millions of lives and make an impact on this world.