paulh
/
recipe-manager
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
recipe-manager/docs/visual-audit/before/ui-ux-baseline-audit.md

3.6 KiB
Raw Blame History

Recipe Manager UI/UX Audit — Baseline Findings (Pre-Redesign)

All findings are based on code and asset inspection of the existing main branch as of 2026-03-27.

Key Page Coverage

  • Home / Recipe List: / (RecipeListPage)
  • Recipe Detail: /recipe/:id (RecipeDetailPage)
  • Add / Edit form: /recipe/new and /recipe/:id (edit mode in RecipeDetailPage)
  • Import from URL: /import/url (ImportUrlPage)
  • Cook Mode: /recipe/:id/cook (CookModePage)
  • Not Found: fallback route

Issues & Opportunities — By Page

1. Home / Recipe List Page

  • Severity: HIGH
    • No clear visual separation between recipe library and feature highlights sections (hierarchy muddled)
    • Search and filter tag UI lack sticky/top persistence for long lists (usability friction)
  • Severity: MEDIUM
    • Tag color accessibility not enforced; tag backgrounds may contrast poorly with white text
    • "No recipes" empty state lacks illustration/invitation for mobile
  • Severity: LOW
    • Visual spacing between cards is adequate, but elevation/shadow separation could be stronger
    • Edge-case: very large recipe titles can overflow

2. Recipe Detail Page

  • Severity: HIGH
    • No image/hero area for recipes — makes page visually flat
    • Action buttons (Edit, Cook Mode, Delete) overwhelm above-the-fold space, all equally visually weighted
    • Tag badges: insufficient color contrast, risk of not being distinguishable
  • Severity: MEDIUM
    • Stats grid (prep time/servings/cook time) sometimes missing if fields absent, leading to awkward negative space
  • Severity: LOW
    • Additional Information section can be overlooked (visual hierarchy weak)

3. Add/Edit Recipe Form

  • Severity: HIGH
    • Long single form, minimal grouping/hierarchy; no inline field validation or visual feedback on invalid states
    • No photo upload/preview capability
  • Severity: MEDIUM
    • Lack of step-by-step clarity for ingredient vs instructions entry
  • Severity: LOW
    • No help text/examples for field format (e.g. "1 cup flour")

4. Import from URL

  • Severity: MEDIUM
    • Progress indicators use color only (AA contrast edge-cases possible, e.g. blue-on-white)
  • Severity: LOW
    • Errors are shown contextually, but do not visually block/disable further input

5. Cook Mode

  • Severity: HIGH
    • No sticky/fixed controls for moving between ingredients/steps (usability on mobile)
    • Progress bars for steps/ingredients provide good feedback but blending color could limit clarity for colorblind users
  • Severity: LOW
    • Success/checkoff state lacks distinct visual reward (just celebratory emoji and card)

Cross-cutting / General Issues

  • Accessibility:
    • Some color choices insufficient for AA contrast in tag buttons/badges
    • Keyboard navigation generally present but focus rings partly overridden (potential risk)
  • Imagery:
    • Strong reliance on fallback illustration — only 1 bundled hero image (hero.png) for all recipes
    • No per-recipe image or placeholder; flat visual identity

Acceptance Checklist — Baseline

  • Screenshots for all primary pages (desktop/mobile)
  • Placeholder README in docs/visual-audit/before/ (documenting screenshot gap)
  • List of all key pages and views
  • Audit notes: all UX/UI issues prioritized and categorized by page
  • Accessibility/opportunity notes captured
  • General imagery and identity state described
  • This audit document committed for baseline comparison

For later: Repeat all QA for new visual implementation, providing strict before/after comparisons for each line item.

Last updated: 2026-03-27