Dickson Fong

This is the third in a three-part series about using research to design more effective web interfaces. Today, in Part 3, I’ll show you how to consolidate your data.

So you’ve completed your interviews and have a bunch of notes and data. Depending on the amount of data collected, you might feel overwhelmed. Data consolidation can be a nightmare without an organized approach.

Don’t worry. I’ll show you how to tame the madness.

Affinity diagrams 

Affinity diagrams are one of the most powerful tools for data consolidation. A collaborative exercise that allows us to build upon other people’s interpretations, they are used to find relationships between large amounts of data by structuring the information into logical groups. By doing so, common themes and connections are revealed. This allows us to analyze users’ workflows and pinpoint the areas that require our attention.

Organize and discuss your notes

First of all, organize your handwritten notes. It’s important to do this within 24 hours of the interview when it’s still fresh in your mind. Chances are you weren’t able to capture all the information that you wanted to during the interview, so this gives you a chance to fill in the gaps. Additionally, if other people conducted interviews, all of you should share and discuss your findings. This keeps everyone well informed and on equal ground.

Click the image below to download my sample interview notes of two fictitious informants using a fictitious online store.

The details in these notes are completely contrived, but I tried my best to keep it as simple as possible while keeping it (marginally) realistic.

Capture key information

You now need to isolate key information from your notes. First, you need to figure out what is important. This usually includes your informants’ goals, the problems they encountered, and some—but not all—of their actions. This helps prevent information overload because not all the data you obtained is crucial to your design. 

However, it’s always better to err on the side of capturing too much information than too little. The goal is to capture anything that you think is essential to explaining the users’ goals, tasks, and problems, while refraining from transferring too many details.

I personally like to identify key information directly on my notes, either by drawing boxes, underlining text, or using a highlighter. For the sake of this example, I’ve highlighted key information in red text. You can download the highlighted version of the interview notes below.

From this, you can transfer the key information onto individual sticky notes, called affinity notes. Any color will do as long as all the notes captured at this stage in the diagramming process are the same color. In the example provided, I used yellow.

You will notice that I didn’t transfer each highlighted phrase to the sticky notes word-for-word. Rather, I paraphrased as necessary. For example, instead of writing “wants to find Coffee Maker 2000” on the sticky, I wrote “wants to find particular product”. The store (hypothetically) sells a bunch of other products, so I decided it would be more appropriate to generalize this data point. With real life data, you’ll have to exercise your own judgement regarding the precision and accuracy of your affinity notes.

Throw it on the wall

This is where the fun part begins.

Put all the sticky notes on a large surface. Large white boards or walls are ideal if there’s no threat of having your workspace interrupted or tampered with. If there’s a chance that you’ll have to relocate or pack up your work, I suggest that you mount a sheet of butcher paper to the surface first and stick the notes to the paper. This allows you to quickly take it down and roll it up.

Click the image below to download the affinity notes in all their lookalike-sticky-note glory.

For those of you with OmniGraffle installed on your computer, you may also download the .graffle file of the affinity notes and try rearranging them yourself (sorry, no love for Visio users). You may also print the printer-friendly version below, cut out the individual notes, and rearrange them by hand.

Begin spatially organizing the notes by similarity and connection. Related stickies will be clustered together, and you’ll eventually have multiple columns of yellow sticky notes—each column representing a single theme or connection. Everyone involved in this part of the process can freely interpret and organize the notes however they deem appropriate. 

Click the image below to download my intermediate interpretation.

This can be a bit frustrating since the note you just placed down might be immediately moved afterward by your partner if he/she interprets it differently. Think about why your partner did so. If you agree, then great—your partner discovered a relationship that you have previously missed. If you disagree, also great—it’s a relationship worth discussing. 

This is what makes affinity diagramming such a powerful process—people are free to interpret, build upon, and modify the body of information in a collaborative manner. The goal is to logically structure the information until a consensus is reached.

Click the image below to download my final grouping of the affinity notes.

Analyze affinities from the user’s perspective

Now that we have established multiple themes within our data, we need to label them in the context of our users. We’ll essentially be organizing the information using a bottom-up approach.

Using a second color of sticky notes, label each column/theme using first-person language (“I”, “my”, “myself”). This puts us in the mindset of empathizing with our users. Also, because this second-order structure is all about the user, it’s more semantically correct.

Click the image below to download my labelled interpretation.

Analyze affinities from the system’s perspective

Now that we’ve identified the process in the context of our users, we need to understand how these labels involve the system (interface, website, product) that we’re designing.

Continuing the bottom-up approach, use a third color of sticky note to create a first-order structure that dictates the organization of all the information below it. Keep these labels short and concise—no more than two or three words. They should identify the goals of the system in the context of the user.

Click the image below to download my final interpretation. This is my completed affinity diagram.

What affinity diagrams tell us

The completed affinity diagram tells us several things about how our users interact with the Fake Kitchen Supply Store website:

• They want to find products.
• They want to find specific product information.
• They have difficulty finding store locations.
• They need directions to the nearest store.
• They need local store hour information.

With regards to the website redesign, this tells us that we need to focus on the presentation of: 

• Products
• Store information

Conclusion

The affinity diagram is more than just a tool for consolidating information. It also provides insight into themes and relationships that we can use to guide our designs. 

Hopefully, this series has provided you an informative glimpse into the power of effective user research. In Part 1, we discussed why user research in the preliminary stages of the project can help us design better web interfaces. Then, in Part 2, we talked about conducting ethnographic user research. The data we obtain from this research can be consolidated using the methods in Part 3.

In addition to affinity diagrams, there are numerous other tools and methods for data consolidation and analyzation. Regardless of what you do to understand your data, the final product is most affected by your ability to adapt your findings to the design. This is something that no research wizardry can compensate for, and I encourage you to look beyond the tools in the quest to create the perfect designs. However, gaining a better understanding of your users makes for an excellent starting point.

Thanks for participating in this series. If you have any questions or comments, please let me know! 

End

RSS comments for this post Previous post Next post Permalink