Butterfly Responsive Web
Baby care responsive website
Butterfly is a wearable baby care device 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
Web Designer, Content Strategist, Information Architect
This project was one of a few that I worked on while working at Xtrava Inc. as a UX Designer. The main purpose of the website is to add credibility and authenticity to Butterfly wearable device, spread awareness, show how it works, and answer any questions about the product.
I collaborated with the founders to define brand guidelines and the content necessary for the website. As a sole designer contributing to the web design, I took the liberty to define the user experience and tailor it to the main user base. As a content strategist and information architect, I worked to understand business goals and user needs. I then helped plan, develop and deliver clear, relevant content that brings the two together.
Execution
Organization is key when comes to starting the design process
Phase 1
Prototyping
Given that the website was a little outdated, a redesign was called for. I started the process by brainstorming a structure that keeps target users engaged. My goal was to drive awareness, reach, and conversions through branded storytelling and an easy-to-navigate web design.
I built out a highly intuitive site structure that would be user-friendly for expecting parents, new parents, and potential investors who are interested in the baby care industry. The website consists of four main pages: landing page, how it works, FAQ, and preorder.
To make sure that the website communicates everything parents and investors need to know about the product, I included how it works page. This page’s purpose is to explain how Butterfly works in simple words that the target audience can understand.
Phase 2
Styling
The most important part of the design process is to define the brand voice because it sets the tone for how the brand is being perceived by the users. I balanced strong colors with neutral ones with breathable white space to create a clean warm web design.
In collaboration with the founders, we wanted the brand to communicate warmth, care, and love. We also wanted the web design to show a story that the parents can relate to. This led to coming up with imagery that is personable and relatable.
The red accent was added to communicate love and care. The Futura type was carefully chosen to compliment the modern feel.
Phase 3
Bringing it together
Homepage
How it works page
Preorder Page
Reflections
Following a lean approach in a startup environment is vital to ensure the right implementation. While the original design followed a lean approach, implementation took some time to take place. After trying multiple vendors to bring the design to life, I felt that certain elements in the design were still poorly presented. To fix this issue, I saw it fitting to use TRIZ model, which allowed me to think about elements in the design that took the most time to implement and would not have a drastic effect on the design if taken away.
The founders and I then decided to use one of the online web-hosting services to implement the designs, which I oversaw the implementation process personally. Following this lean approach resulted in saving the company tens of thousands of dollars on implementation and a huge amount of back-and-forth time with the vendors.
