BEAN

Child Development
App Redesign

Bean is an app that alleviates the pressure of screening a child's developmental progress by enabling multiple caregivers to collaborate, engage with, and monitor a child's growth.

INVISION APP CLICKTHROUGH

APP FLOWCHART

hero_mockup3.png
 

CONTEXT

Raising a child can be cause for a lot of anxiety in parents. From ages 0-5, it is imperative that children to be screened for any developmental delays so that they can be diagnosed early on. While parents understand the importance of documenting changes in their children’s development, they can be overwhelmed by many logistical challenges that come with child rearing.


COMPLETE

Winter 2018
Six Weeks

 

CONTRIBUTIONS

Zixing Guo (me) - Onboarding and Home UI, Information Architecture, Research, Illustration, Animation

Elleyce Pahang - Babybook and Add Babysitter UI, Research, Animation, Video

Andrew Le - Home and Card UI, Information Architecture, Animation, Research

Jamillia Lopez - Timeline UI, Iconography, Animation, Research

 
 
Hero2.png
S5_black_white.gif
 

 

REDESIGN

Bean is an app redesign of Babysteps, a website for parents to track developmental progress in their children, during the first five years of their life. It was developed by Julie Kientz, an associate professor from the UW HDCE program; we would be working closely with her while developing Bean.

 
 

PROBLEM STATEMENT

"How might we engage parents with technology in a universal experience of celebrating children's developmental milestones to increase screening rates?"

 
image (4 of 8).jpg
fadgfg.PNG
 
 

RESEARCH

1. Babysteps research papers
2. Q&A with researchers
3. Think Aloud protocol with participants
4. Card Sorting with participants
6. Heuristic interviews with participants

 
 
 

PAIN POINTS

  • Visually cluttered timeline

  • Unintuitive navigation

  • Important features hidden

  • Overwhelming information

  • Unresponsive design

  • Visually disconnected

 
 
asdsd.PNG
 

RESEARCH PARTICIPANTS

  • A babysitter with formal childcare education

  • A mother of two (9 and 11 years old)

  • A father of triplets (10 months old)

 

INSIGHTS 

BABYSTEPS RESEARCH PAPERS

  • Parents often forget to ask their pediatricians questions.

  • They were also expected to recall a lot of information about their children's habits. 

  • It was often challenging to document a child if they were with babysitters or caretakers.

JULIE & HYEWON Q&A

  • Encourage anxiety-free documentation through celebrating their child's progress

  • Focus on portraying a child's personal change over time versus comparing them against an average.

  • Empower parents to be able to do something should they receive bad news.

  • Be accessible to parents of different social and economic backgrounds

 
 
 

CARD SORTING

  • The interlinked relationship between the Milestones, Activities, and Progress pages allowed for actionable behaviors.

THINK ALOUD

  • Progress trees were well received, yet they were confusing without context

  • Timeline was a pain to navigate

  • Confusion after posting memories. Lack of micro-interactions to guide users

 
 

DESIGN GOALS

  1. Ease parents' anxieties without replacing their need for a trained medical professional

  2. Balance the celebratory aspect of documenting a child's growth with the medical importance of doing so

  3. Prompt parents to be able to act upon seeing a supposed delay in their child's development

  4. Make documentation easy not only for parents but for collaborators such as babysitters and extended family

  5. Present the user with the information they need without overloading them

 
 
Current Site Map3.JPG
 
 

PROCESS

1. Site Map*
2. Onboarding
3. Home*
4. Create Memory
5. Visual Language*

 




*Collaborated on

 

SITE MAP

Insights from our Card Sorting and Think Aloud sessions revealed an interdependent relationship between three features; we wanted to emphasize the relationship between answering Milestone, completing Activities, and viewing a child's Progress.
 

sdfdfdg.PNG
 
 

ONBOARDING

Bean had many features we wanted to share with users. However the longer Onboarding took, the less engaged users became. We wanted to encourage users to explore the app as soon as possible.

A demo account would allow parents to view a populated account. Empty states directed parents to key features within the app they could try out.

 

Final Screens

landinggg.png
createaccount.png
blankstate.png
 

Process

In older iterations, I tried to give users tooltips through popups in order to lead them through the app, however in testing with young, tech-saavy parents, they found the onboarding popups annoying and preferred to explore the app themselves.

In response to this feedback, I decided to embed tooltips and instructions into the UI of the app, for users to refer to if they do get stuck on what to do.

kjklkl.png
onboardingsd.png
 

HOME (UX)

Working from the insights we gained during the research period, we wanted parents to see their children's progress almost immediately upon loading into the app.  As the goal of the app was to increase screening rates, Home needed to to accomplish several goals:

  1. Show a child's Progress in each of the five developmental categories

  2. Represent Progress in a way as not not alarm parents nor replace their need for a professional

  3. Prompt parents to be able to complete an Activity upon seeing a supposed delay in their child's development

  4. Remind parents to answer Milestone questions

Given our problem statement, we need to accomplish these goals by "celebrating children's developmental milestones". Home would need to be delightful and welcoming.

 

Final Version

Screens by Andrew Le. I worked on UX with him and created the illustrations

 

Process

sdfsdfd.png

Screens by Andrew Le. Icons by Jamilia Lopez.

 
 

VISUAL LANGUAGE (ILLUSTRATIONS)

As Home evolved, so did the visual language of our app. I created the illustrations which ended on the final version of the Home screen.

The visual language of our app sprung from the idea of growth. Our app was inspired by rounded bean-like shapes, festive party banners, and friendly, pastel colors.

 

Final Version

Illust_gif.gif
 

In order for the app to be universally understandable, we planned for more complex milestones and activities to be accompanied by animated illustrations.

 

Illustration references by Ena Kim and Yehteh

 

Process

dgfhfghg.PNG
asdfdfsd.png
323123.png
chocies.png
 

CREATE MEMORY

Memory creation needed to encourage written documentation. The Babysteps research showed that parents took plenty of photos of their children but didn't have the time or effort to upload them.

 

Final Version

memory.png
 

Process

 

For busy parents with their hands full, that meant a UI that would allow them to access their photos and proceed to the next screen even if they were using the phone one handed.

Vital buttons (barring escape and exit) were intentionally placed low on the screen to be comfortable to reach by thumb. Swiping right allowed users to access the camera.

 
memories222.png
 

Users often had trouble deciding what to record if presented with a blank text field. By putting a random, guided question in the text body, parents could get an idea of the type of information they needed to keep note of.  Initially we had a tagging/filter feature for memories but found it potentially tedious for parents and interfered with our goal of celebrating documentation.

Parents would also be able to mark their memory posts and save it to a doctor's notes area for later perusal. Research showed that parents often had a difficult time recalling questions and concerns while at the doctor's office. 

 
 

Post-Mortem Reflection

Early on, we chose Android because of its 54% market share and affordability. Our audience was not only new parents, but babysitters and those on the lower end of the income spectrum. In earlier iterations, we made use of the Floating Action Button due to the vertical length of our early iterations. But the longer we worked on Bean, the less we made use of Material design’s features.

The Home screens were a challenge and a half; they underwent those most changes out of any of our flows. Part of the reason they took so long to develop was perhaps because we were so attached to our app’s namesake. We really wanted to keep those growing bean progress icons in. But with an ungainly number of five, they were difficult to format on a narrow mobile screen.

Even with our final version of treating the progress icons like game heart containers, that was still something we could improve on. We were perhaps being too careful towards not causing our users’ anxiety.

Looking back, we tried to fit too many ideas on the Home screen. The length of our Home screen was becoming absurdly long and was in danger of being a pain point we noticed on the original BabySteps site. We needed to compromise. In the end, scaling back the complexity of the Home Screen ended up improving our visual direction immensely.

Overall, working with my team was a fantastic experience. We meshed well and covered for each other’s weaknesses. We designed a successful product which our client liked immensely.

 
29258105_2016741685032783_7337801155331751936_o-3.jpg