Scoutr.ca: Multi-Role SaaS

Location scouting is a mess. Scouts spend hours gathering references, organizing, and piecing them together into a deck for clients.

Scoutr, a Toronto-based startup, wanted to fix that. The goal was to build a centralized app where scouts could instantly compile, manage, and present location options in a clean, professional format.

I was brought in as the sole UX designer to build the platform architecture from scratch. My job was to map the user flows, get stakeholder buy-in, design the wireframes and build a design system that our partner UI agency could stylize.

The challenge was untangling five different roles into the same platform.

Five completely different roles, the Scout, the Client, the Production House, the Property Owner, and the Admin, all had to work together in one platform. So, I initially diagramed this high-level flowchart to validate the platform's architecture before moving into the user flows per role.

HIGH-LEVEL ECOSYSTEM FLOWCHART

Once the big picture was confirmed, I broke it down role by role.

For each of the five roles, I mapped out every step, every decision point, and considered edge cases.

EXAMPLE 'SEARCH AND ADD REFERENCES' FLOW

To validate the vision with stakeholders fast, I needed to go from flows to screens without starting from zero.

I used ChatGPT to write structural prompts and fed them into UX Pilot to generate base wireframes. That gave me a strong head start on the layout. I then went into Figma and refined everything manually to make sure the UX logic actually matched the approved flows.

UX PILOT EXAMPLE OUTPUT

REFINED WIREFRAME BY ME

1. Conversational microcopy. Replaced rigid filter labels with natural, conversational prompts that actually guide the user.

2. Visual filter chips. Swapped standard checkboxes for icon chips that are easier to scan and faster to tap.

3. Contextual hover states. Action buttons only appear on hover, keeping the cards clean by default while giving developers clear interaction states to work with.

4. Dynamic project name. Replaced the generic "Reference List" header with the actual project name so users always know where they are.

5. Better hierarchy. Moved primary actions to follow a more natural reading pattern so the most important interactions are the first thing you see.

Key Decision
The founder wanted to organize locations into folders by type. I pushed back — folders would force users to navigate in and out of categories just to browse, adding unnecessary clicks to every search. Filters solve the same problem in one view, letting users combine criteria without the back-and-forth.

With the wireframes approved, the final step was preparing the project for our visual design partner.

Instead of just dropping a massive file of flat screens, I built a design system. I defined the structure, auto-layout, and interaction states in Figma so the partner agency had a clear blueprint to work from.

Because the UX architecture was already locked in, they could apply Scoutr's branding and styling on top without having to guess or rebuild anything from scratch.

SNEAK PEEK OF SCOUTR'S DESIGN SYSTEM

Five different roles can now navigate the same platform without confusion — each one sees only what's relevant to them.

Previously, there was no unified platform for location scouting — scouts, clients, production houses, property owners, and admins all relied on fragmented tools and manual handoffs. The architecture now gives each role a tailored experience within one system, eliminating the back-and-forth that slowed every project down.

KEY TAKEAWAYS

Architecture before screens. Mapping five roles into one ecosystem before touching wireframes kept the platform from becoming five disconnected products.

Design systems are handoff insurance. A structured component library meant the visual design partner could apply branding without rebuilding or misinterpreting the UX.

My AI Stack

How I collaborated with AI for this project: