Years of usability issues, fixed in one refactor

Engineering was rebuilding the wedding website editor exactly as it was. I asked for a little time to fix it first.

The new website editor: a wedding website preview with Save and close and Publish above it, and Design, Pages and Settings in a bar under it.
when
Jul 2026
team
Me (senior product designer)
UX Researcher
Product Manager
Engineering Manager
10 engineers
focus
navigation, interaction design, prototyping, usability testing

Refactor became my favorite word

When I joined the Wedding Websites team in February 2026, engineering was months into rebuilding the website editor, and the plan was a 1:1 copy of an editor that had barely changed in ten years.

To me, a refactor is the perfect excuse to batch-fix everything that’s bugged couples (and me) forever. So I asked for a little time to prove it.

Two weeks, one whole website editor in Figma Make

Figma Make was about to start limiting credits, so I went heads down for two weeks straight and built a working website editor in it before the cutoff. Then our UX researcher and I put it in front of couples on UserTesting, to make sure the new navigation and layout was easier to use.

“Oh, I see you’ve changed things up. I just used The Knot for my wedding website and this feels much easier.”

— a couple in usability testing

No more hunting for the menu

Everything lived in one menu behind “Edit website”, web and app were organized differently, and an X closed the editor, often with several X’s on screen at once. Now Design, Pages and Settings are always in view, web and app share one structure, and “Save and close” says what it does.

The old editor: a wedding website preview with Edit website and Share website buttons above it and an X in the corner.
BeforeOne menu behind “Edit website”
The new website editor: a wedding website preview with Save and close and Publish above it, and Design, Pages and Settings in a bar under it.
AfterDesign, Pages and Settings, always there

From three clicks to one

Changing a page took Edit website › Our Story › Settings. Now every page has its own Edit page button.

BeforeThree clicks deep
AfterEdit page, right on the page

Page settings you can actually find

Settings were hidden behind a tab, and changing a page title had no save button, so nobody could tell when a change had taken. Now the settings sit right on the page, and a title change has an explicit Save.

BeforeHidden behind a tab, no save
AfterRight on the page, with Save

A home menu without the guesswork

The home page’s menu hid things behind expand and collapse states, packed the couple’s names, date and location into one block, and had a Settings tab full of options you couldn’t change. Now names and date & location each have their own row, and the cover photo is one simple setting.

BeforeExpand, collapse, and a tab of dead ends
The new home page menu: Names, Wedding date & location, and Cover photo as separate rows, then the events.
AfterNames, date and cover photo, a row each

Design settings with room to grow

Your current design and browsing new ones were one crowded menu, and colors hid behind colorways that didn’t show what you’d get. Now they’re separate, colors show as thumbnails so the subtle differences are visible, and there’s room for more layouts, fonts and animation.

The old Design menu: the current design, its colorways and browsing new designs in one long list.
BeforeOne crowded menu
AfterYour design, with real color thumbnails

A more modern gallery built for thumbs

The edit button and drag handles only appeared on hover, so on a phone they didn’t exist, and moving a photo kicked you out of the gallery. Now both are always visible, touch targets are sized for thumbs, and you stay put while you rearrange.

BeforeControls hidden behind hover
AfterEdit and drag, always visible

Page items that look like what’s in them

Hovering an item shifted the content around it, the drag handle only showed up on hover, and the previews didn’t look like what was inside. Now hovering moves nothing, you can always see where to drag, and every item previews its real content.

BeforeHover shifted everything
A page item for a hotel: its photo, a Room block tag, name, address, phone, email and website, with the drag handle showing.
AfterA preview that matches the content

Dozens of fixes, one launch, faster experiments

The new editor shipped with the refactor at the end of July 2026 and is live for every couple. One launch cleared dozens of accessibility and usability issues that had piled up for a decade, and complaints about ease of use have dropped.

It also left the team a clean, consistent editor to build on, so the experiments that came next could run much faster.

more at The Knot
The first-place team in the SeatAgent hackathon

Hackin

TK hosted a 2 day hackathon where the goal was to find ways to use AI that will make life easier for ourselves or our users. It was rewarding because we went after a true, documented pain point in event planning and built something that fit naturally in the product (which was important to me because I complain about useless AI features all the time and I didn't want to be a hypocrite lol).

I don't think I can share too much more right now, but I'm proud of our team and am hoping we'll make it a reality soon so you can check it out live!

thanks for stopping by

got a project in mind? say hi