The UX Designer's Guide to Affinity Diagrams

Just like Elle Woods in "Legally Blonde," user experience (UX) designers need to conduct a lot of research for their job.

For those who haven't seen the Reese Witherspoon classic, Elle Woods studies, researches, and works hard to get into Harvard Law School and become a lawyer. Even though Elle has no legal background, she was determined to overcome any obstacles and become a subject-matter expert. UX designers have this same mentality when mapping out their target users.

According to Econsultancy's recent report, 88% of companies who outperform in customer experience believe customer mapping had a positive impact on their ability to deliver a personalized interaction. Additionally, 87% of companies said customer mapping helps them identify gaps between what customers want and what they're getting.

Today, we're going to talk about the affinity diagram, which is a mapping method that helps your designers understand customers and provide a better user experience.

Below, let's review what an affinity diagram is and how its mapping can assist your UX design team.

Your diagram can include information like data, facts, customer interviews, user insights, and design issues. Additionally, an affinity diagram helps you organize and group information into categories so you can quickly make sense of the data.

Typically, affinity diagrams are used as a brainstorming exercise, or to analyze large data sets as a team. A UX designer might use an affinity diagram when they're searching for a group consensus, large issues are presented, or when there are many ideas being thrown around. If you're working on a project that seems chaotic, an affinity diagram can help create, design, and consolidate information.

So, how is an affinity diagram created? Before you can get started, let's learn about the process below.

To begin the mapping process, you'll want to write out ideas and information on movable blocks, like sticky notes. Then, you'll separate a large space, such as a wall or dry erase board, into categories. Lastly, you'll organize your sticky notes into each category.

By going through the affinity mapping process, you'll find trends in your research, learn more about your customers, and brainstorm new ideas to make the user experience better.

Before you get started with your affinity diagram, let's review some best practices below.

Affinity Diagram Best Practices

1. Assign a moderator.

These meetings can run long if you don't keep track of time. Plus, some team members might end up monopolizing the conversation with new ideas. The moderator should make sure everyone is contributing and keep track of time so the meeting doesn't last too long.

2. Designate a scribe.

Delegating a scribe can help you keep track of the best ideas. Writing on hundreds of sticky notes then organizing them can be overwhelming. So, a scribe will make sure you don't lose track of the most important information.

3. Summarize your findings.

At the end of the meeting, summarize your findings for each category. Figure out what your top conclusions were and the solutions you brainstormed during the session. This will help you quickly derive value from your meeting.

4. Put it online.

If you don't want to lose track of the affinity diagram, you can make one online. You can use flow charts or software like Lucidchart to draw out your diagram. Visualization tools make it easy to monitor your research after having an hour-long diagram session.

Now that we've covered the affinity diagram process, let's see what this looks like in action.

Affinity Diagram Examples

1. New Ideas Affinity Diagram

Source: Uxdict.io

In the image above, a UX team brainstormed ideas about community collaboration. As you can see, community collaboration is just one of the categories that they were discussing. That category was then dissected into three subcategories including users, contributors, and evaluation.

In this example, the UX team also used voting stickers for everyone to rate the best ideas in the diagram. By using an affinity diagram, this team was able to gather their ideas for the UX design team to improve the customer journey.

2. Customer Journey Affinity Diagram

Source: Dribbble

Unlike the first example, this one is focused on the customer journey. With an affinity diagram like this, the UX team can consolidate research learned from customer interviews and user insights. Learning about the pain points and motivations of your customers will help your UX team brainstorm new ideas to help users in their journey.

In this example, you can see the UX team separated their research into three categories including hopes, fears, and ideas. These categories help the team understand its target market on a deeper level. Plus, the UX team can see hopes, fears, and ideas at a glance, which makes it easier to brainstorm solutions.

3. Organizational Affinity Diagram

Source: Study.com

All in all, affinity diagrams are used to organize and gather information. In this example, you can see everything you need to know about purchasing camping gear. This diagram reviews key factors to keep in mind including fabric, set-up, sleeping room, and cosmetic elements like color and zipper.

This diagram gets to the heart of what an affinity diagram is for: keeping information organized so you can see data at a glance when you're trying to brainstorm solutions. It also features several subcategories to keep data organized.

While looking at examples is helpful, you might still have questions about how to create an affinity diagram. Let's review some templates to get you started.

Affinity Diagram Template

1. Hierarchical Affinity Diagram

Source: Wikipedia

In this template, the affinity diagram is organized by hierarchy. With this structure, you can create as many categories and subcategories as you need.

If you use this type of affinity diagram, make sure that you let the categories form themselves naturally. Don't limit yourself with preset categories and subcategories. Those categories should make themselves apparent as you start grouping information.

2. Color-Coded Affinity Diagram

Source: UX Planet

In this template, UX Planet organizes its affinity diagram by color-coding. It suggests using several-color sticky notes to arrange your ideas.

You could assign a color for stats, user interviews, and ideas. Or, you label your hierarchy affinity diagram with colors for each category. The subcategories could be one color while the categories underneath are a different one.

Whatever you choose, color coding your affinity diagram can be helpful when you're organizing your research.

3. Blocks Affinity Diagram

Source: Miro

This template organizes information in blocks, starting with high-level ideas and narrowing them down to more in-depth notes.

You can organize your ideas by stats, product ideas, profitability, customization, or customer satisfaction. This helps you brainstorm new ideas while also keeping in mind ROI and the customer journey.

UX designers must conduct extensive research from user interviews to usability testing. Once that research is complete, using an affinity diagram can help gather all the data you need to brainstorm new ideas that'll improve your customer's journey.

Want to learn more about user testing? Check out our ultimate guide.