Understanding the 5 UX design layer types

Users might see a software product UI in a single two-dimensional plane. Only a UI/UX designer would know how many design layer types went into building that product.

The general UX design process typically constructs a product interface by creating five layers, from the abstract idea to the concrete product implementation:

1. Strategy layer — It all starts with figuring out the “why” behind the product. What do users need, and what goals does the business want to hit? It’s about setting a clear direction before anything else
2. Scope layer — Here, you decide what the product will actually do. What features and functions are in, and what’s out? It’s all about keeping things focused and making sure the product delivers value
3. Structure layer — This is where things start to take shape. You’re organizing content and mapping out how people will move through the product to make sure everything feels logical and easy to use
4. Skeleton layer — Now you’re sketching out the layout, such as where buttons, menus, and other elements will go. It’s about creating a clear, functional blueprint before you get into the visuals
5. Surface layer — Finally, you bring it all together with visual design elements like colors, fonts, and images. This is the layer that makes the product look polished, engaging, and ready for users

Constructing a product interface layer by layer helps designers create high-quality, usable, productive, user-centric interfaces following a well-organized design process.

In this article, we’ll discuss each UX design layer type in-depth and use practical examples to explain how each layer helps product designers create high-quality interfaces for modern software products.

5 UX design layer types

UI/UX designers finalize an interactive digital product for users by creating strategy, scope, structure, skeleton, and surface layers on top of each through the UI/UX design process.

From bottom to top, each layer puts a foundation for the next layer to deliver a well-designed product, as shown in the following diagram:

Let’s explore each layer in detail.

1. Strategy layer

The strategy layer is the foundational layer of the entire product design process. It defines the primary goals of a specific product. The strategy layer doesn’t create visual components of the product ;  it usually defines goals based on user needs and business objectives.

This layer is typically bound to the UX research process, where UX designers use research methods to understand the user.

For example, open the Uber app from your mobile and imagine the goals behind its strategy layer:

The Uber consumer app’s strategy layer aims to construct a simple, easy-to-use solution for users to connect with drivers to get a ride to a specific destination with transparent pricing.

We need positive user feedback and enough profit generation to build a long-running product for a commercial company. And to design a sustainable, commercial product, UX designers should follow a user-centric design approach by carefully supporting business objectives through the product interface.

Every successful modern product company typically prioritizes user needs at the strategy layer and links user needs with business objectives to stay competitive in the software market while offering a sustainable product.

Medium, the publication platform, for example, offers inbuilt editing tools and image search to let users write content productively within the platform and contribute to the profit flow.

UX designers can use the following activities to identify product goals to create a better strategy layer for an innovative, sustainable, and feasible product:

• Idea brainstorming
• Knowledge gathering and discussion using existing resources, such as books, articles, forum threads, social media posts, etc.
• User interviews
• Stakeholder interviews
• Observation  —  observing real-world problems to come up with product ideas

2. Scope layer

The scope layer defines requirements based on the strategy layer goals to create boundaries for the product.

The strategy layer draws the big picture of the entire digital product by defining the primary goals and creating endless possibilities for offering services to the users — and the scope layer specifies a scope for the product by identifying functional and content requirements.

For example, the Booking.com website creates a scope for the product by limiting their online reservation services to stays, flights, car rentals, experiences, and airport taxis. As you can see, its interface and functionality let users use the website within the defined scope:

UX designers and other stakeholders construct the scope layer based on the strategy layer creation, competitor analysis, and gap analysis, carefully evaluating the product budget, feasibility, and delivery timeline.

We can finalize the scope layer by creating a boundary on top of the strategy based on functional and content requirements:

Comparison factor	Functional requirements	Content requirements
Definition	Describes behavioral features and functionalities that the solution should offer to satisfy user and stakeholder needs	Describe the information that the product interface should present to the user
Designers should aim to	Increase user productivity by reducing excessive user interaction. i.e., using reasonable defaults and automation strategies	Create simple, well-organized, and self-explanatory content segments by only presenting the required information

UX designers and stakeholders use the following techniques to prioritize functional and content requirements to deliver highly usable products faster and satisfy user/business needs:

• Identifying the overall actual requirements that bring value to the product using prioritization methods like MoSCoW
• Ranking functional and content requirements based on usability factors and product development timeline, i.e., offering basic features using minimal content with the introductory release
• Trying to define an optimal content requirement set that creates a user-centric but business-friendly product using frequent designer meetups, i.e., Google Search is just a two-page website with basic UI elements but generates profit and satisfies users

3. Structure layer

The structure layer works as a blueprint for the product interface design process. It structures the digital product based on user interactions and information organization.

UX designers implement the structure layer of a digital product using visual models such as user flow diagrams, journey maps, and site maps.

The structure layer defines various screens of a digital product by connecting them with navigation flows, so the structure layer outlines user flows for tasks introduced by product requirements.

For example, Google Search’s product structure has two primary screens: search query entry screen and results screen. The first screen connects the user with the second one after the user enters a search query to let the user find web results from keywords:

Google Search’s structure layer smoothly connects these two screens using a user interaction point and screen content that reveals the current context.

UX designers can follow interaction design and information architecture concepts to structure a product by grouping requirements into several screens:

Using interaction design for structuring

Interaction design (IxD) refers to designing user interaction for a digital product based on principles of human-computer interaction (HCI). Using interaction design techniques to create a self-explanatory navigational experience is mandatory to implement a better structure layer.

For example, every modern mobile app simplifies its navigation by using a tab layout with primary screens and loading secondary screens through primary screen actions.

Using information architecture for structuring

Information architecture (IA) refers to the organization and placement of content in digital product interfaces. Each screen of a digital product should properly arrange content to create a better structure layer that provides a foundation for a user-friendly interface.

Software products usually gather, process, and retrieve a lot of information, so organizing information is not easy. But UX designers can use mind-mapping tools, digital whiteboards, and collaborative content-management systems to organize information easily.

4. Skeleton layer

The skeleton layer defines the basic appearance and user interaction points based on the content and navigation organization of the structure layer.

The structure layer establishes the foundation of the product interface by identifying each screen’s content and navigation. The skeleton layer adds further details to the product structure by visualizing how content should be presented, and interactions should happen using basic UI components.

The skeleton layer is the first layer that creates the visual components of the future product interface. UX designers create wireframes, mockups, and low-fidelity prototypes to visualize the skeleton layer of a specific digital product by limiting design details.

For example, see how the following low-fidelity prototype describes the skeleton of a movie-searching mobile app by showing its UI elements and its interaction features with lesser details:

The above screen recording previews a low-fidelity prototype, so it only implements an easy-to-change app skeleton with low-detail elements without worrying about colors and typography factors.

Finalizing the skeleton layer doesn’t create the final product design. It just creates the initial interface specification that UI designers can use to implement the final product-like high-fidelity prototypes, so ensure to include usability and accessibility factors in low-fidelity prototypes using the following techniques:

• Focus on user experience without worrying about colors, typography factors, and aesthetics since a better product skeleton directly affects user experience. i.e., at the skeleton layer design stage, you only need to draw a button -like a visual object —  not a colored, styled button with user interaction effects
• Try to implement crucial UI/UX principles such as accessibility principles and Gestalt grouping laws even if you are creating a low-fidelity prototype, so you don’t need to worry about losing primary accessibility features when UI designers create high-fidelity prototypes
• Design with consistency by managing a well-organized component set
• Prioritize testing prototypes, gathering user feedback, and improving the prototype until users and stakeholders have no objections

5. Surface layer

The surface layer is the final of the UX design layer types. It visualizes the final product interface with which end users will interact, using the skeleton layer design specifications and UI design concepts.

UX designers create the skeleton layer, typically low-fidelity prototypes or wireframes based on the product structure. Then, UI designers start creating the surface layer, usually high-fidelity prototypes based on low-fidelity prototypes, using visual design concepts like color theories, typography, and organizational UI design guidelines.

For example, we can turn the low-fidelity prototype of the movie-searching app that we discussed in the previous section into a high-fidelity one by improving the level of detail as follows:

The surface layer is the only visible layer to the end users, so its design, content, and quality directly affect the product’s success and the company’s reputation.

So, UI designers should create ethical, usable interface designs by understanding user emotions and carefully selecting color schemes, typography, and imageries using the following methods:

• Following modern minimal design to improve user experience through the simplicity of design. You can study design concepts of popular digital products like Uber, Airbnb, Medium, Facebook, Netflix, and Google to understand modern, minimal design principles
• Choosing interface design characteristics based on the target audience and domain, i.e., using a futuristic-looking font and digital rain-like imagery for a machine-learning product, using a calming blue or green-based color scheme for a healthcare app
• Using icons, data visualizations, and other imageries based on the product domain and the primary color scheme

See how the Booking.com website uses light, active, leisure-focused colors for the primary accent and imagery:

UI designers can also embed branding details into the product interface and represent the corporate identity through UI using the following methods:

• Creating a color scheme based on the company logo colors. For example, UI designers can generate a three-color color scheme by using the organization’s mono-color logo and the triadic color scheme generation technique
• Using a clean, readable variant of the company logo font for the primary font of the UI
• Using company theme-based colors to create imageries for the UI

For example, Medium doesn’t use a complex logo or add branding details everywhere — but the product itself creates the Medium brand from its color scheme, typography, and imagery, as shown in the following screen recording:

Selecting product color schemes, typography, and imagery focusing on simplicity and based on product domain and company branding details is the best way to design a competitive, sustainable product for the current software market.

Integrating the 5 design layers

We can create user-centric, high-quality digital product interfaces that deliver organizational objectives by stacking each UX layer during the UX design process. UI/UX designers innovate a product from an idea starting from the strategy layer and produce a ready-to-develop product prototype for developers from the surface layer. Each UX layer is interconnected and has different responsibilities.

After finalizing the UX design layer types, designers have presentable items for stakeholders. See how the UX layers can be mapped with UX design process activities, stages, and milestones, as shown in the following diagram:

As shown in the above diagram, we can integrate UX layers in a stacked order to deliver a well-structured product design for development.

Each of the UX design layer types has design iterations. And activities in each iteration directly affect the specific layer’s result and the development of the next layer. Therefore, being flexible for multiple design iterations and driving iterations with user feedback is crucial for a successful product. For example, UX designers can let UI designers create a better surface layer (i.e., a high-fidelity prototype) by improving the skeleton layer (i.e., a low-fidelity prototype) with user feedback.

Bringing it all together

Maintaining consistency and coherence is also crucial for boosting productivity by reducing later-stage design modifications. UI/UX designers can adhere to the following strategies to maintain consistency and coherence:

• To maintain consistency in the design process, implement a style guide with well-defined typography, UI components, and color codes
• Achieve coherence through the design process by following generic UX principles and modern, minimal design practices to implement a self-explanatory product interface using consistent UI elements
• Prioritize coherence over consistency to maintain both coherence and consistency factors. i.e., innovating a new, easy-to-use UI component based on the style guide instead of trying hard to use an existing component that doesn’t fit well for a specific design requirement

Conclusion

In this article, I talked about the five UX design layer types and how they help designers create successful, user-centric, and sustainable products. The digital product design process starts with the strategy layer, which is based on stakeholder ideas, and ends with the surface layer, which developers can use to build the actual product.

Each of the UX design layer types has various responsibilities, and designers will have to do various activities within them. Each layer takes inputs from the previous layer and puts the foundation for the next layer  —  creating a stacked structure we can map with the generic UX process. Following this layered model for designing your digital product helps designers create high-quality product designs productively.

The UX field is improving every day, and product designers innovate new design concepts that save the user time. Therefore, to stay competitive in the digital product design industry, you must continuously learn and adapt to new UX concepts and use them within UX layers.