Layers of Design

If you want it to last, build it to last!

From abstract to concrete, let's talk about the five layers of design, a system developed by renowned author and designer Jesse James Garrett to provide a framework for creating successful digital products. Understanding which layer you're designing for will help you make informed design decisions and create an environment where designers and stakeholders understand each other's goals.

These five layers represent the fundamental principles of good design:

1. Strategy - defining needs
2. Scope - determining requirements
3. Structure - information architecture
4. Skeleton - wireframing
5. Surface - visuals

Suppose you've just heard of the five layers of design now. In that case, you may at least recognise a good framework that can be useful beyond designing applications, websites, and digital products. In planning the construction of a new building, for example, you'd start with the purpose, the Strategy layer - is this a new home, a public space, or a business? You would not begin in the Surface layer by choosing your flooring before you know what you are building - nobody wants carpet in the café kitchen. So, to fully understand what happens in each of the layers of User Experience design and why each is an important step, let's explain them a bit more clearly.

1. Strategy [needs]

It's crucial to understand your users' needs in order to deliver an exceptional user experience. What solution will most effectively solve their problems while aligning with your business goals? Don’t be tempted to rush into what you think is the right solution- time spent in research and planning now saves time and money in later stages, as it sets the direction for all subsequent steps in the design process. 

• Would a website, mobile app or a space in a social app best meet your users needs? 
• Can the experience be best created with a new feature in your current product or integrating it with an existing tool?
• Perhaps updating key areas or steps in the user's journey would yield the best results.

2. Scope [requirements]

Once you've established what you will build and have a clear end goal, it's time to define the specific feature and product-level requirements. What will you offer, how will you build it, and what's the most efficient path to achieve your goal? 

• What content do you need to deliver? 
• Do you need a CMS? 
• E-commerce capabilities? 
• AI chatbot or live support?

3. Structure [information architecture]

Here is where you take all the separate requirements of the Scope and begin to convert them into a usable product and experience - it's the high-level shape of your information architecture in the form of site maps, sections, and content blocks. 

• Identify the interactions between the various system components and between the user and the system so that it's easy for your user to understand where they are and how to reach their goal. 

4. Skeleton [wireframes]

The Skeleton layer is where you pull the pieces together to create page-by-page layouts and functional prototypes that model the product and interactions in a way that's easy to understand based on the user's intuition. This step transforms your initial Strategy into a concrete, user-friendly solution. 

• How will users interact with the product? 
• Where do the buttons and inputs go? 
• How and where will the content be displayed? 

5. Surface [visuals] 

The Surface layer is where you put in the effort to give your product the look and feel of something you'd want to use. This is where you apply branding, colour, typography, imagery, and style. It's your opportunity to make a solid first impression for a new product or to seamlessly integrate a new section or feature into your existing product, creating a cohesive whole.

Digital products are constantly evolving, so adopting a systematic approach to design is more crucial than ever. Jesse James Garrett's five layers of design, encompassing Strategy, Scope, Structure, Skeleton, and Surface, provide a comprehensive framework for creating successful digital products.

By delving into each layer, you gain a deeper understanding of your users' needs, refine your requirements, structure information logically, create user-friendly wireframes, and apply a visually appealing design. Each layer builds upon the previous one, culminating in a polished product that resonates with users.

Products fail to launch or fizzle out every day, and while luck plays a role, many of these failures occur because we often rush into what interests us most without adequately pinpointing the steps needed for success. Embracing these layers equips you with the tools to approach design challenges thoughtfully and systematically. Remember, successful design isn't just about aesthetics; it's about meeting user needs and business objectives harmoniously.

Ask yourself the hard questions early and often, collaborate with your team and stakeholders, and iterate as needed. You'll be on the path towards creating digital products that stand the test of time and deliver exceptional user experiences. 

BONUS pdf resource: See how the five layers of design work together with the design phases to create the Process "Whip" canvas.