There is a moment that every designer fears. A product launches, the interface looks compelling, and yet users abandon it within minutes. The visuals were clean, the branding was consistent, so what went wrong? Almost always, your answer lies in the elements of user experience basics. Either they were misunderstood, rushed, or skipped entirely. This is called a structured failure.  

Designers invest week in making things look right, but they overlook whether those things actually work right. The truth is that most products do not fail because of bad intentions; they fail because foundational decisions were made without enough clarity. Closing the gap between a product that looks good and one that genuinely serves its users starts with understanding the foundations.  


What Is User Experience (UX) in Design?  


User experience (UX) is the complete perception that a person forms while he’s interacting with a product or system. It covers how intuitive a product feels, how efficiently it helps someone reach a goal, and how satisfying the interaction ultimately is. UX is rooted in cognitive science and design thinking. It is not a phase in a project; it’s a framework that determines the success of your product/service.  


5 Elements of User Experience (UX Framework)  


Jesse James Garrett's five-plane model remains one of the most precise and practical frameworks for understanding how user experience is constructed. Each element represents a layer of decision-making, and each layer depends on the one beneath it. Let's see what each one means and why it matters. 


1. Strategy 

Everything begins with a strategy. Before a single wireframe is sketched or a color palette chosen, a team must answer two fundamental questions: what does the business need this product to achieve, and what does the user genuinely need from it? These two goals must align. When they do not, the product becomes subject to internal assumptions.  

What strategy defines: 

  • Business objectives: Revenue goals, brand positioning, market differentiation 
  • User needs: The problems, frustrations, and desires of the target audience 
  • Success metrics: How the team will measure whether the product is working 

2. Scope  



Strategy answers why whereas scope answers what. This layer translates strategic goals into specific, tangible requirements such as what features will be built, what content will exist, and what falls outside the product's boundaries. 

Scope has two components: 

  • Functional requirements: The features and capabilities the product must include 
  • Content requirements: The information, media, and messaging the product needs to deliver 

Scope is also where discipline lives. Without clearly defined boundaries; projects expand, timelines stretch, and teams end up building features that were not needed. Defining scope early is a form of respect for both the user and the team.  


3. Structure  

After the scope is established, the structure determines how the product is organized and how it should behave. This is the layer which brings together information architecture and interaction design.  

Structure addresses two things: 

  • Information architecture: How content is categorized, labeled, and made discoverable 
  • Interaction design: How the system responds to user actions, and what feedback it gives 

A well-structured product feels logical without requiring a lot of effort. Users already know where they are, where they have been, and where to go next. It is not because they were told, but because the system was designed to feel that way. When the structure is weak, even a beautiful interface will disorient people.  


4. Skeleton 

The skeleton layer is where the structure becomes visible on screen. It is not about final aesthetics; it is about placement, priority, and logic. This is the stage where teams produce wireframes and decide how elements are arranged to guide the user's eye and actions. 

Skeleton covers three design disciplines: 

  • Interface design: Deciding which elements appear and where they sit 
  • Navigation design: How users move through the product 
  • Information design: How data and content are presented for clarity and comprehension 

Skeleton is like the blueprint of a building. If the blueprint is flawed, no amount of interior design will be able to fix a room.  


5. Surface 

The surface is what users see first and remember for a long time. Typography, color, imagery, spacing, motion; all of it lives here. It is the most immediately perceived layer of UX design.  

Surface design focuses on: 

  • Visual hierarchy: Guiding attention through contrast, size, and placement 
  • Consistency: Creating a coherent look and feel across every screen 
  • Emotional resonance: Using color and motion to shape how the product feels to use 

When the surface design is done well, it makes a product feel trustworthy even before the user reads a single word. If done poorly, it undermines everything that the other deeper layers worked to build.  


How the Elements of User Experience Work Together  


The five elements of user experience do not work in isolation. They are built on each other, and the strength of each layer determines what the next one can achieve. Most common user experience mistakes happen when one of these layers is skipped or treated as optional.  

Take a food delivery app as an example. 

It begins with Strategy. The business wants fewer abandoned orders, and users want to check out quickly without confusion.  

That shared clarity moves into Scope, where the team decides what to build such as saved addresses, a reorder shortcut, and live tracking. Unnecessary features add clutter, so they are left out deliberately. 

Then comes the Structure. It organizes the content into a logical flow: three sections, a three-step checkout, and predictable navigation.  

The Skeleton translates that logic onto the screen: the cart stays pinned to the bottom bar; the reorder button lives on the home screen where users land first.  

Finally, Surface finishes it with typography, warm colors, and a small animation that confirms each item added to the cart successfully.  

Each decision follows from the one before it. Skip one layer, say, Structure and the skeleton lose its logic. The surface may look polished, but users cannot find what they need and therefore leave. A mistake made at any layer affects the layer that follows. When each element is handled with care, the result feels coherent and intentional; not by accident, but by design. 


Final Thoughts


The elements of user experience are not just for decorating a product; they form its foundation. From strategic intent to surface finish, each layer carries weight, and each decision is supported by the layers above it. When users interact with a product, it reflects their choices that they made long before they arrived. When you build those choices with care, the experience automatically improves.