Babily
All about baby and you.
Take a minute.
Case Study
Role: UX/ UI Design, UX Research, Branding, Prototyping
Team: Solo Project
Task: Responsive site and rebranding
Time: 4 weeks/80 hours
Tool: Figma, Miro
I landed on Babily’s site through its investing company BCG Digital Ventures. Babily is a childcare video media platform that produces and delivers short, one minute smartphone optimized videos distributed across existing social media. As one of the biggest baby care short media platforms in China, Babily’s more than 1,500 video content offers various tools useful for pregnancy and childcare that are provided using the mini-program mechanism. Currently, their in-house app and website are only available in Mandarin and Japanese to the Asian market. Curious to learn more about this unique platform that is unavailable in the United States, I aimed to design Babily for the English Speaking Market.
The information in this case study is my own and does not necessarily reflect the views of Babily.
The moment a child is born, the parent is also born.
This is my story of designing Babily for the next generation of parents.
Be there for parents in their moment of need.
The Challenge
Babily is a mini program, an in-app app that runs within apps such as WeChat and Alipay in China and Japan. My approach was to incorporate features of their in-house app and design a mobile driven site for modern parents in America . This involved rebranding and envisioning a platform useful for today's generation of parents: millennials.
THE APPROACH
Focus on the User
After extensive company research, I downloaded the Babily app but was unable to use it as it was only made for the Chinese or Japanese market. The inability to use the original Babily app led me to conduct a thorough competitive analysis on top baby sites in the United States and on major search engines and communities where parents circulate. I wanted to focus solely on the English speaking market and research where and how American parents are seeking out parenting and childrearing information and tips today.
My research revealed that current top baby sites focus primarily on motherhood and marketing to moms. These baby sites are inundated with a plethora of information and basically consist of articles and text format. Video search engines such as Youtube and Instagram reels are popular for searching topics such as baby rearing, childcare information, and product guides for quick instant access.
MARKET RESEARCH
Redefining parenting for their generation.
Millennial parents do not adhere to gender roles. Millennial dads are taking active roles as parents.
Talk to Mom and Dad.
Single parents and LGBTQ parents are changing the notion of what a traditional family looks like in the new millennium.
Modern Family Structures.
3 in 4 millennial parents are open to videos by brands or companies when seeking guidance on parenting topics.
Videos as a source of information.
Millennial parents seek guidance, and on Youtube that's about everything from parenting to products. They see some brands as thought leaders in this space, and they’re open to hearing from them.
GOALS
Finding the help when you need it most.
Our research revealed that parents today sourced information in an entirely different domain than before. I set out to redefine Babily’s goals to find a solution for the current problem.
To differentiate this product in an already saturated market, I needed to define a desirable key role for the site and how it would meet the needs of Babily’s users.
What?
Parents and caretakers need to find information on how to take care of baby.
Why?
Every baby is different.
Why now?
Millennials use the internet as the first source of finding information.
How?
The new generation of parents absorb information best when given in short visual clips.
So who are these millennial parents? Are there other potential users that will use this site?
After designating persona types and aligning this with our project goals, I was able to prioritize who I would focus on. My persona hypothesis consisted of four different archetypes which highlighted user goals and pains.
LET’S TRY HEART TO HEART
Parent Empathy
My key insights came after my 1:1 interviews.
You don't know how it is like to become a parent until you become one.
In total, 5 participants were interviewed (3 females, 2 males) and consisted of first time mothers, first time fathers, and seasoned parents with more than one child.
My user interviews highlighted the common themes: all babies are different.
Motivation - need to find information specific to baby.
Pains - not enough time, too much reading, most information out there is for textbook baby.
A BETTER UNDERSTANDING
To gain a deeper sense of Babily’s user, this empathy map allowed me to sum up the learnings from my engagements with users in my research. The map provides four major areas in which to focus, thus providing an overview of the person’s experience.
Bringing together the commonalities of my 1:1 interviews, I was able to clearly delineate who the Babily user is. Meet Kirstie.
VISUALIZING THE END TO END
How will Kirstie use the site?
A linear and sequential flow shows the high level steps that our persona would take to get to her goal. Mapping out the user’s perspective helps ensure that I’m designing sequentially and thoroughly.
This discovery phase allowed me to redefine project goals, audit the existing Babily app, review competitor landscape, and understand the new generation of parents and their needs, behaviors and pain points.
BRAND AND EXPERIENCE REQUIREMENTS
Strategy
Knowing who exactly I was designing for allowed me to process how this site will fit into the lives of the users. How might we provide a platform that can give the most concise and trusted information to parents who have so little time at the time they need it most?
Going through my research and brainstorming how a video platform can help millennial parents, I was able to come up with a set of features that can be incorporated into the site to provide the solution. I aligned the features according to priority and categorized the amount of effort to achieve this given the parameters of tech feasibility and business objectives.
FEATURE ROADMAP
VISION
Rebranding Babily for the English speaking market.
Understanding parents in the English speaking market helped me develop a clear vision of the tonal expectations of Babily’s users. The current Babily brand and identity is fitting for the Asian Market but did not resonate as well to the English Speaking Market. Combining my market research and interview insights on this generation of parents in the United States, I rebranded Babily with a new logo and brand identity.
Original logo and new logo redesigns
New logo and branding
THE FRAMEWORK
Setting the Design Direction
Once prioritizing the site's features, I was able to visualize the site map. I wanted to stay true to Babily app's distinct feature of offering short videos to the users. I designed the site as a new platform offering curated videos where users can easily search and explore.
I took a top-down approach to defining the overall structure of the experience. Starting with sketching and lo-fi wireframes, I organized the information architecture to ensure that every interaction would generate the appropriate reaction for Babily’s user. I continued with responsive mid-fi wireframes for desktop, tablet, and mobile. My goal is to design a landscape in which the Babily’s brand can emerge and evolve on all platforms.
THE INTERACTION FRAMEWORK
Structuring the experience
After framing the starting point of the user's experience on the home page, I referred to my persona’s primary task flow and UI requirements to create the remaining wireframes. I chose to focus on the mobile site as 100% (5/5) of my participants in my interviews stated mobile was the device that they used when searching for information.
Task Flow Wireframes for Prototyping
Testing the Mobile Design
Prototyping on mid fidelity designs was a productive way to test out the design before any UI elements were placed. Testing the prototype on real users helped me evaluate the efficacy of the site’s information architecture. The prototype was created in Figma and tested on five users on the task of searching for a video, selecting favorite and saving a video, and navigation of searching for more content.
Participants for my usability test were all parents (3 female, 2 male) and have children under the age of 7. Participants revealed that having the search bar as the main focus of the site remains the most effective and efficient. 100% (5/5 participants) were able to successfully carry out the task to search for the video. More insights were uncovered during the second task of liking and saving a video. ⅖ participants expressed confusion among the icons used for favorite and save. Opinions were given in terms of preference of videos first being muted and different ways of navigation to explore more content were seen from first looking at related videos to going back to the homepage.
The results of the usability test are summarized in the affinity map. Participate feedback is differentiated by color and concerns and successes are noted.
Fixing the interaction of the icons.
My next iteration includes the UI elements and addressed the concerns of the usability test. I fixed the confusion of the heart and save icon by eliminated the heart icon and giving users the option to save video to favorites or a watch later list. I added the thumbs down icon alongside the thumbs up so users can see ratings of the videos. Closed Caption and the Mute icon were prominently placed on each video. Menu icons were changed to the three dots for familiarity and ease.
SETTING THE STAGE
Connected, Open, Modern & Simple
After iterating the framework following usability testing, I am ready to add the UI elements to complete the design.
Babily’s UI Kit is compiled with UI elements on the site to provide reference for future design and collaboration. Complete with a new logo representative of today's generation of parents and modern families. Soft red and blue symbolizing love and strength together creating harmony and balance, accented with vanilla nude tones representing comfort, warmth, and the smell of baby’s skin.
DETAILED DESIGN
Introducing...Babily
a responsive site highlighting curated short videos for new and young parents.
MAKE SEARCHING FOR INFO EASY
The landing page has been designed to allow users to search for any question they have at that moment. The main search function gives users the ability to type in as specific or broad of a question they would like.
ANSWERING YOUR QUESTIONS BEFORE YOU ASK
The visual hierarchy of the page then follows the Z pattern to “What you need to know” videos and below that “trending videos.” The page then flows naturally to pertinent information about Babily and why users should trust our videos.
Mobile Driven
Better than an app, Babily’s mobile site sets the wave of the future. It’s faster, more feature filled, and includes options to like or dislike videos, suggested search results, and the ability to save and create “watch later” playlist or designate your “favorite” video. Links of products featured in videos make it easy for parents to search for baby essentials. Mute and closed captioning are automatically set and can be turned off with one touch.
Videos are short and around a minute to provide parents with the most concise answer to the topics they are searching. No need to skim articles or skip through long videos, Babily makes it easy to access your favorite videos wherever you are.
Take a minute.
Short 1 minute childcare videos curated for the modern parent.
LESSONS LEARNED
Human Aspect of Design.
“I feel with you.”
Putting yourself in the users’ shoes requires empathy. Keeping accessibility and inclusivity at the forefront of your mind is vital for creating interfaces that all users will enjoy. Working on this project allowed me to use empathy in every step of my design process. By sharing the users’ expressions, needs, and motivations, I was able to make Babily useful and enjoyable for the English speaking market.