UI Case Study

Redesigning KalorieTrak:

Tracking what you eat should be quick, simple, and motivating.

ROLE

UX/UI Designer

EXPERTISE

UX/UI Design

YEAR

2024

KalorieTrak

KalorieTrak

KalorieTrak

KalorieTrak

KalorieTrak

KalorieTrak

High-Fidelity

Key Takeaways

Final

  • I adjusted font sizes to better organize the interface.

  • I removed elements that might confuse users to make the interface cleaner and easier to understand.

  • I learned to help users identify important information by using icons.

  • I learned that including a diary and a place to add fitness activities in the dashboard would be convenient for users.

  • I learned that providing space for users to display their daily goals on the home page would be helpful.

  • Visual icons provide a quick overview of recent footage, water intake, and exercises, which can help reduce user confusion.

Key Takeaways

Key Takeaways

High-Fidelity

Final

  • I learned that including a diary and a place to add fitness activities in the dashboard would be convenient for users.

  • I learned that providing space for users to display their daily goals on the home page would be helpful.

  • Visual icons provide a quick overview of recent footage, water intake, and exercises, which can help reduce user confusion.

  • How can I design features that address the specific goals related to weight?

  • People care most about simple tracking. How can I make it as simple as possible to track calories?

  • How can I provide support for different kinds of goals? I will include a section for adding the food that the user ate.

Key Takeaways

PERSONAS 3

Cancer took a lot out of Karen, but she’s back to her usual personality and wants to start dating, but She’s lost a lot of weight and feels like she needs to gain a little more weight to be as beautiful as she can be. She loves spending her weekends hiking around Auburn and tending to her garden, which she finds both therapeutic and rewarding.


Karen Wight

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Key Takeaways

Johnny Smith

Jo Bobston

28

Accountant

New York

Married

51

Telemarketer

Chicago Illinois

Diabetic

3 kids

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Karen Wight

User Pain Points

Orignal interface:

The original KalorieTrak home screen presented users with too much information at once. The screen was a mix of calorie progress, meal lists, weight graphs, and exercise summaries. This lack of clear hierarchy made it challenging for users to quickly find what they needed, particularly when logging a meal, which is the most frequent action. The cluttered layout led to user frustration and inefficient app usage.

To make sure our designs truly solve user problems, we'll create user personas. These personas represent our target audience and will guide our design process, ensuring we make every decision with a simpler, smoother experience in mind.

Simplify the screen: Make the home screen less cluttered and easier to look at.

Focus on food tracking: Make it easy and fast for users to add their meals. This is the main job of the screen.

Move other things: Put features like weight tracking and exercise logs in a less important spot. They shouldn't be the first thing a user sees.

Orignal interface:

User Pain Points

Overview

For many KalorieTrak users, the app is a daily tool to stay on track with their health and weight goals. By making the experience clearer and more focused, it can better support users in forming lasting healthy habits.

KalorieTrak is an app designed for nutrition and calorie tracking. With 200 million users, it is loved for helping people achieve their health and weight-loss goals. However, user feedback has highlighted a cluttered and confusing home screen.

Therefore, I am working to simplify the layout, prioritizing food tracking as the main focus of the home screen while reducing emphasis on everything else.

Current Experience

Research

Design

User Flow

Usability Testing

Wireframes prototyping

Personas

Project Goals

UI Case Study

UI Case Study

Redesigning KalorieTrak:

Tracking what you eat should be quick, simple, and motivating.

ROLE

UX/UI Designer

EXPERTISE

UX/UI Design

YEAR

2024

51

Telemarketer

Chicago Illinois

Diabetic

3 kids

28

Accountant

New York

Married

Johnny Smith

Jo Bobston

To make sure our designs truly solve user problems, we'll create user personas. These personas represent our target audience and will guide our design process, ensuring we make every decision with a simpler, smoother experience in mind.

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

  • I adjusted font sizes to better organize the interface.

  • I removed elements that might confuse users to make the interface cleaner and easier to understand.

  • I learned to help users identify important information by using icons.

High-Fidelity

User Pain Points

Key Takeaways

Karen Wight

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Johnny Smith

Jo Bobston

28

Accountant

New York

Married

Key Takeaways

Key Takeaways

Usability Testing

Wireframes prototyping

High-Fidelity

Key Takeaways

Final

  • I adjusted font sizes to better organize the interface.

  • I removed elements that might confuse users to make the interface cleaner and easier to understand.

  • I learned to help users identify important information by using icons.

  • I learned that including a diary and a place to add fitness activities in the dashboard would be convenient for users.

  • I learned that providing space for users to display their daily goals on the home page would be helpful.

  • Visual icons provide a quick overview of recent footage, water intake, and exercises, which can help reduce user confusion.

Key Takeaways

Key Takeaways

High-Fidelity

Final

  • I learned that including a diary and a place to add fitness activities in the dashboard would be convenient for users.

  • I learned that providing space for users to display their daily goals on the home page would be helpful.

  • Visual icons provide a quick overview of recent footage, water intake, and exercises, which can help reduce user confusion.

  • How can I design features that address the specific goals related to weight?

  • People care most about simple tracking. How can I make it as simple as possible to track calories?

  • How can I provide support for different kinds of goals? I will include a section for adding the food that the user ate.

Key Takeaways

PERSONAS 3

Cancer took a lot out of Karen, but she’s back to her usual personality and wants to start dating, but She’s lost a lot of weight and feels like she needs to gain a little more weight to be as beautiful as she can be. She loves spending her weekends hiking around Auburn and tending to her garden, which she finds both therapeutic and rewarding.


Karen Wight

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Key Takeaways

Johnny Smith

Jo Bobston

28

Accountant

New York

Married

51

Telemarketer

Chicago Illinois

Diabetic

3 kids

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Karen Wight

User Pain Points

Orignal interface:

The original KalorieTrak home screen presented users with too much information at once. The screen was a mix of calorie progress, meal lists, weight graphs, and exercise summaries. This lack of clear hierarchy made it challenging for users to quickly find what they needed, particularly when logging a meal, which is the most frequent action. The cluttered layout led to user frustration and inefficient app usage.

To make sure our designs truly solve user problems, we'll create user personas. These personas represent our target audience and will guide our design process, ensuring we make every decision with a simpler, smoother experience in mind.

Simplify the screen: Make the home screen less cluttered and easier to look at.

Focus on food tracking: Make it easy and fast for users to add their meals. This is the main job of the screen.

Move other things: Put features like weight tracking and exercise logs in a less important spot. They shouldn't be the first thing a user sees.

Orignal interface:

User Pain Points

Overview

For many KalorieTrak users, the app is a daily tool to stay on track with their health and weight goals. By making the experience clearer and more focused, it can better support users in forming lasting healthy habits.

KalorieTrak is an app designed for nutrition and calorie tracking. With 200 million users, it is loved for helping people achieve their health and weight-loss goals. However, user feedback has highlighted a cluttered and confusing home screen.

Therefore, I am working to simplify the layout, prioritizing food tracking as the main focus of the home screen while reducing emphasis on everything else.

Current Experience

Research

Design

User Flow

Usability Testing

Wireframes prototyping

Personas

Project Goals

UI Case Study

UI Case Study

Redesigning KalorieTrak:

Tracking what you eat should be quick, simple, and motivating.

ROLE

UX/UI Designer

EXPERTISE

UX/UI Design

YEAR

2024

51

Telemarketer

Chicago Illinois

Diabetic

3 kids

28

Accountant

New York

Married

Johnny Smith

Jo Bobston

To make sure our designs truly solve user problems, we'll create user personas. These personas represent our target audience and will guide our design process, ensuring we make every decision with a simpler, smoother experience in mind.

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

  • I adjusted font sizes to better organize the interface.

  • I removed elements that might confuse users to make the interface cleaner and easier to understand.

  • I learned to help users identify important information by using icons.

High-Fidelity

User Pain Points

Key Takeaways

Karen Wight

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Johnny Smith

Jo Bobston

28

Accountant

New York

Married

Key Takeaways

Key Takeaways

Usability Testing

Wireframes prototyping

High-Fidelity

Key Takeaways

Final

  • I adjusted font sizes to better organize the interface.

  • I removed elements that might confuse users to make the interface cleaner and easier to understand.

  • I learned to help users identify important information by using icons.

  • I learned that including a diary and a place to add fitness activities in the dashboard would be convenient for users.

  • I learned that providing space for users to display their daily goals on the home page would be helpful.

  • Visual icons provide a quick overview of recent footage, water intake, and exercises, which can help reduce user confusion.

Key Takeaways

Key Takeaways

High-Fidelity

Final

  • I learned that including a diary and a place to add fitness activities in the dashboard would be convenient for users.

  • I learned that providing space for users to display their daily goals on the home page would be helpful.

  • Visual icons provide a quick overview of recent footage, water intake, and exercises, which can help reduce user confusion.

  • How can I design features that address the specific goals related to weight?

  • People care most about simple tracking. How can I make it as simple as possible to track calories?

  • How can I provide support for different kinds of goals? I will include a section for adding the food that the user ate.

Key Takeaways

PERSONAS 3

Cancer took a lot out of Karen, but she’s back to her usual personality and wants to start dating, but She’s lost a lot of weight and feels like she needs to gain a little more weight to be as beautiful as she can be. She loves spending her weekends hiking around Auburn and tending to her garden, which she finds both therapeutic and rewarding.


Karen Wight

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Key Takeaways

Johnny Smith

Jo Bobston

28

Accountant

New York

Married

51

Telemarketer

Chicago Illinois

Diabetic

3 kids

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Karen Wight

User Pain Points

Orignal interface:

The original KalorieTrak home screen presented users with too much information at once. The screen was a mix of calorie progress, meal lists, weight graphs, and exercise summaries. This lack of clear hierarchy made it challenging for users to quickly find what they needed, particularly when logging a meal, which is the most frequent action. The cluttered layout led to user frustration and inefficient app usage.

To make sure our designs truly solve user problems, we'll create user personas. These personas represent our target audience and will guide our design process, ensuring we make every decision with a simpler, smoother experience in mind.

Simplify the screen: Make the home screen less cluttered and easier to look at.

Focus on food tracking: Make it easy and fast for users to add their meals. This is the main job of the screen.

Move other things: Put features like weight tracking and exercise logs in a less important spot. They shouldn't be the first thing a user sees.

Orignal interface:

User Pain Points

Overview

For many KalorieTrak users, the app is a daily tool to stay on track with their health and weight goals. By making the experience clearer and more focused, it can better support users in forming lasting healthy habits.

KalorieTrak is an app designed for nutrition and calorie tracking. With 200 million users, it is loved for helping people achieve their health and weight-loss goals. However, user feedback has highlighted a cluttered and confusing home screen.

Therefore, I am working to simplify the layout, prioritizing food tracking as the main focus of the home screen while reducing emphasis on everything else.

Current Experience

Research

Design

User Flow

Usability Testing

Wireframes prototyping

Personas

Project Goals

UI Case Study

UI Case Study

Redesigning KalorieTrak:

Tracking what you eat should be quick, simple, and motivating.

ROLE

UX/UI Designer

EXPERTISE

UX/UI Design

YEAR

2024

51

Telemarketer

Chicago Illinois

Diabetic

3 kids

28

Accountant

New York

Married

Johnny Smith

Jo Bobston

To make sure our designs truly solve user problems, we'll create user personas. These personas represent our target audience and will guide our design process, ensuring we make every decision with a simpler, smoother experience in mind.

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

  • I adjusted font sizes to better organize the interface.

  • I removed elements that might confuse users to make the interface cleaner and easier to understand.

  • I learned to help users identify important information by using icons.

High-Fidelity

User Pain Points

Key Takeaways

Karen Wight

43

Hospital CEO

Auburn, CA

Cancer survivor

Single

Johnny Smith

Jo Bobston

28

Accountant

New York

Married

Key Takeaways

Key Takeaways

Usability Testing

Wireframes prototyping

Karen Wight

Create a free website with Framer, the website builder loved by startups, designers and agencies.