Nutri App for Automated Nutrition Value[Case Study]

Project Overview

The product: Nutri is a recipe nutrition calculator app developed for a luxury restaurant called Cape’s Banquet located in the tourist area of Cape Town. The app is designed as an alternative for the restaurant’s more expensive and time-consuming subscription service. The app supports multiple import options for existing users who are using other platforms.

hero image for nutri: the nutrition calculator app

Project duration: June 2021 to December 2021

The problem: Chefs and small restaurants lack the time to calculate the nutrition data of each new + existing recipe.

The goal: Design an app for the Cape’s Banquet Restaurant that allows users to easily add new recipes and get the nutrition data automatically; saving time and money.

My Role: UX designer designing an app for Cape’s Banquet from conception to delivery.

Responsibilities: Conducting interviews, paper, and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

User Research: Understanding the user

I conducted interviews and created empathy maps to understand the users I’m
designing for and their needs. A primary user group identified through research
was chefs and restaurant owners who didn’t have enough time to calculate nutrition value.

Every individual who participated in the research had a different method of nutrition calculation and I confirmed that the data varied wildly from one user to another.

Pain Points

  1. Time: Chefs and cooks are busy preparing meals and nutrition data is never a priority.
  2. Cost: Platforms for nutrition calculation are unreasonably expensive.
  3. Learning Curve: Platforms for nutrition calculation  usually have a high learning curve.

User Persona: Sanju

Problem statement: Sanju is a busy chef who needs a cost-effective nutrition calculator app because he wants to cut significant time and cost on his nutrition data work.

user persona for nutrition calculator app

User journey map

Mapping Sanju’s user journey revealed how helpful it would be for
users to have access to a dedicated Cape’s Banquet Nutrition Calculation app.

user journey dervided from user persona for nutrition calculator app

Starting the Design

Paper wireframes

Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the home screen, I prioritized an easy importing of recipes to help users save time and money. 

paper wireframe of nutrition calculator app

Digital wireframes

As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.

digital wireframe of nutrition calculator app

The primary goal is to generate a Nutrition Chart that provides multiple options according to user needs.

Low-fidelity Prototype

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was for the “Adding a New Recipe” manual flow. 
View the Nutri app low-fidelity prototype.

low fidelity prototype of nutrition calculator app

Usability study: Findings

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Round 1 Findings

  1. Users want a clearer instruction
  2. Users want bulk import
  3. Users want automated imports

Round 2 Findings

  1. There are too many import buttons which gets confusing
  2. Pricing option is not available for other customers

Refining the Design


My early designs had a lot of import options thrown at the user. After the usability study, they seemed to be a bit confused so I added a single import button and made the design more contextual.

before and after changes from findings of usability study 1

After the second round of usability studies, I noticed user concerns with vague pricing. To improve on this, I added more contextual buttons and added more descriptions to the paid tier.

before and after changes from findings of usability study 2

Here is how my final design looks like:

Nutri app showcase

High-fidelity prototype

high fidelity prototype of nutrition calculator app

View the Figma Link for hi-fi Prototype

Accessibility considerations


Used appropriate contrast and tested colors so that color-blind users can easily differentiate the UI elements.


Used detailed instruction text and typography hierarchy to help all users better understand the design.


Used icons to
help make
navigation easier.

Going forward: Takeaways & Next steps


The app saves time and cost by automating nutrition data calculation.

“I had to maintain an excel sheet to calculate all those nutrition datas just so I could save some money. I wouldn’t mind paying a small fee for this app since this solves all my concerns.”

Quote from peer feedback

What I Learned:

While designing the Nutri app, I learned that there are some biases I needed to overcome to make design inclusive. Usability studies and peer feedback influenced each iteration of the app’s designs.

Next Steps:

  1. Add more accessibility features so that we design for underrepresented groups which will result in a better experience for all.
  2. Add overlay tips for users who are not tech savvy since many of our user base falls in that category.
  3. Research more on the workflows of how are users actually use the app.

1 thought on “Nutri App for Automated Nutrition Value[Case Study]”

  1. Gгeetings, I do thіnk your web sіte may be haνing web browser compatibility issues.

    Whenever I take a look at your site in Safari, it looҝs
    fine hⲟᴡever, when ᧐pening in I.E., it’s got some overlapping issues.
    I just wanted to give yoᥙ a quick heads up! Besidеs thаt,
    great Ьlog!


Leave a Comment