Graphic Designer
sprout_.png

Sprout

Keep track of your sprouting child’s memories and milestones. All in one place.

sprout-2.png
 

Team

Raisa Janjua, Rachel Connelly, Timothy Kwan, Aleksei Zhurankou

My Contribution

  • UI Design (Timeline, Filter, Upload Process, Multiple User Interactions on Posts, Tab Bar, Privacy & Accessibility)

  • Branding

  • Animations & Microinteractions

project timeline

Five Weeks - University of Washington Seattle, Winter '18,

Tools used

Sketch, Principle, Adobe After Effects, Adobe Illustrator

 

 

 

project goal

Create an app for BabyStepsUW.org, which is a project by Julie Kientz at the University of Washington to help detect, record, and track important developmental milestones that occur in children during their first five years of life. The primary goal was to make the screening process less intimidating for parents and put an emphasis on the celebratory factor of child development.

motive & outcome

We wanted to create a platform that prioritizes enjoyment and promotes developmental growth, and we did so with a clean and simple interface that accentuates the content the user puts in themselves. We wanted parents to screen their children without feeling like they were doing so. By giving various caregivers accessibility, Sprout provides a personal platform that allows for easy sharing of photos, videos, and accomplished milestones amongst all who have close ties to the child. Screening is made easy with visualizations of brussel sprout plants that toggle between three stages: Stage 3 being above average, Stage 2 being average, and Stage 1 being below average and in need of further evaluation.

 
 

THE OLD DESIGN

WEB

The original website is heavy with information and overwhelming for the user. The visual design is compromised by the amount of information loaded into one space. The process of answering questions seems tedious because they are all there for the use at one time rather than curated and approachable. BabySteps used a tree visualization to represent the current status of the child’s development. These visuals were uninteresting, vague, and even discouraging.

 
Artboard 1 copy 4.png
Artboard 1 copy 5.png
Artboard 1 copy 6.png
 

OUR NEW design

MOBILE

 
 
onboarding.gif
 
 

on-boarding

We chose a benefit-oriented on-boarding process that clearly highlights the purpose of Sprout and why the user should make use of it. Each core concept of Sprout is visualized through illustrations (by Rachel Connelly) that were then brought to life through animations created by myself.

 
 
 
timeline.gif
 
 

Timeline

See all milestones and memories you’ve logged in a continuous feed. Tapping on a memory takes you to details of that post, through which there is the ability to scroll through images and videos as well as like and/or comment on the post. The functionality of these features is to celebrate the child with a small community of caregivers.

 
 
 
filter_2.gif
 
 

filter

Allows for toggling between children, filtering between age, memories, and specific milestone categories. The filter overall helps with navigating through the mass amount of . information.

 
 
making-a-memory.gif
 
 

adding a new memory

Tapping on the plus button on the tab bar allows for uploading a new memory. There is the option to upload photos/videos from the your device, take an instant photo/video through the app, or create a simple text post. Tag each post with a child, the date, the location, or a specific milestone category. Decide which caregivers have access to viewing this post as well as have the option to share on social media.

 
 
 
q.gif
 
 

milestone questions

The reason for Sprout’s creation was to promote the developmental screening of children, which is done so by checking off key milestones as they grow. Sprout requires the user to answer six questions for every milestone category every two months to provide an approximate growth status to the parent.

 
 
graph.gif
 
 

tracking growth

Answering the milestone questions directly affects the growth stage that the child is in. There are three stages, defined by the Ages & Stages model, which are visualized through the brussel sprout animations at the top of each milestone category screen. The purpose of this visualization is to take a minimum-anxiety approach at screening your child.

 
 

Site Map

sprout copy.png

research

 

Card sorting

We asked a participant to organize a set of cards with words/phrases from the BabySteps website as well as some additional related words that our group came up with. We noticed that some words from the website, such as "Activities" and "Text" were unclear to the participant and were discarded from any type of categorization.

These were terms that we later discarded from the app design as well. Instead of "Activities," we used "Tips," and instead of "Text" we used "Post."

User Testing

Our participant also tested out the original BabySteps website and identified these issues:

  • Seems exhaustive to repeat this whole process for more than one child

  • Creating a memory is not super obvious or intuitive

  • Don’t like the idea of merging the baby’s face into the timeline - “I know what my baby looks like

  • Tree visualization is confusing

  • "I feel like the website should know how old my child is."

Overall impression: Not enjoyable, not inviting, not visually appealing, a lot of work

 

IMG_0979.jpg
 

initial wireframing

Artboard 1 copy 3.png
 

evolution of timeline & filter

sprout copy 2.png

typography & Color

Artboard 1.png
Artboard 1 copy.png
 

ANIMATIONS

 
intro.gif
Onboarding_growth.gif
Onboarding_memories.gif
Onboarding_milestones.gif
 
 
communication.gif
 
gross-motor.gif
fine-motor.gif
 
 

my contribution

UI of timeline, timeline filter, upload process, memory/milestone screens, caregiver features (adding a caregiver, liking/commenting on memories, privacy and accessibility of memories)

Color palette

All animations of illustrations by Rachel Connelly

Casting my twin niece and nephew as the lil' Sprouts

 

Left to right: Timothy Kwan, Rachel Connelly, Raisa Janjua, Aleksei Zhurankou

Left to right: Timothy Kwan, Rachel Connelly, Raisa Janjua, Aleksei Zhurankou