A mobile application that encourages parents to screen their children's development through digital scrapbooking 

 
 

Overview

Our goal for this project was to redesign babystepsuw.org an website that encouraged parents and caretakers to screen their child's progress in a fun and engaging way. Within this context we created Roo; an application that integrates developmental screening and digital scrapbooking. 

 

Context

5 weeks, Spring 2018

Team of two UX designers and two VCD designers

Contributed microinteractions, prototyping, and iconography

 
 
 
 

Original Baby Steps website design

Screen Shot 2019-01-24 at 8.12.22 PM.png
Screen Shot 2019-01-24 at 7.23.56 PM.png
 
 

Initial Research

To understand how users navigated the existing Baby Steps, we conducted a card sorting exercise and usability test with parents. This helped us understand how users associated and interpreted the language used on the existing interface and find pain points:

  • The current of progress visualization was confusing and unattractive

  • Confusion between what milestones and activities were

Milestones+Copy+3.jpg

Milestones
Milestones questions help caretakers track their child's progress and are the data points that make up the progress visualization. 

Activites.jpg

Activities
Activities give parents actionable things they can do with their kids to reach milestones. Answering these do not contribute to any visualization.



 
 
51144983_752072048493056_6827690436501438464_n.jpg
 

Initial Iterations

The initial progress visualizations I created focused on graphic visualizations were easily understandable. These would be a on the profile tab within the application.

 
 
ProgressIterations.png
 
 

User-testing

During our initial user testing we discovered that the original tab bar, which separated milestones from the progress, was confusing to navigate. This caused us to re-evaluate how we structured the association of milestones to the progress that is shown and redistribute responsibilities. I now shifted my attention to the navigation between Activities and Milestones.

 
 
edan.png
 
 

After we changed our navigation structure, my focus shifted to the challenge of localizing two different categories of action items: Milestones and Activities. This was now in the tab that showed the overall developmental progress and you would be able to view milestones and activities in one space.

 
Progresstab.png
 
 
 

Milestone and Activity Iterationns

My challenge was to find a way to let two different categories of actions occupy one area. These are my explorations of different card options.

 
 
Screen Shot 2019-02-26 at 6.56.22 AM.png
 
 

Final Solution

The final solution that I created was two decks of cards representing activities and milestones. In order to switch between the two decks you would be able to toggle with the icons in the upper left.

 
cards.gif
 
 
 
finalcard.png
 
 
 

Milestone User Flow

userflow.png
 
 
 
 

Iconography

I also was responsible for the iconography throughout the entire app; The creation of the symbols was challenging as I struggled with the simplification of lines and line weight with curved edges. I came to a solution that was friendly yet simple.

 

Navigation Bar

NavBAr.png

Milestones and Activities

Milestonesand activity.png
 

Developmental Categories

InApp.png
 
 
 
goteam

Reflection

Working on a team with Hannah MeiNetty Lim, and Joylyn Yang was a great experience. I learned to shift roles, understand new technology like Principle and Sketch quickly, and synthesize the learnings from our research into our designs.

The smallest interactions and movements can help bring the smallest delight to users. Utilizing Principle to illustrate and prototype our designs showed me how much I enjoy using and creating motion.

 
 

Prev

 

Next