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

🎯 Problem statement

When events have content that our system doesn't have dedicated features for, organizers have to rely on content pages in our event web portal to display the information. While content pages support rich formatting through HTML and CSS, most users lack the coding skills to use it properly. So pages often looked plain or inconsistent.

There was also no way to preview how content would appear on mobile, creating uncertainty, especially for mobile-first event experiences.

An event organizer encounters HTML and CSS code on a laptop while questioning how to create visually appealing pages without coding skills.

It's hard to make beatutiful content without code knowledge

An event organizer encounters HTML and CSS code on a laptop while questioning how to create visually appealing pages without coding skills.

It's hard to make beatutiful content without code knowledge

An event organizer encounters HTML and CSS code on a laptop while questioning how to create visually appealing pages without coding skills.

It's hard to make beatutiful content without code knowledge

An event organizer encounters HTML and CSS code on a laptop while questioning how to create visually appealing pages without coding skills.

It's hard to make beatutiful content without code knowledge

A frustrated event organizer views a mobile page filled with broken HTML and CSS code, highlighting uncertainty about how content renders on mobile.

Lack of preview risks messy presentation on attendees end

A frustrated event organizer views a mobile page filled with broken HTML and CSS code, highlighting uncertainty about how content renders on mobile.

Lack of preview risks messy presentation on attendees end

A frustrated event organizer views a mobile page filled with broken HTML and CSS code, highlighting uncertainty about how content renders on mobile.

Lack of preview risks messy presentation on attendees end

A frustrated event organizer views a mobile page filled with broken HTML and CSS code, highlighting uncertainty about how content renders on mobile.

Lack of preview risks messy presentation on attendees end

🕵️ Problem validation

Account managers tracked this issue in the client problem backlog. Over 11 clients (representing $250K+ in contracts) raised the stated problems.

One client explicitly cited the poor content creation experience as the reason for giving us a 6 on Net Promoter Score (NPS).

Legacy event content editor showing a rich text interface with HTML and CSS tabs, where event information appears as long blocks of unstyled text, making pages look plain and inconsistent.
Legacy event content editor showing a rich text interface with HTML and CSS tabs, where event information appears as long blocks of unstyled text, making pages look plain and inconsistent.
Legacy event content editor showing a rich text interface with HTML and CSS tabs, where event information appears as long blocks of unstyled text, making pages look plain and inconsistent.
Legacy event content editor showing a rich text interface with HTML and CSS tabs, where event information appears as long blocks of unstyled text, making pages look plain and inconsistent.
A feature request titled “Enhanced Content Pages” documenting content creation issues raised by multiple high-value clients, highlighting significant contract value at risk and a low Net Promoter Score tied to the problem.
A feature request titled “Enhanced Content Pages” documenting content creation issues raised by multiple high-value clients, highlighting significant contract value at risk and a low Net Promoter Score tied to the problem.
A feature request titled “Enhanced Content Pages” documenting content creation issues raised by multiple high-value clients, highlighting significant contract value at risk and a low Net Promoter Score tied to the problem.
A feature request titled “Enhanced Content Pages” documenting content creation issues raised by multiple high-value clients, highlighting significant contract value at risk and a low Net Promoter Score tied to the problem.

🔄 Process

The steps below are shown in order for clarity, but the real process involved lots of back and forth.

Ideate

The design team brainstormed ideas. Then I discussed with product team and engineers about feasibility of each solution.

A list of potential solutions to address the problems with their pros and cons analysis

Ideate

The design team brainstormed ideas. Then I discussed with product team and engineers about feasibility of each solution.

A list of potential solutions to address the problems with their pros and cons analysis

Ideate

The design team brainstormed ideas. Then I discussed with product team and engineers about feasibility of each solution.

A list of potential solutions to address the problems with their pros and cons analysis

Ideate

The design team brainstormed ideas. Then I discussed with product team and engineers about feasibility of each solution.

A list of potential solutions to address the problems with their pros and cons analysis

Design

I analyzed content from a dozen of past events to identify common content types, then designed templates and added mobile preview.

A series of mobile and web interface mockups, showcasing different content block templates and event information screens.

Design

I analyzed content from a dozen of past events to identify common content types, then designed templates and added mobile preview.

A series of mobile and web interface mockups, showcasing different content block templates and event information screens.

Design

I analyzed content from a dozen of past events to identify common content types, then designed templates and added mobile preview.

A series of mobile and web interface mockups, showcasing different content block templates and event information screens.

Design

I analyzed content from a dozen of past events to identify common content types, then designed templates and added mobile preview.

A series of mobile and web interface mockups, showcasing different content block templates and event information screens.

Test

I tested the design with 7 event organizers and summarized the results. Based on the results, I made modifications to the design solutions.

Various sticky notes and documents, displaying detailed feedback, goals, and improvements drawn from user testing

Test

I tested the design with 7 event organizers and summarized the results. Based on the results, I made modifications to the design solutions.

Various sticky notes and documents, displaying detailed feedback, goals, and improvements drawn from user testing

Test

I tested the design with 7 event organizers and summarized the results. Based on the results, I made modifications to the design solutions.

Various sticky notes and documents, displaying detailed feedback, goals, and improvements drawn from user testing

Test

I tested the design with 7 event organizers and summarized the results. Based on the results, I made modifications to the design solutions.

Various sticky notes and documents, displaying detailed feedback, goals, and improvements drawn from user testing

💡Solutions

After reviewing content pages from 20+ past events and interviewing event teams, we created accessible, well-structured templates that reflect how content pages are actually used. We validated both the content and format with event organizers to ensure the templates stayed useful throughout an event’s lifecycle.

Template 1: Event Logistics

Show video description

Used for:

  • Accessibility

  • First aid

  • Safety & security

  • Wifi

  • Dress code

  • Lost and found

  • Mother’s room

  • Merchandise

Template 1: Event Logistics

Show video description

Used for:

  • Accessibility

  • First aid

  • Safety & security

  • Wifi

  • Dress code

  • Lost and found

  • Mother’s room

  • Merchandise

Template 1: Event Logistics

Show video description

Used for:

  • Accessibility

  • First aid

  • Safety & security

  • Wifi

  • Dress code

  • Lost and found

  • Mother’s room

  • Merchandise

Template 1: Event Logistics

Show video description

Used for:

  • Accessibility

  • First aid

  • Safety & security

  • Wifi

  • Dress code

  • Lost and found

  • Mother’s room

  • Merchandise

Template 2: Welcome info

Show video description

Used for:

  • Sessions

  • Speakers

  • FAQ

  • Tickets

  • Sponsors

  • Reasons to attend

Template 2: Welcome info

Show video description

Used for:

  • Sessions

  • Speakers

  • FAQ

  • Tickets

  • Sponsors

  • Reasons to attend

Template 2: Welcome info

Show video description

Used for:

  • Sessions

  • Speakers

  • FAQ

  • Tickets

  • Sponsors

  • Reasons to attend

Template 2: Welcome info

Show video description

Used for:

  • Sessions

  • Speakers

  • FAQ

  • Tickets

  • Sponsors

  • Reasons to attend

Template 3: Pre-event essentials

Show video description

Used for:

  • Restaurants

  • Venues

  • Registration

  • Happy hour

  • Badge pickup

  • Hotels

  • Follow us

Template 3: Pre-event essentials

Show video description

Used for:

  • Restaurants

  • Venues

  • Registration

  • Happy hour

  • Badge pickup

  • Hotels

  • Follow us

Template 3: Pre-event essentials

Show video description

Used for:

  • Restaurants

  • Venues

  • Registration

  • Happy hour

  • Badge pickup

  • Hotels

  • Follow us

Template 3: Pre-event essentials

Show video description

Used for:

  • Restaurants

  • Venues

  • Registration

  • Happy hour

  • Badge pickup

  • Hotels

  • Follow us

Template 4: Empty state

Mobile phone screen displaying a 'Survey is coming soon' message, a blue 'Return Discover' button, and a list of event-related topics like schedule, speaker lineup, and venue map.
Mobile phone screen displaying a 'Survey is coming soon' message, a blue 'Return Discover' button, and a list of event-related topics like schedule, speaker lineup, and venue map.
Mobile phone screen displaying a 'Survey is coming soon' message, a blue 'Return Discover' button, and a list of event-related topics like schedule, speaker lineup, and venue map.
Mobile phone screen displaying a 'Survey is coming soon' message, a blue 'Return Discover' button, and a list of event-related topics like schedule, speaker lineup, and venue map.

Show Alt text

Show Alt text

Show Alt text

Show Alt text

Used for:

  • Coming soon

  • Under construction

  • Maintenance mode

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.