CalPal, calorie and nutrition tracker app

Department of Labor Redesign
May 10, 2021
MindfulBean
April 3, 2021
Show all

CalPal, calorie and nutrition tracker app

My Role:

UX/UI Designer

Tools:

Miro, Whimsical, Figma, GDrive, Zoom, StoryboardThat

Prototype:

Figma Prototype

Presentation:

Google Slides


The Problem

The health conscious daily coffee shop drinkers aren’t always aware of all the calories and nutrition in their drinks and they do not have easy means to customize drinks for healthier options.

Hypothesis

We believe that people between the ages of 35-50 need help to feel better about ordering their daily coffee drinks and that we can help them reduce guilt by enabling them to be more health conscious.

User Persona - Meet Kateryna

Kateryna loves coffee drinks and boost her energy with them throughout the day. She visits coffee shops multiple times daily and likes to try new drinks. She doesn't want to ingest too many calories through beverages since she is health conscious and has weight goals. She wants to be able to track her calorie and nutrition intake from her drinks.

Interviews and User Survey

I would really like to know the calories, especially whether they use caramel or OAT miLK. Caramel just has a lot of SUGAR and milk could have good amount of fat
User Interview Sticky Notes

User Survey with +60 Responses

  • 64% wished they could easily calculate nutrition of their drink
  • 73% care most about sugar content while 60% care about calorie intake
  • 81% prefers coffee drinks under 250 Cal while 57% wants under 100 Cal

Problem Statement

The health conscious daily coffee shop drinkers aren’t always aware of all the calories and nutrition in their drinks and do not have easy means to customize drinks for healthier options. We enhance the joy of ordering and receiving coffee shop drinks for users by helping them substitute ingredients with healthier options and track the calorie and nutrition intake in order to maintain their weight goals and have a healthier diet while enjoying their favorite drinks. Affinity Diagram Process

Storyboard and User Flow

The following images present the journey user would take, and based on the journey a typical user flow in the app. The user flow plays a crucial part in designing the product.
Complete User Flow

Prototypes and Usability Testing

With the Figma prototype users were able to:

  • Create a new account
  • Order a customized drink from a nearby cafe
  • Rate a recently ordered drink and share with a friend
  • Order a drink suggested by a friend
  • Learn about calorie & nutrition intake on a given week
Usability Testing Sticky Notes