Home Works Info
← Back to All Work

CMS Marker Editor — From Ten Types to One Intent

Replacing a rigid type-first marker system with a markers-actions-content framework — users create by intent, and every legacy marker migrates without breaking.

Role
Lead Product Designer
Editing logic redesign · Interaction framework · Migration strategy
Timeline
4–5 months
Platform
Web (VR Maker editor)
Team
Web TsaiPlatform Director
Jafee ChoProduct Manager
Jerry LiaoTechnical Manager
Abner WangFront-End Developer
Sam ChenFront-End Developer
Jessie HuBack-End Developer
Product by
The reimagined marker editor
The Problem

Ten marker types nobody could keep straight — one intent underneath.

Business

  • Reduce support load from the platform's most-used feature
  • Ship without breaking existing tours

User

  • Create by intent, not system taxonomy
  • Choosing wrong meant delete and start over

Technical

  • 10+ legacy types, each with its own editor
  • Full migration with zero data loss
Why This Was Hard
01

Taxonomy before creation

Users had to learn the system's categories before making anything.

02

Ten editing interfaces

Every marker type carried its own UI and its own quirks.

03

Silent migration

Every placed marker across live tours had to convert invisibly.

04

Power without complexity

The flexible model could not overwhelm simple use cases.

My Role

I redesigned the editing logic itself — the model, not just the surface.

Owned

  • Editing Logic Redesign
  • Interaction Framework
  • Migration Strategy
  • UX/UI Design

Collaborated with

  • Product Manager
  • Platform Director
  • Engineering
Key Decisions

Flipping the model from type-first to intent-first.

01
Decision 01 — Product Architecture

Markers, actions, content

Challenge

The 10+ types were really combinations of the same underlying pieces.

Decision

Decompose into one framework: a marker triggers an action that shows content.

Reasoning

Three orthogonal choices replace ten memorized taxonomies.

Outcome

One editor replaced ten separate interfaces.

Marker Editor — decision 1
Marker Editor — decision 1 detail
02
Marker Editor — decision 2 band
Marker Editor — decision 2 side
Decision 02 — UX Strategy

Start from intent

Challenge

Users think “show a photo gallery here,” not “image tag.”

Decision

Creation starts with what should happen — not with which type to pick.

Reasoning

Matching the user's sentence structure removes the wrong-choice failure mode.

Outcome

Choosing wrong — and starting over — disappeared as a failure mode.

03
Decision 03 — Marker management

A layers panel for everything placed

Challenge

Once a scene held dozens of markers, finding one meant hunting around the panorama by eye.

Decision

Add a panel that counts and lists every marker as a layer — select, duplicate, delete, lock, reorder, and read its type at a glance.

Reasoning

A spatial canvas needs a non-spatial index, the same reason every design tool pairs a canvas with a layers list.

Outcome

Selecting a row moves the 360° view to that marker, so locating one no longer depends on remembering where it was put.

CMS Marker Editor — the layers panel
Marker Editor — decision 3 detail
Innovation

Composable framework

Marker × action × content replaces enumerated types.

Intent-first creation

Build from the outcome backwards.

Lazy migration

Legacy markers convert on open — invisibly.

Impact
Product
10+→1
Marker types consolidated into one framework
Product
Intent
Creation flow matches how users describe their goal
Team
Zero
Breaking changes for existing tours
Team
Simpler
One editor to maintain instead of ten
Reflection

The trade-off — I rebuilt the model instead of polishing ten editors. It was slower to ship, but polishing a wrong taxonomy would have compounded the debt.

What I'd improve — progressive disclosure for advanced actions — the framework's full power deserves a gentler ramp.

Next time — when a feature confuses everyone, question its ontology before its interface. The fix was in the model, not the buttons.

Project Showcase
Marker Editor — showcase a
Marker Editor — showcase b