M.B.Mohammad Bayu Rizki

Available / --:--:-- WIB

17 / 2025 / Utility / Tool

Insta Nutri Calc

Instant food tracking needs to be quick enough for daily use while still showing calorie, protein, carbohydrate, and fat totals clearly.

Insta Nutri Calc Client visual

Client

Context and business domain

00 / Design System

Palette Logic

Utility / Tool

17
2025

Typography

Inter

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz 0123456789

Layout Grid

12-column responsive index structure.

Deep Slate

#0D1B1E

Graphite

#3D3D3D

Clear White

#F8F8F8

Soft Signal

#C9FBC6

Connected System

Nutrition Calculator connects the visual language, interaction rhythm, and evidence structure for this case study.

01 / Challenge

The Challenge

Instant food tracking needs to be quick enough for daily use while still showing calorie, protein, carbohydrate, and fat totals clearly.

02 / Methodology

Methodology / Experiment

  1. 01

    Food Search

    Built real-time search interaction so users can quickly find and add consumed items.

    Search UI82%
  2. 02

    Macro Summary

    Grouped calories, protein, carbohydrates, and fat into a clear daily summary.

    Nutrition totals80%
  3. 03

    Responsive Utility

    Kept the layout compact and mobile-friendly for fast entry and review.

    Responsive page78%

03 / Solution

The Solution

Insta Nutri Calc project card

Nutrition Calculator

A lightweight daily nutrition tracker tailored to instant food entries and quick macro totals.

Insta Nutri Calc nutrition workflow preview

Fast Food Entry Flow

The interface prioritizes search, add-to-list behavior, and automatic nutritional summaries.

04 / Impact

Impact & Metrics

04

Macro Totals

Calories, protein, carbohydrates, and fat are summarized automatically.

Live

Utility Pattern

The project is designed as a single-purpose utility workflow.

CSS

Repo Language

The repository uses Tailwind-oriented frontend styling.