--- title: "User flows and journey maps | Optimize All Academy" description: "Seeing the whole path Marketers often design single pages, but users experience paths : an ad, a landing page, a form, an email confirmation, a reminder…" url: https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/user-flows-and-journeys updated: 2026-10-05 --- UI/UX Design Basics for Marketers · Flows, structure and interface copy · lesson 4 of 21 · 10 min # User flows and journey maps ## Seeing the whole path Marketers often design single pages, but users experience **paths**: an ad, a landing page, a form, an email confirmation, a reminder, a purchase. Problems frequently hide between pages. User flows and journey maps make those paths visible. ## User flows A **user flow** is a diagram of the steps a user takes to complete a task, including decisions and alternative paths. Basic notation: ``` [Entry point] → (Page/screen) → {Decision?} → (Page) → [Goal] ↓ no (Alternative path) ``` Example — webinar registration from Instagram: ``` [Instagram story ad] → (Landing page) → {Registered before?} ↓ no ↓ yes (Form: name + email) → (Thank-you page + calendar link) → [Registered] ↓ error (Inline error message) → back to form [Registered] → (Confirmation email) → (Reminder 1 day before) → (Reminder 1 hour before) → [Attends] ``` What to look for: - **Number of steps** — can any be removed or combined? - **Dead ends** — pages with no clear next step. - **Error paths** — what happens when something goes wrong? - **Channel switches** — moving from app to browser, social to website, email to WhatsApp — each switch risks drop-off. - **Logged-in vs new users** — different paths. ## Happy path and edge cases The **happy path** is the ideal route with no problems. Real users take many others: - Payment declined. - Email typed wrongly. - Arriving from a shared link on a different device. - Returning later to finish. - Using a screen reader or keyboard only. - Slow or interrupted connections. Design at least the most common edge cases explicitly. ## Journey maps A **customer journey map** zooms out further, capturing stages, actions, thoughts, feelings and touchpoints across the whole relationship. | Stage | Aware | Consider | Sign up | Onboard | Use/Renew | |---|---|---|---|---|---| | Actions | Sees reel | Visits site, reads reviews | Starts trial | Sets up account | Uses weekly | | Touchpoints | Instagram | Website, Google reviews | Sign-up form | Emails, app | App, support | | Thoughts | "Could this help me?" | "Is it worth the price?" | "Is this safe?" | "How do I start?" | "Is it still worth it?" | | Feelings | Curious | Unsure | Anxious | Overwhelmed | Satisfied / frustrated | | Opportunities | Clear promise | Transparent pricing, proof | Minimal form, trust signals | Guided setup | Tips, renewal reminders | Journey maps help marketing, sales, product and support teams see their part of the same experience. ## Creating a flow: step by step 1. Choose one important task and entry point. 2. List every screen, message and decision. 3. Walk the flow yourself on mobile, taking screenshots. 4. Mark friction points: extra steps, unclear copy, slow loads, errors. 5. Add analytics data where available (drop-off at each step). 6. Propose a simplified flow. ## Worked example: a consultation booking flow Original: Facebook ad → homepage → Services page → Contact page → long contact form → "We'll get back to you" → email back-and-forth to choose a time. Problems: too many steps, the ad lands on the homepage (weak message match), no instant booking, uncertainty after submitting. Redesign: ad → dedicated landing page matching the ad → embedded scheduler showing available times in the visitor's time zone → short form (name, email, one qualifying question) → confirmation page and calendar invite → reminder emails/SMS with consent. ## Common mistakes - Designing screens in isolation. - Ignoring error and edge-case paths. - Forgetting post-conversion steps (confirmation, onboarding). - Mapping the journey the company wishes existed rather than the real one. ## Measuring a flow Once a flow is mapped, attach numbers to it. Most analytics tools can show how many people reach each step and where they leave. Even rough figures change priorities: a step that loses half of mobile visitors deserves attention before a cosmetic issue elsewhere. Record the baseline before you change anything, so you can compare results fairly afterwards and explain the improvement to your team or client. ## Hands-on: map a real flow with Mermaid and your analytics You can draw flows on paper, in FigJam or Miro, or as text. Text diagrams are easy to version and share. Mermaid syntax renders in many tools (including GitHub, Notion and several documentation platforms, and there is a free live editor at mermaid.live). Here is the webinar flow from this lesson: ```mermaid flowchart TD A[Instagram story ad] --> B(Landing page) B --> C{Registered before?} C -- No --> D(Form: name + email) C -- Yes --> H(You're already registered + calendar link) D -- Error --> E(Inline error message) --> D D -- Success --> F(Thank-you page + calendar link) F --> G(Confirmation email) G --> I(Reminder 1 day before) I --> J(Reminder 1 hour before) J --> K[Attends] ``` Now attach numbers. In GA4, an **Explore → Funnel exploration** lets you define each step as an event or page view and shows how many users reach each step (make sure the events exist and consent rules are respected before you rely on the numbers): ```text Funnel steps (example event names — use your own) Step 1 page_view page_location contains /webinar Step 2 form_start (form interaction on the page) Step 3 generate_lead (form submitted successfully) Step 4 webinar_join (sent from your webinar platform, if integrated) Breakdown: device category Segment: session source = instagram ``` Write the step counts onto your diagram. The step with the largest relative drop is usually where to look first. ```text FLOW FRICTION LOG Step | What the user sees | Friction observed | Evidence (data/recording/test) | Fix idea | Effort (S/M/L) ``` ## Edge-case checklist for any conversion flow ```text [ ] Payment declined or bank verification step (3-D Secure) fails [ ] Email typed wrongly — can the user correct it? [ ] User returns later on another device (magic link, saved cart) [ ] Link opened inside a social app's in-app browser [ ] Keyboard-only or screen-reader user [ ] Slow or interrupted connection mid-submit (double submissions?) [ ] Right-to-left language version (Arabic, Urdu) [ ] Consent declined for marketing messages — do reminders still work where lawful? ``` ## How to measure success A flow improvement should show up as a higher completion rate for the whole path (for example, ad click to confirmed booking), not just a better number on one page. Track the end-to-end rate before and after, by device and traffic source, and check post-conversion steps too: confirmed attendance, activation or repeat purchase. ## Summary Use user flows to map task paths, including decisions and errors, and journey maps to see stages, thoughts, feelings and touchpoints across the relationship. Walk flows on mobile, mark friction, and simplify. ## Video lecture: User flows and journey maps Lecture coming soon · 12 chapters · about 8 minutes. Read the full transcript below. 1. User flows and journey maps 2. Why it matters 3. User flows 4. Happy path vs reality 5. Customer journey maps 6. Worked example 1: webinar flow 7. Worked example 2: consultancy (illustrative) 8. Watch me do it: flow + funnel 9. Make the map trustworthy 10. Measure to the real finish line 11. Common mistakes 12. Recap and try this now ## Lecture transcript ### User flows and journey maps Here's something marketers often miss. Nobody experiences your landing page on its own. They experience a path. An ad, a page, a form, a confirmation email, a reminder, maybe a WhatsApp message. And problems love to hide between the pages, where nobody on the team owns them. In this lecture, you'll learn to map user flows and customer journey maps, how to design for the edge cases real people hit, how to attach analytics numbers to every step, and how to simplify a flow so more people reach the finish line. ### Why it matters Why does this matter? Because every extra step, every channel switch and every unclear moment leaks people. Think of a flow like a garden hose with small holes. Each hole on its own looks harmless. But by the end of the hose, only a trickle comes out. Most teams try to fix this by pushing more water in, meaning more ad spend. Mapping the flow shows you where the holes are, so you can patch them instead. That's usually far cheaper than buying more traffic. ### User flows First, user flows. A user flow is a diagram of the steps someone takes to complete one task, including decisions and alternative paths. The notation is simple. Entry points and goals in square boxes. Pages or screens in rounded boxes. Decisions in diamonds, with arrows for yes and no. When you look at a flow, check five things. How many steps are there, and can any be removed or combined? Are there dead ends with no next step? What happens on error? Where does the user switch channels, like app to browser or email to WhatsApp? And do new and returning users take different paths? ### Happy path vs reality Next, the happy path versus reality. The happy path is the ideal route where nothing goes wrong. Real people take many other routes. Their payment is declined. They mistype their email. They open your link inside Instagram, then try to finish on a laptop. They use a screen reader or only a keyboard. Their connection drops mid-submit. Here's the key idea. You don't need to design every possible edge case. But you must design the common ones deliberately, because those are where real customers quietly give up. ### Customer journey maps Now zoom out. A customer journey map shows the whole relationship, not just one task. Columns are stages, like aware, consider, sign up, onboard and renew. Rows capture what people do, where they do it, what they think, how they feel, and your opportunities. For example, at the sign-up stage someone might think, is this safe? and feel anxious. The opportunity is a short form and clear trust signals. Journey maps are great for getting marketing, sales, product and support to see their part of the same experience. ### Worked example 1: webinar flow Worked example one, simple. A webinar from an Instagram story ad. The flow: ad, landing page, a two-field form, a thank-you page with a calendar link, a confirmation email, then reminders one day and one hour before. Walking it on a phone, we spot two problems. There's no error path, so a mistyped email just fails silently. And the calendar link opens a blank page inside Instagram's in-app browser. The fixes: inline error messages that say exactly what to correct, and a calendar option that works in in-app browsers, plus the link again in the confirmation email. ### Worked example 2: consultancy (illustrative) Worked example two, a business scenario with illustrative numbers. A consultancy in Riyadh runs Facebook ads for free strategy calls. The original flow: ad to homepage, then services page, contact page, a ten-field form, and a message saying we'll get back to you. Then days of email back and forth to find a time. Mapping it with analytics shows most mobile visitors never leave the homepage. The redesign: ad to a dedicated page that matches the ad, an embedded scheduler showing times in the visitor's time zone, a short form with one qualifying question, an instant confirmation and calendar invite, and reminders by email or text with consent. ### Watch me do it: flow + funnel Watch me do it. I pick one task: register for a webinar from Instagram. I write the flow as a text diagram in Mermaid syntax, which renders in many tools, so it's easy to share and update. Then I open GA4, go to Explore, and create a funnel exploration. Step one, page view on the webinar page. Step two, form start. Step three, generate lead. I break it down by device and filter to Instagram traffic. I write each step's numbers onto the diagram. The biggest relative drop is between form start and generate lead on mobile. That's where I'll look at recordings first. ### Make the map trustworthy A few practical notes on that walkthrough. The funnel is only as good as your tracking. Make sure each event actually fires, and that your analytics respect consent rules, before you trust the numbers. Keep a friction log beside the diagram, with each step, what the user sees, the friction you observed, the evidence, a fix idea, and the effort. And use the edge-case checklist from the lesson. Card declined. Mistyped email. Device switch. In-app browser. Keyboard and screen-reader users. Slow connections. Right-to-left language versions. Five minutes with that list prevents weeks of silent losses. ### Measure to the real finish line Let's talk about the finish line, because many teams stop measuring too early. A webinar registration isn't the real goal. Attendance is. A trial sign-up isn't the goal. Activation is. So when you map a flow, include the steps after the conversion: the confirmation, the reminders, the first login, the first use. Then record a baseline for the whole path before you change anything. After the change, compare the same traffic sources over a similar period, split by device. If registrations rise but attendance falls, you haven't improved the flow. You've just moved the leak further down the hose. ### Common mistakes Common mistakes. Designing screens in isolation, one page at a time. Ignoring error paths, so failures are silent. Forgetting what happens after conversion, like confirmation, onboarding, and the reminder that gets people to actually show up. Mapping the journey the company wishes existed, not the real one. And measuring only one page instead of the whole path. The right success metric is end-to-end completion, like ad click to confirmed booking, split by device and source. If that number improves, the flow improved. ### Recap and try this now Let's recap. People experience paths, not pages. User flows map the steps, decisions, errors and channel switches for one task. Journey maps capture stages, thoughts, feelings and touchpoints across the whole relationship. Design the common edge cases on purpose, attach real funnel numbers, and measure end-to-end completion. Try this now. Take one of your ads or posts and map the full flow to conversion, including at least two edge cases. Add numbers from your analytics if you have them, mark every friction point, and draw a simplified version with fewer steps. ## Key takeaways - Users experience paths, not pages — map them. - User flows show steps, decisions, errors and channel switches for one task. - Journey maps capture stages, actions, thoughts, feelings and touchpoints across the relationship. - Design common edge cases, not just the happy path. ## Try it Map the flow from one of your ads or social posts to conversion, including at least two edge cases. Mark every friction point and draw a simplified version. - [Previous: Understanding users: goals, jobs and lightweight research](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/understanding-users) - [Next: Information architecture and navigation](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers/information-architecture-and-navigation) - [All lessons of UI/UX Design Basics for Marketers](https://optimizeall.com/learn/ui-ux-design-basics-for-marketers)