42daa6e7-9101-48cd-af47-cc6e9fbad6c5_rw_1920.png

Clementine

Clementine

Raising a new child is often scary. How might we help cover the bases of early childhood development?


In the United States, 1 in 6 children grow up with a behavioral or developmental disability. Early detection provides great opportunities for intervention, but early detection relies on regular screening.

Clementine is a scrapbooking app for busy parents of children ages 0-5. It aims to help integrate early childhood development screening into a regular routine of documenting and celebrating your child’s very first years.

 
Clementine App Hero Image
 

Startpoint

babystepsstaging@2x.png
 

BACKGROUND

In 2009, Baby Steps was developed by Julie Kientz and the University of Washington HCDE department as a web-based tool to help parents screen their children.

Baby Steps is a desktop platform, but life happens on the go. What special opportunities does a mobile screening experience give to parents?

For this 5 week project, our team designed a completely new mobile prototype based on the goals of Baby Steps.

Team
Maverick Garces, Isaac Jaeger, Piper Loyd, Faezah Shaharuddin

My role
UI/UX
Prototyping/Testing
Interaction design

Context
Five week class project, Interface Design


 

Features

EASY SCREENING

Screening.png

Early childhood development screening designed to be as simple, supportive, and celebratory as possible.

 

RECORD KEEPING

Scrapbooking timeline keeps recorded media alongside milestone achievements to celebrate children’s early years.

Timeline.png
 

PROGRESS REPORTS

iphone7 copy 4.png

Optional layers of information, an actionable action button, and clean, accurate visualization.

 

DEVELOPMENT MANAGEMENT

Smart notification system keeps track of upcoming ability milestones and assessments while informing parents of quality activities to do with their children.

 
 

Development Process

Research + Insights

Research participant at card sort

Research participant at card sort

INITIAL ASSESSMENT METHODS



Internal

1. Research literature reading.
2. Site usability assessment.
3. Interview with Julie Kientz

Participant-based*

1. Component card sort
2. Task completion
3. Exit interviews

*6x participants, 2 of whom are parents

 

INITIAL INSIGHTS

Conceptual

1. Several anxiety points exist in the form of dead-ends, ambiguous visualizations, and more.
2. No child is average—app should be aware of this.
3. The majority of traffic comes from low-resource parents—as much as possible, we should inform.
4. Confusion must be eliminated as much as possible.

Usability

1. Excessively flat navigation hierarchy leads to redundancies.
2. Information that should be together is separated (milestones inform progress, but are kept in different tabs).
3. Excessive information and poor visual design makes for a confusing experience.
4. Data-based information has confusing representation.
5. Main features are hard to use.

 

Opportunities

DESIGN PRINCIPLES

We synthesized design principles and principles based on our research and findings.

Action
Give actionable feedback and clarification on your child’s developmental progress, and help reduce anxiety in the process

Celebration
Turn documenting your child’s development into a regular, celebratory process. Emphasize record keeping.

Simplicity
Make the app attractive and easy to use as possible to incentivize regular, active engagement. Parents are extremely busy, any barrier to entry is too high.

Support
Encourage parents to answer screening questions

 

Prototyping

PROTOTYPE

Based on our insights and early ideation, I helped make an interactive prototype with early visuals using InVision, which we deployed for testing. You can check it out below.

 

FEEDBACK AND REVISION

The prototype was a step in the right direction! But we didn’t quite hit the mark. The prototype was still too complex. Complexity is killer for busy parents.

To laser focus the app to its main goals, I proposed we collapse it down to two tabs. The media navigation tab was simplified to the point it became an action button.

 

BEFORE AND AFTER

Baby Steps (left) compared to Clementine’s final structure

 

Final Design

Progress Reports

DESIGN GOALS

The progress report tab shows how your child’s development is going. Based on our design principles, I had these goals while making it:

  1. Action button always available—the action button will always do something, like adding more skill activities to the rotation.

  2. Meets parents at their need for detail—three levels of detail accommodate deep dives.

  3. Copy designed to be encouraging, never alarming—representing progress with words instead of numbers was found to be more humanizing and soothing.

  4. Represent progress without comparing to the average while showing buckets accurately—there are three status levels of child development but they are not equally sized. Letting parents know the relative concern space was found to be more concrete and helpful than obfuscating it.

 

PROGRESS FLOW

 

UX + VISUAL

The button has various functions based on actions it can take, according to the flowchart.

Visual evolution of the progress screen.

 

Milestone Activities

DESIGN GOALS

Informational
Cards have activity prompts for action and display how many milestones remain in child’s age bucket.

Celebratory
When a milestone is completed, the card suggests to document the moment with a picture! Also, cards have playful motion—wanted to get that right and create an app experience that echos the feeling of completing a milestone with your child.

 

CARDS IN ACTION

In collaboration with Faezah

 
 

Smart Modal

CHALLENGE

One aspect we hadn’t tackled head on was the issue of managing milestone goals as they relate to the age of your child. There are dozens and dozens, but only a few are relevant at any given age range. Same for activities.

What if the app could do it for you?

GOALS

  1. Bring attention to screening goals as they arise in a child's development

  2. Prompt activities to help improve development

  3. Prompt documentation and scrapbooking

  4. Drive regular use—something to do every day. Opening the app is always actionable.

MODAL FLOW

From left to right: shuffling suggested activities; completing activity; swiping up to automatically document activity.

 

Visual Design

Until about halfway through the design process, we hadn’t arrived at a visual style we thought suited our needs, which were for it to be:

  1. Approachable, but not childlike

  2. Aggressively simple

  3. Gender neutral

  4. Modern

I tried my hand at reworking the visual system, and while it was improved sharply by Maverick, I was able to set

  1. An icon language that emphasized friendliness and readability

  2. A value system that prized having few, but important actions per screen

  3. Our typographic direction (Circular Standard—I know)

  4. A more modern mobile UI design style

  5. A precedent for working between teammates with a unified visual language

VISUAL PIVOT GOALS

 

VISUAL PIVOT EXAMPLES

 

Looking Back

This was not only a test of my UI/UX learning but also in my leadership abilities. I was informally positioned as our team leader, and I wish I had done some things differently. For instance, I wish I had more strongly defined our roles for the project. Being close, we traded roles as we hit walls in design or when we wanted to try something new. I found it was a good learning experience for us to experience aspects of both visual and interaction design, but on reflection I would have siloed our roles for efficiency’s sake.

There’s always room for improvement, and I’m someone who believes a design is never “finished”, only “done”. But I’m honestly super proud of our team’s work on this project. Given our limited timeframe, I think we delivered a well fleshed out prototype.

If I were to go forward, I would like the opportunity to test the prototype and integrate feedback. I would also like to have fleshed out the usage and behavior of the global notification system—I think we only realized a small amount of the potential in a smart activity manager.

In all, this was an exciting project, and I was glad to be part of our team.

META