Email Me

Ryan Smith / Product Designer

Movement Tracker

Tools to help mom know her baby is healthy

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.

The updated design for movement tracker empty state and tracking timer mode.

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.

My Role

At Circle I was a design team of one. 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

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 sketching

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.

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.

Thanks for reading!