Kcalo A Calorie Tracker, Designed End to End
Kcalo is a concept calorie tracker built end to end, from research boards to App Store screenshots. The premise fits in a sentence: people will not type their dinner, but they will photograph it. So the camera is the keyboard, and everything else is designed around the five seconds that follow the shutter.
This one has no client and no users, and says so up front. The brief was mine: take one sharp idea and carry it the whole distance a real product goes. Research, flows, a token system, a component library, thirty-one screens with their empty and error states, a brand, three posters, six App Store screenshots and a ten-slide pitch. One Figma file, one week of evenings.
The idea itself came from watching people around me. Everyone has installed a calorie tracker. Nobody still uses one. The apps all work; the logging is what dies. And the same people who will not type a meal photograph their meals constantly, for Instagram, for a spouse, for a dietitian on WhatsApp. The behaviour already exists. Kcalo just reroutes it.
The homework
The plan asked three questions and named the bar for success: does anyone still log on day five? Six interviews, a two-week diary study where four people re-tried their old trackers, 180 store reviews tagged, and a plate test of thirty real mixed Kerala meals to see if a photo can even be itemised by eye.
The interviews kept landing the same two blows. Effort: I searched porotta and got forty American flatbreads. Day 4, breakfast, I could not search for idli one more time. And shame: red numbers at 2 AM after a hard shift, I deleted it that night. Nobody quit over a bad calorie day. Everyone quit over the logging or the scolding.
The thread that became the product was quieter. A nurse photographs his dinner for his wife. A mother photographs the pot before serving. A dietitian estimates calories from client photos on WhatsApp all day. Three people describing the same interface without knowing it.
Who it has to survive
The empathy map is Meera, a composite of the quitters: photographs food anyway, quits at the first untrackable meal rather than the first bad number, and reads red type as a teacher’s red pen.
Three personas share the screens. Meera has a wedding in eight months and three sadyas a week. Ajmal wants protein numbers between sets. And Rukiya is the stress test: one pot for four people, one free hand, twenty-second sessions, no food scale ever. Every flow got asked her question first.
The control condition is a person
The competitive scan put the usual apps in columns and then added the one that wins: a dietitian on WhatsApp. She takes photos, estimates by eye, and answers with mercy. She loses only on price and scale. That reframed the whole build: Kcalo is not a better database, it is her eye and her tone, productised.
The journey map draws the standard first week: heroic on install night, drowning in search by day two, one festival kills the week, red numbers finish it on day four. A seventh stage sits at the end with the same person and the same food going through a photo instead. The whole product is the distance between those two dots.
Five insights survived, and four principles came out of them: the camera is the keyboard, kind numbers, made for the mixed plate, and bends-does-not-break. Every screen below answers to those four.
Paper first
The first home sketch had a search bar on top and a Diary tab below, and it earned the only red cross on the board, because it was MyFitnessPal with new paint. The second draws the day itself: a ring, a week strip, meals as cards, and no tab bar at all. Logging is a moment, not a place you visit, so the plus on every meal card opens the camera.
Two more fights ended on paper, where losing is cheap. Apple-style macro rings lost to labelled bars, because nobody can say which ring is carbs. And the red over-limit screen lost to a warm orange card with a walk suggestion, because one participant uninstalled over exactly that screen.
The structure and the loop, cleaned up: onboarding feeds a hub, and the core loop runs from hunger to logged in five seconds, with every exit drawn. A failed scan gets tips and a typed fallback. Offline queues the photo. A dead end is a design bug.
Where drawing starts
One family everywhere: SF Pro Rounded. The app is mostly numbers, and rounded numerals read as friendly where a grotesque reads as a lab report. Bold carries every number, Semibold every label, Medium the body, and that is the whole hierarchy.
One green with a job: #35C858 fills buttons, rings and wins, and nothing else. The three macro colours are locked to their own bars, each with a pastel track, so a colour always means the same nutrient. Yellow belongs to the flame ring alone. When a colour has one job, a glance is enough.
The card the app hangs off
The hero card answers the only question that matters at a glance: how much is left today. The number is huge and the unit is not, the flame sits in a real progress ring, and what has been eaten lives in a quiet pill instead of a second headline. Below, the three macro bars with their fixed colours.
The week strip above it does the calendar’s whole job in one row. A green dot means a logged day, the selected day becomes a green pill with the date in a white circle, and days without dots simply have nothing to show.
Meals are cards, and a logged food is a row: photo at 12px radius, name, one line of description, then a calorie chip and a macro chip. The photo earns its place because the photo is the log; seeing your own plate again is what makes the entry feel true.
The five seconds
The scan flow is the product. A camera with corner brackets and three modes, an analyzing state that says what it is doing in three steps, and a result sheet that itemises the meal: calories, three macro cards, a health score with a sentence of reasoning in plain words, and the ingredient list with each item’s share. Fix Results takes a tap, because the model will be wrong sometimes and the design should assume it.
Search exists as the fallback, not the front door. Recents come first because dinner repeats, results carry local food names, and a dead-end query offers to create the food or scan it instead. The empty state is drawn, not left to chance.
A plan, not a calculator
Onboarding asks five things and shows its work: goal, pace on a slider with a recommendation, then a progress ring while the plan is computed, and a plan-ready screen wearing the same hero card the home screen uses. The card is the handshake; you meet it before you meet the app.
Everything stays editable afterwards. Goals are steppers and sliders rather than forms, and the paywall arrives only after the first successful scans, priced against what it just did rather than what it promises.
Built to be kept
The habit layer is three screens: progress with a week of bars and a weight trend, a streak celebration that pauses rather than resets, and water as its own small win. The reward for logging a meal is watching the ring move. Confetti is reserved for streaks, because this is dinner, not a casino.
And the edges got the same attention as the happy path. A first day with nothing logged points at the camera. Going over goal turns the card warm orange and suggests a walk, in exactly those words, because the alternative shipped in another app and produced an uninstall story. Offline says the log is safe on the phone.
The system underneath
Twenty icons drawn for the app, and eleven components with variants and swappable parts: buttons, chips, day cells, macro bars, food rows, list rows, toggles, the nav header. The thirty-one screens are assembled from these, which is why they agree with each other.
The brand, travelling
The mark is the product’s own progress ring with the flame inside, because the app already had a logo before the brand work started; it just needed extracting. The wordmark is the app’s own typeface. Nothing about the brand is a second design language.
The store listing tells the loop in six frames, and the deck compresses the whole argument to ten slides. Two of them carry most of it: the insight, and the product doing it.
Decisions, dated
Eleven calls shaped the thing, each logged with its date and its evidence, from killing the tab bar to banning red mornings to keeping confetti for streaks only. The log exists so future me stops re-arguing with past me.
What is left is the honest next step for any concept: put the prototype in front of Meera, Ajmal and Rukiya’s one free hand, and run the Day-5 test for real.