08 Wireframes

Screen layouts and navigation flow.

Wireframes document the page structure, screen hierarchy, component placement, and click paths across the Mealchemy product experience.

Page change Button function Formatted input page

Open Figma wireframes

Navigation Flow

The annotated flow shows movement from onboarding into sign in, dashboard, recipe creation, discovery, pantry, vault, and scrollable discovery.

Annotated Mealchemy navigation flow showing page changes, button functions, and formatted input pages — Navigation map showing core flows, page changes, and linked app areas.

Mockup vs Live app

Each pair shows the original mockup beside the live app screen.

Sign-in splash

Start page mockup

Live sign-in screen

Create an account

Login form mockup

Live create-account screen

Dashboard / Home

Dashboard mockup

Live dashboard screen

Pantry

Pantry mockup

Live pantry screen

Discovery

Discovery mockup

Live Discover page

Guided discovery / swipe

Guided discovery swipe mockup

Live swipe / guided discovery screen

Preference profile

Mockup

Live app

Recipe instructions

Recipe detail mockup

Live recipe instructions screen

Shopping list

Shopping list mockup

Live shopping list screen

Vault

Vault overview mockup

Live Vault screen

Add pantry item

Input pantry ingredient form mockup

Live Add Pantry Item screen

Additional Mockups

These supporting mockups clarify the broader wireframe set.

Private vault mockup — Private Vault

Shared vault mockup — Shared Vault

General shopping list item mockup — Generated Shopping List

Scroll interface mockup — Scrollable Discovery

Reusable Interface Patterns

Top app bar component — Top App Bar

Bottom navigation bar component — Bottom Navigation

Sticky filter tags component — Sticky Filter Tags

Tabs component — Discover Tabs

You can make this now recipe list component — Recipe List Section