A Visual Glossary for Product Design

Christina Wodtke
6 min readFeb 18, 2022

I made this for my students, but I think some other folks may benefit.

Early Research

Baseline Study
A baseline study is an analysis of the current situation to identify the starting points for a programme or project. It looks at what information must be considered and analyzed to establish a baseline or starting point, the benchmark against which future progress can be assessed or comparisons made. learn more

Secondary Research
Secondary research, also known as desk research, is a research method that involves compiling existing data sourced from a variety of channels. This includes internal sources (e.g.in-house research) or, more commonly, external sources (such as government statistics, organizational bodies, and the internet).

  • Literature review
    A literature review is the writing process of summarizing, synthesizing and/or critiquing the literature found as a result of a literature search. It may be used as background or context for a primary research project. There are several reasons to review the literature: Identify the developments in the field of study.
  • Comparative research
    Like competitive research, but examines other products and services your target user may be very familiar with, to inform design. learn more
Comparative Research Done Right – Eleganthack


  • FragChunkMap
    A process of synthesis often used by designers under many names, such as affinity diagramming. Learn more

A persona, in user-centered design and marketing is a fictional character created to represent a user type that might use a site, brand, or product in a similar way. Marketers may use personas together with market segmentation, where the qualitative personas are constructed to be representative of specific segments

example via https://www.revlocal.com/resources/library/blog/understanding-buyer-personas-and-why-theyre-important
Learn more

  • Behavioral Persona: an approach to personas that has no demographics, only psychographics and behavior. Created to avoid stereotyping, but some products may need demographics in order to avoid stereotyping, i.e. adding a woman, a person of color or a differently-abled persona to raise awareness of special considerations.

User scenarios are stories which designers create to show how users might act to achieve a goal in a system or environment. Designers make scenarios to understand users’ motivations, needs, barriers and more in the context of how they would use a design, and to help ideate, iterate and usability-test optimal solutions.
Short example from nng.com
Detailed Debbie is going on a business trip. She needs to book a hotel room that’s affordable and has good reviews. Debbie browses the site to find a hotel for her upcoming trip. She looks closely at the various hotels to find one that meets her needs. She considers price and user ratings heavily as she shops. Debbie selects a hotel and books a room.

A storyboard is a graphic organizer that plans a narrative. Used in our class to create visual scenarios.
Learn more

via https://www.pinterest.com/tanyazavialova/ux-storyboards/
  • Product-as-Hero storyboard
    Used to create a vision of the user’s struggle and how your product fits into their life.


Alignment diagrams
Alignment diagrams are a family of diagrams that show the customer/user’s experience and how they map to a company’s offerings and touchpoints.

Alignment diagrams include: service blueprints, customer journey maps, experience maps, and mental model diagrams.

  • Journey Map
    A journey map is a visualization of the process that a person goes through in order to accomplish a goal. In its most basic form, journey mapping starts by compiling a series of user actions into a timeline. … Both reference a visualization of a person using your product or service. Learn more
  • Experience map
    An experience map is a visualization of an entire end-to-end experience that a “generic” person goes through in order to accomplish a goal. This experience is agnostic of a specific business or product. It’s used for understanding a general human behavior (as opposed to a customer journey map, which is more specific and focused on related to a specific business).via NNG
  • User Story Map
    From Scrum and Agile a way to determine a software’s functionality based on user needs.

learn more

  • User Stories
    A way to document needed functionality without suggesting what design it will take. Comes from Agile/Xtreme programming and used widely in tech companies. learn more
  • Intervention Study
    The distinguishing feature of an intervention study is that the investigators assign subjects to a treatment (or “exposure”) in order to establish actively treated groups of subjects and a comparison group.
    Incs247b it refers to when we introduce a new habit to interrupt old habits.
  • Wireflows
    Love child of wireframes and task flows, they are probably the most common type of diagramming done by tech teams collaborating on a whiteboard.
    “Definition: Wireflows are a design-specification format that combines wireframe-style page layout designs with a simplified flowchart-like way of representing interactions. … The use of screen designs, rather than abstract flowchart symbols, keeps focus on the product with which users will be interacting.” learn more

via wireframes magazine

via NNG

Process Diagrams and Concept Models

Diagrams made to support ideation and collaboration. They help you get your head around what you plan to make.

  • Bubble Mapping
    A tool taken from architecture to decide what the important areas of a application will be without being caught up in visual design. This technique is less common in UX design, but can be very useful so we’ve included it.

learn more here and here

  • Path Diagram
    From Rational Rose, a brainstorming technique documented in Information Architecture: Blueprints for the Web. It applies to any sort of software effort. learn more

Assumption Mapping
From Lean Startup practices, a way to identify risks that need to be tested. learn more

Mood Board
A collage designed to capture the brand personality and product mood.

learn more

Style Tile

learn more

Non-functional images of what the finished product should look like. Often demands “pixel-perfect” design.

learn more
how to do this in figma