Ripe: two user stories, end to end

1. 24

   01 WelcomePasskey or email link
2. Email me a link

3. 

   01 WelcomeCheck your inbox
4. Open the linkemail app

5. 25

   02 Your goalStep 1 of 5
6. Continue

7. 26

   03 About youStep 2 of 5
8. Continue

9. 

   04 DietStep 3 of 5

0 · continued: allergies, target, first day

1. 27

   05 AllergiesStep 4 of 5
2. Continueor Skip

3. 28

   06 Daily targetStep 5 of 5 · 2,050 kcal
4. Start tracking

5. 29

   07 TodayFirst day: 0 of 2,050

0B · Errors and limits

1. 

   03 About youHeight out of range
2. Fix the height

3. 

   06 Daily targetAt the floor: 1,550 kcal

1. 24
   24. No password to forget

   A passkey first, an email link second (WCAG 3.3.8: no memory or puzzle test). Nothing is asked before the value is shown.

2. 25
   25. One question per screen

   Option cards are native radios: the whole card is the target, arrows move the choice. Maintain is preselected; nothing extreme is offered.

3. 26
   26. Say why we ask

   Body data is only for the formula and never shared. “Prefer not to say” uses the average of both formulas; errors say the valid range.

4. 27
   27. Allergies are a hard filter

   14 major allergens as toggle chips, with “always check labels”. Foods you'd rather skip only move recipes down.

5. 28
   28. A target that's safe

   The maths is shown (Mifflin-St Jeor × activity). −50 steps stop at 1,550 kcal with a calm note; the macros always add up.

6. 29
   29. The first day has one next step

   Ring 0 of 2,050, four Add buttons, and “Snap your first meal” with Open camera or Search instead.

1A · From a photo (main path)

1. 

   07 Today13:09 · breakfast logged
2. Tap Scantab bar

3. 1

   08 ScanCamera with plate guide
4. Shutter

5. 2

   09 Photo resultLoading: analyzing, 2–4 s
6. 2–4 sautomatic

7. 345

   09 Photo result4 foods, confidence, weights
8. Add to Lunchone tap

9. 6

   07 TodayLunch added · 903 kcal

1B · Search a product · 1C · Home-cooked dish

1. 7

   10 Add foodSearch “alm”, recents
2. Tap Almondsfrom search

3. 8

   11 Food detail & portionAlmonds, 30 g
4. Create a dishalso from Add food

5. 9

   12 Dish calculatorRed lentil soup

1. 1
   1. Camera is never the only way in

   Plate guide, three capture tips and a live hint. Library and Search sit next to the shutter.

2. 2
   2. Honest loading

   Plain steps and Cancel, no fake percentage. Nothing is saved yet, and the primary button says so.

3. 3
   3. Confidence on every food

   Icon + word: High, Check portion, Not sure. Never colour alone.

4. 4
   4. One concrete question

   “Check portion” tints the row and asks “Is 150 g right?”. “Not sure” offers the two likely answers and Search.

5. 5
   5. The button carries the result

   “Add to Lunch · 559 kcal”. Meal is preselected from the time; the estimate range is stated.

6. 6
   6. Undo, not “Are you sure?”

   Logging is reversible, so it's one tap plus Undo. The toast has no timer.

7. 7
   7. Two taps from search

   Recents first; one canonical entry per food. The USDA source is named on the food detail (research insight 2).

8. 8
   8. Per 100 g + source

   The anchor value and its source stay on top; quick portions like “30 g · 1 handful”.

9. 9
   9. Cooked weight fixes home cooking

   Raw ingredients + the cooked pot weight → real kcal per 100 g and per portion (insight 1).

1. 10

   07 Today18:30 · 879 kcal left
2. Recipes tabor the “Fits your dinner” card

3. 1112

   13 RecipesFits your dinner
4. Tap Baked cod

5. 13

   14 Dish detailBaked cod, potatoes & broccoli
6. Log 1 portion

7. 14

   14 Dish detailLog sheet
8. Add to Dinnersheet closes

9. 15

   07 TodayDinner added · 1,633 kcal

2B · Fix a dish that was entered wrong

1. 16

   14 Dish detailEdit ingredients
2. Change an amounttotals update live

3. 

   14 Dish detailPotatoes 200 → 150 g: totals update
4. Delete Garlic

5. 17

   14 Dish detailGarlic deleted, Undo
6. Backwith changes

7. 18

   14 Dish detailBack with changes
8. Edit the namepencil next to the title

9. 19

   14 Dish detailName: validation error

2C · From the Today card to the method

1. 20

   07 TodayDish card: chips + View recipe
2. View recipeEnter / Space / tap

3. 21

   14 Dish detailMethod: 6 steps
4. Edit method

5. 22

   14 Dish detailEdit steps: move, delete
6. Delete step 3Undo in the toast

7. 

   14 Dish detailStep deleted, Undo
8. No stepsanother recipe

9. 23

   14 Dish detailNo steps: empty state

1. 10
   10. Lead with what's left

   The ring answers “can I have dinner?”: 879 kcal left, and a recipe that fits it.

2. 11
   11. “Suits me” is visible

   Diet and allergy come from onboarding. The allergy is a locked chip (lock + “Allergy”) and can only change in Profile.

3. 12
   12. Ranked by fit, explained in words

   Fits the kcal left → covers the protein gap → fewer kcal. “Fits: 462 of 879 kcal”. One text column: title, time, reason, P/F/C, fit, kcal.

4. 13
   13. Safety before the numbers

   Allergens in words above the fold; per-portion kcal and macros add up from the ingredients.

5. 14
   14. Log without leaving

   A bottom sheet: meal preselected, portions, the same macro tiles, one primary button.

6. 15
   15. Calm when over

   Protein is 10 g over: Turmeric and the words “10 over”. No red, no warning icon.

7. 16
   16. Fix a dish in place

   Edit turns each row into labelled fields: food, amount, unit. Kcal, the ring and the macro bars update as you type, and screen readers hear the new total.

8. 17
   17. Delete with Undo

   Focus moves to the next ingredient, so keyboard users don't get lost. The toast offers Undo and has no timer.

9. 18
   18. Don't lose work

   Leaving with unsaved changes asks “Discard changes?”, with “Keep editing” first.

10. 19
    19. Errors say how to fix them

    Empty or too-long names get a message with an example; the field keeps its visible label and a live character count.

11. 20
    20. A real “View recipe” button

    Secondary button, 12.8:1, 44 tall, named “View recipe: Baked cod, potatoes & broccoli”. Enter, Space and click open the dish. The photo opens it too, for pointer users only (no extra tab stop).

12. 21
    21. The method is part of the dish

    Numbered steps in an ordered list after Ingredients: 16 px text, line height 1.5, ≤ 80 characters a line. Time and servings above, in the card style.

13. 22
    22. Reorder without dragging

    Move up / Move down buttons (WCAG 2.5.7) keep focus on the moved step and announce its new position. Disabled at the ends, not hidden.

14. 23
    23. Never a blank section

    A recipe without steps shows “No steps yet” with “Add steps”, which opens a focused Step 1 field.

1. 30

   16 ProfileYour plan, units, account
2. Allergiesedit

3. 

   05 AllergiesEdit from Profile: + Shellfish
4. Savetoast

5. 

   16 ProfileSaved: recipes update
6. Recipes tab

7. 31

   13 RecipesShrimp hidden: 2 recipes
8. Delete accountfrom Profile

9. 32

   16 ProfileDelete account: confirm

3B · Diary

1. 33

   15 DiaryThis week, today selected
2. Tap Tuesdayweek strip

3. 34

   15 DiaryTuesday: 45 over

1. 30
   30. Profile keeps “suits me” right

   Each row edits one onboarding answer with a named 44 pt button. Changing an allergy re-filters recipes at once.

2. 31
   31. Hidden recipes are explained

   Shellfish added: the shrimp stir-fry disappears, a second locked chip appears, and the note says why 2 recipes are hidden.

3. 32
   32. Destructive needs a real confirm

   What is deleted, 30 days to change your mind, and “Keep my account” first. The page behind is inert.

4. 33
   33. A week at a glance

   Seven day buttons (≥ 44 pt, even at 320 pt) with mini rings. Today is marked in words, future days are disabled.

5. 34
   34. Calm when over, in Diary too

   Tuesday is 45 over: a Turmeric ring and “+45” in the strip, “45 kcal over” in words. Past meals copy to today in one tap.