New products typically launch with a lean set of features, built around a few core concepts that can be neatly organized within a simple structure.
Often, the simplicity is part of the innovation.
New products feel lighter. Faster.
But as products succeed, they expand. Expanding the customer base requires adding new features, which introduces new concepts that now need to fit into a structure built for a simpler product.
Products that were once simple become littered with popups and overlays, because there’s nowhere to grow but up. Navigating becomes unpredictable. Back behavior becomes inconsistent. Clicking edit may expand the space inline, open a modal, or take you to an entirely new page.
The Slack team described reaching this point in Rethinking Slack. Slack was originally built around a harmonious set of key features: messaging, files, and search, which fit nicely in a three-column structure. Over time, the product expanded to include posts, audio, video, directories, threads, reactions, and more.
Eventually, they hit a breaking point.
Our users couldn’t make sense of what we were showing them. And our internal teams couldn’t figure out how their stuff should fit into the product.
Instead of improving the experience of the product, new features were just accumulating atop one another. Each new user got an increasingly saturated, busy product instead of the “simpler, more pleasant, and more productive” workspace we had set out to build.
When I wrote Expressive Design Systems in 2019, I wrote that design systems were a solution to the drift that occurs as products grow. Now I understand that consistent building blocks only solve half of the problem.
Using consistent buttons, colors, and type styles is like building a house with the same materials throughout. But houses don’t just contain instructions for combining materials. They have floor plans that describe the spaces in a home, how they relate, and how you move between them.
Digital products also need floor plans.
What makes a clear floor plan?
When I say “floor plan,” I’m talking about how a product’s structure, information architecture, and spatial UI elements work together to help users make sense of the product and the scope of their actions.
In a clear floor plan:
The interface represents how the product actually works, clearly and consistently.
The weight of the interface accurately reflects the weight of the interaction.
When you move through physical space, it’s easy to understand the scope of your actions. If you open a kitchen cabinet, you know you haven’t left the room. If you climb the stairs, you know you’ve moved up a level.
Digital interfaces face a unique constraint. They need to convey spatial relationships, movement, and scope across a flat plane. That means the flat UI needs to give us a clue about the conceptual distance we’ll travel after we click.
Common navigation patterns already come with expectations about spatial distance. Tabs suggest lateral movement between peer views. Items grouped in a side navigation look like rooms in the same hallway.
Those patterns only work as long as the relationships underneath them stay the same. As products grow, they often don’t. A flat list may become nested inside teams, workspaces, and organizations. A single product may split into distinct contexts or modes. Work that once happened side-by-side, like configuring and evaluating, may split into multiple layers. Often, several of these shifts happen at once. The old structure starts to buckle: existing patterns get stretched across relationships they weren’t designed to represent, while new concepts get pushed into modals and overlays because there’s nowhere else for them to go.
When the spatial movement doesn’t match the flat cues, the product becomes harder to map in your head.
Substack has two overlapping worlds: reading publications and publishing your own. The confusing part is that the interface represents the distance between them differently depending on where you are.
When I log in, I land on my feed. Home, Subscriptions, Chat, Activity, Explore, Dashboard, and Profile all sit together in the same side navigation, so they all look like rooms off the same hallway.
But Dashboard takes me into the separate space where I manage my publication. Inside it, Home now means the publication dashboard home, while the Home that takes me back to my feed moved somewhere else. The same relationship is being represented differently depending on which side I’m on.
That distance also changes by task. When I subscribe to a publication, Substack may immediately ask if I want to recommend it from my own publication, placing the reader and publisher experiences right next to each other. But if I want to recommend that publication later, I have to leave the reader experience, enter my dashboard, open Recommendations, and find it again.
There isn’t one correct distance between the reader and publisher experiences. But the interface should represent that distance consistently enough that I can build a reliable map in my head.
In contrast, YouTube makes a similar relationship much easier to understand.
When I land on YouTube, its left navigation is clearly scoped to what I’m doing within YouTube. The “You” section contains my activity within that space, while my avatar sits in the global header. I’m not confused about what types of things might live in the “You” menu and in my account menu.
The link to switch into Studio also appears there with my account. Because of that, the larger context switch when I move into Studio makes sense.
I can draw a simple diagram of the relationships in my head. My account contains YouTube and YouTube Studio. Moving around inside YouTube is a smaller shift. Moving between YouTube and Studio is a larger shift. Changing accounts is an even larger shift.
A rigid floor plan can set a ceiling on your experience
If your spatial model doesn’t fit your product, it can also limit how good the experience can get.
At Shopify, we noticed teams kept adding more and more overlays to the admin. Overlays, like modals and sheets, are a convenient way to ship a new feature quickly without disrupting the “room” below.
But these spatial UI components also set expectations about the scope of an interaction. A popover feels local and close to the work in front of you. A large sheet can make something feel like a substantial secondary task.
They can speed up shipping, but they can also misrepresent an action’s scope.
This is one reason we eventually deprecated the Polaris Sheet component. Often, features that were added to sheets actually belonged on the page below.
For users, that meant an unnecessary context switch and added complexity to something that should have been integrated into the main surface.
Removing the component forced a better question:
How does the existing floor plan need to change to accommodate this new feature?
Before, the most global UI elements lived in the top bar. That worked when each page was its own destination and you finished work before moving on. But as workflows changed, merchants needed to move between layers more often while keeping their original work in place.
By flipping the spatial layers and putting the most global element at the bottom, we opened up new ways to improve the experience.
Work surfaces could now act like portable windows, with the global frame always underneath. From a product page, a merchant could go to an existing collection and have a clear path back. Creating a new collection could open above the product page, so the merchant’s work stayed in place.
Changing the floor plan gave us better ways to represent the new relationships and movement in the product.
You don’t have to renovate everything at once
It’s easier to rearrange furniture than it is to tear down walls. That’s why updating a product’s floor plan can often get deferred.
But the cost of avoiding that work compounds. Every workaround becomes another thing to maintain. Every additional sheet or modal that repeats context needs to be kept up to date with the screen it sits on.
But you don’t need to tear down every wall at once. You can start gradually. Find places in the product where the boundaries are unclear or where important transitions could be more predictable.
Where in your product does the floor plan break down?
The floor plan metaphor is perfect; most products don't break from one bad feature, they break when new concepts get squeezed into a structure built for the old ones. Full disclosure, I built allthingspm.app, and I ran into exactly this while mapping 205 AI PM concepts into a knowledge graph.