Customer Journey Map
Free

Customer Journey Map

Four Figma boards with variables. Arabic and English, light and dark.

The Customer Journey Map is a free Figma template by Laith Aljunaidy that maps the customer's path from the first ad to the product in hand. Five stages across the top, rows for goals, actions, touchpoints, thoughts, an emotion curve scored 1 to 5, and pain points paired with opportunities and a metric each. One Figma file with four pages, English and Arabic, light and dark, on one variable collection, plus a 5 page PDF guide. Free on Gumroad. The Pro edition, 10 dollars, adds five Claude prompts, a facilitation guide, a second worked example, and a Claude Code skill.

Get itFree Opens on Gumroad in a new tab

Updated

What is inside

Everyone on the team owns a screen. Nobody owns the twenty minutes between the ad and the product in the customer’s hand, which is exactly where she is lost.

What is on the board

  • The stage header. Five numbered stages across the top, each with a name and one line saying what happens in it. Replace all five, they are the shape of your journey and not a fixed set.
  • Goals, Actions, Touchpoints, Thoughts. Four rows. What she wants at this stage, what she does, what she touches to do it, and what she is thinking in her own words.
  • Emotions. A row scored 1 low to 5 high, with a dot per stage on a live curve. Low dots are red, high dots are green, so the moments to fix first are visible from across a room.
  • Pain points, Opportunities, Metric. Three rows. Every pain sits in the column where it happens, every opportunity answers a pain, and every opportunity carries a metric so the fix can be checked later.

Before and after

  • Before: A flow that starts at the app.
    After: A journey that starts at the ad.
  • Before: Feelings described in a paragraph.
    After: A curve from 1 to 5, one dot per stage.
  • Before: Everybody owns a screen.
    After: Somebody owns a stage.
  • Before: Pains listed with no place attached.
    After: A pain in the column where it happens.
  • Before: Opportunities with no number behind them.
    After: A metric row under every opportunity.
  • Before: An English map with Arabic pasted in.
    After: A Levantine map built right to left.

What lands in the download

  • FIG The template. One Figma file, four pages: English light, English dark, Arabic light, Arabic dark, all on one variable collection. Auto layout throughout, so every cell grows as you type.
  • PDF The guide. 5 pages: the four boards, a five step how to use.
  • PDF, MD Pro. Five Claude prompts: fill it from my notes, critique it, Arabic edition, turn it into insights, push it to Figma.
  • PDF Pro. The facilitation guide. A thirty minute session: what to ask, in what order, and how to close it.
  • FIG Pro. A second worked example in a second market, as its own Figma file, so you can read the method instead of guessing at it.
  • FOLDER Pro. The Claude Code skill. Point it at your notes folder and it fills the board, then writes it into your own Figma file by layer name.

Who it is for, and when to run it

For teams who keep fixing screens and keep losing the customer somewhere else. Build it once from real research, then reread it whenever someone proposes a feature, and check which stage it actually touches.

Two editions. Free: the Figma file and the PDF. Pro, 10 dollars: adds the five prompts, the facilitation guide, the second worked example and the Claude Code skill.

Get itFree