small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://uxplanet.org/free-sketch-template-for-building-a-meaningful-affinity-diagram-during-the-ux-process-f832e081782d?source=rss----819cc2aaeee0---4">UX Planet &mdash; Medium</a> | Geunbae &#8220;GB&#8221; Lee <img alt="" src="https://cdn-images-1.medium.com/max/1024/1*d6EcDuJPSP6LdZxsJObWOQ.png"></p>
<h4>A step-by-step guide with some key concepts explained</h4>
<p><em>*I believe that doing an affinity diagram exercise is more efficient in a physical space with teammates scribbling notes, thinking out loud and engaging in discussions. Therefore, unless Sketch provides the ability to share/edit a file with multiple people at once, I would suggest to use the template to digitally store written Post-it notes or to showcase the process/result somewhere (i.e portfolio).</em></p>
<p><strong><em>At the end of this article, there is a link to download a Free Sketch Template to create a digital version of an affinity diagram with explanations </em></strong>😎</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OMbZlzBYoCagwnhRj4ntNg.png"></p>
<h3>What is an Affinity Diagram?</h3>
<p>In short, the affinity diagram shows the common issues, themes, and scope of the<strong> customer problems and needs in one place.</strong> By hierarchically grouping the data, or affinity notes that reveal the problems and needs, it acts as the voice of the customer and the issues become the basis for user requirements. With just a few tools, you can create a visual representation of large amounts of data that will help to inform your future strategy.</p>
<p>Throughout the research process, the team have the opportunity to learn about user pain points, motivations, and preferences in a very personal way. However, it could be difficult to <strong>track all of that data and finding patterns</strong>, especially when trying to navigate a long text document or pages of handwritten notes. This is where creating an affinity diagram helps. It allows you and your team to<strong> develop innovative solutions, drive group consensus and to organize insights.</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*zO1wy1t1K7Lr99-xeoPLjg.png"><em>Photo Credit: </em><a href="https://www.nngroup.com/articles/affinity-diagram/"><strong><em>NNGROUP</em></strong></a></p>
<blockquote><p>“The affinity diagram is built from the bottom up, grouping individual notes that reveal key themes in your data. We let the data suggest the labels for these groups rather than starting with predefined categories. Groups are then labeled using the voice of the customer- saying what they do and how they think. This process exposes and makes concrete common issues, distinctions, work patterns, and needs without losing individual variation.”</p></blockquote>
<blockquote><p>— <a href="https://twitter.com/kholtzblatt?lang=en">Karen Holtzblatt</a> on <a href="https://www.amazon.com/Rapid-Contextual-Design-How-User-Centered/dp/0123540518">“Rapid Contextual Design”</a></p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OMbZlzBYoCagwnhRj4ntNg.png"></p>
<h3>Do’s and Don’ts of Affinity Diagram</h3>
<h4>Do’s ✅</h4>
<ul>
<li><strong>Give yourself and your team enough space and time to build a wall, filled with notes — </strong>Try to wrap up the activity in one day to allow your energy and effort to maintain critical thinking while the information and your memory are still fresh</li>
<li><strong>Make sure everyone in the room are contributing with excitement and motivation —</strong> Don’t let an individual take control of positioning and removing notes either. Encourage your teammates to make this time worthwhile</li>
<li><strong>Write down clear, easy-to-read notes to help understand what they mean — </strong>Provide adequate amount of information with clear direction to anyone who read the notes</li>
<li><strong>Vote for most important/valuable/wild information or even when there are disagreements, confusions, etc— </strong>This gives you a hierarchy of importance for key notes when addressing them in the next phase of the process</li>
</ul>
<h4>Don’ts ❌</h4>
<ul>
<li><strong>Don’t force the groups/categories to form unnaturally — </strong>Try to explore more and move the notes around multiple times to spark ideas</li>
<li><strong>Don’t try to structure notes into a final form of hierarchy just yet — </strong>You might be tempted to try to make sense of the notes and how they relate to each other to picture the user’s journey. But, this should actually be done in iterations as you think and discuss amongst your team members</li>
<li><strong>Don’t be intimidated with so much data in front of you — </strong>You don’t have to know everything just now because you and your team will start to uncover the important stuff together</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OMbZlzBYoCagwnhRj4ntNg.png"></p>
<h3>Affinity Labels / Notes</h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*A3hZBfyAhQBKG379uRhFOg.png"><strong>Process:</strong> Yellow &gt; Blue &gt; Pink &gt; Green</p>
<p>⚠️ Before we take a look at the Affinity Building Process and the Sketch Template for creating a digital version of the affinity diagram, let’s remember these key labels (or Post-it notes) by their colors and what they resemble.</p>
<h4>#1. Yellow labels / notes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*cS7TueLAgpUl5TShot0QOg.png"></p>
<p>First, the Yellow labels are used to write down things such as:<strong> </strong>statistics, key facts, personal observations, insights from interviews, user quotes<strong> </strong>and more. Things that jumped out at you during research sessions, the “aha” moments and the stories that customers tell you are all very important to start out this process.</p>
<h4>#2. Blue labels / notes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*x1iO0fhSoh2owIfut4oSOw.png"></p>
<p>Blue labels collect coherent set of notes representing a theme or work distinction. They are super important because the process of combining several Yellow labels drives the initial design thinking process. They are written in the first person as though the customer was directly talking to you.</p>
<h4>#3. Pink labels / notes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*fEI6DV6tuyK2kbileb7Oyg.png"></p>
<p>For a set of few related Blue labels, there is one Pink label that combine the data and insights found from them. You should not have to read the Blue labels under the Pink label to figure out the key theme of the section; it should be clear in the Pink label. The language of Pink labels should also be in the voice of the customer.</p>
<h4>#4. Green labels / notes</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*WNQrfFpUhwNyq5GkQVrxJQ.png"></p>
<p>Green labels are the highest level of affinity label and basically, they summarize the Pink labels under them. While they can also be written in the voice of the customer but, could be more general in nature. Each Green label denotes a big piece of the user story. Most good affinity diagrams have five to eight Green labels which help chunk the information so you can find the information you are interested in quickly.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OMbZlzBYoCagwnhRj4ntNg.png"></p>
<h3><strong>Affinity Building Process</strong></h3>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*M0RyfJSioxd1Sor35seaoA.png">Beginning &gt; End</p>
<h4>Step #1: <strong>Prepare for affinity building</strong></h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L-wGchW8CWA8RUjLfhdfLQ.png">Write things on the yellow labels before grouping them</p>
<p>Your affinity building team can include your team members, stakeholders, and anyone who understands the project focus and is interested in the data. Also, you could invite people from Marketing, Management, Business Analysts, Developers, People on related projects and more. Once you assemble the team, start writing notes down on the yellow labels silently before putting them on the wall.</p>
<h4>Step #2: Build the affinity with yellow labels</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Muz-MytAQrKghBr4yijNHQ.png"></p>
<p>The first thing to do is to get all the yellow labels / notes up on the wall in loose groupings. Then, by going around the room, each team member reads them find any other notes that go with ones that are already up on the wall (this is only for the initial phase). If related notes are found, put each underneath or beside each other to create a category.</p>
<p>Remember to not let people to randomly put stuff without reading them aloud or without appropriate groupings in the beginning. If someone disagrees, let them express themselves and discuss rather than argue. No one should be moving notes without actually saying why they would like them to be moved to a different group.</p>
<blockquote><p>Every affinity note is supposed to contain just one idea. If an affinity note needs to be broken up because it contains more than one idea, handwrite a new affinity note on a yellow Post-it for the second idea and cross out the duplicate information on the first one. If some are tough to categorize, make use of the “junk” category to later revisit if they help in anyway.</p></blockquote>
<blockquote><p>— <a href="https://twitter.com/kholtzblatt?lang=en">Karen Holtzblatt</a> on <a href="https://www.amazon.com/Rapid-Contextual-Design-How-User-Centered/dp/0123540518">“Rapid Contextual Design”</a></p></blockquote>
<h4>Step #3: Add Blue labels</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DV48K209rbkQhqKm8btxiw.png"></p>
<p>The goal is to create an affinity where you never have to read the individual affinity notes underneath to understand what the columns mean. A good Blue label will both characterize the work of the users and motivate to come up with ideas around the solutions for the problems. Therefore, the Blue label is the most important drive of design thinking.</p>
<p>These are some of the tips that you need to follow for a good Blue label and beyond (Pink and Green).</p>
<ul>
<li>Write labels as though the user is speaking to you</li>
<li>A good label captures what is group is saying in detail</li>
<li>Write clearly so that everyone can understand</li>
<li>Let the data tell the story, don’t assume</li>
<li>Reorganize the group if it’s tough to come up with a good label</li>
</ul>
<h4>Step #4: Add Pink labels</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*F65F1N8TV-spWIrX6SlVHA.png"></p>
<p>A good Pink label tells you what matters about the Blue labels underneath it. It reveals key issues in the data and should be able to tell a strong story at a glance. Therefore, Pink label should provide enough information to understand the issue.</p>
<h4>Step #5: Add Green labels</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*3d7sQbPsfCxGKQPqtXSDlQ.png"></p>
<p>Green label groups together Pink labels and all other notes underneath to form a coherent piece of story which is important to the project focus. While it can be more abstract and categorical (unlike Blue or Pink labels), the goal is to provide you with an overview of the key issues. Later, Green labels help chunk the information so that you can find the information you are interested in much more quickly.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OMbZlzBYoCagwnhRj4ntNg.png"></p>
<h3>Sketch Template for Building an Affinity Diagram</h3>
<h4>💾 Download the Sketch file <a href="https://dribbble.com/shots/4436277--Free-Template-Affinity-Diagram">here</a> (Click! 👆🏻) to start building it!</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*n_N84oWK779NAD8lPpCdrw.jpeg"></p>
<h3>The file includes…</h3>
<h4>#1. Sketch File Overview — Basic Information, Process &amp; Explanations</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*J06yRE8lviaW-op9H74n5w.jpeg"></p>
<h4>#2. Symbol(Style) Guide and a Starting Point</h4>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*l9oJcNNliBZNaQP7WM6NYQ.jpeg"><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*967gJsbSePF9o7pzcrCjSQ.png"></p>
<blockquote><p>Thank you so much for reading and if you have any questions or feedback, please comment below or reach out to me on <a href="https://www.linkedin.com/in/geunbaelee/">LinkedIn</a>. Also, follow me on <a href="https://dribbble.com/geunbae-lee">Dribbble</a> for my work.</p></blockquote>
<h4>This project was inspired <a href="https://www.amazon.com/Rapid-Contextual-Design-How-User-Centered/dp/0123540518">“Rapid Contextual Design”</a> which was written by <a href="https://twitter.com/kholtzblatt?lang=en">Karen Holtzblatt</a>. If you wish to know more about the idea behind this article, please read Chapter 8: Building an Affinity Diagram.</h4>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Fb3e808%3Fas_embed%3Dtrue&amp;dntp=1&amp;url=https%3A%2F%2Fupscri.be%2Fb3e808%2F&#038;image=https%3A%2F%2Fe.enpose.co%2F%3Fkey%3DdRXnS9Gplk%26w%3D700%26h%3D425%26url%3Dhttps%253A%252F%252Fupscri.be%252Fb3e808%252F%253Fenpose&amp;key=d04bfffea46d4aeda930ec88cc64b87c&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="400" frameborder="0"><a href="https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href">https://medium.com/media/96d08ab34921bdd17986cb5c0396842f/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=f832e081782d" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://uxplanet.org/free-sketch-template-for-building-a-meaningful-affinity-diagram-during-the-ux-process-f832e081782d">Free Sketch Template for building a meaningful “Affinity Diagram” during the UX Process</a> was originally published in <a href="https://uxplanet.org">UX Planet</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Free Sketch Template for building a meaningful “Affinity Diagram” during the UX Process

Free Sketch Template for building a meaningful “Affinity Diagram” during the UX Process

A step-by-step guide with some key concepts explained

Top Stories