Slide 1
Slide 1 text
Michelle Hunt
Director of UX Engineering, Lone Rock Point
Building Experiences:
Design Systems, User Experience,
and Full Site Editing
August 28, 2025
Slide 2
Slide 2 text
Director of UX Engineering
@ Lone Rock Point
I design & build digital interfaces,
mainly in WordPress
Hi, I’m Michelle!
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
USWDS Material Adobe
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
The
promise
we sell
Slide 7
Slide 7 text
The gap between
promise and reality
Slide 8
Slide 8 text
We gave them
all the tools,
so why are they
struggling?
Slide 9
Slide 9 text
Where we
went wrong
Slide 10
Slide 10 text
The Lean UX Approach
Impacts client’s
business
Measurable indication
the problem is solved
Client’s customers or
audience
Change in behavior
indicating they got
what they needed
Feature
Feature
Feature
Slide 11
Slide 11 text
The Lean UX Approach
HYPOTHESIS:
We will get [Business Outcome] if we
implement [Solution] which will allow
[User] to [User Benefit]
Slide 12
Slide 12 text
Example Lean UX Map
Business Problem
Business Outcomes
Users
User Benefit
Solution / Feature
Permit Application Website
Residents can’t easily find or complete permit
forms online, which drives up call center volume
and frustration.
30% reduction in calls to service center.
Faster completion of permit applications.
Higher resident satisfaction scores.
Local residents
Quickly find and complete applications online
without needing to call or visit city offices.
Guided, step-by-step permit application form
with clear instructions.
HYPOTHESIS:
We will get a 30% reduction in
calls to service center if we have
a guided, step-by-step permit
application form with clear
instructions which will allow local
residents to quickly find and
complete applications online
without needing to call or visit
city offices.
Slide 13
Slide 13 text
The missing piece
Business
Users
Content
Creators
Business
Problems
Process
Problems
Content
Problems
Solutions
A content management
system is solving for
more than just one set
of problems:
➔ Business
➔ Process (internal)
➔ Content (external)
Slide 14
Slide 14 text
Content creators
are users too
Slide 15
Slide 15 text
What happens when
we don’t think about
content creators?
Slide 16
Slide 16 text
The
Blank Canvas
Problem
Slide 17
Slide 17 text
The
Do It Yourself
Problem
Slide 18
Slide 18 text
As a result…
If tools are difficult or intimidating → publishing frequency suffers
If every update requires design judgment → design quality suffers
If content creation has no guardrails → content quality suffers
Slide 19
Slide 19 text
Bad Content Creator Experience =
Bad End User Experience
Slide 20
Slide 20 text
Example Lean UX Map
Business Problem
Business Outcomes
Users
User Benefit
Solution / Feature
External Users
Residents can’t easily find or complete permit
forms online, which drives up call center volume
and frustration.
30% reduction in calls to service center.
Faster completion of permit applications.
Higher resident satisfaction scores.
Local residents
Quickly find and complete applications online
without needing to call or visit city offices.
Guided, step-by-step permit application form
with clear instructions.
Content Creators
Content creators struggle to update permit forms and
instructions, causing outdated information to remain live.
80% of content updates handled by non-technical staff.
Updates published within 2 days instead of 2 weeks.
Consistency across all permit pages.
City staff
Confidently create and update permit content without
breaking design or waiting on developers.
???
Without this… We won’t have this.
Slide 21
Slide 21 text
How do we fix it?
Slide 22
Slide 22 text
Use existing UX processes to
understand the problem
Utilize all of WordPress' tools to
implement a design system
Build a curated content
creation experience
Slide 23
Slide 23 text
UX Processes:
Understanding
Content Creators
Slide 24
Slide 24 text
What is a
proto-persona?
Low fidelity "sketch" of users
that promotes empathy
Built initially on internal
assumptions and validated
through future research
https://pipdecks.com/
Slide 25
Slide 25 text
Example content
creator proto-personas
Goal: Get content out efficiently, with
minimal friction.
Motivation: Often under time pressure
to meet deadlines, update news, or
maintain regular posts for an audience.
Behavior: Wants layouts and
formatting to “just work.” Prioritizes
speed, clarity, and frictionless editing
over fine-grained design control.
Challenge: Frustration arises when the
editor requires many clicks or decisions
to produce a simple page, slowing
down routine work.
The Quick
Publisher
Slide 26
Slide 26 text
Example content
creator proto-personas
Goal: Make content visually engaging
and help messages stand out.
Motivation: Usually works in marketing,
communications, or other
creative-adjacent roles where
presenting ideas effectively is key.
Behavior: Tries different layouts, colors,
and block arrangements in an effort to
“make it pop” or grab attention.
Challenge: Without guidance or
constraints, layouts can become
inconsistent, visually cluttered, or less
accessible to users.
The Visual
Experimenter
Slide 27
Slide 27 text
Example content
creator proto-personas
Goal: Make occasional content updates
without spending a lot of time learning
or remembering how the editor works.
Motivation: Typically assigned ad hoc
updates or responsible for rare
announcements; not actively involved in
daily content creation.
Behavior: Logs in infrequently,
struggles with remembering workflows,
and may rely heavily on existing
examples
Challenge: Can be slowed down by
complex workflows, unclear patterns,
or inconsistent block behavior; risk of
abandoned edits or errors increases.
The
Occasional
Updater
Slide 28
Slide 28 text
What is a
journey map?
“A journey map is a
visualization of the process
that a person goes through in
order to accomplish a goal.” -
NN/g
Slide 29
Slide 29 text
What is a
Job To Be Done?
“A job-to-be-done is a
statement that describes, with
precision, what a group of
people are trying to achieve or
accomplish in a given situation.”
- Strategyn
https://spatialrd.com/
Slide 30
Slide 30 text
Example content
creator jobs
Primary Job (functional):
When I need to promote a new product, campaign, or
initiative, I want to quickly create a landing page with the
right structure and design, so I can launch it on time without
needing to rely on a developer.
Secondary Jobs (emotional + social):
Feel confident the page looks professional and on-brand.
Avoid the frustration of breaking the layout or “messing up”
the design.
Look competent to colleagues or leadership by delivering a
polished page quickly.
Struggling Moments:
Unsure which blocks/patterns to use to get the “right” layout.
Difficulty controlling spacing, padding, or alignment without
breaking consistency.
Fear of accidentally publishing before the page is ready.
Pages sometimes look different from design guidelines.
Create a new
landing page
Slide 31
Slide 31 text
Example content
creator jobs
Primary Job (functional):
When I notice outdated or incorrect information on the site, I
want to easily find and edit the content, so I can keep the
website accurate and trustworthy.
Secondary Jobs (emotional + social):
Feel reassured that small edits won’t ruin the page design.
Reduce dependence on developers or IT for minor changes.
Build trust with the audience by keeping content fresh and
reliable.
Struggling Moments:
Difficulty locating the exact page or block that needs editing.
Content updates sometimes shift formatting in unexpected
ways.
Anxiety about breaking layouts when making changes.
Lack of preview confidence: “will this look right once I hit
update?”
Update an
existing piece
of content
Slide 32
Slide 32 text
Example content
creator jobs
Primary Job (functional):
When I have new insights, updates, or stories to share with
my audience, I want to draft, format, and publish a blog post
so I can keep my audience engaged and position my
organization as a thought leader.
Secondary Jobs (emotional + social):
Feel proud of the content I publish and confident it reflects
well on the brand.
Be seen internally as someone who contributes to thought
leadership and communications.
Struggling Moments:
Adding images or media often feels clunky (wrong size,
misaligned, slows page).
Difficulty formatting text (headings, quotes, links) so it looks
clean and consistent.
Fear of publishing with typos or broken links because
workflow lacks built-in checks.
Publish a blog
or news post
Slide 33
Slide 33 text
Visual Experimenter + Create a landing page
Occasional Updater + Update existing content
Quick Publisher + Publish a news post
Slide 34
Slide 34 text
Building The
Right Solutions
Slide 35
Slide 35 text
Design Systems:
Built For Creative
Consistency
Slide 36
Slide 36 text
A design system is…
"...a set of building blocks and standards that help keep the look and
feel of products and experiences consistent" - Figma
"...a comprehensive framework of standards, reusable components,
and documentation that guides the consistent development of digital
products within an organization." - Wikipedia
Slide 37
Slide 37 text
A design system contains…
Foundational Elements
Components & Patterns
Content & Voice
Slide 38
Slide 38 text
Foundational
Elements
(Token All The Things)
Slide 39
Slide 39 text
Design tokens are…
"...design decisions, translated into data… a shared language between
design and engineering for communicating detailed information about
how to build user interfaces." - Adobe
"...name and value pairings that represent small, repeatable design
decisions. A token can be a color, font style, unit of white space, or even
a motion animation designed for a specific need." - Atlassian
Slide 40
Slide 40 text
Global
Base
Reference
Primitive
Alias
Theme
Semantic
Value Component
→ → →
#de1e7e magenta.50v primary.vivid card.button.active
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
Using tokens in
theme.json settings
● Color (theme)
○ Palette
○ Gradients, Duotones
● Typography (global)
○ Font Sizes
○ Font Families
● Spacing (global)
○ Sizes
● Shadows (global)
Slide 43
Slide 43 text
Using tokens in
theme.json custom
● Global/Base tokens
○ Colors (base values)
○ Borders, animations, etc.
● Alias/Theme tokens
○ Colors (theme values)
○ Interactive, card, banner, reverse, etc.
● Component tokens
○ Context-driven & repeatable
○ Buttons, quotes, headings, tables,
forms, etc.
Slide 44
Slide 44 text
Using tokens in
theme.json elements
& blocks
● Use custom component tokens to
create consistency between all
HTML elements, core blocks, and
any future custom CSS
Slide 45
Slide 45 text
A theme is…
"...a collection of token values designed to achieve
a certain look or style." - Atlassian
Slide 46
Slide 46 text
Component &
Pattern Library
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
No content
Slide 50
Slide 50 text
Curated Experiences:
The Right Tools
For The Right Job
Slide 51
Slide 51 text
Guardrails on available
options for accessibility &
brand consistency
Slide 52
Slide 52 text
Guardrails on
available options
● Disabling and enabling editor
design tools as needed
○ Globally enable/disable
○ Per Block enable/disable
● Disabling custom values and
default values
Slide 53
Slide 53 text
Guardrails on
available options
● Disabling and enabling editor
design tools as needed
○ Globally enable/disable
○ Per Block enable/disable
● Disabling custom values and
default values
Slide 54
Slide 54 text
Guardrails on
available options
● Removing block and pattern
directory
● Denylisting or allowlisting
specific blocks
Slide 55
Slide 55 text
Pre-built layouts and
sections to quickly assemble
thoughtful content
Slide 56
Slide 56 text
Pre-built layouts
and sections
● Theme patterns
● Custom pattern categories
Slide 57
Slide 57 text
Pre-built layouts
and sections
● Content (starter) patterns
Slide 58
Slide 58 text
Pre-built layouts
and sections
● Synced patterns for common
content like forms, CTAs,
reusable elements
Slide 59
Slide 59 text
Curated customization
based on the type of content
and/or the type of creator
Slide 60
Slide 60 text
Curated
customization
● Restrict patterns/templates to
certain content types
● Restricted editing options to
certain user levels
● Restrict moving & removal with
block locking
Slide 61
Slide 61 text
Example Lean UX Map
Business Problem
Business Outcomes
Users
User Benefit
Solution / Feature
External Users
Residents can’t easily find or complete permit
forms online, which drives up call center volume
and frustration.
30% reduction in calls to service center.
Faster completion of permit applications.
Higher resident satisfaction scores.
Local residents
Quickly find and complete applications online
without needing to call or visit city offices.
Guided, step-by-step permit application form
with clear instructions.
Content Creators
Content creators struggle to update permit forms and
instructions, causing outdated information to remain live.
80% of content updates handled by non-technical staff.
Updates published within 2 days instead of 2 weeks.
Consistency across all permit pages.
City staff
Confidently create and update permit content without
breaking design or waiting on developers.
Pre-built WordPress content patterns (e.g., fee tables,
instructions, steps) that are easy for staff to edit while
staying on-brand.
Building this… Leads to this.
Slide 62
Slide 62 text
Effective websites aren’t just built
once; they’re shaped every day by
the people who create the content.
If we want consistency,
accessibility, and impact for our
audiences, we must start by
empowering our creators.
Slide 63
Slide 63 text
Michelle Hunt
[email protected]
https://someconf.com
https://mynameismichelle.com
https://www.instagram.com/marktimemedia/
https://www.linkedin.com/in/michelleschulphunt/
Where you can find me:
https://lonerockpoint.com
Slide 64
Slide 64 text
Q&A