designed a mobile app for parents and caretakers to journal memories and track the developmental progress of young children.

                      designed a mobile app for parents and caretakers to journal memories and track the developmental progress of young children.

                      designed a mobile app for parents and caretakers to journal memories and track the developmental progress of young children.

                      designed a mobile app for parents and caretakers to journal memories and track the developmental progress of young children.

Overview

Roo was born from UW Human Centered Design and Engineering research project babystepsuw.org, an online application meant to help caretakers better screen the developmental progress of their child through the guise of digital scrapbooking. We were tasked with bringing the contents and intentions of Baby Steps and reimagine them in a mobile application. 

Context

5 weeks
University of Washington

Contribution

Visual Design System Lead
UI/UX for Timeline tab
Microanimations
Prototyping

Raising a child is an exciting but often terrifying experience. How does a new parent with multiple jobs and responsibilites ensure their child is developing just like their peers?

Early detection of developmental abnormalities is key for ensuring the healthy growth for children, and regular developmental screening up until the age of five can ensure that. 

Existing Baby Steps Website
Existing Baby Steps Website
Existing Baby Steps Website
Existing Baby Steps Website
babysteps1@3x
babystepsfix

The Process

Current Experience + Initial Research

To better understand user challenges with the current Baby Steps experience, we conducted a card sorting activity using keywords and phrases found on the website, performed user testing of the exisiting site, and interviewed parents to determine their priorities in documenting their children's youth and development.

To better understand user challenges with the current Baby Steps experience, we conducted a card sorting activity using keywords and phrases found on the website, performed user testing of the exisiting site, and interviewed parents to determine their priorities in documenting their children's youth and development.

Baby Steps Pain Points

From this research we determined information overload could become a major issue, and we would need to be extrememly intentional with the information architecture of this app. Other pain points included:

Poor and inaccurate association between information and actions

Disatisfaction with data visualizations

Uncertainty about continued usage

Group 2@2x

Project Goals

Group 3@3x

Reduce caretaker anxiety by integrating methods of developmental tracking with fun digital scrapbooking.

Group 2@1x

Allow for contribution from and the interaction between multiple caretakers per child.

Group 4@3x

Incentivize users to regularly engage with the application and consequently screen the the developmental growth of their child more accurately.

Group 5@3x

Help caretakers feel informed and capable about their child's development.

Iterating, Prototyping, and More Testing

With the knowledge from our initial research and conversations with the team behind Baby Steps, I designed multiple iterations of the Timeline, our landing tab. I also developed a style guide to be used across the product, including the roo logo.

Group 4@2x
We messed up — User Testing Round Two

In order to validate the decisions we had made thus far on our app, we asked multiple users to accomplish predetermined tasks on a simple click-through prototype of Roo. The results:

The blue/purple we'd been adamant about using lacked all value contrast and felt clinical. 

The entire app needed to be restructured — the developmental tracking portion of our application wasn't working. 

Rather than having Progress and Milestones as two seperate tabs, we merged them into a logical flow under one tab. That caused us to integrate the child's profile into the Timeline. I then created a brand new style guide. The result of these changes is the final, much improved protoype of Roo. 

Style Guide
Style Guide
Group 10@1x

In Timeline, caretakers collaborate in creating a visual journal of a child's youth by sharing photo, video, and text memories. Caretakers can bookmark posts to curate a personal album of their favorite memories.

t1
Milestone Pop-Ups

Check off Milestones with friendly reminders from Roo! Expand and collapse your child's profile view.

Quick Scroll

Browse your child's timeline or use the quick scroll feature to skip to posts from a certain age.

Browse your child's timeline or use the quick scroll feature to skip to posts from a certain age.

scroll
bookmark
Bookmarking Posts

Bookmark a post to easily reference it later when you're showing off your favorite memories with your child.

The Perfect Challenge

The Perfect Challenge

Roo is easily the most extensive interface design project I've taken on thus far. I truly enjoyed challenging myself to design for the mobile experience and am proud of how far my prototyping skills have come. This experience taught me the importance of failure and creating improved designs from it. Blowing up the app and completely restructuring it near the end of the term was stressful and daunting, but it was ultimately the best decision we made and led to a far more successful product for us to take pride in. I am grateful to have worked with an incredibly talented and dedicated team who not only supported me in the leadership role I took regarding the visual design of the application, but who equally and individually executed excellent designs and experiences.

IMG_3403
Squad from left to right: Hannah Mei, Netty Lim, Me, Alyssa Chow
Next project

How To Protest In 2018

Next project

Enough

Group 6@3x white