Customer Flow and Persona Mapping
Customer flows, journey maps and personas, from simple to complex, built to flex with slots in Figma.
Requirements
To map how customers move between store, website and app, from the current experience to each persona’s journey, so the business can see where the journey works and where it breaks.
Approach
I mapped the current experience across every stage and channel, then turned it into a journey map for each persona, showing what they do, how they feel and where the business can do better.
Why it mattered
Clear, professional maps give every team the same picture of the customer. Because they are built from slots and components, they stay easy to update as the journey changes.
Complex
Current experience map
The most complex view: the current experience across every stage, with actions, touchpoints, channels, pain points and opportunities in swim lanes.
Journey
User journey map
A journey map for each persona, stage by stage: what they do, which channel they use, how they feel and where the business can do better. An emotion line runs across the top in each persona’s colour.
Personas
Persona mapping
Each persona starts as a profile card with age, occupation and context. Mapping them went through three versions: every persona on one emotion line, then each persona with its own touchpoints, then an illustrated journey for one persona. The customer map brings it all together.
System
Built with slots
Every map sits on Figma’s grid, and every cell holds a slot: a standard frame that only accepts the right components, such as persona cards and persona types. Swapping content is one click, and a slot can stretch across columns when stages overlap.
Persona details come from variables, so a name, colour or age changes once and updates everywhere. The emotion line uses each persona’s colour through variable modes, so one graph works for every persona.
