Theme Engine – Designing an Intuitive Theme Builder for Umbraco

Theme Engine is a visual theme creation tool built for Umbraco, designed to empower users—designers, developers, and marketers—to build and customize responsive website themes effortlessly. The goal was to make web design faster, more flexible, and accessible even to users with limited technical knowledge.

As the product designer, I led the end-to-end design process—from defining the user problem to prototyping, testing, and designing an intuitive interface that simplifies theme creation and customization.

Challenges

While existing Umbraco solutions allowed flexible content management, creating or modifying themes required deep technical knowledge.

Complex workflows – Users needed developer support to set up and modify designs.
Fragmented user experience – Multiple plugins and steps were required for styling, layout editing, and previewing.
Lack of visual control Users couldn’t visualize how layout or design changes looked in real-time.
Slow go-live cyclesSimple updates demanded long development and review loops.

Role & Timeline

Product Designer & Researcher

June 2025 - October 2025

Methods

User Research / User Journey Mapping / Competitive Analysis / Design Audit / Visual design / Prototyping / Testing

Defining the Problem

How might we enable non-developers to design and manage Umbraco themes visually while maintaining developer flexibility and brand consistency?

The goal was to create an experience that bridges the gap between visual creativity and technical structure — allowing users to:

Quickly choose from pre-built templates.
Customize layouts, colors, and fonts visually.
Preview designs instantly across devices.
Save and reuse design systems for consistency.

UX Improvements & Design Strategy

Visual-first Editing Experience

Introduced a drag-and-drop layout editor for sections, grids, and components.
Users can directly manipulate visual elements and see changes in real-time.

Smart Theme Customization Panel

Designed a side panel where users can adjust typography, colors, and spacing without losing context of their design.
Added brand presets to ensure consistent visual identity across pages.

Responsive Design Preview

Integrated live preview across desktop, tablet, and mobile modes.
Simplified responsive control with auto-adjusting grid behavior.

Template Library for Fast Start

Curated a set of ready-made templates for industries like SaaS, corporate, and e-commerce.
Templates serve as base themes users can fully customize.

Design Screens Overview

A clean, minimal dashboard where users view all their themes. Each card shows theme preview, last edit, and status (draft/published).

Theme Editor

The main working area — divided into two zones:

Live editable page showing real-time design changes. | Style customization tools (colors, fonts, spacing, alignment).

Impact

After introducing the new Theme Engine:

60% faster theme setup and publishing time.
Reduced dependency on developers for design changes.
Consistent branding across all site pages.
Increased adoption among content creators and marketing teams.

Drag to explore – Design in Figma

Reflection

Designing Theme Engine taught me how visual editing tools balance creativity with structure. The biggest challenge was simplifying technical flexibility into a smooth, guided UX. The success of Theme Engine reinforced how thoughtful design systems can empower teams to build better digital experiences faster.