Customer Journey Map Figma Template (English + Arabic, Light + Dark)
by Laith Aljunaidy
$0
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.
The full guide, every block explained in English and Arabic: laithjunaidy.com/store/customerjourney
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.
كل واحد بالفريق مسؤول عن شاشة. ما حدا مسؤول عن العشرين دقيقة اللي بين الإعلان والمنتج بإيد الزبون، وهي بالضبط الفترة اللي بتضيع فيها.
الشرح الكامل لكل بلوك بالعربي والإنجليزي: laithjunaidy.com/ar/store/customerjourney
شو في على اللوحة
سطر المراحل. خمس مراحل مرقّمة بالعرض، كل وحدة فيها اسم وسطر بيقول شو بيصير فيها. بدّل الخمسة كلهم، هدول شكل رحلتك انت مش مجموعة ثابتة.
الأهداف والأفعال ونقاط التماس والأفكار. أربع صفوف. شو بدها بهالمرحلة، شو بتعمل، شو بتلمس عشان تعمله، وشو عم تفكر فيه بكلامها.
المشاعر. صف مقيّم من 1 واطي لـ 5 عالي، بنقطة لكل مرحلة على منحنى حي. النقاط الواطية حمرا والعالية خضرا، فاللحظات اللي لازم تتصلح أول بتبيّن من بعيد.
نقاط الألم والفرص والمقياس. ثلاث صفوف. كل ألم بالعمود اللي بيصير فيه، كل فرصة بتجاوب على ألم، وكل فرصة معها مقياس عشان تتأكد من الحل بعدين.
قبل وبعد
قبل: مسار بيبلش من التطبيق.
بعد: رحلة بتبلش من الإعلان.
قبل: مشاعر موصوفة بفقرة.
بعد: منحنى من 1 لـ 5، نقطة لكل مرحلة.
قبل: كل واحد مسؤول عن شاشة.
بعد: في حدا مسؤول عن مرحلة.
قبل: آلام مكتوبة بدون مكان.
بعد: الألم بالعمود اللي بيصير فيه.
قبل: فرص ما ورها أرقام.
بعد: صف مقياس تحت كل فرصة.
قبل: خريطة إنجليزية ملزوق فيها عربي.
بعد: خريطة باللهجة مبنية من اليمين لليسار.
شو بينزل معك
FIG القالب. ملف فيجما واحد بأربع صفحات: إنجليزي فاتح، إنجليزي غامق، عربي فاتح، عربي غامق، كلهم على مجموعة متغيرات وحدة. Auto layout بكل مكان، فكل خانة بتكبر مع الكتابة.
PDF الدليل. 5 صفحات: اللوحات الأربع، طريقة الاستخدام بخمس خطوات.
PDF, MD Pro. خمس برومبتات لكلود: عبّيها من ملاحظاتي، انتقدها، النسخة العربية، حوّلها لاستنتاجات، ادفعها لفيجما.
PDF Pro. دليل الجلسة. نص ساعة: شو تسأل، بأي ترتيب، وكيف تسكّرها.
FIG Pro. مثال ثاني كامل بسوق تاني، بملف فيجما لحاله، عشان تقرا الطريقة مش تخمّنها.
FOLDER Pro. سكيل Claude Code. وجّهه على مجلد ملاحظاتك فبيعبّي اللوحة، وبعدين بيكتبها بملف فيجما تبعك حسب اسم الطبقة.
لمين، وإيمتى تشغّلها
للفرق اللي ضلها تصلّح شاشات والزبون بيضيع بمكان تاني. ابنيها مرة من بحث حقيقي، وارجع اقرأها كل ما حدا يقترح ميزة، وشوف أي مرحلة بتلمسها فعلاً.
نسختين. مجاني: ملف فيجما و PDF. Pro بعشر دولار: بيضيف البرومبتات الخمسة ودليل الجلسة والمثال الثاني وسكيل Claude Code.
بتطلق منتج ليوزرز عرب؟ بتشارك شاشتك وبفكك فلو واحد قدامك بساعة، وبعدها بتوصلك قائمة تصليحات مرتبة حسب الأثر: Arabic UX Teardown.