Misfit App Story Card Redesign

In the Misfit app, users sync their wearable device and are shown detailed breakdowns of their data in the form of “story cards” on a timeline. After conducting user interviews and observing data points, I realized the Misfit story cards could be improved. I set out to update the design in a way that would allow users to better understand their daily activities, promote user engagement, and give the story cards a more elegant visual design to better fit the Misfit brand.

Reviewing the Old Card Design

After conducting user tests there were a number of common pain points for users I identified. The following shows the highest priorites issues we sought to fix.

#1 Difficulty Parsing Data
Many users had no trouble reading card titles or main values, but reading card details (steps, calories, etc) proved difficult. I took note of this and would be sure to improve contrast and layout for this information.

#2 Editing Cards Takes Too Long
Almost every user complained about editing story cards. Most users expressed that they were happy, even excited to specify what types of activity they had engaged in, but they felt this process took too long.

#3 Data Visualization
Users loved seeing graphical representation of their sleep and weight data. The activity card was lacking a graphical representation for data.

#4 Sleep Graph Color Issues
One of the most beloved features on Misfit products is our sleep tracking. Nearly every single person interviewed expressed their love for this feature, but the purple on purple color choices led to some users confusing the awake, light, and restful sleep labels.

#5 Lack of Interaction
Users loved the data visualizations so much, they wanted to interact with them. The card design did not allow for this, so I would look into a method of interaction for each card type in my wireframes.

Wireframes & Sketches

Since this project did not require any extensive site mapping, I spent a lot of time sketching and wireframing many concepts for the story card redesign. Below you can see a small selection of the many wireframes and sketches that were done for this project.

Starting With Sketches

Always one of my favorite parts of the design process, I filled a great number of pages in my sketch book thinking about how these new story cards might function. Even early on I wanted to make sure this new design would feel cohesive in every card in order to reduce the number of learned interactions for users.

  • gallery-image
  • gallery-image

Wireframing the Cards

I wanted these cards to fit into a square format that would go edge to edge on the screento maximize space for data. Using a bar graph format to represent “activity intensity” proved to be the easiest to understand for users.

Along with making editing cards easier for users, I also wanted to add in the ability for users to share their cards. This would make the most popular aspect of the Misfit app, the story cards, shareable on various social media, helping get the word out about Misfit.

Activity Card Iteration #1

Activity Card Iteration #2

Activity Card Iteration #3

Finalizing the Wireframes

After finalizing the card layouts, I wanted to get more specific with how users would interact with these cards. In the first example users can scrub through any data visualization on a card simply by pressing and hold down their finger. Then while holding down, simply move left or right to scrub through data.

This new UX pattern for editing cards helps users quickly edit past activities to create a more accurate picture of their day. The Misfit app uses a points system to aggregate activity into a more manageable daily goal, and being more specific with activity types can change the amount of points we give them based on our algorithms.

Visual & Motion Design

Once I got to the visual design and motion phase of this project one thing was clear, the background of cards with visual data needed to be white, with the color being used to highlight the data type, orange for activity, purple for sleep, etc. I also wanted to make sure that editing an activities felt delightful to use . Overall I wanted the visual aesthetic to match the Misfit brand with a minimal, elegant feeling.

Final Visual Design

In the final design for these story cards, I was able to come up with a format that could handle many different types of inputs between sleep, activity, weight, and food. By using color more sparingly, users can more easily parse their tracked data. I also improved readability, with identification of the card and the time it occurred being the first thing users see, then an interactive graphic to catch their eye, followed by the main data point, and finer details of card data.

Activity Card
The first thing users see is an activity icon or edit button. Users are presented with an intensity graph, that functions as segment of their daily intensity output, and the points earned are laid out closer to their related details, that ultimately help calculate the point value. This card can also be shared on social media.

Food Card
The food card is a small feature in the app, but in order to bring some sort of improvement for our users, I introduced the feature of assigning a meal type, and short description of what they ate.

Weight Card
The weight card received the same layout changes, with added interactivity. Users can observe their weight loss, or gain progress as it relates to the current week. Users simply tap on the data points to see what any previous day's entry was.

Sleep Card
The sleep card saw great increases in readability once the card’s background contrast was increased. This card can also be shared on social media.

Editing & Sharing Cards

When it comes to editing cards, I wanted to make sure it was a delightful experience for Misfit users. First, I knew I didn't want to add more steps by bring users to a brand new screen. Then I worked on a simple, but elegant motion design that would make it more fun to even tap the edit button.

I also wanted to make sure the card design would translate over into social media, allowing users to share their activity or sleep cards using native operating system sharing tools.

Final Thoughts

Ultimately, I was very pleased with what I was able to accomplish with these new story cards. After testing these new cards with users, I observed an increase in user engagement, and more users were starting to edit their activities, leading to better personal data.

This was also a great opportunity to further connect myself with Misfit users, with plenty of user interviews and testing both internal, and external. Some projects end up being larger in scope, but I enjoyed being able to focus in on one of the apps most important details with the story cards.

I’m currently looking for a full-time product design role, let's chat: