The five elements of UX design & their common pitfalls

To build anything great product (or anything, really), you need solid fundamentals and a holistic view of how things snap together. UX design is no exception and for the last decade of its rapid development, we are lucky to have professionals like Don Norman, Harry Brignull, Luke Wroblewski and Julie Zhuo who influenced how we think and work in UX.

Jesse James Garret, the founder of Adaptive Path is one of those who had a major impact on the UX practice with his book The Elements of User Experience. But theory can only get you so far. So we take a look at each layer of the five elements of UX design and some common pitfalls to avoid in your practice. 

Th Five elements of UX Design

The five elements of UX design framework is a set of steps (or decision) that UX designers take to turn an idea into a working product. It’s a bottom-to-top structure and each level builds upon the level below it, going from abstract to concrete decisions. The elements of User Experience model can be very useful in:

• Informing the UX design process and focusing on specific questions that need to be answered

• Itemising the most important elements that need to be considered

• Explaining how those elements fit together into the whole product

Each of those layers includes specific activities, deliverables and questions that UX designers, researchers and product owners should focus on, so let’s dive in through each element, bottom-to-top. We dive into each layer below. 

1. Strategy

What it is

All projects begin with the question ‘why?’ Why are we designing this product? The strategy layer is about identifying what are the users needs and goals and how these can be balanced out with the business objectives.

Activities

This is the phase where you conduct stakeholder interviews (or project debriefings), to make sure you are absolutely clear about the business objectives, project timelines and budget. User interviews and surveys can also help inform the product strategy, although many of our clients already have this done in-house prior to engaging with us.

Potential Pitfalls

Just because this is the first layer, does not mean you only work on it before your product is developed. Working on a redesign task with a client of ours in the education sector, we found that there was significant difference in how children of different age groups perceived the visual outlook of the platform. Those between 9-14 years enjoyed enjoyed the aesthetics, but older students (16 and above) perceived the look and feel to be too childlike.

Although the visual part of the framework comes much later, we had to go back to the Strategy to figure out a way to make the design appealing to both groups. 

2. Scope

What it is

The scope defines the functional and content requirements of the project. Functional requirements include functions and features that need to be developed, while content requirements are about the content that should be provided - text, images, audio, video, etc.

Activities

Tightly connected with the strategy, this is where you do competitive analysis and benchmarking of other website or apps on the market and a gap analysis to identify where your product could fit in.

Potential Pitfalls

Just as with the strategy plane, UX designers don’t always have a say in what features should or should not be included, as usually clients come with a predefined scope of features. A common struggle for our clients here is resisting the urge to include many features, especially when they are not yet proven to be of value to users. That’s also the ideology of starting off with a Minimum Viable Product, before building the real deal.

By having too many features you risk making your app clunky and harder to navigate, which can significantly reduce engagement rates. Our client Happence handled this by choosing a modular architecture, which allows some features to be customised, based on their clients' needs. This also allows them to offer flexible pricing options, as their clients would pay only for the features they are actively using.

3. Structure

What it is

While the Strategy and Scope planes are mostly about discovery and balancing user & business objectives, actual design work begin in the Structure plane. Depending on the nature of the product, the Structure plane could define Interaction Deisgn, Information Architecture or both. Interaction Design is about developing flows that facilitate user tasks, defining how the users will interact with available features. And Information Architecture is design of the information space to facilitate intuitive access to content.

Activities

Common activities here include creating flow charts, site maps and customer journey maps to imagine how users would go through the product.

Potential Pitfalls

One of the common problems we’ve observed here is when designers are given the requirements and expected to create the structure without any continuous feedback from users and stakeholders. Very often, the way an organization would structure information is very different from the way users would find the most intuitive. The most important lesson here is to involved stakeholders early on and reiterate when needed. Check out the useful example by Nielsen-Norman Group of structuring a car-rental site from two different perspectives:

4. Skeleton

What it is

Moving up the planes, the tasks get more concrete. The Skeleton plane is about the Interface and Navigation design, or in other words the arrangement of elements and the strategic placements of buttons, controls, text and so on.

Activities

Here is the time to create lo-fi mockups and wireframes of the product and do some testing to ensure you are on the right track.

Common Pitfalls

A well-designed product is accessible to users of all abilities, including those with cognitive, motor or sensory impairments. Sadly, not all product or apps follow the globally accepted accessibility standards, limiting access for people with disabilities. While some accessibility features require extra work, others are simple to execute (like alt text for images, heading tags and so on). Working on projects like Vercida and Help me thrive has made us much more aware of these pitfalls and we aim to spread the word for others too.

5. Surface

What it is

The Surface layer is the sum total of all the work and decisions we have made thus far. Here we take care of the look & feel of the product, or in other words the Visual Design - choosing the right layout, colorus, typography, etc.

Activities

High fidelity mockups as well as prototypes come into play here to givean idea of how the product will look like and behave in reality.

Common Pitfalls

Many people (and sometimes even some of our clients) view UX/UI design only as the Surface plane, missing out on all the previous elements. Some might say we need to ‘make it pop’ more, which we’ve come to know in client jargon means making it more impactful. Sometimes this means a ‘call to action’ needs to be slightly more detailed/separated from the background so it stands out more, other times it’s about adding some subtle texture/patterns to varying elements to make it aesthetically pleasing. Whatever the case might be, it is important to make decisions about the surface level while taking into consideration of all previous layers and doing our best to stay objective.

Conclusion

Creating new products or redesigning existing ones always involves some level of uncertainty and risk. This framework can provide a much needed structure the into the design process, but it’s worth noting that you don’t need to complete the work on one plane to move to the next. Sometimes you might also need to stop, backtrack and rework some ideas. That’s just part of the process.

 We'll help you take the first step - for a limited time, we are offering a free 30-minute UX/UI consultation session with our team. We’ll review your product or software and provide feedback on high-level workflows and page layout, visual design and user journeys. The rest is up to you - you can take those insights with you and do as you please.

No strings attached - we promise this is not going to be a sales pitch.