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



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. 



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 questions help caretakers track their child's progress and are the data points that make up the progress visualization. 


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


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.



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.


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.


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.


Milestone User Flow



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


Milestones and Activities

Milestonesand activity.png

Developmental Categories



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.