EL

Redesigning Nutracheck APP:
Improving the ‘Eating Out’ Experience

Redesigning Nutracheck APP: Improving the ‘Eating Out’ Experience

Side Project- 2025

# UI Design

# UX Design

# UX Research

# Usability

# B2C

# App

🔗 Interactive Prototype

Team & Main Roles

Emily Lin (Product Designer)

Deliverables

Desk Research, Competitor Analysis, Data Analysis, UI Audit , User Testing, UIUX Design, Interactive Prototype

Timeline & Duration

21 Feb 2025 - 28 Feb 2025 (1 week)

Background

Nutracheck, a leading calorie tracking app with nearly 500,000 premium subscribers, faced challenges in helping users accurately estimate calories when dining at restaurants. Through research, competitor analysis, and UI audit, I identified pain points and redesigned the ‘Eating Out’ feature with a cleaner interface, improved navigation, and intuitive controls. The redesign led to faster task completion, higher usability scores, and better user satisfaction.

Design Process

Insights & Goals Alignment

Insights & Goals

Desk Research

During the ideation stage, we tried several methods to explore different design possibilities.

During the ideation stage, we tried several methods to explore different design possibilities.

➊

Online Ethnography

I conducted online ethnography to gather real user insights from the Nutracheck forum, Reddit, and app store reviews. These informed the personas, and journey map, which I used to identify design opportunities.

➋

UX Competitor Analysis

To understand UI/UX patterns that the potential users might be familiar with and used them as inspiration.

Insights

😕

Uncertainty in calorie estimation leads to disengagement

Users struggle to estimate calories, particularly at non-chain restaurants; they either switch between apps, guess, or skip logging that meal.

😕

Uncertainty in calorie estimation leads to disengagement

Users struggle to estimate calories, particularly at non-chain restaurants; they either switch between apps, guess, or skip logging that meal.

🫣

Many don’t really explore app features

Many users aren’t not familiar with technology and miss features. They might learn about them on forums rather than discover by themselves.

🫣

Many don’t really explore app features

Many users aren’t not familiar with technology and miss features. They might learn about them on forums rather than discover by themselves.

🕹

Wants the feeling of having control

Users want more control—both in tracking accuracy and personalising their experience.

🕹

Wants the feeling of having control

Users want more control—both in tracking accuracy and personalising their experience.

UX Goals for Redesign

Product Values + Business Needs + User Goals = UX Goals

Product Values + Business Needs + User Goals = UX Goals

🚀
Quick
& Easy to Use

⚡
Quick
& Easy

💪
Empower Users

💪
Empower Users

💎
Clean & Modern UI

💎
Clean & Modern UI

Analysing Current Experience

Analysing

Analysing

UI Audit

I evaluated the interfaces to identify UI enhancements, including:

7

findings related to usability heuristics

5

findings related to design guidelines

I prioritise them based on these:

What Works Well

Based on research insights + UI audit

01

Overall, it’s easy to use

(e.g. flexible ways like btn/gesture to go back)

02

Photos/icons help users to recognise

They help users to recognise rather than recall.

03

‘Eating out’ section is useful for users

And it’s something the competitors are lacking

04

The large UK-based database

As it made them feel included and it also helps with the accuracy.

Could Be Improved

Based on User research + User Journey Map + UI audit

Based on User research + User Journey Map + UI audit

🖼️
Visual Consistency

⚡
Quick
& Easy

🔍
Simplify ‘Finding’

🔍
Simplify ‘Finding’

🛎️
Non-chain Restaurants

🛎️
Non-chain Restaurants

Defining Solutions

Listing Use Cases

When shaping the UX, I ensured the redesign covered all use cases by mapping out different user scenarios. From past experience, I’d usually involve product managers here to review and catch any gaps.

Clarifying with Flowchart

Chain Restaurants (Use Case A&B)
Chain Restaurants (Use Case A&B)
Non-chain Restaurants (Use Case C&D)
Non-chain Restaurants (Use Case C&D)

Design Execution

Wireframes

Before jumping into high-fidelity designs, I built wireframes to quickly iterate on ideas and refine the flow without getting lost in UI details too soon.

Feedback for Iterations & Validation

Through my design process, I always tried to get feedback of my work. The task completion time, rate, and SUS score all improved after the redesign.

Having users vote for different versions of design

Having users vote for different versions of design

Testing completion time & rate with small tasks

Testing completion time & rate with small tasks

Testing with small tasks

Testing System Usability Scale (SUS)

Testing System Usability Scale (SUS)

Final Redesign

Prototypes Showcase

Flow 1 - Out at Chain Restaurants
Flow 2 - At Non-chain Restaurants
Flow 1 - Out at Chain Restaurants
Flow 2 - Out at Non-chain Restaurants
Flow 1 - At Chain Restaurants
Flow 2 - Out at Non-chain Restaurants

Before & After

cross-platform Experience:
the Use Cases

  • Unified icon style
    → Enhance consistency

  • Used less colours
    → Cleaner interface

  • Enhanced contrast
    → Easier navigation

  • Added more white space
    → Less cluttered

  • Combined 2 pages
    → Reduce steps

  • Added ‘Search’ feature
    → Enhance efficiency

  • Grouped the items
    → Reduce cognitive load

  • Improved visual hierarchy
    → Easier navigation

  • Added more white space
    → Less cluttered

  • Added ‘Add to Fav’ feature
    → More future engagement

  • Adjusted proximity to regroup related items (Gestalt principles)
    → Easier to understand

  • Added ‘Add to Fav’ feature
    → More future engagement

New UX Enhancements

cross-platform Experience:
the Use Cases

  • Integrate with ‘Manually added’ feature
    → allowing users to manually add local restaurants

  • Guide users to the next steps

  • Search & compare similar food in other restaurants more easily

← Previous

Next →

TOP

TOP

Background

Analysing

Defining

Execution

Final Redesign