Ultimate Product Design Jargon Buster

There’s a lot that goes into digital product design, and Big Human designers are constantly innovating to produce visually appealing apps and websites. There’s a name for everything they create — we bet you’ve heard of an “interface,” but what about a “user feedback loop”? Not knowing what these terms mean, however, can make it hard to keep up with each step of the process. 

Part of getting everyone — from the designer to the client — on the same page is making sure we’re all using the same words.  Our designers are more than willing to provide an explanation for anyone who asks, but it’s never a bad idea to do some research and get a basic level of understanding. To help you learn the lingo, we’ve created a dictionary of product design words everyone on the team should be familiar with.

We update our Product Design Jargon Buster regularly with the latest terms to know, so be sure to check back for new additions.

A/B testing

There will always be multiple options in design, but it’s all about what performs the best. A/B testing compares two versions of a web page or app to see which is more effective. It’s also known as split testing.

Accessibility

Web and product design accessibility refers to making a website or app functional for as many people as possible. Learn more by reading our three-part Web Accessibility series.

Active State

An active state shows which command a user has chosen or “activated” by using their cursor, keyboard, or touchscreen. It communicates a destination and occurs during a short amount of time. The design element for an active state isn’t as pronounced as a design element for a focus or hover state.

Animation

A design animation uses static imagery (drawings, photos, icons, etc) in rapid succession to simulate movement or motion. These are often used as supplemental storytelling elements.

Application Programming Interface (API)

An API is software that helps multiple applications interact with each other, and access information and data easily.

Backend

The part of an app or website users don’t see. It’s where engineers come in. Backend refers to the server or database that functionally supports the frontend, which is what users see.

Beta test

The final testing round of a product, among a limited audience. The goal is to detect and solve as many bugs as possible before releasing to a wider audience.

Call to Action (CTA)

This is an interactive element on a website or app that motivates users to take an action that leads to a conversion. A CTA is usually presented as a button or hyperlink with action words like “Subscribe,” “Learn more,” or “Sign up.”

Design System

A set of components that guide designers and developers. It sets their visual style (think: typography, iconography, and color palette), but it can also document accessibility and editorial principles.

Disabled State

A disabled state visually communicates that a user cannot interact with a specific element or component. This is shown by de-emphasizing colors, scale, or shadows.

Discovery

The phase of development and planning where a product’s need or value is assessed.

Enabled State

An enabled state visually communicates that a user can interact with a specific element or component. This is shown by emphasizing colors, scale, or shadows.

Focus Group

A focus group is a small team of people gathered to review and discuss designs. The group, usually composed of a company or brand’s target audience, may be brought in at any stage of the design process and their feedback informs design decisions.

Focus State

A focus state activates when a user highlights an element with their keyboard (usually the tab key) or voice command. Focus states are often outlined to show which element a user can currently interact with. Examples of focus states include links, buttons, and text boxes in input forms.

Frontend

The part of an app or website the user sees. It’s the visual elements and coding that dictate the way users interact with a product.

Heat Map

A heat map visualizes how people interact with a website or app—tracking where users click, scroll, and move their cursor. It’s a graph designers and developers can use to identify trouble spots and assess a product’s efficacy.

High-Fidelity (Hi-Fi) Prototype 

High-fidelity prototypes are as close to the final design or product as possible. These prototypes contain almost all of the design assets and necessary components. They are used to test usability, and identify and fix any issues before the final product is live.

Hover State

A hover state activates when a user puts their cursor over an element, usually a button. Subtle changes in color, scale, or shadows indicate a user can interact with that element.

Iconography

Iconography, which is often part of a brand’s design system, is a set of elements that represents content, features, and functionality. Icons are a visual language that helps a user understand a component or element and its usage.

Information Architecture (IA)

Websites and apps need structure. Information Architecture organizes content so a user can easily navigate a product and access its information.

Intellectual Property (IP)

When a designer or developer creates something, they map out its intended use. Intellectual Property refers to the parts of a design the owner may want to protect from unintentional use. IP can be protected with patents and design registration.

Interface

This is what a person uses to communicate with a product and input information. A smartphone touchscreen is the interface between a user and an app or website.

Landing Page

This is a web page a user is taken to or “lands on” after clicking a link in an email, ad, or other place on the internet.

Low-Fidelity (Lo-Fi) Prototype

Low-fidelity prototypes are early versions of a design or product that feature the basic content and components. These prototypes are used early on to check and test functionality. 

Minimum Viable Product (MVP)

An early version of the product built with simple features and using the fewest amount of resources. Feedback from the MVP helps designers and developers improve the product.

Mood Board

A mood board is a collection of colors, imagery, or text that serve as inspiration for a design or product. It can include photos of similar products or other visuals that evoke emotions or feelings a brand wants to achieve.

Navigation

An app or website’s navigation is a set of actions that help users move between pages and information. It presents the product’s information architecture and shows the user exactly where they are.

Personas

These are fictional characters that represent the different users who may use a product or service. They are based on trends and audience research and are created to better understand user needs, pain points, behaviors, and experiences.

Product-Market Fit

This is how well the product satisfies its intended market or audience.

Quality Assurance (QA)

Quality Assurance is the formalized process of reviewing a design and its features after it’s been fully developed. The goal is to identify any pain points in the user experience and any errors in the design and its functionality before the final product is launched.

Quality Control (QC)

Quality Control is an ongoing process that monitors a product and addresses issues that may pop up throughout its entire lifecycle.

Responsive Design

A design approach that makes sure websites and pages automatically adapt to different devices and screen sizes.

Persona

A representation or summary of someone who might use the product or service. Personas are based on research and data. They help the team understand who they’re creating for and what that user’s needs may be.

Prototype

A model version of the product that’s used for testing purposes.

Scrum

A framework that helps designers, developers, and product managers create products and manage their work. 

Sitemap

A hierarchy of a website’s pages, media, and files. A sitemap helps designers and developers plan a site’s structure and navigation.

Sprint

A short period (usually 2-3 weeks) where designers and developers work on specific tasks and deliverables.

Style Guide

This documents a site, app, or brand’s visual identity — their color palette, iconography, typography, UI/UX elements, and more. It can also be referred to as a design system or brand guide.

Toggle Switch

A toggle switch is a UI component that is often depicted like an on/off switch. It shows a user they can choose between two options.

Typography

Typography is the way letters and text are arranged to make the copy clear and visually appealing. A key design element that employs font styles, font pairings, appearance, and structure, typography affects the way users understand and interact with specific messages. A company’s branded fonts are often included in its design system or brand guide.

Usability Testing

The process of evaluating a product’s use and effectiveness by testing it on real users.

Use Case

A description of how people will interact with a website or app and what actions they’ll take to achieve a goal.

User Experience (UX)

The overall experience a user has with a product, physical or digital. UX details the interactions a user has with a product or service from start to finish.

User Feedback Loop

A feedback loop is the process of continuously collecting user evaluations and using their responses to improve the product.

User Interface (UI)

The visual experience a user has with a product. A product’s look and feel determines how the user interacts with it.

User Journey

The path a person takes when interacting with a website, app or any digital experience.

User Journey Map

The map visualizes the user journey or the process a user has to go through to achieve a goal on a website or app. It details the steps required to access information, complete a task, purchase a product, or use a new tool or piece of software.

User Research

This step is necessary to gather insights on a product and how potential users may use that product. User research encompasses the different ways companies can study their audiences, but the most common are surveys and interviews.

Visual Hierarchy

People naturally process information in the order their eyes see it. A visual hierarchy organizes a website or app’s visual elements so they can be understood easily and in a way that guides a user to take specific actions.

Wireframe

Every product needs a blueprint and that’s what a website’s wireframe is. Taking the user journey into account, it lays out a site or a page’s basic structure, functionality, and information architecture.

Product Web Development Glossary

Product design and web development terminology often go hand-in-hand, so be sure to read the Big Human Product Web Development Jargon Buster, too.