Bite Balance - Calorie tracking app
A calorie-tracking app designed around behavioral psychology — not willpower. Built on Nir Eyal's Hooked model to form lasting habits through camera logging, smart nudges, and a reward system that actually keeps students coming back.
Food tracking fails students.
Not the other way around.
Most calorie-tracking apps are built for fitness enthusiasts — not for students juggling classes, part-time jobs, and daily stress. They're complex, time-consuming, and emotionally punishing. Users burn out within weeks.
Bite Balance was designed from the ground up around how busy students actually eat — quickly, inconsistently, and without the mental bandwidth for detailed nutrition logging. The goal wasn't to build a better tracking app. It was to build one that students would actually keep using.
The design is grounded in Nir Eyal's Hooked model — a four-phase behavioral framework (Trigger → Action → Variable Reward → Investment) used to build products that form genuine habits rather than just capturing short-term attention.
The Scale of the Problem
of users completed all key tasks — logging food, collecting rewards, checking progress — without any help during testing
major usability blockers identified and resolved through iterative testing before final delivery.
users said daily reminder nudges helped them log meals more consistently throughout the day
02 Constraints
Two problems deeper than the surface design.
Research revealed that the barriers to consistent food tracking weren't technical — they were cognitive and emotional. These two constraints shaped every design decision that followed.
COGNITIVE BARRIER
Low Clarity in Food Information
Students struggled to understand nutrition labels and serving sizes — and most apps made this worse by surfacing overwhelming nutritional data upfront. This confusion reduced both trust in the app and accuracy in tracking, creating a cycle where inaccurate logs felt pointless. The design had to abstract complexity without hiding it.
EMOTIONAL BARRIER
Emotional Friction & Judgment
Many users described feeling "judged" by calorie-tracking apps — particularly when they went over their daily goal. The negative framing of existing apps (red warnings, guilt-inducing notifications) caused more harm than motivation. The design had to reframe tracking as neutral observation, not performance grading. No guilt. No shame. Just data.
Built on the Hooked model — not just good intentions.
The entire product structure maps to Nir Eyal's four-phase habit loop. Each phase has a direct design implementation — making the behavioral framework visible in the product, not just referenced in the brief.
The Hooked Model explains why some products become habits and others get deleted after a week. It's not about features — it's about engineering the right sequence: an external trigger pulls users in, a frictionless action keeps them there, a variable reward keeps them curious, and an investment makes them feel ownership. Bite Balance was designed to run this loop daily.
TRIGGER
The nudge that starts the loop
External triggers (smart meal-time notifications) and internal triggers (the feeling of not knowing what you ate) prompt users to open the app. Notifications are timed to meal patterns not clock time.
ACTION
The simplest possible log
The core action — logging food — had to be as close to zero effort as possible. Camera-based logging with instant AI recognition removes the barrier of searching and manually entering every item.
VARIABLE REWARD
Unpredictable enough to keep coming back
Fixed rewards stop working. Variable rewards — sometimes you get a streak bonus, sometimes a new badge, sometimes a weekly insight — create the same curiosity loop that makes social media sticky, applied to health goals.
INVESTMENT
Data that belongs to the user
The more users log, the more accurate their personal calorie baselines become. Their history, their trends, their streaks — all of this creates a sense of ownership that makes leaving the app feel like a loss.
04 Design Process
From research to prototype — step by step.
01. RESEARCH
Understand the real barriers to tracking
Started with secondary research into nutrition tracking behavior among college students — then conducted user interviews to validate and deepen those findings. Key insight: students weren't failing because they lacked motivation. They were failing because existing apps required too much cognitive effort at the exact moments when they had the least mental bandwidth (rushing between classes, eating at odd hours).
Affinity Mapping
Insight: The two core barriers were cognitive (confusing nutrition data) and emotional (feeling judged for going over calories).
02. FRAMEWORK SELECTION
Map the Hooked model to real features
Before wireframing, mapped the product's intended behavior to Nir Eyal's Hooked model — identifying which features would serve as Triggers, Actions, Rewards, and Investments. This ensured that every feature had a behavioral purpose, not just a functional one. Features without a role in the habit loop were cut from scope.
MoSCoW Prioritization
Output: A feature map with each feature assigned to a phase in the habit loop — 12 features scoped, 7 built into MVP.
03. INFORMATION ARCHITECTURE
Design the flow for minimal friction
Built user flows for the four core journeys: onboarding, daily logging, reward collection, and progress review. Each flow was optimized for the least number of taps — with camera logging as the primary path and manual search as the fallback. Navigation was designed around the three things users do daily (log, check progress, collect rewards) rather than around feature categories.
Navigation Architecture
Output: 4 primary user flows. Daily logging reduced to 3 taps from the home screen.
04. WIREFRAME & ITERATION
Build, test, rebuild — three rounds
Created lo-fi wireframes for all core screens, ran two rounds of quick guerrilla testing with students, and iterated based on findings before moving to hi-fi. Key changes: repositioned the scan button (was buried in the nav, moved to center primary CTA), simplified the daily summary view (was data-dense, reduced to 3 key metrics), and reframed over-goal messaging from red warning to neutral observation.
3 Iteration Rounds
3 rounds of wireframe iteration. Scan button repositioning alone reduced logging time by 30%.
05. VISUAL DESIGN & PROTOTYPE
A UI that feels supportive, not clinical
Built the full high-fidelity UI with a teal-and-warm-white color system — deliberately avoiding red (stress/danger) and cold blue (clinical/sterile). Typography was kept generous and readable for quick scanning. The reward system used warm amber accents to signal celebration without intensity. Delivered a fully interactive Figma prototype for usability testing.
Full interactive prototype delivered. Teal + warm white system scored highest on "approachability" in post-test feedback.
05 Usability Testing
Tested with real users.
Four findings that shaped the final design.
Moderated usability testing with students who matched the target profile — busy, health-conscious, and frustrated with existing tracking apps. Participants completed 5 core tasks while thinking aloud.
92%
Daily reminders drove consistency
+30%
Faster logging after scan button fix
96%
Ease-of-use rating
06 Key Iterations
Three usability blockers - found and fixed.
01. HIGH SEVERITY · CORE FLOW
Scan button was buried in the nav
The camera logging button — the most important action in the app — was placed as a small icon in the bottom navigation bar. Users missed it entirely and defaulted to the slower manual search flow, defeating the core value proposition of effortless logging.
Fix: Moved the scan button to a large, center-bottom floating CTA — the same position pattern as Instagram's camera and TikTok's compose button. Instantly recognizable, impossible to miss.
+30%
faster logging
02. HIGH SEVERITY · EMOTIONAL DESIGN
Red warning when calories exceeded
When users went over their daily calorie goal, the app displayed a red banner with warning iconography. In testing, this triggered the exact emotional response identified in research — shame, guilt, and the urge to close the app. Several participants said it reminded them of "failing a test."
Fix: Replaced red with a soft amber neutral tone. Changed copy from "Over your goal" to "You went a little over today — here's tomorrow's plan." Reframed the event from failure to information.
96%
ease rating
02. MEDIUM SEVERITY · ONBOARDING
Goal-setting felt overwhelming on day one
The onboarding flow asked users to set calorie goals, dietary preferences, allergies, and meal schedules all before their first log. Several participants abandoned at this step, saying it felt "like homework." The cognitive overhead on day one was too high.
Fix: Progressive disclosure — onboarding now only asks for name and one goal. All other preferences are surfaced gradually over the first week as optional enhancements, with "I'll decide later" options throughout.
92%
completion rate
06 Learnings
What this project taught me.
01
Behavioral frameworks make design decisions easier
Mapping every feature to a phase in the Hooked model removed a lot of the "but why does this exist?" discussions. When a feature couldn't answer that question, it got cut. The framework gave the design a spine.
02
Emotional friction is harder to see than usability friction
The red warning issue wasn't visible in a heuristic review — it only emerged through watching real users react in real time. Testing with people who matched the emotional context of the problem (busy, stressed students) was the only way to catch it.
03
Test before building
hi-fi
The scan button fix was discovered during lo-fi wireframe testing, not after hi-fi. Fixing it at the wireframe stage cost 30 minutes. Fixing it in hi-fi would have cost days. The earlier you test, the cheaper the insight.