Raisa Janjua, Rachel Connelly, Timothy Kwan, Aleksei Zhurankou
UI Design (Timeline, Filter, Upload Process, Multiple User Interactions on Posts, Tab Bar, Privacy & Accessibility)
Animations & Microinteractions
Five Weeks - University of Washington Seattle, Winter '18,
Sketch, Principle, Adobe After Effects, Adobe Illustrator
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
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.
OUR NEW design
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.
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.
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.
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.
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.
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.
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."
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
evolution of timeline & filter
typography & Color
UI of timeline, timeline filter, upload process, memory/milestone screens, caregiver features (adding a caregiver, liking/commenting on memories, privacy and accessibility of memories)
All animations of illustrations by Rachel Connelly
Casting my twin niece and nephew as the lil' Sprouts