THE CHALLENGE

Ava Women, a fertility tracker, has a basic calendaring and activity logging interface and wanted an interface that is more updated, tracks more variables, and is in line with other fertility trackers on the market.

 

APPROACH & KEY INSIGHTS

The client gave us a few design specs and we went ahead and carried out extensive competitive analyses, informal user interviews and iterated over usability studies which revealed that people liked tracking interfaces that:

 

  • Provided an uncluttered calendar interface that showed at a glance when is her expected period and ovulation time frame

  • Have new interaction design

  • Many logging variables

  • Easily navigable

THE SOLUTION

We designed the user flows, interaction design, and low and medium fidelity wireframes for the calendar interface and the logging interface. We also sketched an alternative calendar interface that allows users to see trends over time.

CONTEXT & CHALLENGES

Ava is the first fertility tracker with a wearable device. 

 

What they needed

  • Redesign of the main calendar

  • Design and content recommendations for a "logging screen" which logs the user's physical and emotional states

Original Interface  The 3 screens available in the app. The most common feedback was that the calendar was difficult to read and understand.

Problem Statement

How might we help women predict their peak conception and menstrual periods?

 

 

DISCOVER

Exploration of the current site included

  • A competitive analysis of other calendaring and logging apps

  • Informal interviews even though the client disagreed, we believed speaking with potential users was important

 

Our research was guided by interview and user goals:

 

User Goals

  • Quickly determine when their next period/ovulation period starts

  • Quickly log their symptoms 

 

Interview Goals 

  • Determine the information that is the most valuable to the person 

  • Explore what information do they require on the calendar layout

  • Understand which  logging items are the most important to the user

  • Explore the popular interactions of inputting logging data

COMPETITIVE ANALYSIS

We reviewed 8 fertility trackers to evaluate their user flows, calendaring layout and interaction, and their logging screens. and variables. We gained a deep understanding of how the logging items were being recorded and what were the most popular logging items.

INFORMAL INTERVIEWS

While we were dissuaded from performing interviews, we felt it useful to gauge how women might use fertility trackers (and other trackers) and what primary features they expect to see on a fertility tracker app.

 

SYNTHESIS

Our findings included:

 

Interface

  • Make it simple to understand

  • Users love standard icons (heart = love, etc)

  • Users hate icons that they need to learn

 

Calendar

  • Women cared most about when they are expected to be at peak fertility

  • Women cared secondarily about predicting their period

 

Logging 

We found these to be the most common and desired metrics to include in the app:

  • Basal Temperature

  • Intercourse (yes/no)

  • Medications (what/how much)

  • Ovulation Test (positive/negative/didn't take)

  • Period (yes/no)

  • Pregnancy Tests (positive/negative/didn't take)

  • Symptoms (physical or emotional)

  • Notes (text field)

Users indicated that they were intimidated by logging interfaces with too text-based, so needed to design to reduce cognitive load.

 

 

Our research led us to determine which logging features to include

  Primary persona: Rebecca, the busy lady trying to conceive. 

IDEATION & ITERATION

  Sketches galore > selection > wireframe > usability testing > iterate

 

We brainstormed and sketched out various layouts. Ava picked from our top sketches which they favored and from there we began our low-fidelity wireframing and usability testing. 

 

Our usability tests focused on aesthetics and clarity of the information being presented in the calendar and logging screen. Could users intuitively understand the calendar? Were users able to easily find items on the calendar and logging screen?

 

Learnings from the multiple rounds of usability tests include:

  • Users wanted to clearly see a graphical representation of their ovulation cycle. They wanted to see exactly when were their peak ovulation days (in addition to their general ovulation days). 

  • Users wanted minimal icons on the calendar. They felt more than 3 icons tested their cognitive load.

  • Universal icons and standards work best. Users don’t want to have to needlessly memorize Ava-specific notations or icons.  

Sketches

We each sketched out 5-10 different designs for the different screens before picking the best idea to pursue.

 

Evolution of the logging screen

We started with preference testing on multiple low fidelity wireframes. Users preferred the middle two layouts but liked that the layout at the far right "hid" inactive options.

Accordions were implemented to hide logging options to reduce cognitive load.

The coloration of the wireframe at this early stage was a request from the client.

Changed:

  • Sliding interactions for logging for more interest (by client request)

  • left-right scrolling capability to the top weekly calendar for users to view their logging history

  • A "today" button for quick reorientation

Changed:

  • Added icons with the text for logging items. 

  • Provided feedback to users on items logged (colored in the icon once it has been logged)

  • Indicated the current day if the user scrolls to a different day of the week.

Evolution of the calendar

We started by visualizing how ovulation and period data may be displayed on a calendar using low fidelity wireframes. 

We tried visualizing the calendar in creative ways apart from the standard format but found it to be counterproductive. We eventually settled on the standard format and tested for two primary areas: 

  • The data for the day below the calendar

  • The buttons above the calendar

 

We found the left-right screen split format for the data below the calendar the most preferred (shown below).

 

 

Once we determined the general layout of the data, we performed a multivariate test of representing ovulation, periods, and peak fertility. The objective was simple: how quickly could people understand the information being shown to them.

 

The "Icons" version below performed the poorest as testers found it annoying to learn unfamiliar icons. The "bars" performed the best as users found it to be the quickest to learn. 

 

The client also requested for us to place a way to access a potential monthly "trends" screen. We used a toggle button to fill this need.

SOLUTION

We made our final design decisions based on the iterative usability testing. Some findings drove our design decisions. 

 

Calendar Design features

  • An upwardly scrolling calendar with visible full months.

  • Reduced number of icons from seven to four for less cognitive load.

  • Highlighted days most important to the users (projected menstrual and  ovulation days).

  • If needed, we gave Ava the ideal location for a legend, but we reiterated that less is more (fewer icons and variables) for best user experience of use. 

Logging Screen

After trying a number of layouts, we came up with some features:

  • A weekly top left/right continuous scrolling calendar. This feature was a delighter and made for easy navigation.

  • An accordion card-layout of loggable items. This allowed users to quickly access items of interest without becoming too overwhelmed with all the data inputs. 

  • The use of icons and words for the loggable items (vs only text).

  • To give users feedback on if they have missed any of the eight of the logging items, the logging icon fills with purple and a checkmark appears once data has been entered for the logging item. 

  • Logging items are selected with a single tap and deselected with another tap.

 

Additional suggestions to our client

  • Replace or add icons in the logging options

  • Keep logging interactions consistent otherwise, use of multiple interactions adds to  cognitive load

 

Final product with visual treatment 

LEARNINGS

Design 

  • Users are repelled by interfaces that are radically different from accepted standards. Good UX should be invisible and information-dense

 

Client communication

  • Set expectations on the first day. We are UX researchers and designers and research is a key driver of our designs.  

  • Be thorough in determining what the client wants. Do they already have an image in their mind about what the product should look like? Even if they say they don’t they probably already have biases and preconceived notions that can be sussed out. 

  • Prepare to state how important research is to the design process. Lack of research means a lack of insight into the core audience which leads to a poorer product-market fit.

  • Instituting feedback policies with the client to ensure the needs of both parties are met.