Clementine is a mobile application based off of Baby Steps, a website started by UW HCDE's Julie Kientz in 2009. The app seeks to tackle the lack of resources for child developmental screening in a seemless and celebratory manner. The end result is a platform in which parents are empowered to take charge of their child's developmental growth through informative feedback and charming interactions. I was responsible for creative direction and designing the UI elements.

Clementine is a mobile application based off of Baby Steps, a website started by UW HCDE's Julie Kientz in 2009. The app seeks to tackle the lack of resources for child developmental screening in a seemless and celebratory manner. The end result is a platform in which parents are empowered to take charge of their child's developmental growth through informative feedback and charming interactions. I was responsible for creative direction and designing the UI elements.

Advised by:
Karen Cheng and Audrey Desjardins

Team:
Isaac Jaeger, Piper Loyd, and Faezah Shaharuddin

Completed:
Winter 2018

Clementine_Intro

A selection of screens from the prototype. Left to right: homepage; memory details; and milestone checks.

A selection of screens from the prototype. Left to right: homepage; memory details; and milestone checks.

Creating a mobile-first screening experience

In the United States, 17% of children have a developmental or behavioral disability. Screening, detection, and treatment of these developmental delays that can help ensure the best outcomes for a child.

The widespread use of smartphones presents an opportunity to increase screening rates — especially in underserved communities. Thus, we were tasked with creating a mobile app that simplifies the current experience while still providing parents with the tools to better engage with their child's health.

Creating a mobile-first screening experience

In the United States, 17% of children have a developmental or behavioral disability. Screening, detection, and treatment of these developmental delays that can help ensure the best outcomes for a child.

The widespread use of smartphones presents an opportunity to increase screening rates — especially in underserved communities. Thus, we were tasked with creating a mobile app that simplifies the current experience while still providing parents with the tools to better engage with their child's health.

Clementine_Website

The desktop experience is confusing and not optimized for mobile browsers.

The desktop experience is confusing and not optimized for mobile browsers.

Understanding the issues with current screening practices

We met with Julie to discuss difficulties with the current website, how the diagnostics were calculated, as well as any thoughts regarding the overall design that should be taken into account.

In order to further identify other design opportunities, we conducted card sorts, usability tests on several main task flows, and interviews to understand what parents might want from this service. We also made a map of the existing site in order to get a better feel for its structure. Taking this information into account, we began working backwards — listing out user needs and how might we statements.

Understanding the issues with current screening practices

We met with Julie to discuss difficulties with the current website, how the diagnostics were calculated, as well as any thoughts regarding the overall design that should be taken into account.

In order to further identify other design opportunities, we conducted card sorts, usability tests on several main task flows, and interviews to understand what parents might want from this service. We also made a map of the existing site in order to get a better feel for its structure. Taking this information into account, we began working backwards — listing out user needs and how might we statements.

Clementine_CardSort

One of our participants taking part in a card sort.

One of our participants taking part in a card sort.

Clementine_WebSitemap

The Baby Steps website is confusing with multiple ingress points into your child's profile.

The Baby Steps website is confusing with multiple ingress points into your child's profile.

Putting our prototype in front of users

User testing was one of the most pivotal points during our process. While it did validate several of our decisions regarding the simplification of the site's information architecture, there were still plenty of things that weren't hitting the mark. We had yet to achieve a balance of "clinical" and "bright and friendly," and several issues arose with how we were handling our navigation.

Putting our prototype in front of users

User testing was one of the most pivotal points during our process. While it did validate several of our decisions regarding the simplification of the site's information architecture, there were still plenty of things that weren't hitting the mark. We had yet to achieve a balance of "clinical" and "bright and friendly," and several issues arose with how we were handling our navigation.

Clementine_UserTest

A participant taking part in a usability test.

A participant taking part in a usability test.

Clementine_Progress

The visual evolution of the timeline; from wireframes to near final designs.

The visual evolution of the timeline; from wireframes to near final designs.

Clementine_AppSitemap

The finalized information architecture of our app. Created by Isaac Jaeger.

The finalized information architecture of our app. Created by Isaac Jaeger.

Selected user flows

These flows showcase some of the app's central features.

Selected user flows

These flows showcase some of the app's central features.

Clementine_SearchFlow_annotated

Searching for a memory.

Searching for a memory.

Clementine_MemoryFlow_annotated

Adding a memory to your child's timeline.

Adding a memory to your child's timeline.

Clementine_MilestoneFlow_annotated

Completing a milestone with your child.

Completing a milestone with your child.

Reflection

Like most app design projects, our prototype still needs to be fine-tuned. Nonetheless, Clementine was an immense learning experience. I had previously never designed anything to this extent for a mobile platform, so it was a valuable opportunity to practice refining the nuances of the different UI elements as well as my user testing skills — going the extra step to validate our decisions was vital for the success of our final prototype. I'm grateful to have worked with such a hardworking team on tackling such an important issue.

Reflection

Like most app design projects, our prototype still needs to be fine-tuned. Nonetheless, Clementine was an immense learning experience. I had previously never designed anything to this extent for a mobile platform, so it was a valuable opportunity to practice refining the nuances of the different UI elements as well as my user testing skills — going the extra step to validate our decisions was vital for the success of our final prototype. I'm grateful to have worked with such a hardworking team on tackling such an important issue.

Clementine_SketchScreens