Back to Reports Hub
Design Sprint

FatSecret Premier API: Design Sprint Report

UI/UX exploration for 6 FatSecret-powered features with graceful degradation. Design only; no React changes. HTML/CSS prototypes and full specification delivered.

Sprint Type
Design Only
Date
03 Apr 2026
Trial Window
02 Apr to 02 May 2026
Features
6 features, 12+ states
Prototypes
7 HTML files
Status
Complete
Executive Summary

What We Did

We have a 30-day FatSecret Premier API trial starting 02 Apr 2026. This sprint designed the UI/UX for 6 features that the API unlocks, with one hard constraint: every feature must degrade gracefully when its feature flag is off. The app must never look broken.

This sprint produced interactive HTML/CSS prototypes for all 6 features (both ON and OFF states), a feature flag architecture spec, UX interaction notes, acceptance criteria, and a QA test checklist. No React code was changed.

Core constraint: Every FatSecret-powered feature must degrade gracefully when disabled. Users see the pre-FatSecret baseline experience, not errors, empty states, or broken UI.
The 6 Features

Feature Overview

FS-001

Barcode Lookup Enrichment

Designed

FatSecret is queried as a premium tier in the barcode lookup chain, returning product name, brand, pack size, category, nutrition, and image.

ON

Rich product card pre-filled with all fields and image

OFF

Manual entry form for unresolved products (same as today)

View Prototype
FS-002

Food Search Autocomplete

Designed

When manually adding an item, the name field shows FatSecret-powered search with SA product suggestions.

ON

Type-ahead dropdown with product name, brand, pack size

OFF

Plain text input, no suggestions (current behaviour)

View Prototype
FS-003

Nutrition Panel

Designed

Each inventory item displays a nutrition summary (kcal, protein, carbs, fat per 100g and per serving) in an expandable panel.

ON

Nutrition pill on card, tap to expand full panel

OFF

Pill hidden, card looks identical to pre-FatSecret baseline

View Prototype
FS-004

Household Dietary Preferences

Designed

Dietary flags in household settings (gluten-free, nut allergy, halal, etc.) with allergen conflict warnings on add/scan.

ON

Dietary section in settings, conflict warnings on add flow

OFF

Section hidden, no warnings, no "coming soon" placeholder

View Prototype
FS-005

Nutrition Summary

Designed

Shopping list header shows estimated nutrition totals for all items on the current list.

ON

Nutrition totals row: kcal, protein, carbs, fat

OFF

Row not rendered, header unchanged from baseline

View Prototype
FS-006

Smart Category Inference

Designed

Category auto-populated from FatSecret food category data when items are added via scan or search.

ON

Category pre-filled with "Auto" badge, user can override

OFF

Empty category field, manual selection (current behaviour)

View Prototype
Feature Flag Architecture

Flag Design

featureFlags: {
  fatsecret: {
    enabled: false,           // master switch
    barcodeEnrichment: false, // FS-001
    foodSearch: false,        // FS-002
    nutritionPanel: false,    // FS-003
    dietaryPreferences: false,// FS-004
    nutritionSummary: false,  // FS-005
    categoryInference: false, // FS-006
  }
}

Resolution logic:
  isEnabled(flag) => fatsecret.enabled AND fatsecret[flag]

  Master OFF => ALL features OFF (regardless of individual flags)
  Master ON  => each feature checks its own flag
Key design principle: When a flag is OFF, the component is not rendered at all. No empty shells, no "N/A" text, no error boundaries. The DOM looks identical to the pre-FatSecret baseline.

Implementation Approach

Flags are stored in a React context provider, read via a useFeatureFlag('nutritionPanel') hook. Components conditionally render based on the hook return value. The full specification, including the operational runbook, emergency kill switch procedure, and rollout timeline, is in the feature flag spec document.

View Flag Settings UI
Graceful Degradation

Degradation Philosophy

Five principles govern how every feature degrades:

Principle Description
Invisible removal When a flag is OFF, the feature's UI is not in the DOM. Not hidden, not collapsed: absent.
No layout shift Surrounding elements fill the space naturally. No gaps, no jumps.
No error surfaces No "feature unavailable" banners, no "N/A" text, no greyed-out placeholders.
Baseline as floor The OFF state is always the pre-FatSecret experience: functional, complete, familiar.
Early flag checks Flags are checked at the component boundary, before any data fetching or rendering.
Trial Timeline

30-Day Rollout Plan

Week 1: 02 to 08 Apr 2026
Foundation. Enable FS-001 (Barcode Enrichment) and FS-006 (Category Inference). These are the lowest-risk features with the clearest value signal.
Week 2: 09 to 15 Apr 2026
Search and nutrition. Enable FS-002 (Food Search) and FS-003 (Nutrition Panel). Monitor API usage and SA product coverage rates.
Week 3: 16 to 22 Apr 2026
Aggregation and preferences. Enable FS-005 (Nutrition Summary) and FS-004 (Dietary Preferences). These depend on FS-003 data being populated.
Week 4: 23 to 02 May 2026
Evaluation. All features enabled. Collect usage metrics, user feedback, and API cost data. Decision: convert to paid subscription or disable.
Deliverables

Sprint Outputs

Deliverable Owner Status
Acceptance criteria (all 6 features) Product Owner Complete
UX interaction notes and degradation patterns UX Researcher Complete
HTML/CSS prototypes (7 files, 12+ states) Frontend Developer Complete
Feature flag specification Business Analyst Complete
QA test checklist QA Engineer Complete
Prototype index page Scrum Master Complete
Sprint report (this document) Business Analyst Complete
Code review Code Reviewer Complete

File Locations

File Path
Prototype index app/prototypes/fatsecret/index.html
FS-001 Barcode Lookup app/prototypes/fatsecret/fs-001-barcode-lookup.html
FS-002 Food Search app/prototypes/fatsecret/fs-002-food-search.html
FS-003 Nutrition Panel app/prototypes/fatsecret/fs-003-nutrition-panel.html
FS-004 Dietary Preferences app/prototypes/fatsecret/fs-004-dietary-preferences.html
FS-005 Nutrition Summary app/prototypes/fatsecret/fs-005-nutrition-summary.html
FS-006 Category Inference app/prototypes/fatsecret/fs-006-category-inference.html
Feature Flag Settings UI app/prototypes/fatsecret/feature-flag-settings.html
Feature Flag Spec docs/fatsecret-design-sprint/feature-flag-spec.md
UX Notes docs/fatsecret-design-sprint/ux-notes.md
Acceptance Criteria docs/fatsecret-design-sprint/acceptance-criteria.md
QA Test Checklist docs/fatsecret-design-sprint/test-checklist.md
Sprint Team

Team Roles

Role Responsibility
Product OwnerAcceptance criteria, feature validation, sign-off
Scrum MasterSprint coordination, progress tracking, unblocking
UI DesignerVisual design for all screen states (ON + OFF)
UX ResearcherInteraction flows, degradation notes, accessibility
Frontend DeveloperHTML/CSS prototypes for all screens
Business AnalystFeature flag spec, runbook, sprint report
QA EngineerTest checklist covering ON, OFF, toggle, edge cases
Code ReviewerPrototype quality, pattern review for React migration
Next Steps

From Design to Dev

This sprint is design-only. The dev sprint will implement these designs in the React app. Prototypes serve as the visual specification for developers.

The recommended sequence for the dev sprint:

  1. Implement the feature flag provider and useFeatureFlag hook
  2. Build FS-001 (Barcode Enrichment) and FS-006 (Category Inference) first
  3. Add FS-002 (Food Search Autocomplete)
  4. Add FS-003 (Nutrition Panel)
  5. Add FS-005 (Nutrition Summary), which depends on FS-003 data
  6. Add FS-004 (Dietary Preferences), which needs the allergen data pipeline
  7. Build the Feature Flag Settings admin UI
  8. Run the QA test checklist against all features in both states