Building Experiences: Design Systems, User Experience, and Full Site Editing

It’s been over a decade since Atomic Design brought the world of digital design systems into the modern era. With the introduction of the block editor, and further expansion into Full Site Editing, WordPress has never been better suited to delivering modular, systemic, and consistent content editing experiences. However, without putting thought into the process of creating content, the editor interface becomes frustrating and complicated, and the experience of the end user often suffers as a result. We will discuss how incorporating User Experience tools to your workflow (including user research, information architecture, and design systems) can improve the content creation experience. We will also discuss how new and upcoming tools will make these system-driven editing experiences better, and how we can continue to improve the WordPress editor as we have more of these conversations.

Transcript

1. Michelle Hunt Director of UX Engineering, Lone Rock Point Building Experiences: Design Systems, User Experience, and Full Site Editing August 28, 2025
2. Director of UX Engineering @ Lone Rock Point I design & build digital interfaces, mainly in WordPress Hi, I’m Michelle!
4. USWDS Material Adobe
6. The promise we sell
7. The gap between promise and reality
8. We gave them all the tools, so why are they struggling?
9. Where we went wrong
10. 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
11. The Lean UX Approach HYPOTHESIS: We will get [Business Outcome] if we implement [Solution] which will allow [User] to [User Benefit]
12. 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.
13. 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)
14. Content creators are users too
15. What happens when we don’t think about content creators?
16. The Blank Canvas Problem
17. The Do It Yourself Problem
18. 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
19. Bad Content Creator Experience = Bad End User Experience
20. 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.
21. How do we fix it?
22. Use existing UX processes to understand the problem Utilize all of WordPress' tools to implement a design system Build a curated content creation experience
23. UX Processes: Understanding Content Creators
24. 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/
25. 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
26. 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
27. 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
28. 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
29. 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/
30. 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
31. 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
32. 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
33. Visual Experimenter + Create a landing page Occasional Updater + Update existing content Quick Publisher + Publish a news post
34. Building The Right Solutions
35. Design Systems: Built For Creative Consistency
36. 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
37. A design system contains… Foundational Elements Components & Patterns Content & Voice
38. Foundational Elements (Token All The Things)
39. 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
40. Global Base Reference Primitive Alias Theme Semantic Value Component → → → #de1e7e magenta.50v primary.vivid card.button.active
42. Using tokens in theme.json settings • Color (theme) ◦ Palette ◦ Gradients, Duotones • Typography (global) ◦ Font Sizes ◦ Font Families • Spacing (global) ◦ Sizes • Shadows (global)
43. 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.
44. 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
45. A theme is… "...a collection of token values designed to achieve a certain look or style." - Atlassian
46. Component & Pattern Library
50. Curated Experiences: The Right Tools For The Right Job
51. Guardrails on available options for accessibility & brand consistency
52. 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
53. 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
54. Guardrails on available options • Removing block and pattern directory • Denylisting or allowlisting specific blocks
55. Pre-built layouts and sections to quickly assemble thoughtful content
56. Pre-built layouts and sections • Theme patterns • Custom pattern categories
57. Pre-built layouts and sections • Content (starter) patterns
58. Pre-built layouts and sections • Synced patterns for common content like forms, CTAs, reusable elements
59. Curated customization based on the type of content and/or the type of creator
60. Curated customization • Restrict patterns/templates to certain content types • Restricted editing options to certain user levels • Restrict moving & removal with block locking
61. 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.
62. 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.
63. Michelle Hunt michelle@lonerockpoint.com 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
64. Q&A