FoodAI: From a basic
scanner to a nutrition
companion.

01 — Context

A reskin request that became a full redesign.

FoodAI is a mobile app that uses AI to scan meals and break down their nutritional content like protein, carbs, and fat which then generates reports to help users track their intake over time.

When I joined the project at Bitskraft, the brief was a single line: "adjust the fonts and colors." But five minutes with the existing app told me something else was going on. The product had been built by developers with no UX input. It had screens. It didn't have a user journey.

I made the case for a broader redesign and got sign off to move forward. The constraint stayed: I had to work within the existing technical architecture and stay close to the developer team throughout. That was fine. Constraints make you sharper.

02 — Problems Identified

Three structural problems, not visual ones.

Before touching Figma, I audited the existing app across navigation, user flow, and information hierarchy. What I found wasn't a styling problem. It was a product problem.

03 — Research & Process

Research first. Wireframes second. Pixels last.

I gathered feedback from potential users across three areas: usability, visual clarity, and navigation flow. The finding that kept coming up: users wanted nutrition tracking to feel like a daily habit, not a utility they had to dig into.

I built wireframes to explore new layouts and user flows before any visual work started. Getting the structure right on paper meant catching flow problems early, before they became expensive to fix in Figma.

What research actually told me

• Users expected to see their daily nutritional progress the moment they opened the app, not after navigating somewhere
• The distinction between "food I ate" and "food I'm logging right now" was mentally important to users, they wanted to capture in the moment, separate from reviewing history
• First time users needed goal setting context before the app felt relevant to their life
• The nutritional terms themselves (carbs, protein, fat) were understood, what needed improvement was how the data was shown

04 — Design System

Building the foundation before building screens.

Before a single screen was designed, I built a complete design system in Figma. Not because it was in the brief, but because building without one produces inconsistency that compounds with every new screen. The developer team also needed a single source of truth to build from.

05 — Onboarding Redesign

From zero context to a guided first time experience.

The original app had no onboarding. Users hit a login screen and then immediately a camera. No explanation of what the app did, no goal setup, nothing that made it feel like it was built for them.

The redesigned onboarding introduces FoodAI through a four step feature carousel (Welcome, Scan & Track, View History, Generate Reports), then walks users through account creation and critically a nutrition goal setting screen that appears immediately after signup.

That goal setting screen was the most important addition in the entire project. Without it, the daily progress indicators on the home screen had no target to measure against. Setting calories, carbs, protein, and fat goals upfront made every subsequent interaction feel personally relevant, not generic.

06 — Final Design

A complete daily nutrition companion.

The redesigned app covers every touchpoint in the nutrition tracking journey, from first open to daily habit. Each screen was designed around how users actually interact with food tracking: quickly, in context, expecting immediate feedback.

07 — Testing & Iterations

Two changes that came directly from users, not assumptions.

After completing the initial redesign, I ran usability testing with a sample group. Each participant was asked to do three things: sign in and set up their profile, capture a food image, and review their nutrition tracking. I watched, noted where they hesitated, and where they got stuck.

Two friction points came up consistently. Both led to design changes before final delivery.

09 — Reflection

What this project actually taught me.

Always audit before you execute

The brief said "change fonts and colors." Accepting that would have produced a prettier version of a broken product. Taking an hour to audit the existing experience revealed structural problems that cosmetic changes would never fix. The better deliverable came from questioning the brief, not from following it.

Onboarding is the first UX decision, not the last

The nutrition goal setup wasn't in the original scope. But without it, the home screen's progress bar had no meaning, it was a bar filling towards nothing. Adding goal setting to onboarding made every subsequent screen work harder. One upfront investment removed countless downstream confusions.

Staying close to developers prevents late surprises

Working within an existing technical architecture meant some ideas had to be adapted. Staying in close communication throughout, rather than handing over a final file and hoping for the best, meant feasibility issues surfaced early. The shipped product matched the design intent. No costly rework.