Iterating the Navigation

Project type
UX Design
Client
Neota
My role
Designer
I joined this project at two different stages, in the beginning, working on the icons and statuses. And after the first version had been in use for a while, I stepped in to lead the next phase — evolving and refining the experience based on user feedback and usage patterns.
How Text Labels and Hierarchy Improved Neota’s Explorer

When you’re designing the navigation hub of a complex platform, every pixel really does matter. That was the case with the Explorer—the side panel at the heart of Neota’s new web-based app builder, Architect.

Explorer had already made the leap from our legacy platform, Studio, thanks to a solid structural redesign by another designer. I came in during that transition to rework the icon system and visual cues — swapping cryptic dots and diamonds for something more intuitive and cohesive.

Once users got hands-on, a few more opportunities to improve surfaced (as they always do). I jumped back in to refine the hierarchy, clarify interactions, and smooth out the experience. The Explorer didn’t need a reinvention — just a thoughtful tune-up to better support how people really work.

The Challenge

One of the trickier challenges was how to show whether a variable had certain qualities — like actions, goals, or notes — directly from the Explorer. Previously in Studio, this was done with yellow dots, green diamonds, and arrows and letters on hexagons.

The Challenge

One of the trickier challenges was how to show whether a variable had certain qualities — like actions, goals, or notes — directly from the Explorer. Previously in Studio, this was done with yellow dots, green diamonds, and arrows and letters on hexagons.

Blue Neota pull-up banner with the message 'Powerful, Flexible'
Green Neota pull-up banner with the message 'Maximise Value'
Outdoor banner mockup featuring an illustration of a woman floating on the Neota logo like a lifesaver, with the headline 'Automation that keeps you afloat'
Mockup of 'The Gap' section from chapter 1 of the des(i)gna book
Introductory page of chapter 2 titled '21st Century' in the des(i)gna book mockup
Mockup of chapter 2 'Sexed Realities' in the des(i)gna book with the front of the inserted art card visible
Mockup of des(i)gna book chapter 2 'Sexed Realities' showing the insert art card flipped to reveal its back
Mockup of chapter 3 titled 'A Feminist in Design' from the des(i)gna book
Mockup of spread two from chapter 3 of the des(i)gna book
Mockup of spread six from chapter 3 of the des(i)gna book
Mockup of spread seven from chapter 3 of the des(i)gna book

Website

I led the design of our new marketing website — from structuring the content and designing page flows, to building out a flexible design system and defining the look and feel. Along the way, I created the illustrations, product animations, imagery, and microinteractions that bring the brand to life online. It was a true team effort, but I had the opportunity to shape almost every visual and interactive detail you see.

Icons

We didn’t need literal illustrations, but we did need icons that hinted at purpose, grouped logically, and felt cohesive. The result was a more legible, consistent visual language that gave Explorer its own identity within Architect.

Testing: Familiarity vs Freshness

We explored two design directions, for the rework of surfacing statuses in the Explorer:

  • Option A: A modernised take on Studio’s icon-heavy interface
  • Option B: A cleaner, text-supported layout with minimalist visuals

While Option A had nostalgia on its side, Option B came out on top with both newcomers and seasoned users.

Text labels made variables and tools more immediately understandable — especially in team environments where handovers are common.

Icons

We didn’t need literal illustrations, but we did need icons that hinted at purpose, grouped logically, and felt cohesive. The result was a more legible, consistent visual language that gave Explorer its own identity within Architect.

Testing: Familiarity vs Freshness

We explored two design directions, for the rework of surfacing statuses in the Explorer:

  • Option A: A modernised take on Studio’s icon-heavy interface
  • Option B: A cleaner, text-supported layout with minimalist visuals

While Option A had nostalgia on its side, Option B came out on top with both newcomers and seasoned users.

Text labels made variables and tools more immediately understandable — especially in team environments where handovers are common.

Messaging Guidelines

With a clear understanding of our audiences, I worked to define a mission and vision that felt authentic and aligned across the business. I facilitated alignment sessions, iterated with leadership, and helped land language that gave the brand—and team—a shared sense of direction.

With those foundations in place, I led the creation of a digital messaging guide to bring it all together. I wrote the personas and contributed to tone, values, and positioning, collaborating closely with teammates to make the guide practical, cohesive, and usable across teams.

Mockup of an open Neota brandbook showing the introduction page with the phrase ‘More than just a technology company'
Mockup of an open Neota brandbook displaying the company values page
Mockup of an open Neota brandbook displaying the voice versus tone page
Triple Venn diagram illustrating the intersection of processes, logic, and documents forming Neota, over a layered dot pattern background

What We Changed

Improved Visual Hierarchy

  • Reduced icon opacity to shift focus from chrome to content
  • Reserved semi-bold styling for key items (like issues), not every heading
  • Indented items to mirror logical structure under baskets
  • Removed the “Explorer” label — it was taking up space without adding value

Enhanced Functionality

  • Replaced hover-to-edit buttons with one-click actions for faster interaction
  • Introduced new visual states: one for the open editor, one for selected items
  • Made the top “issue” double as the app name, keeping naming consistent

Statuses That Actually Say Something

For variable icons, we simplified the shape to a diamond and made it clearer: empty for questions, filled for conclusions.

Then added labeled pills like “action”, “goal” or “note” to convey different statuses.

No guessing, no codebreaking — just clean, readable context.

Making Space to Build

Through testing, we learned that most people preferred selecting an issue first, then clicking to add a tool — so we introduced an “Add” button directly in the Explorer.

We kept the existing drag-and-drop option for flexibility, but made it easier to get things right the first time.

Warnings, When You’re Ready

We noticed a problem: warnings were popping up everywhere. They were just trying to help — but the volume was too much, too soon.

I suggested a different approach: what if warnings weren’t always in your face, but something you could choose to engage with when you were ready?

So we added a toggle. You’ll see a count in the header, click it when you want to debug, and get a focused panel that opens on the right-hand side.

Tying it back to the Explorer, I also mapped out how warnings would show up inside the navigation panel itself — giving authors a way to visually locate and jump to flagged items underneath nested layers.

Early internal testing has been encouraging. Feedback from beta testers — especially those familiar with Studio — highlights; fewer usability hurdles, smoother onboarding for new users and reduced friction when switching between and adding tools.

Other projects