ai cooking
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
docs/screenshots/about.png
This is a binary file and will not be displayed.
docs/screenshots/assembled.jpg
docs/screenshots/assembled.jpg
This is a binary file and will not be displayed.
docs/screenshots/customize.png
docs/screenshots/customize.png
This is a binary file and will not be displayed.
docs/screenshots/homepage.png
docs/screenshots/homepage.png
This is a binary file and will not be displayed.
docs/screenshots/homesignedin.png
docs/screenshots/homesignedin.png
This is a binary file and will not be displayed.
docs/screenshots/locations.png
docs/screenshots/locations.png
This is a binary file and will not be displayed.
docs/screenshots/pastrecipes.png
docs/screenshots/pastrecipes.png
This is a binary file and will not be displayed.
docs/screenshots/recipe.jpeg
docs/screenshots/recipe.jpeg
This is a binary file and will not be displayed.
docs/screenshots/recipefeedback.png
docs/screenshots/recipefeedback.png
This is a binary file and will not be displayed.
docs/screenshots/savedimsiss.jpeg
docs/screenshots/savedimsiss.jpeg
This is a binary file and will not be displayed.
docs/screenshots/shoppinglist.jpeg
docs/screenshots/shoppinglist.jpeg
This is a binary file and will not be displayed.
docs/screenshots/shoppinglistv2.jpeg
docs/screenshots/shoppinglistv2.jpeg
This is a binary file and will not be displayed.
docs/screenshots/spinner.png
docs/screenshots/spinner.png
This is a binary file and will not be displayed.
+34
docs/tour.md
+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
+
5
+
6
+
1. They may go to the about page to learn more.
7
+
8
+
9
+
1. But eventually they'll want to to sign in to get locations and generate recipes
10
+
\
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
+
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
+
17
+
18
+
1. After a regeneate they get different recieps
19
+
20
+
21
+
1. They can save and dismss more
22
+
23
+
24
+
1. Finally they can get a full shoppinglist for all saved recipes
25
+
26
+
27
+
1. If they want to find past recipes they can goto their "kitchen"
28
+
29
+
30
+
where they can also customize their shoping day of the week and cookign prefences.
31
+
32
+
33
+
1. During or after cookign a recipe they can ask questions and leave feedback
34
+
+170
docs/ui-feedback-review.md
+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.