hero_mockup3.png
 

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.
 

 

COMPLETE
Winter 2018
Eight weeks

 

ROLES
Research
UI/UX
Illustration
Animation

 
 
beauty_bean-2.png
 

FEATURES

Bean provides feedback on the child's growth and recommends activities that provide ample opportunity for memories to be made. Memories can be captured and uploaded to the timeline, which can be marked for further professional evaluation or simple be shared with loved ones. Furthermore, Bean supports SMS integration to allow for multiple caregivers to text and upload photos directly to the app. 

INVISION APP CLICKTHROUGH

APP FLOWCHART

 
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

 

BABYSTEPS 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.

Babysteps Problem Statement:

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

 
 
 

PAIN POINTS

×
×
×

Visually cluttered timeline
Unintuitive navigation
Important features hidden

×
×
×

Overwhelming information
Unresponsive design
Visually disconnected

 
 
asdsd.PNG
 

RESEARCH PARTICIPANTS

1
2
3

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.

 

 

×
 

×

×

×

THINK ALOUD

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

Timeline was a pain to navigate

Participants taken aback by home screen

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

 

×
 

×

 

×


×

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.

 

DESIGN GOALS

1.
 

2.
 

3.
 

4.
 

5.
 

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

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

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

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

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

We wanted to emphasize the relationship between answering Milestone, completing Activities, and viewing a child's Progress.
 

sdfdfdg.PNG
 
 

Based on feedback we received from one of our research participants, we prioritized showing parents their children’s Progress upon entering the app.

Timeline and Babybook became separate tabs. Whereas Timeline aggregated all milestone, activity, and memory posts, Babybook was a place for parents to curate their favorite moments to share with loved ones.

 
 

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.

 
kjklkl.png
onboardingsd.png
 

After several iterations, I arrived at limiting account creation to just two screens. Reading the introductory screen's to the app's feature was, of course, optional for new users.

However, there were still instructions within the app we wished to teach the user. Rather than overlay pop-ups over the screens and forcing them to read it, I injected further onboarding instructions into our blank state UI elements in order to give context to them.

 
 
 

Introductory
Overview

Final Version

landinggg.png

Account
Creation

createaccount.png

Tips

blankstate.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.
 

2.
 

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

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

 

3.

 

4.

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

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.

 
sdfsdfd.png

Screens by Andrew Le. Icons by Jamilia Lopez.

 

In many of our early iterations, we struggled to fit both Progress and Activity flows onto a single screen. In the end, we focused on showing only Progress on the Home screens.

We scrapped the bean growth icons and treated them like video game heart containers instead. Tapping the categories would bring the user to a brief explanation of what it meant and what parents could do for their child.

 
 

Final Version

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

 

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.

 

Illustration references by Ena Kim and Yehteh

 

We analyzed competitor apps and found that typically struggled with information overload. In some apps, video demonstrations of activities felt more understandable and easy to digest as opposed to having an all text interface.

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

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

We wanted parents to immediately see what their children were falling behind. As a result we color-coded the illustrations (red, yellow, blue, green, purple) and limited each illustration's palette to analogous tones.

As we discovered challenges with distinguishing the five developmental categories on our home screen, our visual language shifted away from icons (beans and patterns) to becoming more illustrative overall.

 
 

Final Version

Illust_gif.gif
 

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.

 
 

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. 

 
 

Final Version

memory.png
 
 

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