Designing Port’s new Masterflow: A control unit for clarity

Summary

When Port decided to overhaul its entire UI and flows, one crucial piece of the puzzle was creating a Masterflow—a central, visual map of every screen and user journey in the app. What started as a routine task quickly turned into a deep dive into structure, clarity, and cross-functional alignment. This case study walks through how I transformed a cluttered masterflow into a clean, navigable, and user-first system that serves as a single source of truth for design, development, and marketing alike. Along the way, I learned how thoughtful organisation, consistency, and clear documentation can bridge gaps across teams—and why good design thinking shouldn't stop at the app screen.

The task

As Port underwent a complete UI overhaul, one of my key responsibilities was to design a comprehensive app masterflow — a single, consolidated map of all screens and flows across the app. The goal wasn’t just design documentation; this masterflow needed to serve as:

• A central source of truth for all teams

• A developer-friendly blueprint for smoother handoffs

• And most importantly, a system that reflected the structure and intent behind the new Port experience.

Why not follow the old masterflow?

Tempting as it was to use the old masterflow as a base, it had a few critical limitations that made it clear we needed a fresh start :

1. Visual clutter – Arrows everywhere, pointing from every button to every next screen made it feel chaotic and hard to follow.

2. No clear entry point – The structure didn’t reflect the order of navigation within the app, leaving people unsure where to begin.

3. Inconsistencies – Design inconsistencies across screens were harder to spot and fix because of the disorganised layout.

4. Overwhelming structure – Even simple flows looked more complex than they really were.

   
   

   In short, it wasn’t just about what was being shown — how it was shown made a huge difference.

Laying the first brick

I’ll admit, I started by following the same structure as the old one. I slotted screens into their respective flow sections — until a call with the development team changed everything. They casually mentioned how difficult the old masterflow was to navigate.

Navigation... hmmm.
That’s when it hit me!

The designer in me whispered: "Isn’t this just like designing a Userflow?"
Simple — and yet, surprisingly overlooked.

Instead of looking at it as a visual dump of screens, I started thinking of it as a narrative. If this were a user journey, how would it flow? What would come first, what would branch off, and where would the loops close?

I began with the very first screen users see — the Welcome screen — and let the structure build itself organically from there.

I introduced “levels”, much like in information architecture — keeping related screens in horizontal layers so people could easily spot how deep a flow went.

Each screen was reviewed and revised to match our updated UI guidelines. Common UI components like bottom sheets were pre-designed, so I simply reused them — updating context or copy as needed.

To avoid arrow overload, I used linked blocks for buttons that navigated to other flows. This reduced clutter and made cross-flow interactions easier to track.

Piece by piece, screen by screen, a cleaner, smarter, friendlier masterflow came to life.

Insights along the way

1. Consistency is the hidden hero - From button styles to empty states, consistency reinforces user trust. Even minor inconsistencies can create doubt or confusion. Designing the masterflow helped me spot and resolve these small gaps across the app.

2. Navigation matters — even in documentation - We often talk about navigation within apps, but how you navigate documentation matters just as much. If a dev or designer feels lost in the masterflow, it breaks the whole point of creating it.

3. System status should never be an afterthought - One insight I reinforced during this process: users need feedback. Whether it's an error, a successful action, or something loading — the system should always keep the user informed.

4. UX writing is quietly powerful - From empty states to microcopy, UX writing adds personality and clarity. It’s what helps users feel guided and grounded, even when something doesn’t go as expected.

5. Empty states can hook (or lose) users - A well-designed empty state isn’t just a placeholder — it’s an opportunity. It can nudge the user toward an action, offer clarity, or simply provide comfort that they’re in the right place.

6. Brand language is everywhere - From tone of voice to iconography, brand isn’t just the logo. It’s how the app feels. This project reminded me to keep the Port tone — friendly, clear, empowering — consistent across even the smallest screen.

   
   

Final thoughts

Designing this masterflow wasn’t just a documentation task — it was an exercise in empathy, clarity, and foresight. It challenged me to zoom out, think like every team that would ever refer to it, and structure something not just functional, but delightful to use.

It’s easy to think of documentation as an afterthought. But if done right, it becomes the anchor for every decision, every screen, and every team.

And if this masterflow becomes that anchor for Port — well, then every arrow, every screen, and every level was worth it.