Skip to content

Next-gen Builder Experience

Intro

Designing the next-gen builder experience

A complete overhaul of the Replay Editor, our most used area of the product, that was faster and easier to use.

Reprise 2023-2024

Principal Product Designer, FE Dev

Contributions

Design lead, FE dev, research, discovery

4+

interlocking systems

3x

Improved TTV

Modular

Product Architecture

Robust

User interactions

The Work

Rebuild the Core Editing Experience

Reprise's demo builder had become untenable: inconsistent patterns, confusing UX, codebase nobody wanted to touch. I led a principles-driven redesign of the entire editing experience, shipping 4+ interlocking systems with a smaller team.

UI screenshots

The old editor was holding us back

Inconsistent interaction patterns, confusing IA, codebase that slowed eng down. Users couldn't figure things out, support tickets piled up.

Screenshots of old UIs

Components of v3

Paving the way for plugins

A modular product architecture allowed us to serve customers with specialized functionality without introducing clutter and complexity across the entire customer base.

Opinionated simplification

No right sidebar. All element editing happens through a context menu on canvas, spawning dialogs above the work area. Less chrome, more focus.

UI screenshots

Sections for flexible structure

Introduced Sections: ad-hoc groupings for product areas, chapters, whatever users needed. Full drag & drop in the Assets tab, mirrored in the left nav. Everything stays in sync.

Case study image

Handing off to the future

At this point I had designed the extensible system and frameworks to manage the plugin variability. I handed this product area to another team member and AI functionality slotted in wonderfully.

UI

Created an extensible interface that paved the way for AI

Component sheet showing various types of dialogs

Component sheet showing various types of dialogs and canvas indicators

UI elements

Early hierarchy and action map exploration

Outcomes

Faster time-to-value for basic demos. Richer experiences for complex demos. Light mode default that customers loved. Modular architecture that made AI features easy to add later. "Figure-outable", users could self-serve.

  • Default experience for all new customers
  • Faster demo asset creation meant 3x TTV improvement
  • Migrated most users in the first week of release

UI showcase

Before and after