UI/UX exploration for 6 FatSecret-powered features with graceful degradation. Design only; no React changes. HTML/CSS prototypes and full specification delivered.
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.
FatSecret is queried as a premium tier in the barcode lookup chain, returning product name, brand, pack size, category, nutrition, and image.
Rich product card pre-filled with all fields and image
Manual entry form for unresolved products (same as today)
When manually adding an item, the name field shows FatSecret-powered search with SA product suggestions.
Type-ahead dropdown with product name, brand, pack size
Plain text input, no suggestions (current behaviour)
Each inventory item displays a nutrition summary (kcal, protein, carbs, fat per 100g and per serving) in an expandable panel.
Nutrition pill on card, tap to expand full panel
Pill hidden, card looks identical to pre-FatSecret baseline
Dietary flags in household settings (gluten-free, nut allergy, halal, etc.) with allergen conflict warnings on add/scan.
Dietary section in settings, conflict warnings on add flow
Section hidden, no warnings, no "coming soon" placeholder
Shopping list header shows estimated nutrition totals for all items on the current list.
Nutrition totals row: kcal, protein, carbs, fat
Row not rendered, header unchanged from baseline
Category auto-populated from FatSecret food category data when items are added via scan or search.
Category pre-filled with "Auto" badge, user can override
Empty category field, manual selection (current behaviour)
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
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.
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. |
| 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 | 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 |
| Role | Responsibility |
|---|---|
| Product Owner | Acceptance criteria, feature validation, sign-off |
| Scrum Master | Sprint coordination, progress tracking, unblocking |
| UI Designer | Visual design for all screen states (ON + OFF) |
| UX Researcher | Interaction flows, degradation notes, accessibility |
| Frontend Developer | HTML/CSS prototypes for all screens |
| Business Analyst | Feature flag spec, runbook, sprint report |
| QA Engineer | Test checklist covering ON, OFF, toggle, edge cases |
| Code Reviewer | Prototype quality, pattern review for React migration |
The recommended sequence for the dev sprint:
useFeatureFlag hook