All workMetaimpact · 2026

Metaimpact · Hubs & Pages

Rebuilding the foundation for what comes next

I led a ground-up rethink of Metaimpact's content architecture and page editor because customers struggled to build on their own and our teams were spending too much time doing it for them. The goal was to make creating something good feel simpler, safer, and far less dependent on knowing the product inside and out. The cherry on top: once we stopped making people build everything one block at a time, more than half the work could simply disappear.

Role
Principal Product Designer · Sole designer
What I owned
Full concept and vision · Product architecture · UX strategy · Interaction design · Prototyping · Usability testing
Worked with
Engineering · GTM · Customer-facing teams · Marketing · Head of Sales · Leadership
Status
Alpha · 2026
The redesigned Metaimpact Page EditorBeforeAfter
Drag to compare the legacy editor with the new Hubs & Pages editing experience.

A quick primer

Metaimpact helps organizations coordinate big, messy networks of people, programs, partners, data, and outcomes. Most of what customers see lives inside something we called a Space, which could be anything from a simple page to a dashboard, report, directory, or entire network experience.

Then there were Profile Spaces, Narrative Spaces, List Spaces, Group Spaces, Pages inside Spaces, Lists inside Profiles, and objects living inside all of it. An object could be a metric, a contact, an organization, or another piece of information.

Don't know what any of that means? Welcome to the club. That was part of the problem.

Users weren't sure what kind of thing to create, where to start, or what a good network was supposed to look like. Once they figured that out, they still had to build nearly everything by hand. There were few useful starting points, no real templates, no AI assistance, and very few shortcuts.

Editing wasn't consistently safe either. Depending on what someone was working with, changes could happen live, undo wasn't dependable, and there wasn't a draft model people could trust.

So there was a lot of friction before someone ever got to the part they actually cared about.

The problem

The product was powerful. The experience wasn't.

Spaces could do a lot. That was never really the problem.

The problem was figuring out how to do any of it.

Before someone built a page, they had to understand what Metaimpact meant by a Profile, Narrative, List, Group, Page, object, network, and all the relationships between them.

And once someone got through the terminology, there wasn't much help waiting for them. You started with a mostly blank surface and built things manually. There was little inspiration or guidance. Useful templates weren't there. AI assistance wasn't there. Editing behavior changed depending on what you were working with.

So people did what you'd expect.

They asked us to build it for them.

Our internal teams knew Metaimpact better than anyone. They built in it every day.

And even with that expertise, the results often came down to white space, stacks of cards, text, and custom graphics created outside the product to help hold the story together.

If the people who know every trick in the product have to work that hard to get to something that looks merely decent, asking a customer to start from scratch and create something polished isn't realistic.

The original ask

We were creating Spaces to organize Spaces that pointed to other Spaces.

This project originally showed up as 'Spaces 2.0.'

The brief sounded pretty reasonable: make Spaces easier to find, easier to build, easier to manage, and better looking. Help customers choose the right type. Give them better starting points. Improve the cards. Clean up the navigation. Let people self-serve more often.

That sounded like an editor improvement.

Then I started mapping how real customer networks were actually being built.

And, well... things got a little out of hand.

A Profile Space might have seven or eight navigation items. Several of those might be List Spaces containing only two or three links. Those links point to more Narrative, List, or Profile Spaces. Those might contain more navigation and more lists of more Spaces.

The energy example below is a real build our CEO uses today. Follow just one path through it and you can easily hit 15+ separate Spaces before exploring the other branches.

The meat and potatoes of one story had been spread across a small website's worth of destinations.

More Spaces created more navigation and organizational noise, which led teams to create still more Spaces just to organize the ones that already existed.

A real energy network our CEO uses today. One path can take you through 15+ Spaces before you explore the other branches.

The shift

What if customers didn't have to know any of this?

That became the question.

Instead of asking people to choose among Profile, Narrative, List, and Group Spaces, I reduced the model to a few things with clear jobs.

A Hub organizes the work.

A Page tells the story.

Sections organize the Page.

Blocks are the things you put on it.

Rows and columns still exist, but mostly so the editor can do its job. The user shouldn't have to care.

Now a metric doesn't need another destination. A list doesn't need to become another Space. Organizations, contacts, data, media, and narrative can live together on the Page where they actually make sense.

I developed the full concept and pitched it to leadership. They backed it. With no one in Product at that point, engineering and I worked together to decide what to build first and how to roll it out.

01HubOrganizes pages
02PageGives content purpose
03SectionCreates structure
04RowControls sequence
05ColumnControls width
06BlockRenders content
Latest working prototype: explore the Overview Page to see narrative, media, metrics, and organizations together. Object and data blocks are prototype work, not part of the text-and-image Alpha. Open full prototype

The editor

People needed somewhere safe to screw up.

The old experience didn't give customers much room to experiment.

Some editing happened inside an editor. Some changes happened live. Undo wasn't dependable. There wasn't a consistent draft model people could trust.

That makes people cautious.

And cautious users don't experiment. They create throwaway test Spaces, ask someone else to make the change, or simply leave things alone.

So the new editor starts with a very basic promise:

Go ahead. Try something. You're not going to blow up the network.

Authors can work in a draft, make changes directly, undo mistakes, preview the result, and decide when the work is ready to publish.

It sounds obvious. For Metaimpact, it changes the relationship people can have with the product.

I designed the editor in Figma, then used Claude Code to build a working prototype from those designs and my interaction rules. That let me try the behavior myself and work through the details with engineering before they built it.

The editor design makes the Page the workspace. Object blocks shown here go beyond the current Alpha, which tests the interactions using text and images.
Viewing the published Page: the reader sees the composition without editing controls.
Editing the draft: authors see container bounds and can Preview, Save, or Publish. These screenshots show the prototype, not the Alpha build.

Designing the interaction

Powerful doesn't have to mean complicated.

A page builder could easily solve one complexity problem by creating another.

I wanted enough flexibility to build rich pages without asking customers to become page designers.

Move content, not containers

Drag the content you want to move. The editor shows where it can go and handles the rows and columns underneath.

Resize visually

Drag a boundary to make content bigger or smaller. You can see the result as it snaps into place, without digging through menus.

Let the system handle the polish

Choose a background or how tightly content should fit. The editor takes care of readable text, coordinated spacing, and smaller screens.

Don’t start everyone with a blank page

Start with a useful section and placeholders that show what belongs there. Then change it to fit your story.

User testing

Some of my ideas were wrong. That's what testing was for.

The overall direction held up, but that wasn't the useful part.

The useful part was finding the places where something I designed made sense to me and not to the person actually trying to use it.

So we changed them.

Initial approach

Hover options bar

Authors had to maintain a hover state, open a small options bar, and click again to reach formatting.

What changed

Direct selection

One click opened text editing and useful formatting without covering the work. I applied that pattern to every block, removing 1–3 clicks from common edits.

Initial approach

Bounds only on hover

Empty text blocks could disappear completely, and authors could not see how selected content related to its parent containers.

What changed

Contextual bounds

Subtle outlines stay visible, even around empty content. Selecting something makes its outline and the containers around it easier to see.

Initial approach

One Finish menu

Save, publish, exit, and secondary actions lived behind one button. Less navbar noise created uncertainty at the end of an edit.

What changed

Clear completion actions

Save, Publish, and Close became separate actions. Less common choices moved into overflow.

Why it matters

The payoff is bigger than a better editor.

Today, our go-to-market team, or GTM, spends roughly half its time building and maintaining customer networks and Spaces. These are the people who help customers get started and succeed.

That service helps customers succeed. It also tells us something important: too much of the product's value still depends on someone inside Metaimpact knowing how to assemble it.

Hubs & Pages is meant to shift that balance.

Customers get a safer place to build and experiment.

GTM can spend less time doing routine construction for customers.

Sales gets a much stronger canvas for showing what Metaimpact can become.

Product and engineering get one model they can keep extending instead of inventing another kind of Space every time the platform needs to do something new.

During usability testing, I asked our CEO to edit a Page I had created in the Alpha editor. He initially thought engineering had hard-coded it for the test. He was surprised when I told him I had built the whole thing using the editor.

AI assistance

AI can build a draft instead of asking permission after every step.

In the legacy editor, every change had to be made and saved independently.

An AI agent would inherit the same limitation: change the headline, ask for approval. Add an image, ask again. Add a metric, ask again. The user wouldn't even get to see how the pieces worked together before being asked to approve them.

The new editor gives Beacon, Metaimpact's AI assistant, somewhere safe to work.

It can assemble meaningful parts of a Page first, then let someone review the result in context, fix what isn't right, undo changes, and publish when they're ready.

Old

Every change interrupts the flow.

New

Review the work as a composition.

A blank canvas isn't freedom if you don't want to design a page.

Some people know exactly what they want. Let them start blank.

Some people have an idea but need help turning it into something good. Give them section types, placeholders, and templates.

And some people frankly don't want to build the page at all. They want to explain what they need and get back to their actual job. That's where Beacon comes in.

Fully functioning prototypeTry it for yourself
Latest prototype · the same creation surface supports a blank page, reusable templates, or a Beacon-generated first draft.

Start blank... with a cheat code

Build your own Page with section starting points and placeholder blocks to help you get moving.

Describe it to Beacon

Tell Beacon what you’re trying to create and let it assemble a first draft using the same sections and blocks available to a human author.

Use a template

A proven structure with layouts and placeholders already in place, ready to customize.

A template gives you the recipe.Beacon can make dinner.

Where it stands

Still building. Still learning.

Alpha means we're testing with our own team. Next comes a beta with selected customers, then a broader release as the editor and additional blocks are ready.

The work isn't finished. We now have something concrete to try, learn from, and improve together.

In Alpha

Text, images, and core editing

The team is testing the responsive layout, draft model, and editing interactions internally.

In progress

Testing and refinement

Follow-up internal testing and fixes before an external customer beta. Nothing has been released to customers yet.

Designed next

More content and creation paths

Object blocks, properties, hubs, reusable starting points, and Beacon-assisted creation. Designs and prototypes are ahead of the Alpha build.