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