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.
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.
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?"
Visually cluttered timeline
Important features hidden
A babysitter with formal childcare education
A mother of two (9 and 11 years old)
A father of triplets (10 months old)
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.
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
The interlinked relationship between the Milestones, Activities, and Progress pages allowed for actionable behaviors.
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
1. Site Map*
4. Create Memory
5. Visual Language*
We wanted to emphasize the relationship between answering Milestone, completing Activities, and viewing a child's Progress.
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.
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.
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.
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:
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
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.
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.
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.
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.
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.
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.
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.
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.