Made with Protopie

Made with Protopie

Made with Protopie

Made with Protopie

Show video description

Show video description

Show video description

Show video description

Template-driven content creation

This page focuses on outcomes, decisions, and tradeoffs. The full process is documented separately.

This page focuses on outcomes, decisions, and tradeoffs. The full process is documented separately.

This page focuses on outcomes, decisions, and tradeoffs. The full process is documented separately.

This page focuses on outcomes, decisions, and tradeoffs. The full process is documented separately.

Template-driven content creation

Team:

PM

PM

PM

PM

+

FE

FE

FE

FE

+

QA

QA

QA

QA

My contribution:

🎯 Problem framing

🎯 Problem framing

🎯 Problem framing

🎯 Problem framing

🧠 Brainstorming

🧠 Brainstorming

🧠 Brainstorming

🧠 Brainstorming

🖌 UI design

🖌 UI design

🖌 UI design

🖌 UI design

🧪 Prototype testing

🧪 Prototype testing

🧪 Prototype testing

🧪 Prototype testing

🔬 Handoff & QA

🔬 Handoff & QA

🔬 Handoff & QA

🔬 Handoff & QA

⚡ TL;DR

Creating custom event content used to require code skills and cross-device checks. I introduced reusable templates and in-context preview so that orgnizers could publish content confidently without technical skills.

📊 Outcome

78%

faster content creation

Measured by creating the same content using the legacy solution and new design.

Legacy solution

1

Create content from scratch in the web editor

2

Publish to a staging environment

3

Switch to a mobile device to check layout

4

Return to the web editor to fix formatting

5

Republish to staging

6

Recheck on mobile

7

Publish to live environment

Legacy solution

1

Create content from scratch in the web editor

2

Publish to a staging environment

3

Switch to a mobile device to check layout

4

Return to the web editor to fix formatting

5

Republish to staging

6

Recheck on mobile

7

Publish to live environment

Legacy solution

1

Create content from scratch in the web editor

2

Publish to a staging environment

3

Switch to a mobile device to check layout

4

Return to the web editor to fix formatting

5

Republish to staging

6

Recheck on mobile

7

Publish to live environment

Legacy solution

1

Create content from scratch in the web editor

2

Publish to a staging environment

3

Switch to a mobile device to check layout

4

Return to the web editor to fix formatting

5

Republish to staging

6

Recheck on mobile

7

Publish to live environment

New design

1

Start from a reusable template in the web editor

2

Preview content in context while editing

3

Fix formatting in the web editor

4

Publish directly to live environment

New design

1

Start from a reusable template in the web editor

2

Preview content in context while editing

3

Fix formatting in the web editor

4

Publish directly to live environment

New design

1

Start from a reusable template in the web editor

2

Preview content in context while editing

3

Fix formatting in the web editor

4

Publish directly to live environment

New design

1

Start from a reusable template in the web editor

2

Preview content in context while editing

3

Fix formatting in the web editor

4

Publish directly to live environment

Client Net Promoter Score (NPS)

6

10

One client who previously gave us a 6, citing poor content creation as the reason, later gave us a 10 after the update.

Why did I choose those signals?

Why did I choose those signals?

Why did I choose those signals?

Why did I choose those signals?

⚖️ Constraints and decisions

Positive signals

Testing 4 event content templates with organizers surfaced clear qualitative signals: reduced time to start creation and increased confidence during content creation through accessible previews.

Positive signals

Testing 4 event content templates with organizers surfaced clear qualitative signals: reduced time to start creation and increased confidence during content creation through accessible previews.

Positive signals

Testing 4 event content templates with organizers surfaced clear qualitative signals: reduced time to start creation and increased confidence during content creation through accessible previews.

Positive signals

Testing 4 event content templates with organizers surfaced clear qualitative signals: reduced time to start creation and increased confidence during content creation through accessible previews.

Unmet user needs

Testing also surfaced unmet needs around flexibility, such as composing pages from individual content blocks, which templates could not support.

Unmet user needs

Testing also surfaced unmet needs around flexibility, such as composing pages from individual content blocks, which templates could not support.

Unmet user needs

Testing also surfaced unmet needs around flexibility, such as composing pages from individual content blocks, which templates could not support.

Unmet user needs

Testing also surfaced unmet needs around flexibility, such as composing pages from individual content blocks, which templates could not support.

Short-term strategy

Given time and engineering constraints, we intentionally chose templates as a phase-one solution to deliver near-term impact.

Short-term strategy

Given time and engineering constraints, we intentionally chose templates as a phase-one solution to deliver near-term impact.

Short-term strategy

Given time and engineering constraints, we intentionally chose templates as a phase-one solution to deliver near-term impact.

Short-term strategy

Given time and engineering constraints, we intentionally chose templates as a phase-one solution to deliver near-term impact.

Future focus

We designed templates to evolve into reusable content blocks that can be dragged and dropped in a future release.

Future focus

We designed templates to evolve into reusable content blocks that can be dragged and dropped in a future release.

Future focus

We designed templates to evolve into reusable content blocks that can be dragged and dropped in a future release.

Future focus

We designed templates to evolve into reusable content blocks that can be dragged and dropped in a future release.

An event organizer expressing frustration and saying they wish they could drag and drop elements to customize their page layout.

🧠 User insight

An event organizer expressing frustration and saying they wish they could drag and drop elements to customize their page layout.

🧠 User insight

An event organizer expressing frustration and saying they wish they could drag and drop elements to customize their page layout.

🧠 User insight

An event organizer expressing frustration and saying they wish they could drag and drop elements to customize their page layout.

🧠 User insight

The product manager decided that adding drag-and-drop customization may need to wait due to timing or resource constraints.

🚫 Real-life constraints

The product manager decided that adding drag-and-drop customization may need to wait due to timing or resource constraints.

🚫 Real-life constraints

The product manager decided that adding drag-and-drop customization may need to wait due to timing or resource constraints.

🚫 Real-life constraints

The product manager decided that adding drag-and-drop customization may need to wait due to timing or resource constraints.

🚫 Real-life constraints

The designer deciding to introduce templates as a short-term solution, with a modular content system planned as a future upgrade.

⚖️ Design tradeoff

The designer deciding to introduce templates as a short-term solution, with a modular content system planned as a future upgrade.

⚖️ Design tradeoff

The designer deciding to introduce templates as a short-term solution, with a modular content system planned as a future upgrade.

⚖️ Design tradeoff

The designer deciding to introduce templates as a short-term solution, with a modular content system planned as a future upgrade.

⚖️ Design tradeoff

Goal

Create immediate value while enabling long-term future upgrades before committing to additional complexity.

Goal

Create immediate value while enabling long-term future upgrades before committing to additional complexity.

Goal

Create immediate value while enabling long-term future upgrades before committing to additional complexity.

Goal

Create immediate value while enabling long-term future upgrades before committing to additional complexity.

📌 After-release learning

Despite the fact that templates tested well in remote user testing, post-release feedback showed they did not scale in real use. As organizers attempted to customize content, the templates quickly became restrictive, which explains why many teams started with them but later removed most elements.

As planned, we started exploring reusable content blocks. However, engineering flagged that adding more customization to the existing editor would create tech debt and risk performance issues. Supporting reusable content blocks would require a new editor, effectively invalidating much of the template work. This exposed a significant scalability issue that was not identified during scope planning. Going forward, feasibility checks against long-term goals should be a core part of project planning, not a late-stage consideration.

Thoughtful design begins with meaningful conversations.

Whether you're building a UX team or just want to exchange ideas, I’d love to connect.

Crafted with 🦊 curiosity, caffeine, and debug tears.

© 2025 Celine.Li.

Thoughtful design begins with meaningful conversations.

Whether you're building a UX team or just want to exchange ideas, I’d love to connect.

Crafted with 🦊 curiosity, caffeine, and debug tears.

© 2025 Celine.Li.

Thoughtful design begins with meaningful conversations.

Whether you're building a UX team or just want to exchange ideas, I’d love to connect.

Crafted with 🦊 curiosity, caffeine, and debug tears.

© 2025 Celine.Li.

Thoughtful design begins with meaningful conversations.

Whether you're building a UX team or just want to exchange ideas, I’d love to connect.

Crafted with 🦊 curiosity, caffeine, and debug tears.

© 2025 Celine.Li.