Butterfly iOS App
The baby care companion
Butterfly is a wearable baby monitor that clips to the baby’s onesie. It tracks the baby’s sleep, diaper and breathing. Changing the baby care industry, Butterfly uses AI to communicate with the app letting parents know when they need to change their baby’s diaper and when they need to check on the baby, giving the parents peace of mind.
Unlike most baby care wearables, Butterfly requires no skin contact preventing any discomfort for the baby. What sets Butterfly apart from other baby monitors is that it is not limited to the crib and can be used anywhere.
My Role
Product Designer, UX Designer, Information Architect, Visual Designer
This project was one of a few that I worked on while working at Xtrava Inc. as a UX Designer. I collaborated with the founders to define business requirements and user goals to revamp their iOS and Android apps.
I helped define different scenarios and build interaction patterns. I also used tools such as empathy maps and user scenarios to study user behavior (UX). I then went on to create interface prototypes (UI) and create the logic of the product with wireframes.
As the sole designer contributing to designing the app, I worked with multiple teams including product managers, business developers, and mobile developers to ensure smooth ride of development and implementation.
The Challenge
“It takes a village to raise a child”
Being new parents is a stressful time that starts the day the baby is born. There is so much for new moms and dads to know about their newborn while struggling with the new sleep schedule (or the lack thereof).
The main challenge was to help new parents feel better prepared for their new journey. The company’s concern is to develop new technology that dissolves parents concerns and struggles while closing a gap in the baby industry.
The Solution
Giving parents peace of mind
With most of baby monitors that exist in the market today being bound to the crib, we wanted to take a different approach by allowing parents to track their baby’s patterns from anywhere.
Our vision for Butterfly is to provide parents with insights that, while making their parenting life easier, can also help them provide the best care for their baby. We also wanted to give parents peace of mind by alleviating helicopter parenting. Since 74% of moms go back to work after the baby is born, they need to intrust their baby with a caregiver. Butterfly helps parents evaluate the quality of care their baby is getting from the caregiver, giving them peace of mind.
User Research and Insights
From market research and speaking to many parents, we were able to arrive to insights that guided our direction in the design process.
Keeping track of sleep
Parents like to keep track of their baby’s sleep to figure out some sort of schedule.
Tracking feedings
Many parents keep feeding diaries for their baby to ensure healthy growth and progress.
Tip of the day
Because it takes a village to raise a child, parents want to learn more about tips and tricks that they can do to provide the best care for their baby.
Wearable is okay
While a lot of baby monitors that exist today are wearable, there were two main issues with them:
The wearables required skin contact, making the baby uncomfortable and irritable
The monitors are connected by base unit and therefore can only be used at home, rendering the monitor crib-bound
Checking diaper is annoying work
Parents have no way to telling when the baby’s diaper needs change without checking manually. This becomes even more stressful when the baby is swaddled and may or may not be due for a diaper change.
Breathing
With SIDS being a huge concern for new parents, parents want to be notified if there is anything wrong with the baby’s breathing.
Knowing the baby’s day
Almost 74% of moms go back to work after the baby is born. Most of these moms will intrust their baby with a babysitter and want to evaluate the quality of care their child is getting while away.
The App
Onboarding Process
Our main target users are millennial parents who are tech savvy. Taking their busy schedule in mind, we wanted to make the onboarding process as easy and as quick as possible. To get started users were asked to:
Create an account or explore the app as a guest
Add baby’s profile
Setup Butterfly and start using the app
Optional: share Butterfly access to baby by inviting other primary or secondary users
Simplifying the onboarding process
There are four cases and scenarios that needed to be taken into consideration when designing the onboarding experience:
Primary user who sets up Butterfly for the first time
Primary user who gets access to Butterfly by invitation via sharing
Secondary user who gets limited access to Butterfly by invitation via sharing
Guest user
To ensure that all the scenarios were covered in the user experience and that the development team is aware of the logic, this called for creating an onboarding decision flow diagram.
I wanted to make creating an account as simple as possible to save users unnecessary waste of time while also giving them the ability to explore the app as guests to get a feel of the app.
When dealing with babies, safety is the number one thing that comes to mind. To ensure that users are sharing their baby’s info with the intended people, users are asked to verify their account before moving forward in the app.
After verifying their account, users will be able to see whether or not they have pending invitations to a Butterfly that has been set up. We took this decision to once again save users time entering baby’s info that has already been done.
Adding baby’s profile
We wanted to customize the experience as much as possible. To make sure that we are showing appropriate insights to different user cases, we thought it is fitting to include the following in the baby’s profile:
User’s relationship to the baby (to show appropriate tips and insights that would help both the caregiver and baby)
Baby’s name and picture (to add some personalization)
Baby’s gender
Baby’s birthdate
Permissions
The user experience relies heavily on the communication between the device and the app. For the communication to occur, we needed the user’s permission to enable location and notifications. It was crucial to get the user to allow these two permissions in order to ensure smooth functionality of the app. After some brainstorming, I decided that there are a few things that need to be taken into account in the permissions design:
Only ask for the permissions that are absolutely important for the functionality of the app
Ask for permissions only when needed
Explain to users why it is important that they grant us these permissions
Only show the iOS permission message after the user clicks on the app permission button to allow for another chance to ask user for permission again
Setup Onboarding
The Real-time
Knowing baby status in the moment
The real-time allows parents to track the status of their baby (awake or asleep), track the diaper wetness, and monitor breathing especially while the baby is asleep. Many parents also cared about keeping track of the baby’s feeding to track their growth.
We wanted to display this data in the most digestible way. We broke the activity states into six states (awake, active, calm, falling asleep, sleeping, deep sleeping) and the diaper into four states (dry, lightly wet, wet, about to leak). Given that the transition between these states may be delayed by a few seconds, we wanted to present the data in way that masks those delays.
Real-Time User Testing
After the design was ready for testing, it was time to show it to real users and get their feedback. We discovered that users didn’t like the arches and said that they weren’t intuitive to understand.
So we went through another round of testing (A/B testing) and most users liked the straight lines as opposed to the arches. They also said that it was easier for them to understand the different states looking at the line compared to the arch. However, the CEO was overly attached to the arches so the company decided to go that route.
Breathing
While we were conducting our initial user research, we discovered two important things related to breathing:
Parents don’t like to see the baby’s breathing at all times. They want to see the breathing on demand.
Tracking breathing is especially important for parents when the baby is asleep.
To accommodate the user’s needs, we decided that the real-time screen would not show breathing by default. Users can swipe activity section to the left to see breathing rate.
Since motion affects accurate reading of the breathing rate, we wanted to mitigate that by telling the user that motion was detected. While this assured the user that the baby is well and moving, it also mitigated the inaccurate readings.
Breathing Alarm
With SIDS being a huge concern for parents, we were hoping that this feature would help give parents some peace of mind. Although butterfly is not a medical device and cannot prevent SIDS, we wanted to alarm the parents when Butterfly detects any irregularities with the baby’s breathing.
When Butterfly detects low or high breathing patterns, parents get notified to check on baby accompanied with a loud sounding alarm to invoke urgency.
Timeline
See the baby’s entire day
The timeline shows the baby’s entire day in chronological order. Seeing the baby’s day helps parents learn more about the baby’s habits and gives insights about their progress.
This feature is especially important for parents who may use a daycare or babysitters to see their baby’s day and evaluate their quality of care.
Timeline Event Grouping
Timeline grouping allows parents to see a summary for each event category (sleep, nap, diaper changes, feedings). This helps to investigate the baby’s day more closely and draw useful insights such as best time for naps, sleep quality, and feeding details.
Sleep events expanded
Nap events expanded
Diaper events expanded
Bottle feeding events expanded
Nursing events expanded
Timeline Sync
Safety is very important when it comes to baby products. We wanted to limit the RPF signals by allowing users to sync data in the timeline on demand. This way, the data is available only users want to see it. With that in mind, the design process for this feature is centered around the user knowing how old the data is and alert them if the syncing process can’t be completed. It is all about feedback.
The Launch
The Butterfly has been in the hands of some users for field trials for almost two years now. The app was functional but the user experience was broken. The company decided to go for launching the new app in April 2019 to continue the pilot onboarding and iteration.
User feedback about the new app:
“I have had the Butterfly for almost a year now and I haven’t used it because the app was so confusing. After seeing the new app, I am excited to finally use this bad boy”
…
“Whoever redesigned the app just took the experience to a whole new level”
…
“The app is so much better to look and use now”
Reflections
Personal Growth
Working on a wearable device really pushed my design thinking to a whole new level. There were a lot of scenarios to consider and many cases to be covered. Furthermore, working with a remote team that is from a culturally different background has helped my personal and professional growth. Because we come from different cultures, communication barrier was high at first. This forced me to think of different creative ways to communicate with the team and ensure that misunderstandings and miscommunications are prevented.