How to use 3 User Experience Frameworks to create better websites & apps

Apps and websites that are intuitive and engaging have always outshined those that are clunky and confusing. These days, however, consumers expect better experiences from their digital products than ever before.

Therefore, it’s the ideal time to prioritize user experience (UX) design because brands that leverage exceptional UX will beat those that try to compete on the basis of price or functionality alone.

If you’re a business that personally maintains its digital presence, you simply can’t afford to neglect your website or app’s UX. And if you’re a freelancer or an agency, it’s essential to convince your clients to understand and buy into the importance of UX as a fundamental tenet of the design process.

It’s often said that good design becomes invisible. If so, how do we wrap our heads around designing a good user experience when the nature of UX itself seems ephemeral, to begin with?

Thankfully, UX researchers and designers have been tackling this question for a while now — since at least the 1980s, when it was called Human-Computer Interaction. So, while the task can be tricky, we have some resources at our disposal.

In this article, I will share three specific frameworks to guide UX design discussions for websites and mobile apps and recommend when you should use each.

By the time you finish reading, I hope you feel empowered with the tools needed to champion the user as the central element of your clients’ or your digital assets.

What UX Isn’t

Before we get to the frameworks, let’s start by achieving some clarity on what UX is all about, in case you’re new to the term or find the concept a bit murky.

Since UX often gets lumped in with many other fields, and there are many misconceptions about it, we’ll first talk about what UX isn’t before we discuss what it actually is.

UX is not UI

The user interface (UI) describes the aesthetic design of the elements of a product with which a user interacts. In the context of digital products, this is the “skin” of the interface, and the part most affected by graphic design trends.

For example, apps on early iPhones used skeuomorphic design, where elements resemble their real world counterparts.

Apple then moved to a flat design around 2012, where elements were pared down to simple 2D shapes.

Now, we’re beginning to enter an era that could be called “Flat 2.0,” where we’re adding shadows, subtle gradients, and more sophisticated animations to the original flat style.

Beyond contributing to the visual appeal of digital products, the differences among these styles don’t necessarily have a large impact on the user experience.

You easily can imagine a beautiful, sleek-looking interface that’s confusing to navigate, buggy, and lacking any guidance about what elements are or what they do. Conversely, you can just as easily conceive of a dull, visually boring UI that’s intuitive, easy to navigate, and always works as expected.

That’s the difference between UI and UX.

UX Is Not Just About Wireframes

Wireframes – the gray scale representations of the general layout of a website or an app – are a common deliverable of the UX design process and are an essential tool in bridging the gap between the core responsibilities of UX and UI designers. However, the wireframes are not the entirety of UX design, even though people often conflate the two.

One reason why wireframes and UX design get mixed together is that many professionals claim to do both UX and UI design. This isn’t automatically a problem, since it’s completely feasible for one individual to handle both duties.

Unfortunately, many graphic designers simply add a few wireframes to their portfolios and claim to be UX designers when they don’t actually have experience in this field.

Granted, you don’t need to be a professional UX designer to work on the UX of your website or mobile app, but you need to know that there’s more to it than that.

Another reason for the focus on wireframes is that they are tangible; we understand what they’re for. It’s easy to look at one and say, “Oh, the image goes here, the logo goes there, here’s block of text, and ... okay, the navigation pulls out from the side. Cool!”

However, there’s a lot of research and psychology hidden below the surface of a good wireframe design. These factors are what UX design is all about.

What UX Is: Understanding Your Users

UX design is about understanding the psychology, habits, moods, and goals of your users and building a digital product that genuinely helps them do what they are trying to do.

Generally speaking, a good UX allows a user to easily and intuitively carry out their intended goals while a poor UX impedes a user from accomplishing their goals.

To drive home the importance of designing products, mobile apps, and websites with the user in mind, a recent survey found that 52% of people said that a bad mobile experience made them less likely to engage with a company in the future.

Organizations that overlook their mobile UX may be unwittingly saying to their audience that they are not as consumer-focused as they claim to be.

More fundamentally, they are sending the message that they don’t understand their users.

Introducing Three UX Frameworks

Now that we understand what UX is and what UX isn’t, let’s take a look at three frameworks that help organize our thinking around understanding users and designing extraordinary experiences for them.

Framework #1: The Hierarchy of User Experience Needs

This may not be the most popular of the three frameworks in this article, but the Hierarchy of User Experience Needs is the probably the easiest to understand and thus a good place to begin.

Similar to Maslow’s Hierarchy of Needs, the hierarchy of user experience needs uses a pyramid shape to indicate the relative importance of various parts of your digital product user experience.

While many leaders in UX design have translated Maslow’s hierarchy to the field, I’m particularly fond of Lyndon Cerejo’s version, first created in 2001. It’s simple, useful, and a great tool to build a solid understanding of the different layers that make up a good user experience.

You can use it to guide a discussion for improving the UX of an existing website or app or as a way to talk about various decisions your clients need to make for their digital assets.

The hierarchy of user experience needs have five parts:

1. Site Availability Layer: You would think that this goes without saying, but when a user isn’t able to access your website or your app can’t reach the APIs it needs, then there’s no experience to be had at all! This is analogous to basic physiological needs, like food and water, in Maslow’s hierarchy.

2. Usability Layer: Some of the questions addressed at this layer include:

Are you able to navigate to each section of your website easily?

Are the buttons in your app easy to tap?

Is all the text legible? Does everything function consistently?

3. Supportive Features Layer: Deals with how you are supporting users who use your product and encouraging the kinds of interactions that you want.

Example questions in this area include:

Does your app guide a new user through its primary functionality?

Does your online store offer reviews and suggested products?

Does your website have a FAQ section or live chat?

4. Confidence Layer: This area is especially important if you are accepting payments through your website or app.

The fundamental issue here is whether your users feel confident enough to invest their time, personal information, or other resources in what you are offering.

For example, if you offer an eBook in exchange for entering an email address, can your users trust that you won’t spam them or sell their addresses to third parties?

If you offer a subscription service through your app, is it easy to unsubscribe later if a user no longer wishes to receive communications?

5. Desirability Layer: This is at the top because before you can focus on creating an attractive user interface with the bells and whistles that you or your users want, your website or app must first be always available, usable, supportive, and trustworthy.

There are many options here, but you want to make sure that anything you do on this layer doesn’t negatively impact the ones below it.

For example, a new feature may be desirable to users but not if it requires large images or JavaScript libraries that greatly increase load time.

Similarly, from a UX design perspective, a drop-down menu that is beautifully animated but difficult to use is no better than an intuitive one without the frills.

Framework #2: The UX Honeycomb

The UX Honeycomb is a tool that breaks down the factors that contribute to a positive user experience into seven main factors.

Useful

Desirable

Accessible

Credible

Findable

Useable

Valuable

The UX Honeycomb is a bit more technical than the pyramidal hierarchy of user needs above, and as such, may be better suited for the start of a new project or a redesign, rather than for upgrading or maintaining an existing website or mobile app.

Usable, desirable, credible, and findable are similar to points already covered in the pyramid discussion above (though findable may relate more to navigability than to availability here).

Let’s focus on the three new topics in this graphic.

Useful Hexagon: Prompts us to consider users’ motivations. Why would a user want to interact with your website or app to begin with? And, given that goal, does the site truly allow them to achieve it?

For example, most “brochure” type websites are intended to give potential customers information about a business and the products or services it offers. If that’s the goal of the site, but the information is not present or is difficult to find or understand, it’s not useful.

Accessible Hexagon: Refers to designing for accessibility, meaning that the design elements should accommodate individuals that may have disabilities.

For example, someone who is colorblind may not be able to see which field in a web form is generating an error if the only indicator is a red border around the entry. Accessibility is very complex field and is worth investigating to allow greater audience access to what you’re building.

Valuable Hexagon: When all six of the outer factors in the UX Honeycomb are properly addressed, you create something that is truly valuable for your target audience. This ensures that they will keep coming back.

Framework #3: The Elements of User Experience

The last model we’ll look at is the most comprehensive – more of a unified theory of user experience than a tool. It is best used to gain a conceptual understanding of how meaning is translated through the design of a digital product.

Jesse James Garrett developed the Elements of User Experience in 2000 to describe a holistic view of UX and to illustrate the context for decisions that user experience practitioners make.

The distinguishing feature of the model is that the activities of the layers occur at the same time – are concurrent – but are described at different levels of abstraction.

For example, the visual design not only incorporates the characteristics of the aesthetic (Flat vs Flat 2.0) but also the goals of the user (contrasting colors to guide the UX).

Everyone understands the visual aspect of an interface because it’s the most concrete. But other layers, such as information architecture and functional specifications, are always happening, just under the surface.

Let’s look at each layer briefly.

Layer 1: Site Objectives & User Needs

At the bottom we have the dual layer of Site Objectives and User Needs, which sometimes are in alignment, and sometimes are not.

Consider how many times you’ve been interrupted while reading a website to sign up for an email newsletter, a subscription service, or some other kind of “exclusive offering.”

Clearly, in these cases, the site’s designer decided that the company’s objectives were more important than the user’s needs. This is a balancing act, especially if you’re trying to make money directly from the website or app – you need to ask for the sale, but without alienating your users.

Layer 2: Content Requirements & Functional Specifications

The next level contains Content Requirements and Functional Specifications. Content, believe it or not, is also a component of UX — the types and amount of content on your site or app will determine how to organize the layout for the best user experience.

Many people advocate for content-first design, opting out of the standard Lorem Ipsum (and its many variants) in favor of real content intended for use.

Functional Specifications refers to how the content will be delivered.

We now have many devices with various screen sizes and limitations: TVs, desktops, tablets, phablets, phones, smartwatches, and now virtual reality headsets as well. Which of these will you prioritize? How will you manage layout when rendering for multiple outputs that may be very different?

Layer 3: Information Architecture & Interaction Design

The middle layer contains Information Architecture and Interaction Design, two disciplines with too much complexity to cover here. In a nutshell, they ask the question: How is all the information organized, and how can you interact with it all?

Layer 4: Interface, Navigation & Information Design

Next up, Interface Design, Navigation Design, and Information Design. The first two are pretty self-explanatory.

Information design is the practice of presenting information in a way that fosters its efficient and effective understanding.

Interface, navigation, and information are combined to create the wireframes that most people understand as the deliverables of the UX process.

Layer 5: Visual Design

Finally, on top, is the part that everyone loves: the Visual Design layer. This is where we wrap up all of the design and work from the lower layers with appealing graphical design.

Conclusion: How to Use the Frameworks

The three frameworks presented in this article represent different ways of understanding the problems present in user experience design and offer pre-established approaches for how to begin solving them.

Each model touches on different aspects of UX, and each has its own approach that can add significant value to the UX design process.

For example, you may wish to use one model, like the Elements of User Experience Design, internally for discussing projects with your team and another, like the Hierarchy of User Experience Needs, to aid with decisions related to client projects.

Whatever approach you choose, there’s something in each framework to guide productive conversations about how users experience digital products.

Every conversation we have about UX makes the Internet a better place.

A call to action is a marketing term that refers to a prompt that invokes a response leading to a sale. When referring to a call to action (CTA) in the digital design world we usually mean the interactive element that leads to the next step in the experience - something that needs to be clicked or tapped.

User testing refers to a technique used in the design process to evaluate a product, feature or prototype with real users. There are several reasons why you might want to undergo usability testing, the most common is that it allows the design team to identify friction in a user experience they are designing, so that it can be addressed before being built or deployed.

WYSIWYG (pronounced WIZ-ee-wig) is an acronym for "What You See Is What You Get". It helps identify an an interface that allows user input resulting in an output that is rendered in a similar way. For example; a word processor application interface might resemble a piece of paper,so when printed the user can see how the output will appear.

A content management system (CMS) is an tool that allows a website editor/administrator to manage the content that is displayed. Websites are made of HTML and CSS to create pages. Pages can be hard-coded but would require technical development skills to make changes. A CMS usually allows a person without coding knowledge to amend existing and add new content to a website using a WYSIWYG interface.

Responsive web design refers to a web page that dynamically adapts its layout to fit the size and orientation of the device on which it is viewed. A responsive design allows for a more optimised user experience across desktop and laptop computers as well as smartphones and tablets of varying sizes.

User stories allow the functionality of a product or service to be expressed as written descriptions of an experience as seen from the users perspective. The writing of user stories creates a list of design and development tasks to complete in order to create any required functionality.

A user interface (UI) is a conduit between human and computer interaction - the space where a user will interact with a computer or machine to complete tasks. The purpose of a UI is to enable a user to effectively control a computer or machine they are interacting with, and for feedback to be received in order to communicate effective completion of tasks.

A persona in UX Design is the characterisation of a user who represents a segment of your target audience. On a project you might create any number of personas to be representative of a range of user needs and desires. The solutions you design must answer these needs in order to deliver value to your target audience.

A great, reliable, inexpensive method for discovering patterns in how users would expect to find content or functionality. Card sorting is used to test the taxonomy of data with a group of subjects, usually to help inform the creation of the information architecture, user flow, or menu structure on a project.

A technique used to generate ideas around a specific topic. Often done in groups, but can be done individuals. The process usually involves writing down all ideas around a topic onto paper, a whiteboard or stickies often implying some kind of association.

An MVP is a product that has the minimum set of features to prove the most essential hypothesis for a product. Businesses building a new product can create a Minimum Viable Product to prove that an idea is viable and warrants further investment. A further benefit being that the next stage of development can be informed by feedback obtained from testing that MVP.

A sitemap is a diagrammatic representation of a hierarchical system. It usually depicts the parent-sibling relationship between pages in a website, showing how sub pages might be arranged underneath their parent groupings. This arrangement forms a map of the site.

A user journey represents a sequence of events or experiences a user might encounter while using a product or service. A user journey can be mapped or designed to show the steps and choices presented as interactions, and the resulting actions.

A prototype is draft representation built to test ideas for layout, behaviour and flow in a system. Prototypes are an indispensable tool for resolving a large number of potential issues in a concept or business before too many resources are deployed to put a design into production.

A Wireframe is a visual schematic that conveys a basic level of communication, structure and behaviour during the design of a system. Wireframes are low-fidelity designs that bypass including a detailed user interface or visual design, conveying just enough to get across the core idea.

To say something is usable is a qualitative statement about how easy that thing is to use. Usability is an assessment of how learnable a system is and how easy a user finds it to use. The usability of a system or product is a key factor in determining whether the user experience is a good one.

Information architecture is the design and organisation of content, pages and data into a structure that aids users understanding of a system. A more organised system enables users to more easily find the information they require and complete the intended tasks.

A general term that covers all aspects of a user's participation while engaging with something that has been designed. Usually when talking about User Experience in the digital design field it refers to the interactions, reactions, emotions and perceptions while using an app, service, website or product.

Got a problem to solve with your service?

We'd love to hear about it. We can add value to any business that has a digital product/offering.