Ryan Smith

Movement Tracker

As your due date approaches there's so much to do. Build a crib, buy a car seat, pick a baby name – and on and on. Circle helps by providing tools for moms and moms-to-be. The movement tracker is a way for moms in their third trimester to check baby movements.

A hand holding an iPhone with the updated movement tracker empty state screen.

The updated design for movement tracker empty state.

Project Goal

Our existing movement tracker was a little confusing, as I discovered during a usability study. There was too much going on and not enough emphasis on primary actions.

We wanted an update that was streamlined and easy to use.

Design Solutions – Android

  1. Detail Screen: First run state encourages you to get started and provides informative article through a card to learn more about tracking movements.
  2. Tracking Screen: Focused on timing and tracking baby movements with clear controls.
  3. Tracking Done: Success message when you reach ten kicks.
  4. Detail Screen: Good data with history of days you completed tracking.

Design Solutions – iOS

  1. Detail Screen: First run state encourages you to get started and provides informative article through a card to learn more about tracking movements.
  2. Tracking Screen: Focused on timing and tracking baby movements with clear controls.
  3. Tracking Done: Success message when you reach ten kicks.
  4. Detail Screen: Good data with history of days you completed tracking.

Original Design

The previous movement tracker.

My Role

At Providence St. Joseph Health, I was a design team of one on the Circle app. For this project I performed user research, interaction design, visual design, and working with developers on implementation. I worked daily with our product manager, leadership, engineering team, and testers.

Getting Started

I used a quick framework to help me understand the problem space and make certain I'm thinking about the product goals, the user, and the different ways we can fulfill a user's need.

I also shared this framework with the product owner and our developers to make certain that we were on the same page.

Framework from Solving Product Design Exercises

Framework from Solving Product Design Exercises.

Storyboard

Next, I mapped out the user's journey by creating a storyboard. Storyboarding helps to ensure that I'm thinking about the user's journey holistically and identifying points where the app can help them. This really helped me understand what interactions the feature need to support.

Tasks

Then I generated a set of tasks the user should be able to complete in order to be successful:

Iteration

Exploring and iterating through multiple levels of fidelity, I designed flows that would allow users to complete tasks to reach their goals. I strived to explore multiple options, in an effort to find the best solution.

As part of the exploration I worked to simplify the flows as much as possible in order for it to be clear and intuitive. I also made certain that all states and edge cases were designed.

Whiteboard sketches for the movement tracker.

Whiteboard sketching for the movement tracker.

Wireframes

I created low-fi grayscale wireframes to refine the layout, hierarchy, and controls of the flows. I also built a simple prototype to help communicate the flow to the team.

Lo-fi wireframes

Wireframes as user flows

Visual Design

To further refine the hierarchy and clarity, I created visual designs using our Swedish brand.

Visual design

Implementation

I worked closely with the engineering teams to implement and further refine the designs. Developers have so much knowledge and I enjoy working closely with them to solve problems and rapidly build products.

I created a document with details on the interaction as well as styles. I strive to foster a relationship with the development team where they can show me functionality as they complete it, giving us an opportunity work through issues together and make sure we have the best implementation for the user.

Throughout the process I worked daily with the development team. When possible, reviewing work as it happens is much more efficient than filling tickets and creating more documentation to indicate changes.

At Circle, I was always available for questions, I encouraged developers to bring me builds after they had implemented a screen to get real time feedback. This was also great for working together to solve unanticipated problems. I also regularly reviewed builds through Xcode.

Interaction and style guide for development and QA. Interaction and style guide for development and QA.

Interaction and style guide for development and QA.

Recap

This update provided a much clearer experience for our busy moms-to-be and set a foundation to align our other trackers for greater consistency and ease of use.

Screenshot of the original movement tracker screen next to two screens of the updated movement tracker.