Information Architecture & User Flow Map
Builds on Topic 5.
What you'll produce
An Information Architecture (IA) map plus a user-flow diagram for FreshCart's core browse → cart → checkout journey. The IA map is the app's skeleton — the sitemap and navigation structure with labels written in shoppers' words, not internal jargon. The flow diagram is the step-by-step path a first-time shopper takes to place an order, with every decision point, friction point, and drop-off marked, ending in a named list of the exact screens the redesign needs to build. This is the bridge between research and design: it converts the "why first-timers abandon" insights from Deliverable 1 into a concrete structure and journey that wireframes (Deliverable 3) draw directly from. It's also the artifact that proves you can think in systems and paths — the skill that separates a designer from someone who just decorates screens, and the page interviewers point at to ask "why is checkout three steps and not one?"
Instructions
- Restate the job in one line. Anchor everything to the goal: a first-time FreshCart shopper places their first order in under 3 minutes, browse → cart → checkout. Write it at the top so every structural choice is judged against it.
- Inventory the content/functions, then group them. List everything a shopper must reach (categories, search, product detail, cart, delivery slot, address, payment, order confirmation, account). Group related items into a small number of top-level buckets — aim for 5 or fewer primary nav destinations. Fewer, clearer buckets beat a long menu.
- Draw the IA map (sitemap). Show the hierarchy as an indented tree or boxes-and-arrows: top-level nav → sub-areas → key screens. Mark which destinations live in the persistent bottom nav / tab bar vs. which are reached in-flow (e.g., payment is part of checkout, not a tab).
- Label in the user's language. For every node, write the label a shopper would say out loud. Replace internal/jargon terms with plain words (e.g., "SKUs" → "Products", "Fulfillment window" → "Delivery time"). Keep a short rejected-labels note showing one or two jargon terms you killed and why — it proves the choice was deliberate.
- Map the happy-path user flow as boxes (screens/states) and arrows (actions), left to right, from app open to order confirmed. Use a diamond for every decision/branch (Guest or sign in? Slot available? Payment valid?). Number the steps so you can count them — step count is a friction metric.
- Mark friction and drop-off with evidence. At each step where Deliverable 1's research says first-timers stall, add a flag (e.g., 🔴) and a one-line why tied to a real insight or the 58% drop-off stat. Distinguish a drop-off (user leaves) from friction (user struggles but may continue). Show at least one error/edge branch (out-of-stock item, declined card, no delivery slots) — happy paths hide the real failures.
- Name the screens the redesign needs. From the flow, extract the explicit screen list (e.g., Home/Browse, Category, Product detail, Cart, Checkout — delivery, Checkout — payment, Order confirmation). Flag each as Keep / Redesign / New so Deliverable 3 knows exactly what to wireframe.
- Count the steps and sanity-check the 3-minute goal. State the happy-path step count, then name the one or two cuts you'd make to hit "under 3 minutes" (e.g., guest checkout default, single combined delivery+payment screen). This closes the loop back to the goal in step 1.
Worked example
(FreshCart — core browse → cart → checkout journey for the primary persona from Deliverable 1: Maya Cohen, 31 — "the time-boxed first-timer," new to the city for a job, ordering one-handed on her phone during a 15-minute break, first time using a grocery-delivery app)
Job to be done: A first-time FreshCart shopper places their first order in under 3 minutes, browse → cart → checkout.
1. IA map (sitemap with user-language labels)
Persistent bottom tab bar (4 tabs) — everything else is reached in-flow:
FreshCart (app)
├─ 🛒 Shop [TAB] ← default landing
│ ├─ Search "what are you after?" (search bar, top, always visible)
│ ├─ Browse by category
│ │ ├─ Fruit & Veg
│ │ ├─ Dairy & Eggs
│ │ ├─ Meat & Fish
│ │ ├─ Bakery
│ │ ├─ Pantry
│ │ └─ Frozen
│ ├─ Deals this week
│ └─ Product detail (price, qty, "Add to cart")
├─ 🧺 Cart [TAB] ← live item count badge
│ └─ Review items → "Go to checkout"
│ └─ Checkout (in-flow, NOT a tab)
│ ├─ Step 1 · Delivery (address + delivery time)
│ ├─ Step 2 · Payment (card / Apple Pay / Google Pay)
│ └─ Step 3 · Review & place order
│ └─ Order confirmation ("Order placed — arriving Thu 6–8pm")
├─ 📦 Orders [TAB]
│ └─ Track order / Reorder
└─ 👤 Account [TAB]
├─ Addresses
├─ Payment methods
└─ Help
Why this structure: 4 tabs, not 7. Checkout is not a tab — it's a focused in-flow sequence so a first-timer can't wander off mid-purchase (a major drop-off cause). Search sits above category browse because research showed first-timers arrive knowing roughly what they want.
Rejected labels (deliberate choices):
- "Catalog" → Shop (nobody says "I'm going to the catalog").
- "Fulfillment window" → Delivery time (internal logistics term, meaningless to shoppers).
- "Basket" was on the fence; chose Cart to match the universal e-commerce convention shoppers already know (reduce friction via familiar patterns).
2. User-flow diagram (happy path + branches)
[box] = screen/state · <diamond> = decision · → = tap/action · 🔴 = research-backed drop-off/friction
1 [Open app → Shop]
→
2 [Search or tap category]
→
3 [Product detail] →(Add to cart)→ back to Shop ⟲ (repeat to build basket)
→
4 [Cart: review items] → (Go to checkout)
→
5 <Signed in?> ──No──► 🔴 [Account wall: "Create an account to continue"]
│ Yes │
│ └─► 58% of first-timers stall here
▼
6 [Checkout · Delivery] → enter address → <Delivery slot available?>
│ Yes │ No
▼ └─► 🔴 [Dead end: "No slots" — no next step]
7 [Checkout · Payment] → <Card valid?>
│ Yes │ No
▼ └─► [Inline error: "Card declined — try another"] → retry
8 [Review & place order] → (Place order)
→
9 [Order confirmation: "Arriving Thu 6–8pm"]
3. Friction & drop-off — flagged with evidence
| Step | Flag | What happens | Why (from Deliverable 1 research) |
|---|---|---|---|
| 5. Account wall | 🔴 Drop-off | Forced to create an account before checkout | Interviews: 4/6 first-timers said they'd "just leave" when asked to register for a first order. Biggest single contributor to the 58% drop-off. |
| 6. No delivery slot | 🔴 Drop-off (dead end) | "No slots available" with no recovery path | App-store review: "couldn't even find a time to get my food." Friction becomes an exit because there's no next action. |
| 4→5. Cart→checkout handoff | 🔴 Friction | Button labeled "Proceed" in a different visual style; users unsure they're still in the same flow | Reviews calling checkout "a maze" — users lose their sense of where they are. |
| 7. Card declined | ⚠️ Edge case | Generic full-page error, loses entered data | Not a top drop-off, but re-entering everything pushes people over the 3-minute goal. |
4. Screens the redesign needs (Keep / Redesign / New)
| Screen | Status | Note |
|---|---|---|
| Shop (home/browse) | Keep | Search + category grid mostly works; minor label cleanup. |
| Product detail | Keep | "Add to cart" is clear; no major change. |
| Cart | Redesign | Make "Go to checkout" the obvious primary action; show item count + subtotal. |
| Checkout · Delivery | Redesign | Add slot-unavailable recovery (suggest next available time). |
| Checkout · Payment | Redesign | Inline, non-destructive error; preserve entered data. |
| Review & place order | New | Single confirm screen so the user sees the full order before committing. |
| Guest checkout entry | New | Replaces the account wall — defer "create account" to after the order. |
| Order confirmation | Keep | Clear arrival window already present. |
5. Step count & the 3-minute check
- Happy-path screens to a placed order: 6 (Shop → Product detail → Cart → Delivery → Payment → Review). Search/add-to-cart repeats don't add screens.
- Two cuts to hit "under 3 minutes":
- Guest checkout by default — removes the step-5 account wall entirely (the single biggest drop-off); account creation becomes a one-tap offer on the confirmation screen.
- Smart delivery defaults — pre-select the next available slot and saved/typed address so step 6 is "confirm," not "fill out a form."
These two cuts directly attack the two 🔴 drop-offs, which is how the redesign moves the 58% number.
Rubric
The app's AI scores the learner's submission against these criteria and gives feedback. Levels: Needs work (1) / Solid (2) / Excellent (3). Passing = every criterion at Solid or above.
- IA structure & grouping — 1: a flat dump of screens or 7+ top-level items with no logic · 2: a clear hierarchy with a small set of primary destinations · 3: a tight 5-or-fewer nav, deliberate tab-vs-in-flow choices, and a rationale tied to the first-timer goal.
- User-language labeling — 1: internal jargon or vague labels ("Module", "Catalog") · 2: plain, shopper-friendly labels throughout · 3: plain labels plus a rejected-labels note showing jargon deliberately killed and why.
- User-flow completeness — 1: a linear list with no decisions or branches · 2: boxes-and-arrows happy path with decision points marked · 3: numbered steps, decision diamonds, and at least one real error/edge branch (out-of-stock, declined card, no slot).
- Friction & drop-off marked with evidence — 1: no friction marked, or marked with no reasoning · 2: sticking points flagged on the flow · 3: each flag tied to a specific Deliverable-1 insight or the 58% stat, distinguishing drop-off from friction.
- Screen list drives the next deliverable — 1: no screen list, or one disconnected from the flow · 2: a screen list extracted from the flow · 3: every screen labeled Keep/Redesign/New so Deliverable 3 knows exactly what to wireframe.
- Traceability & goal discipline — 1: ignores the 3-minute / drop-off goal · 2: references the goal · 3: states step count and names specific cuts that attack the flagged drop-offs to hit "under 3 minutes," closing the loop from research to structure.