ai cooking
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

screenshot tour (#303)

* screenshot tour

* codex ui feedback

---------

Co-authored-by: paul miller <paul.miller>

authored by

Paul Miller
paul miller
and committed by
GitHub
352e7f37 f9cf3c82

+204
docs/screenshots/about.png

This is a binary file and will not be displayed.

docs/screenshots/assembled.jpg

This is a binary file and will not be displayed.

docs/screenshots/customize.png

This is a binary file and will not be displayed.

docs/screenshots/homepage.png

This is a binary file and will not be displayed.

docs/screenshots/homesignedin.png

This is a binary file and will not be displayed.

docs/screenshots/locations.png

This is a binary file and will not be displayed.

docs/screenshots/pastrecipes.png

This is a binary file and will not be displayed.

docs/screenshots/recipe.jpeg

This is a binary file and will not be displayed.

docs/screenshots/recipefeedback.png

This is a binary file and will not be displayed.

docs/screenshots/savedimsiss.jpeg

This is a binary file and will not be displayed.

docs/screenshots/shoppinglist.jpeg

This is a binary file and will not be displayed.

docs/screenshots/shoppinglistv2.jpeg

This is a binary file and will not be displayed.

docs/screenshots/spinner.png

This is a binary file and will not be displayed.

+34
docs/tour.md
··· 1 + This is a screen shot tour of careme to show an exmaple use. 2 + 3 + 1. User comes to homepage having never been before 4 + ![Homepage](screenshots/homepage.png) 5 + 6 + 1. They may go to the about page to learn more. 7 + ![About](screenshots/about.png) 8 + 9 + 1. But eventually they'll want to to sign in to get locations and generate recipes 10 + ![signedin homepage](screenshots/homesignedin.png)\ 11 + 12 + 1. THey can enter a zip code or use their device gps to get grocery store locations. From there they can genreate recipes, give more instrucitons or star a store. 13 + ![locations](screenshots/locations.png) 14 + 15 + 1. Once they geneate they get a list of recipes. With save and dismiss buttons. And a chance to give more instructions or assemble their shoppinglist. 16 + ![shppinglist](screenshots/shoppinglist.jpeg) 17 + 18 + 1. After a regeneate they get different recieps 19 + ![regenerated shoppping list](screenshots/shoppinglistv2.jpeg) 20 + 21 + 1. They can save and dismss more 22 + ![Save and dimiss](screenshots/savedimsiss.jpeg) 23 + 24 + 1. Finally they can get a full shoppinglist for all saved recipes 25 + ![final](screenshots/assembled.jpg) 26 + 27 + 1. If they want to find past recipes they can goto their "kitchen" 28 + ![past recipes](screenshots/pastrecipes.png) 29 + 30 + where they can also customize their shoping day of the week and cookign prefences. 31 + ![customize](screenshots/customize.png) 32 + 33 + 1. During or after cookign a recipe they can ask questions and leave feedback 34 + ![feedback](screenshots/recipefeedback.png)
+170
docs/ui-feedback-review.md
··· 1 + # Careme UI Review (Screenshot Tour) 2 + 3 + Date: March 3, 2026 4 + Reviewed artifact: `tour.md` and referenced screenshots in `screenshots/` 5 + Note: `doc.md` was not present in this folder, so this review is based on `tour.md`. 6 + 7 + ## Executive Summary 8 + 9 + Careme has a clear visual identity and a calm, friendly tone that matches the cooking use case. The core flow is understandable: find a store, generate recipes, save what you like, and assemble a shopping list. The UI feels cohesive, but it currently asks users to process too much content at once in critical decision screens. 10 + 11 + Top priorities: 12 + 1. Reduce information overload on recipe list/detail screens. 13 + 2. Clarify primary actions and standardize button semantics. 14 + 3. Improve accessibility (contrast, color dependence, dense text blocks). 15 + 4. Improve list management for repeat use (search/filter/history controls). 16 + 17 + ## What Is Working Well 18 + 19 + 1. Strong thematic fit: green palette, culinary tone, and “chef” language feel consistent. 20 + 2. Clear card-based layout: sections are visually separated and generally easy to parse. 21 + 3. Useful personalization hooks: chef notes, saved recipes, preferences, and feedback loop. 22 + 4. Good practical detail: ingredients, cook times, health notes, and pairing tips add value. 23 + 5. Progressive user journey exists: landing -> location -> recipe generation -> saved list -> cooking feedback. 24 + 25 + ## High-Priority Issues (Fix First) 26 + 27 + | ID | Severity | Where Seen | Problem | Why It Matters | Recommended Fix | 28 + |---|---|---|---|---|---| 29 + | H1 | High | `shoppinglistv2.jpeg`, `assembled.jpg`, `recipefeedback.png` | Excessive vertical density and long cards with full ingredients + full instructions repeated per recipe. | Users must scroll heavily and lose context; comparing options becomes slow. | Default recipe cards to collapsed summary. Show only title, short blurb, key metadata, and actions. Expand details on demand. | 30 + | H2 | High | `locations.png`, `shoppinglist.jpeg`, `savedimsiss.jpeg` | Action hierarchy is inconsistent (`Recipes!`, `Build Recipes`, `Try again, chef`, `Assemble Shopping List`) and sometimes ambiguous. | Users cannot quickly identify “what to do next” on each screen. | Define one primary action per page, make naming consistent, and keep secondary actions visually subordinate. | 31 + | H3 | High | `shoppinglist.jpeg`, `savedimsiss.jpeg`, `shoppinglistv2.jpeg` | `Save` and `Dismiss` are adjacent on every card; dismissal appears destructive and easy to tap by mistake. | High risk of accidental loss/confusion, especially on mobile. | Move `Dismiss` to overflow/menu or require confirm/undo toast. Keep `Save` as the only prominent inline action. | 32 + | H4 | High | Across nearly all screens | Contrast is often low (light green borders, gray text on pale backgrounds, placeholder-heavy inputs). | Readability and accessibility suffer; likely WCAG failures in several text/border states. | Increase contrast tokens for body text, placeholders, borders, and muted labels. Add non-color cues for status. | 33 + | H5 | High | `recipefeedback.png` | Q&A history can become very long and dominates page length. | Feedback input and recipe info are pushed far down; users lose task focus. | Collapse previous Q&A by default (“Show previous answers”), pin Ask/Feedback panel near top, and add jump links. | 34 + 35 + ## Medium-Priority Issues 36 + 37 + | ID | Severity | Where Seen | Problem | Why It Matters | Recommended Fix | 38 + |---|---|---|---|---|---| 39 + | M1 | Medium | `assembled.jpg`, `shoppinglistv2.jpeg`, `recipefeedback.png` | Ingredient rows are hard to scan (mixed alignment, variable row heights, repeated pantry items, duplicated quantities in some rows). | Shopping tasks require quick scanning and confidence; current layout increases cognitive load. | Use fixed columns on desktop and stacked key/value on mobile; group duplicate pantry items and deduplicate quantities. | 40 + | M2 | Medium | `pastrecipes.png` | Long “Recent history” list lacks search/filter/sort controls. | Repeat users will struggle to find older recipes quickly. | Add search by recipe name, filters (date/protein/style), and sort options. | 41 + | M3 | Medium | `about.png` | About page combines marketing, privacy summary, repo links, and FAQ in one long stream. | Important trust and support content is discoverable but not prioritized. | Add sticky in-page section nav and tighten top hero height to surface key links earlier. | 42 + | M4 | Medium | `locations.png` | Store cards present star, `Recipes!`, and `Chef notes` actions with little explanatory context. | First-time users may not know the expected sequence. | Add microcopy under each store row: “1) Add notes (optional) 2) Build recipes”. | 43 + | M5 | Medium | `customize.png` | Preference form is long, with a large free-text field and no helper structure beyond examples. | Users may provide inconsistent prompts, reducing generation quality. | Offer structured chips/toggles for common constraints (diet, prep time, servings), then optional free text. | 44 + | M6 | Medium | `spinner.png` | Loading state asks users to manually refresh every 10 seconds. | Feels brittle; can break trust during generation delays. | Auto-refresh/poll with visible progress states; keep manual refresh as fallback only. | 45 + 46 + ## Aesthetic Review 47 + 48 + ### Visual System 49 + 50 + Strengths: 51 + 1. Consistent green-forward brand language. 52 + 2. Rounded cards and soft shadows create a welcoming “kitchen notebook” feel. 53 + 54 + Improvements: 55 + 1. Increase typographic hierarchy contrast between headings, metadata, and helper text. 56 + 2. Reduce border-heavy styling; use spacing and subtle background layers for separation instead. 57 + 3. Introduce one accent color for non-primary actions and informational states to reduce “everything is green” fatigue. 58 + 4. Normalize corner radius and shadow depth across button/card/input components. 59 + 60 + ### Typography and Readability 61 + 62 + Strengths: 63 + 1. Recipe titles are expressive and descriptive. 64 + 2. Body copy tone is human and approachable. 65 + 66 + Improvements: 67 + 1. Limit long title wrapping by shortening card title display with “show full title” option. 68 + 2. Increase line-height slightly in dense instruction blocks. 69 + 3. Reduce all-caps section labels where possible for smoother reading flow. 70 + 71 + ## Usability Review by Flow 72 + 73 + ### 1) Entry and Trust (`homepage.png`, `about.png`) 74 + 75 + What works: 76 + 1. Clear value proposition and straightforward auth CTAs. 77 + 2. About page includes trust elements (privacy and source links). 78 + 79 + Issues: 80 + 1. Homepage secondary text is visually quiet against the background image. 81 + 2. About page is very long before critical support actions become obvious. 82 + 83 + ### 2) Signed-in Home and Store Selection (`homesignedin.png`, `locations.png`) 84 + 85 + What works: 86 + 1. “Find a store” and “Your kitchen” are separate mental models. 87 + 2. ZIP and geolocation entry options are present. 88 + 89 + Issues: 90 + 1. Home screen has large empty zones, making it look sparse and slightly unfinished. 91 + 2. Store row controls are compact but ambiguous for first-time users. 92 + 93 + ### 3) Recipe Generation and Triage (`shoppinglist.jpeg`, `shoppinglistv2.jpeg`, `savedimsiss.jpeg`) 94 + 95 + What works: 96 + 1. Save/dismiss loop enables quick preference refinement. 97 + 2. Chef notes encourage iterative personalization. 98 + 99 + Issues: 100 + 1. Too much content per recipe card when expanded. 101 + 2. Save/Dismiss button pattern invites mis-taps and repeated decision fatigue. 102 + 3. “Shopping list” area lacks clear state (empty vs populated vs hidden). 103 + 104 + ### 4) Assembled Shopping Output (`assembled.jpg`) 105 + 106 + What works: 107 + 1. Ingredient details are rich and practical. 108 + 2. Pantry labeling is useful. 109 + 110 + Issues: 111 + 1. No obvious grouping by recipe/aisle/category in long lists. 112 + 2. Duplicate or near-duplicate items reduce confidence and convenience. 113 + 114 + ### 5) Kitchen History and Preferences (`pastrecipes.png`, `customize.png`) 115 + 116 + What works: 117 + 1. Good concept: one “Kitchen” hub for account + preferences + history. 118 + 2. Preferences explain how free text influences planning. 119 + 120 + Issues: 121 + 1. History becomes unwieldy without search/filter. 122 + 2. Toggle/tab selected state is subtle in some captures. 123 + 124 + ### 6) Recipe Detail and Feedback (`recipefeedback.png`, `recipe.jpeg`) 125 + 126 + What works: 127 + 1. End-to-end utility: ingredients, method, nutrition-ish guidance, pairing, AI Q&A, star rating. 128 + 2. Feedback capture is embedded directly into use moment. 129 + 130 + Issues: 131 + 1. Page length is very high, especially with AI conversation history. 132 + 2. Feedback and Q&A controls are not visually separated enough from long content blocks. 133 + 134 + ## Accessibility Checklist (Observed Risk Areas) 135 + 136 + 1. Contrast likely below target in placeholder text, muted labels, and pale green borders. 137 + 2. Status appears color-driven in places (save/dismiss states) without icon/text reinforcement. 138 + 3. Very long pages need better structural navigation (sticky anchors, “back to top”, section jump menu). 139 + 4. Button semantics should include clearer destructive-state handling. 140 + 141 + ## Recommended Implementation Plan 142 + 143 + ### Quick Wins (1-2 weeks) 144 + 145 + 1. Standardize CTA naming and hierarchy by screen. 146 + 2. Improve contrast tokens and button state styles. 147 + 3. Add undo toast for dismiss/remove actions. 148 + 4. Add “Back to top” and section jump links on long recipe pages. 149 + 5. Clarify shopping list state with explicit empty-state text and count badges. 150 + 151 + ### Next Wave (2-4 weeks) 152 + 153 + 1. Collapse recipe cards by default with progressive disclosure. 154 + 2. Add search/filter/sort for Past Recipes. 155 + 3. Rework ingredients into a cleaner two-column data pattern desktop + stacked mobile pattern. 156 + 4. Introduce grouped shopping list views (by aisle/category/recipe). 157 + 158 + ### Larger Improvements (4-8 weeks) 159 + 160 + 1. Split recipe detail into tabs: `Overview`, `Cook`, `Q&A`, `Feedback`. 161 + 2. Add structured preference controls (chips/checkboxes) plus optional free text. 162 + 3. Build a mobile-first density pass to reduce cognitive load and scrolling burden. 163 + 164 + ## Suggested Success Metrics 165 + 166 + 1. Time to first successful recipe save. 167 + 2. Number of recipes reviewed before first save. 168 + 3. Dismiss undo rate (proxy for accidental actions). 169 + 4. Scroll depth before primary action on recipe and shopping pages. 170 + 5. Repeat usage of “Past recipes” with search/filter adoption.