Laurence Publico
Laurence Publico
Home
Home
Work
Work
About
About
Contact
Contact
Case study 03
Case study 03
Journey mapping
Journey mapping
UNSW Core Student Journey Map
UNSW Core Student Journey Map
Designing an artefact people control, not just read
Designing an artefact people control, not just read
Details
Details
Client
Client
UNSW
UNSW
Agency
Agency
Folk
Folk
Role
Role
UX Designer, working with the content strategy team and UNSW stakeholders
UX Designer, working with the content strategy team and UNSW stakeholders
Scope
Scope
The Core Student Journey Map, its interaction model, interactive Figma artefact, and editable component system
The Core Student Journey Map, its interaction model, interactive Figma artefact, and editable component system
This project saw a redesign of UNSW's Core Student Journey Map. The output was an interactive Figma artefact that let stakeholders control what they saw instead of taking in the whole student lifecycle at once, built to be handed over to non-designers.
This project saw a redesign of UNSW's Core Student Journey Map. The output was an interactive Figma artefact that let stakeholders control what they saw instead of taking in the whole student lifecycle at once, built to be handed over to non-designers.
01 — The problem
01 — The problem
UNSW had done the hard part already: mapping out a detailed map spanning the entire student lifecycle, from first considering university through to alumni engagement. The problem was that all of it had been captured in a single, dense journey map. Every stage layered with goals, emotions, pain points, systems, and initiatives, shown all at once. It was accurate. It just wasn't usable, not by leadership trying to make investment decisions, and not by delivery teams trying to plan around it.
UNSW had done the hard part already: mapping out a detailed map spanning the entire student lifecycle, from first considering university through to alumni engagement. The problem was that all of it had been captured in a single, dense journey map. Every stage layered with goals, emotions, pain points, systems, and initiatives, shown all at once. It was accurate. It just wasn't usable, not by leadership trying to make investment decisions, and not by delivery teams trying to plan around it.
02 — What I actually did
02 — What I actually did
I drove the design exploration and prototyping for the interactive artefact. There wasn't an existing pattern to lift and apply here, journey maps in Figma tend to be static or, at best, scrollable, so getting to something genuinely interactive meant testing multiple approaches against Figma's actual prototyping limits before landing on one that worked.
I drove the design exploration and prototyping for the interactive artefact. There wasn't an existing pattern to lift and apply here, journey maps in Figma tend to be static or, at best, scrollable, so getting to something genuinely interactive meant testing multiple approaches against Figma's actual prototyping limits before landing on one that worked.
03 — The decision that mattered: three attempts to get the interaction right
03 — The decision that mattered: three attempts to get the interaction right
First approach
First approach
Horizontal and vertical scrolling with a sticky table header. Technically workable, but it still showed everything, just reorganised it slightly as you scrolled.
Horizontal and vertical scrolling with a sticky table header. Technically workable, but it still showed everything, just reorganised it slightly as you scrolled.
Second approach
Second approach
The same scrolling model, but with multiple sticky headers instead of one. Better orientation, same core problem: the user still wasn't in control of what they were looking at.
The same scrolling model, but with multiple sticky headers instead of one. Better orientation, same core problem: the user still wasn't in control of what they were looking at.
Third approach, the one that shipped
Third approach, the one that shipped
Clickable milestone headers. Instead of scrolling through everything, users click into the top-level milestone they actually care about. That single change came from a real research insight: stakeholders wanted to focus on one part of the journey at a time, not compare across all of them simultaneously. Each row inside a milestone also works like an accordion, so people can collapse what they don't need and directly compare the specific rows they do. A legend only appears on click, rather than sitting on screen by default, so the interface stays clean until someone actually needs the detail.
Clickable milestone headers. Instead of scrolling through everything, users click into the top-level milestone they actually care about. That single change came from a real research insight: stakeholders wanted to focus on one part of the journey at a time, not compare across all of them simultaneously. Each row inside a milestone also works like an accordion, so people can collapse what they don't need and directly compare the specific rows they do. A legend only appears on click, rather than sitting on screen by default, so the interface stays clean until someone actually needs the detail.
That progression matters more than the final pattern alone: the first two attempts weren't failures, they were how I figured out that the real requirement wasn't "make it interactive," it was "put the user in control of density."
That progression matters more than the final pattern alone: the first two attempts weren't failures, they were how I figured out that the real requirement wasn't "make it interactive," it was "put the user in control of density."
04 — Knowing the limits of the tool, and checking myself on it
04 — Knowing the limits of the tool, and checking myself on it
Going in, I already knew, as someone who works in Figma at an expert level, that part of what the client wanted was genuinely beyond what Figma's prototyping could support. I flagged that early. Budget meant Figma was the only realistic option regardless, so the job became making the most ambitious version of the artefact that was actually achievable within the tool, not pretending the ceiling wasn't there.
Going in, I already knew, as someone who works in Figma at an expert level, that part of what the client wanted was genuinely beyond what Figma's prototyping could support. I flagged that early. Budget meant Figma was the only realistic option regardless, so the job became making the most ambitious version of the artefact that was actually achievable within the tool, not pretending the ceiling wasn't there.
I didn't just rely on my own read of that ceiling, either. I checked it with our lead UI designer to get a second opinion, and they confirmed the same constraint. That mattered throughout the project: stakeholders would regularly float ideas in meetings, "it would be nice if the map could also...", and because I already had a validated, confident read on what Figma could and couldn't do, I could give a real answer in the room instead of taking it away to "investigate," which kept expectations realistic without shutting down ambition outright.
I didn't just rely on my own read of that ceiling, either. I checked it with our lead UI designer to get a second opinion, and they confirmed the same constraint. That mattered throughout the project: stakeholders would regularly float ideas in meetings, "it would be nice if the map could also...", and because I already had a validated, confident read on what Figma could and couldn't do, I could give a real answer in the room instead of taking it away to "investigate," which kept expectations realistic without shutting down ambition outright.
05 — Handling a mid-project scope shift without doubling the work
05 — Handling a mid-project scope shift without doubling the work
Partway through, the client asked for a second, static version of the map, the more traditional "show everything at once" format, alongside the interactive one. Rather than building and maintaining two separate artefacts, I structured the component system around a single source of truth: update a component once, and both the interactive and static outputs reflect the change. It meant the added deliverable didn't come with an ongoing maintenance tax for the team.
Partway through, the client asked for a second, static version of the map, the more traditional "show everything at once" format, alongside the interactive one. Rather than building and maintaining two separate artefacts, I structured the component system around a single source of truth: update a component once, and both the interactive and static outputs reflect the change. It meant the added deliverable didn't come with an ongoing maintenance tax for the team.
06 — Designing for a non-designer editor
06 — Designing for a non-designer editor
The artefact was always going to be handed over to someone who probably wasn't a designer, so I built the editing experience with that in mind. I documented most components and journey elements two ways, short Loom walkthroughs and written documentation, so people could either watch or read depending on what they needed in the moment. I also locked the layers on component instances, so only the master components (the actual source of truth) could be edited. That meant a non-designer couldn't accidentally break the system by editing the wrong copy of something.
The artefact was always going to be handed over to someone who probably wasn't a designer, so I built the editing experience with that in mind. I documented most components and journey elements two ways, short Loom walkthroughs and written documentation, so people could either watch or read depending on what they needed in the moment. I also locked the layers on component instances, so only the master components (the actual source of truth) could be edited. That meant a non-designer couldn't accidentally break the system by editing the wrong copy of something.
07 — A small efficiency win
07 — A small efficiency win
I used Figma's AI tooling to speed up parts of the execution, generating variants for things like pill badge labels rather than building each one by hand. Not a headline decision, but it's the kind of detail that shows the work stayed efficient without cutting corners on the system's consistency.
I used Figma's AI tooling to speed up parts of the execution, generating variants for things like pill badge labels rather than building each one by hand. Not a headline decision, but it's the kind of detail that shows the work stayed efficient without cutting corners on the system's consistency.
08 — Impact
08 — Impact
Solved the actual brief, not just the stated one: stakeholders needed to focus on one part of the journey at a time, and the milestone-click interaction model is a direct answer to that, reached only after two other approaches were tested and ruled out.
Solved the actual brief, not just the stated one: stakeholders needed to focus on one part of the journey at a time, and the milestone-click interaction model is a direct answer to that, reached only after two other approaches were tested and ruled out.
Flagged a genuine tool/scope mismatch early, checked it against a second opinion rather than assuming I was right, and used that validated judgment to manage stakeholder expectations in real time throughout the project.
Flagged a genuine tool/scope mismatch early, checked it against a second opinion rather than assuming I was right, and used that validated judgment to manage stakeholder expectations in real time throughout the project.
Delivered two deliverables (interactive + static) from one component system, avoiding duplicated maintenance when the scope expanded mid-project.
Delivered two deliverables (interactive + static) from one component system, avoiding duplicated maintenance when the scope expanded mid-project.
Built the handover so a non-designer could maintain the artefact independently, Loom videos, written documentation, and locked layers protecting the master components, reducing UNSW's ongoing dependency on external design support.
Built the handover so a non-designer could maintain the artefact independently, Loom videos, written documentation, and locked layers protecting the master components, reducing UNSW's ongoing dependency on external design support.
09 — Reflection
09 — Reflection
The most useful lesson here was that "interactive" isn't a feature, it's a judgment call about what the user should control versus what they shouldn't have to think about. The two discarded approaches weren't wasted time; they're what made it clear the real ask was about control, not motion. And checking my own technical judgement with someone else, even when I was confident, is a habit worth keeping: it's cheaper to be second-guessed early by a colleague than by a client six weeks later.
The most useful lesson here was that "interactive" isn't a feature, it's a judgment call about what the user should control versus what they shouldn't have to think about. The two discarded approaches weren't wasted time; they're what made it clear the real ask was about control, not motion. And checking my own technical judgement with someone else, even when I was confident, is a habit worth keeping: it's cheaper to be second-guessed early by a colleague than by a client six weeks later.
Gallery
Gallery
The original journey map, full width
The original journey map, full width
Image: The three interaction approaches side by side: scrolling with sticky header, multiple sticky headers, milestone click-to-focus
Image: The three interaction approaches side by side: scrolling with sticky header, multiple sticky headers, milestone click-to-focus
The three interaction approaches side by side: scrolling with sticky header, multiple sticky headers, milestone click-to-focus
The three interaction approaches side by side: scrolling with sticky header, multiple sticky headers, milestone click-to-focus
Final artefact: milestone view, expanded accordion rows, legend on click
Final artefact: milestone view, expanded accordion rows, legend on click
Next case study
Next case study
04. Beachwatch website update →
04. Beachwatch website update →
Laurence Publico — UX & UI designer
Laurence Publico — UX & UI designer