UI footprint cut from 50% to 32% of the screen. Average clicks per task halved, from 4 to 2.

Context

When the system broke under pressure, we didn’t patch it. We redesigned it for what’s next.

During my time at Purple Digital I worked on Hyro, the company’s core SaaS product: an enterprise presentation platform built for immersive experience rooms and customer experience centres, where large corporations show clients, partners and visitors who they are through interactive, high-impact stories.

Story Designer is the heart of that platform, the editor where those presentations are built. Content teams use it to:

• Assemble screens

• Place media

• Define interactions

• Direct how a presentation unfolds in the room

As Hyro’s client base grew, so did the size and ambition of the stories. The editor had been designed when teams were small and presentations were simple, and it no longer kept up.

My brief: find where the editor was falling short, and design a structure that could support the platform’s growth for years to come.

Before -> an editor that competed with the story

What once worked for small teams no longer met the demands of enterprise users.

Scale made the problems impossible to ignore. Three issues stood out:

1. The interface ate the canvas

   • Fixed sections and generous padding: small controls took up large blocks of screen, and panels stayed open whether you needed them or not.

   • The UI claimed around 50% of the available width.

   • For a tool whose entire purpose is visual storytelling, that was a fundamental flaw. Users were building large, immersive presentations through a window half the size it should have been.

2. No clear hierarchy

   • Screens, items and their attributes weren’t presented in a logical order.

   • Fine for a simple story. With dozens of screens and hundreds of items, it was hard to understand what was where, let alone change it with confidence.

3. Tools buried in dropdowns

   • Important actions lived several levels deep in dropdown menus.

   • Even routine tasks took 4 clicks on average.

   • Each detour pulled users out of their creative flow, and over a full day of building the friction added up.

Why it mattered

These weren’t cosmetic issues. They slowed teams down and made the product feel restrictive and overwhelming, the opposite of what a creative tool should feel like. Client feedback kept pointing at the editor as a main pain point, and it became clear that fixing individual screens wouldn’t be enough. The editor needed a new foundation.

After -> a modular editor built around the canvas

Structure isn’t just visual. It’s the backbone of a scalable user experience.

The redesigned Story Designer is organised into three zones. Each has one clear job, and together they give the canvas back its space.

• Top Bar — the story

  • Holds everything that applies to the whole presentation: story title, publication status and sharing permissions.

  • Controls you need regularly but don’t want competing with your work, so they sit in a slim bar at the top, always in reach and never in the way.

• Navigation Bar — the structure

  • Shows the full hierarchy of the presentation at a glance: every item on every screen.

  • Inspect attributes and change placement with drag-and-drop.

  • Visibility toggles appear on hover, so the tree stays calm and readable until you need to act.

  • For large presentations, a confusing pile of elements becomes a navigable structure.

• Detail Menu — the selection

  • Context-sensitive: it adapts to whatever is selected.

  • Select a text element and you get options for font, size and presentation-mode behaviour, such as on-click animations.

    • Select an image or video and the options change with it.

  • Also the entry point for broader tools like the asset library and the prototyping mode, where users direct the flow of the presentation.

By showing only what’s relevant to the current selection, the editor stays lean without hiding anything important.

The result in the design

• UI share of horizontal screen: ~50% before, 32% after (and able to be resized)

• Average clicks per task: 4 before, 2 after

Users get roughly a third more canvas to work with, and the most common tasks take half the clicks.

Bridge -> how we got there

Progress over perfection: getting the structure right first.

Over eight weeks I worked iteratively, focused on scalability, logic and feasibility. The aim wasn’t only to solve today’s usability problems but to create a structure that would support future features and stay easy for the product team to maintain.

1. Map the logic before drawing pixels

   • Built a logic map in FigJam and Miro: an inventory of every existing UI element, what it did and where it lived.

   • Seeing it all side by side exposed the real problem. This wasn’t a styling issue a visual refresh could fix. Many elements lived in the wrong places, and the interface didn’t match the structure of the work.

2. Restructure around three questions

   • I sorted every element by a single question: does it act on the whole story, on the structure of the story, or on the current selection? That rule produced the three zones and gave every tool a logical home.

   • Whole story → Top Bar

     • Title, publication status and sharing describe the presentation as a whole.

     • Needed regularly but not constantly, and they never change with the selection.

     • One slim bar keeps them in reach without taking space beside the canvas.

   • Structure → Navigation Bar

     • Screens, their items and their hierarchy belong together, because users think about them together: what’s in this presentation, and in what order?

     • In the old editor this was scattered. One tree now lets users see every item, inspect attributes and rearrange with drag-and-drop.

     • Visibility toggles moved into the tree and appear on hover, one click away without visual noise.

   • Selection → Detail Menu

     • Most tools buried in dropdowns were really tools for one specific element, such as font and size for text or on-click animations.

     • They now live in a single panel that shows only the options for what’s selected.

     • The same panel is the entry point for the asset library and the prototyping mode, so everything you need to work on something is in one predictable place.

   • What the rule delivered

     • Adaptive panels instead of persistent ones: UI down from ~50% to 32% of the screen.

     • Tools next to where they’re used: average task down from 4 clicks to 2.

     • A clear system describing where future features belong.

3. Co-develop with users

   • Ran feedback and ideation sessions with users throughout the project, not just at the end.

   • In these sessions we reviewed iterations together to see what worked, and ideated on solutions side by side.

   • What we heard fed straight back into the next iteration, so the structure was shaped with the people who use it.

4. Build on tools users already know

   • Users already work in popular tools like Figma and Canva every day.

   • I took inspiration from the conventions of those tools, so the editor feels familiar from the first click and the learning curve stays low.

5. Design for growth, not just for today

   • The structure is modular: new features slot into an existing spaces instead of adding another panel, toolbar or dropdown.

   • The product team can keep adding capabilities without the interface drifting back into clutter.

6. Validate with the team

   • Worked closely with the product manager, developers and tester, reviewing iterations in Figma and checking technical feasibility.

   • Made sure the structure could be built incrementally, introduced step by step without disrupting the experience existing clients relied on.

Reflection

• Structure is a UX feature. The biggest improvements came from deciding where things belong, not from new visuals. Getting the information architecture right did more for usability than any amount of polish would have.

• Design with users, not just for them. Feedback and ideation sessions kept the design grounded in real workflows, and borrowing familiar patterns from Figma and Canva kept the learning curve low.

• Measure what you can, honestly. The redesign hasn’t been built yet, so I couldn’t measure real-world adoption. Measuring the design itself (canvas share and clicks per task, old vs. new) gave concrete, defensible proof of improvement.

• What’s next. Build it and validate it with users using actual implementation and analytics: track task completion time, error rates and client feedback on complex presentations, to confirm the improvements carry over into everyday work.