Zuul Criteria Section

Redesigning the targeting engine of an internal CMS.

Zuul decides which users see which offers across every brand the company runs. Its Criteria section — the control room for all that targeting — had been built by engineers, for the system, not the people living in it. I redesigned it around its real users and handed it to engineering already mapped to their component library, ready to build.

Timeline

2 Months

Focus

Web CMS

Role

UX Designer

Team

1 Designer

2 Product Managers

10 Engineers

6 Power Users

Tools

Figma

Figma Make

Claude

ChatGPT

The Problem

A highly powerful content management system, yet tedious and confusing to use.

Zuul Criteria had grown into a long, hard-to-scan rule editor. Users could technically configure offers, but they had to hunt across disconnected fields, compare long lists manually, and reread settings before feeling safe enough to save.

Research

I learned everything from the people who live in Criteria every day.

Before designing anything, I ran interviews with four power users and had each one share their screen and set up real targeting while narrating their pain points. I recorded every session and used ChatGPT to analyze the transcripts — pulling out and quoting pain points tied to exact moments in their workflow, so the redesign was driven by evidence, not assumption.

3

Site Anylists

3

Account Managers

15

Total Interview

using AI to analyze the interviews

Blah Blah blah AI was used to anaylze the interviews

  • "The tool didn’t need fewer rules — it needed a clearer way to understand what each rule was doing, where it lived, and whether the final configuration could be trusted."

    Key Insight

  • "The tool didn’t need fewer rules — it needed a clearer way to understand what each rule was doing, where it lived, and whether the final configuration could be trusted."

    Key Insight

a few things stood out

ideation

From paper to a clickable prototype. Expedited with aI.

I sketched on paper, moved the strongest ideas into Figma, then used Figma Make to turn static wireframes into a fully interactive prototype instantly — no manual arrow-dragging. That let me put a real, clickable build in front of the same four users and watch how they actually used it, then iterate across two rounds of feedback.

RTTCF + PRISM. an intentional prompting framework

Traditional Prompt

Move the collapse chevron icon to the right side of the frame. Get rid of the per-item settings icon and replace it with one of those "arrow-up-right-from-square" icons to the right of all the group names in settings. That way the user can navigate to the group setting instead of the individual setting

RTTCF/PRISM Prompt

Review:
The current Zuul Criteria UI is a dark admin tool (#161b22 background, #21262d surfaces,
#30363d borders). Tab navigation sits at the top with a blue (#0d6efd) icon, active tab
in white (#c9d1d9), inactive tabs in muted grey (#8b949e). The main content area contains
labeled groups of criteria rows — full-width cards (8px radius, #21262d fill, #30363d
stroke) with criteria labels and blue/grey circular toggle controls on the right. The
Summary page lists active settings organized by group name headings, with individual
item rows beneath each group. Criteria item chips contain a text label and a small "×"
dismiss icon.

Iterate:
Three targeted changes:

  1. Collapse chevron — Move the chevron toggle to the RIGHT side of each group header
    row, far-right aligned. Right-pointing (▶) when collapsed, downward (▼) when expanded.

  2. Summary page group headers — Remove any per-item settings icons from individual
    summary rows. Instead, place an "arrow-up-right-from-square" navigation icon to the
    right of each group name heading on the Summary page. Clicking it navigates the user
    to that group's criteria tab/page directly.

  3. "×" in item chips — Scale the × dismiss icon to match the cap-height of the chip
    label text (14–16px). Use a proper ✕ glyph with equal padding on both sides of it.

Specify:

  • Chevron: 16px from right edge of group header, #6e7681 at rest, #c9d1d9 on hover

  • Group header row: 40px tall, transparent background, 1px #30363d bottom separator

  • Navigate icon: arrow-up-right-from-square, 16px, 8px gap right of group label,
    #6e7681 at rest, #0d6efd on hover. No action icons on individual item rows.

  • ✕ in chips: cap-height match to label, balanced left/right padding, proper glyph
    not a superscript character

Maintain:

  • Do not change tab navigation, page layout, or header structure

  • Keep all color tokens: #161b22, #21262d, #30363d, #0d6efd, #c9d1d9, #8b949e, #6e7681

  • Preserve all criteria row styles, toggle controls, and segmented control patterns

  • Do not alter any component not directly referenced above

  • Keep all layer naming conventions and auto layout settings intact

development handoff

handing off designs already mapped to engineering's components.

I walked the 10+ engineers of the Zuul Engineering Team (ZET) through the prototype to explain what changed and why. Their key ask: build it on Bootstrap, the library Zuul already runs on. So I loaded Bootstrap into Claude Design alongside my Figma Make designs and regenerated the work on top of it — turning the handoff from a translation problem into a one-to-one map between design and code.

original designs

bootstrap library mapped
with Claude Design

Final Wireframes

Five components that did the heavy lifting.

These five components carried the biggest behavioral wins.

Include/ Exclude segmented control

Replaced a dropdown with a three-state toggle and a color-matched item list — green for include, red for exclude — so every value's state reads at a glance. Add, clear, and clear-confirm prevent accidental wipes.

Old

The existing vendor page suffered from inconsistent labeling and deeply buried information. Accessing key details required multiple clicks, and the page looked nearly identical to the review page.

Include/ Exclude segmented control

Replaced a dropdown with a three-state toggle and a color-matched item list — green for include, red for exclude — so every value's state reads at a glance. Add, clear, and clear-confirm prevent accidental wipes.

Include/ Exclude segmented control

Replaced a dropdown with a three-state toggle and a color-matched item list — green for include, red for exclude — so every value's state reads at a glance. Add, clear, and clear-confirm prevent accidental wipes.

Logic gates

An Any / All / Inactive control that makes rule-stacking explicit and adjustable, with “Add New Rule” to build grouped logic — turning previously opaque behavior into something visible.

Old

The review page required several clicks to access and was visually identical to the vendor page. The most important workflow, submitting documentation and questionnaires, was hidden within a misleading “Project Management” tab.

Logic gates

An Any / All / Inactive control that makes rule-stacking explicit and adjustable, with “Add New Rule” to build grouped logic — turning previously opaque behavior into something visible.

Logic gates

An Any / All / Inactive control that makes rule-stacking explicit and adjustable, with “Add New Rule” to build grouped logic — turning previously opaque behavior into something visible.

Summary Tab

A single consolidated view of every active criterion across the whole config — editable inline. It gives users the review-before-save moment that the old flow never had.

Old

Exporting audit data was one of the most tedious workflows in the module. With no formal export tools available, users relied on screenshots to gather vendor populations, documentation, and history logs for audits.

Summary Tab

A single consolidated view of every active criterion across the whole config — editable inline. It gives users the review-before-save moment that the old flow never had.

Summary Tab

A single consolidated view of every active criterion across the whole config — editable inline. It gives users the review-before-save moment that the old flow never had.

Import Feature

A bulk-upload control for long lists — domains, affiliates, zip codes — in one action instead of one value at a time. A direct quick win against a daily source of tedium.

Old

Exporting audit data was one of the most tedious workflows in the module. With no formal export tools available, users relied on screenshots to gather vendor populations, documentation, and history logs for audits.

Import Feature

A bulk-upload control for long lists — domains, affiliates, zip codes — in one action instead of one value at a time. A direct quick win against a daily source of tedium.

Import Feature

A bulk-upload control for long lists — domains, affiliates, zip codes — in one action instead of one value at a time. A direct quick win against a daily source of tedium.

Range Slider

A dual-handle slider with live min/max inputs that stay in sync — set a range by dragging or typing. Replaces fiddly numeric entry for things like age and visit counts.

Old

Exporting audit data was one of the most tedious workflows in the module. With no formal export tools available, users relied on screenshots to gather vendor populations, documentation, and history logs for audits.

Range Slider

A dual-handle slider with live min/max inputs that stay in sync — set a range by dragging or typing. Replaces fiddly numeric entry for things like age and visit counts.

Range Slider

A dual-handle slider with live min/max inputs that stay in sync — set a range by dragging or typing. Replaces fiddly numeric entry for things like age and visit counts.

Zuul Logo Redesign

And I also redesigned the logo…

Final Thoughts

Designing close to the people who use it and the people who build it.

The biggest lesson was that a handoff is part of the design. Getting ZET's feedback before finalizing — and rebuilding on their component library — meant the redesign wasn't just usable, it was buildable. Pairing direct user observation with AI for analysis, prototyping, and handoff kept me close to both sides of the screen the whole way through.

TK

Pages

Home

Work

About

Work

Instagram Exchange

Risk3Sixty

What If Media Group

Connect

Resume

TK

Work

About

TK

Work

About