A-Z of important UX Design terms (2022 guide) | Strafe Creative

A-Z of important UX Design terms (2022 guide)

Digital DesignUser Experience
Team of UI UX designers at work

Working with a UX designer and need a little help with the lingo? Or maybe you are looking to get started in UX design and struggling to find a helpful glossary. Either way, we have your back with some key UX design terms to keep you on top of your game in 2022.

Ordered from A-Z there should be no more UX jargon going over your head!

Let’s dive into some basic UX design terms.


A/B Testing

The term A/B Testing is also called split testing and refers to experimenting with two different iterations to find a solution that converts better. You could A/B Test a web page header to see which invites more content reading. You could A/B test a website button to see which colour or text prompts more interactions. Or you could A/B test product block layouts to see which gains more clickthroughs.



Accessibility refers to the usability of your SaaS or website design for every user. This includes those with situational, temporary, or permanent disabilities, that cause instances of impairment in a person’s sight, hearing, speaking, cognition or touch.


Affinity map

Ross moves around post-its on a whiteoard

Sometimes called an “affinity diagram”, the UX design term “affinity map” is a sticky note approach to grouping parallel ideas throughout the various stages of design and development.

Remember UX designers are responsible for the research and realisation of your SaaS or website idea, so they have lots of topics to deeply consider, whether that is who the user is, or what they want from your product and how they should best deliver it.

Walk into a UX designer’s office and you are likely to see them using coloured sticky notes on their wall to denote points of data they have established in an affinity map.



Assets refer to all kinds of elements needed for a SaaS or website design project in the pre-launch stage. These can range from images and content to usernames and passwords for the software a client uses.

The idea is that you gather all of your client’s pre-existing assets as you start a project, in order to make the best use of your design time. Other assets will be created and used throughout the design process.


Break point

This is how you design a build for responsive layouts. The break points are adjustments within the design that accommodate the screen size and its being made, smaller or larger.

Breakpoints are always linked to the grid.



Briefs are the go-to place for information the designers and developers will need to be able to successfully deliver a project. This will usually include all the information that was on an original proposal, as well as further information obtained from meetings with the client and analysis of the technical details.

Briefs can be very complex or super simple depending on the project but essentially it’s a working document that is updated and refined throughout the lifecycle of a project.


Call-to-Action (CTA)

CTA stands for call-to-action. This is usually a button that prompts website visitors to take a specific action. An example is a “Buy Now” checkout button.


Clickstream analysis

A clickstream is the path a user takes through your site or SaaS, on a single visit. It includes every page they enter and the actions they take on it to get to the next. It will also include details of their exit point from your design.

Analysis of user activity over a set period is called “clickstream analysis” and is often useful for understanding how different groups of users interact with your SaaS or website.



Content usually refers to the written content (copywriting) within a project but is sometimes used as a collective term to include imagery and videos too.



Read more: Will UX design be automated? Is our AI obsession destroying our industry?



Customer experience (CX)

How a SaaS or website engages its users at every stage of their customer journey is called the “customer experience” or CX. Understanding this allows UX designers to put their customers first throughout the design process.


Design management system (DSM)

A design management system is a cloud-based tool that allows designers to use templates and pre-built features to create a design. Our favourite DMS is Figma, which allows you to brainstorm, design and build UX functions quickly and easily.


Empathy map

A UX design team will use an empathy map to understand their user. An empathy map is a visual representation of data points a UX researcher has gathered from various customer outreach and surveys.

The result of empathy mapping should help your UX designers learn about a customer’s needs, objections and decision-making process.

It’s a bit like painting a data-backed picture of who you are selling your product to.


Experience strategy (ExS)

In UX design we aren’t just concerned with customer experience, although it remains top of our list when priming your digital products and websites for success. UX design is also about incorporating the needs of the business. ExS is the strategy that helps us align both the customer and the business needs within your Saas or website.



This is one of our favourite online tools for bringing UX and UI designers together to create elements for SaaS and website design. The collaborative nature of this specific software allows designers to work on projects in real-time, continually designing, testing and building improved iterations.

You can find Figma at www.figma.com


Focus group

A meeting or workshop conducted by UX researchers to meet, question and assess a cross-section or specific sub-section of users. The results allow UX designers to create empathy maps and experience strategies before moving forward with user flows.

A focus group can also help test design iterations throughout the UX and UI process, before and after a product is launched.



When designing anything you use a grid system. This is to ensure that elements within the design always align no matter the size of the page.

The grid supports responsive design. This means you don’t build with absolute values, you build referencing the number of pixels elements are away from each other, no matter the screen or device size.



A heatmap is a visual method of understanding user interaction with a digital product or website. High usage areas are indicated by red (hot), which changes through orange, yellow, green and blue for fewer interactions (cold).

These are great tools for assessing whether calls to action are in the right place on a page, or if they need further A/B testing for better conversion. Heatmaps can also tell you how secondary touchpoints are performing.



Icons refer to small images that are often single-colour illustrations to indicate a heading. Sometimes you will see them used for services or offerings on a landing page or home page.

Usually, these are generated using an icon library such as Icon Scout.


Lean UX

Lean UX refers to a design methodology that creates minimal viable steps for deliverables so that they can be effectively tested and reiterated where necessary.


Mobile concept

When designing for desktop sites, a mobile design is usually created so that the developers understand how the UX designer would like the site to look when scaled to a mobile device.

In most cases, mobile concepts are produced as one of the last design stages.

Vita Mojo mobile app view


Mobile first

This is the approach that designers take where a mobile version of your design is considered above desktop versions.


Minimum Viable Product (MVP)

A minimum viable product (MVP) is a version of a product with just enough features to be usable by early adopters, who can then provide feedback for future product development.

In our business, an MVP is usually a single-page site, often with a contact form to gauge interest in a product.

By focusing on releasing an MVP the client avoids a huge financial outlay on a full website whilst their business idea is in its early stages.



This is the process your customers go through from sign-up to first in-app action. Or if you are adding a new service feature, it is the introduction of that new feature to your user.

The onboarding process is mapped out in your user flow and wireframe activities.



Padding is the extra space included around an element before another element starts. It is often a variable option and in your UI design process, you might pre-determine padding requirements for specific elements in order to create consistency across your digital product.


Placeholder image

An image that has been designed as the default image when one hasn’t been specifically added or selected.



A prototype gives us the ability to link designs and concepts for user testing before we build anything. Clients and users can click around the site and interact with it as if it was live. This allows us to check if it’s working and to see if the user journey is as expected.


Qualitative user research

This research method is based on the psychology of a user. It studies their behaviour, attitudes and thoughts on specific subjects. In UX design, research might include audio and visual recordings of users to establish their qualities and characteristics.


Quality Assurance (QA)

QA stands for Quality Assurance. There are many QA steps throughout a project and these QA requirements are split across the development team.

At Strafe, we finish each project with a QA Checklist. This is where items are marked off by the relevant member of each team (UX, UI, etc) for each project.


Quantitative user research

This research method is used to collect and identify patterns in use and user behaviour that allow UX designers to make predictions about a user base, based on test data. Research might include a focus on calls-to-action conversion or touchpoint accessibility.

Quantitative data in UX terms means data collected with regard to the usability of a design.


Responsive design

A responsive design is one that includes the flexibility of page design (screen size and orientation) with the goal of allowing users to use a website or SaaS application on a number of devices.


Section breakdown

A section breakdown is detailed on the flow map document and provides a breakdown of all the elements that should be included on the individual pages. This is then referred to to create the wireframes.



A sitemap is a file that documents the indexed pages of a website. Having a sitemap allows search engines, like Google, to crawl your site (with bots) quickly and easily, because they have a map for page hierarchy.


Super/Mega menu

A super menu is a type of expandable menu in which many choices can be displayed, often in a dropdown layout. They are an excellent design choice for accommodating a large number of options.



This references the elements within a mobile design that are touched with a thumb or finger on a device. The size of the clickable elements has to be considered to ensure they can be easily clicked and accessible by all users.


User flow (UF)

User flow is the path taken by a typical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action, such as purchasing a product or booking an appointment.

Want to understand why user flows are so important in designing SaaS products? Here’s a full guide to the importance of a good user flow.


User experience (UX)

UX stands for User Experience. This is the “invisible” side of the user’s interaction with a website or digital product. This includes research, information architecture, userflows, prototyping and testing.

Here is our full guide to UX design.


User interface (UI)

UI stands for User Interface. This is the “visible” side of the user’s interaction with a website or digital product. This includes graphic design, colour theory, typography and art direction.

Want to know more about UI design? Read our full UI guide here.


User research (UR)

This is the study of your ideal user in both qualitative and quantitative methods.


UX Audit

The process of establishing which parts of your current UX set-up are fit for purpose and which need to be redesigned.


Wireframes (WF)

Wireframes are the skeletal structure of a website. Wireframes are produced before design concepts to ensure that the elements required within each page are covered and that the userflow and site purpose will be achieved.

Here is our full guide to why wireframes are so important in UX and UI design.


Need someone to take the headache out of UX design for you? Look no further and tell us all about your website or SaaS idea in our Project Planner below.

Table of Contents

Everything starts with a conversation, let's see if we're a good fit.

Get in touch with us and see how we can help you.

Please select applicable project types:
Web ProjectUX / UI DesignBrandingSaaS Design & BuildE-commerce