The 7 Elements of Generative UX: Updating Garrett's Model for the AI Era

In 2002, Jesse James Garrett published The Elements of User Experience, a model that organized UX design into five conceptual planes: Strategy, Scope, Structure, Skeleton, and Surface. Each plane moved from abstract to concrete, with decisions on each layer constraining the next. It became the canonical framework for web design and product development. It was taught in every UX program, referenced in every design system conversation, embedded in how an entire generation of practitioners thinks about building digital products.

That model still holds. The logic of moving from user needs to visual execution through structured layers of decision-making is as sound now as it was then. But the world it was designed for, one where humans designed static pages for human eyes, has fundamentally changed. Two shifts broke the original stack, and they demand two new layers that Garrett's model never needed to account for.

What Broke the Original Stack

The first break is generative AI. Tools like Claude, ChatGPT, Midjourney, and a growing ecosystem of AI agents now create surfaces on demand. The surface plane, Garrett's topmost layer and the visual execution users actually see, is no longer a fixed artifact. It renders differently for every user, every query, every context. A chatbot response is a surface. An AI-summarized search result is a surface. A dynamically assembled landing page is a surface. A voice assistant response is a surface. The surface has become plural and adaptive, assembled in real time rather than designed once and deployed.

The second break is that the brand guide has become a machine input. In Garrett's era, brand guidelines were documents that human designers and writers internalized over time. Today, the brand guide is the operating system for every piece of content: the single source of truth that humans reference, AI systems consume, and every channel the brand appears on draws from. System prompts, custom GPT configurations, .instructions files, and design tokens are all translations of the brand guide into machine-readable formats. The brand guide is no longer a PDF on a shared drive. It is the instruction layer that governs how AI represents your organization across every touchpoint.

These two shifts, generative surfaces and machine-readable brand governance, create gaps in the original five-plane model that cannot be patched. They require structural additions. The updated model needs a layer below Strategy to account for the intelligence that feeds it, and a layer above Surface to close the feedback loop that makes the system learn.

The 7 Elements of Generative UX

The updated framework preserves Garrett's original five planes and adds two new layers, one below Strategy and one above Surface, to account for the data-driven, AI-mediated reality of modern digital experience design. The model reads from bottom to top, from the most abstract to the most concrete, just as Garrett intended.

1. Signal: The Intelligence Layer (New)

Before strategy comes intelligence. What does the brand know about this user, this context, this moment? Signal is the data and intent layer that feeds everything upstream: first-party data, behavioral signals, search intent, session context, CRM attributes, prior engagement history. In a generative UX world, the experience adapts to signal before a human ever makes a design decision.

This layer did not exist in Garrett's model because it did not need to. Websites in 2002 served the same experience to every visitor. Today, measuring digital experience maturity starts with assessing an organization's ability to collect, unify, and act on signal. If you do not define what signals matter and how they are used, your AI tools optimize for the wrong things. Signal is the foundation, the raw material that strategy acts upon.

2. Strategy: Expanded for Machine Audiences

Garrett's Strategy plane, where product objectives meet user needs, remains the anchor. But its scope must expand. Strategy now includes machine audiences: AI crawlers indexing your content, LLMs summarizing your pages for AI search results, agents acting on behalf of users to compare products, book services, or complete tasks. Your strategy must account for how your brand is interpreted by systems, not just experienced by people.

This is where generative engine optimization (GEO) enters the picture. As we have written previously, SEO is not dead; it has expanded. Your content strategy must optimize for both traditional search rankings and AI citation. That dual mandate lives at the Strategy layer: it shapes what content you create, how you structure it, and what signals you provide for both human readers and machine interpreters. Strategy is no longer a one-time exercise. It is a continuous alignment between human objectives, user needs, and machine interpretability.

3. Scope: The Instruction Layer

Garrett's Scope plane defined features and content requirements. That definition still applies, but it now includes the instruction layer. What prompts, configurations, and brand rules exist for each tool and channel? Scope now means defining both what your product does and how AI systems are allowed to represent it.

This is where the brand guide lives as a canonical artifact. As we detailed in Your Brand Guide Is Your Content Operating System, the brand guide has become the most important tool in the content stack: the single source of truth that distributes into system prompts, custom GPT configurations, development environment instruction files, and design tool brand kits. Scope is where you define your AI prompt library, your voice and tone rules as machine-readable directives, and the guardrails that ensure every AI-generated surface is distinctly yours rather than generically competent.

4. Structure: Conversation Architecture

Garrett's Structure plane covered interaction design and information architecture. Those disciplines remain essential, but they must extend to conversation architecture. How does a user flow through an AI-assisted experience? What happens when the path is nonlinear, when a user asks a question instead of clicking a navigation element? When an AI agent browses your site on behalf of a user?

Structure must now account for intent-driven navigation, not just click-path navigation. A traditional information architecture assumes users will move through a defined hierarchy of pages. Conversational and AI-mediated experiences assume users will state what they want and expect the system to assemble the right response. Both models need to coexist, and the structural layer must support both. As Nielsen Norman Group has documented, AI is creating a fundamental paradigm shift in interaction design, from command-based interfaces to intent-based ones, and information architecture must evolve to support both modes.

5. Skeleton: Token-Based Design Systems

Garrett's Skeleton plane was about wireframes, navigation design, and interface layout. Those artifacts still matter, but increasingly the skeleton is token-based. Design tokens (color values, spacing scales, type hierarchies, component configurations) are the skeleton that generative design tools like Figma AI, v0, and AI-assisted development environments draw from.

The skeleton is no longer a static wireframe. It is a component system that can be assembled dynamically based on context, content, and user signal. This is where your Figma brand kit and design system live as queryable infrastructure: not just visual documentation, but structured data that machines can interpret and assemble. Organizations that invest in robust, token-driven design systems give their AI tools the building blocks to generate on-brand experiences at scale. Organizations without them get generic component assembly that could belong to anyone.

6. Surface: Plural and Adaptive

Garrett's Surface plane, the visual design layer and what users actually see, is still relevant. But it is no longer singular. The same underlying content and brand instructions now render as a full webpage, a featured snippet, an AI-generated answer card, a voice assistant response, a social media asset, an email template, or a PDF export. Each is a surface. Each draws from the same Signal, Strategy, Scope, Structure, and Skeleton layers below it.

Volume without direction is noise, and this is exactly what happens when organizations adopt AI content tools without a well-defined brand guide as the foundation. Surface decisions must now include output format specifications for every rendering context, not just screen dimensions. The martech utilization crisis manifests most visibly at the Surface layer: organizations generating enormous volumes of content across channels without the strategic foundation to make any of it distinctly theirs.

7. Signal Return: The Learning Loop (New)

The original model ended at Surface. The updated model closes the loop. Every surface interaction generates new signal: engagement metrics, conversion data, AI citation frequency, search ranking movement, content performance by channel. This data feeds back to Layer 1 (Signal) and updates the instruction files at every layer in between.

Content performance should feed back into the brand guide. If a particular voice approach consistently outperforms on LinkedIn, that insight gets captured in the voice section. If a content pillar is not resonating, it gets refined. If an AI prompt configuration produces higher-quality first drafts, that configuration becomes the standard. Signal Return is what makes this a system rather than a project. It transforms the UX model from a one-time design process into a continuous operating system, exactly the framing of brand-guide-as-infrastructure that underpins everything we build for clients.

How the Layers Connect: A Practical Example

Consider how these seven layers work together in a concrete scenario. A prospective client visits your website after searching for a specific problem. At the Signal layer, you know their search query, their geographic location, whether they have visited before, and what content they previously engaged with. At Strategy, you have defined that this type of visitor maps to a specific audience segment with specific needs and a defined conversion path. At Scope, your brand guide and AI prompt library contain the voice rules, content pillars, and messaging frameworks that govern how you address this segment.

At Structure, the information architecture supports both traditional page navigation and conversational interaction. If the visitor engages your chatbot, the conversation architecture guides them through the same journey the page hierarchy would. At Skeleton, your design token system and component library provide the building blocks for assembling the experience dynamically. At Surface, the content renders appropriately for the context: a full webpage on desktop, a streamlined mobile experience, or an AI-generated summary if the visitor found you through an AI search engine.

And at Signal Return, the visitor's engagement (pages viewed, time on site, chatbot interactions, conversion or abandonment) feeds back into the Signal layer. Over time, these signals refine the strategy, sharpen the scope, and improve the surfaces. The system gets smarter with every interaction.

What This Means for Organizations Building Digital Experiences

The practical implications of this framework map directly to how we work with clients at Berchtold. The old five-plane model was a project framework. You moved through the planes sequentially, made decisions at each layer, and shipped the result. The seven-element model is an operating system. It runs continuously, learns from its own output, and adapts to changing conditions.

• —Signal requires investment in first-party data infrastructure, behavioral analytics, and intent mapping, the foundation that everything else draws from
• —Strategy must account for machine audiences (AI crawlers, LLMs, agents) alongside human users, a dual mandate that most organizations have not yet adopted
• —Scope is where the brand guide sits as the canonical source, distributing into machine-readable instruction files for every tool and channel in your stack
• —Structure must support both click-path and intent-driven navigation, accommodating the shift from page-based to conversation-based interaction models
• —Skeleton has evolved from static wireframes to token-based design systems that generative tools can query and assemble dynamically
• —Surface is plural. The same content renders across dozens of formats and contexts, and each needs to be distinctly on-brand
• —Signal Return closes the loop, feeding performance data back into every layer and transforming the model from a design process into a learning system

Where the Competitive Advantage Lives

In Garrett's original model, the competitive advantage was at Surface. The best-designed, most visually polished, most intuitive interfaces won. That advantage has been democratized. AI tools can generate competent surfaces in seconds. The design quality floor has risen dramatically, which means the ceiling is no longer where differentiation happens.

Strategy is a commodity. The frameworks are free. The templates are everywhere. The AI will generate a positioning statement in thirty seconds. What has not been commoditized is the judgment that comes from executing strategy under real conditions, and the operational infrastructure that makes execution consistent. That infrastructure lives at Signal and Scope.

Signal is your proprietary intelligence: the first-party data, behavioral patterns, and contextual understanding that no competitor can replicate because it comes from your specific relationship with your specific audience. Scope is your brand operating system: the instruction layer precise enough that every tool in your stack produces output that is distinctly yours. Organizations that invest at these layers build compounding advantages. Organizations that invest only at Surface are in a race to the bottom against every competitor using the same AI tools.

From Design Process to Operating System

Garrett's model was a design process. You moved through it once, or perhaps revisited it during a redesign cycle. The seven-element model is a continuous operating system. Signal flows in, surfaces flow out, Signal Return feeds back, and the system improves. This is the same shift we described in Your Brand Guide Is Your Content Operating System: the move from treating brand and UX artifacts as static deliverables to treating them as living infrastructure that governs an ongoing process.

The brand guide sits at Layer 3 (Scope) as the canonical source. It distributes down into Layer 2 (machine-readable strategy rules that account for AI audiences) and up into Layers 4 through 6 (conversation architectures, design token systems, and multi-format surface specifications). Signal Return at Layer 7 continuously updates the brand guide based on what is working. The system never stops learning.

For organizations evaluating their digital experience maturity, this framework provides a diagnostic lens. Where are you strong? Where are you underinvesting? Most organizations we work with have reasonable Strategy and Surface capabilities but significant gaps at Signal (data infrastructure), Scope (brand-as-code), and Signal Return (systematic learning loops). Closing those gaps is where marketing alignment with business objectives becomes concrete and measurable rather than aspirational.

Jesse James Garrett gave us the framework that defined a generation of digital design. The fundamentals of his thinking (layered abstraction, user-centered design, structured decision-making) are as relevant now as they were in 2002. What has changed is the world those decisions operate in. Generative AI, machine audiences, and adaptive surfaces demand an expanded model. The 7 Elements of Generative UX is that expansion, grounded in established theory, adapted for the reality of AI-mediated digital experience, and designed to function as a continuous operating system rather than a one-time design exercise.

If you are ready to assess where your organization stands across these seven layers and build the infrastructure that makes generative UX work, start a conversation with our team. We build brand guides, content strategy systems, and digital experience infrastructure designed from the start to power both human and AI-driven experiences.