The sticky note seems to be the gunshot residue of user experience design—if you see a ton of sticky notes on a whiteboard, surely a UXer must be nearby toiling away, valiantly advocating for the user of whatever digital system someone is paying her to help build.
In some cases I’ve seen the wall of stickies left up on a wall for weeks (an impressive feat I can rarely accomplish myself without a lot of tape), and I’m left to think it’s simply bad graffiti on an otherwise clean wall. What did the stickies accomplish? What was acted upon as a result of so many people sitting around a table brainstorming ideas onto multicolored pieces of paper?
I’ve found affinity mapping to often be a more useful frame around a brainstorm session that may otherwise lack a defined outcome.
Dave Gray, Sunni Brown and James Macanufo’s excellent Gamestorming: A playbook for innovators, rule-breakers and changemakers, summarizes affinity mapping:
Most of us are familiar with brainstorming—a method by which a group generates as many ideas around a topic as possible in a limited amount of time. Brainstorming works to get a high quantity of information on the table. But it begs the follow-up question of how to gather meaning from all the data.
Using a simple Affinity Diagram technique can help us discover embedded patterns (and sometimes break old patterns) of thinking by sorting and clustering language-based information into relationships. It can also give us a sense of where most people’s thinking is focused.
Use an affinity diagram when you want to find categories and meta-categories within a cluster of ideas and when you want to see which ideas are most common within the group.
That sense of where most people’s thinking is focused is exactly what I needed to explore in the early stages of a project that could easily be derailed by misaligned expectations of breadth and depth of content.
The affinity mapping session wasn’t to simply achieve consensus among the different teams but to understand how people on the team imagined content and functionality. We weren’t going to use the exercise solely as the catalyst to design a half-baked taxonomy (“These are all about events! We need an Events tab!”) or to kill ideas that didn’t pop up as often as others.
So fellow designer Sofia Millares and me gave about 8 people consisting of a few stakeholders and an external agency’s team a stack of sticky notes with the general instruction to write down what types of content may appear on a new website.
After 10 minutes, we put the stickies on the wall and began organizing the shotgun blast of dozens of pink, green, blue and yellow squares into similar themes or buckets. Some ideas were far more represented than others, leading us to explore the merits of the less-mentioned topics, and how we could research these concepts to make sure they aligned with our audience expectations.
But it wasn’t until about a week later when Sofia and I returned to the scene of the crime that we thought we could start to shape the next phases of the project based on the affinity exercise.
Page Description Diagrams
I’ve been using Dan Brown’s page description diagrams during the early stages of the design process for several years now, and have had great success with them at many smaller clients, not to mention the Library of Congress, Merck, and lately at NASDAQ OMX.
Until now, I’ve used them to synthesize my own understanding of what content or functionality shall be higher priority than others before we start imagining a screen design. In many cases I’ve also refined the document to deliver to stakeholders and clients to make sure multiple parties are in alignment with what is more important than something else.
But with the sticky notes still on the wall, we could turn the results of the affinity map exercise into a collaborative page description exercise.
(above: the first stage of the affinity map; image blurred for confidentiality)
(above: affinity map’s sticky notes organized into similar themes; image blurred for confidentiality)
The setup was simple: I just cleared a different section of the whiteboard and drew a long 90 degree triangle and three columns labeled Primary, Secondary, and (wait for it) Tertiary.
(above: basic page description diagram skeleton)
Each of the 8 participants took a turn taking a sticky note and placing it in the column. The ground rules were simple: we were all assigning primacy to what a potential home screen could look like about 90% of the time—no outliers welcome at this stage of the game. After about 5 times around, we had about 40 themes in the page description frame (cue @brownorama raising one eyebrow in pending doubtful scorn).
Next, each person could go around and move something from Primary to Secondary, or Tertiary to Primary, provided that person explained why such a move mattered. As in the affinity exercise, Sofia and I were keeping our eyes and ears peeled for what we will need to research with the intended audience.
So now we had about 40 stickies the group was comfortably aligned around. At rough count, there was probably 10-15 stickies in the Primary column, about 10 or so in the Secondary, and the rest in the Tertiary.
Now it was time to make like Peyton Manning’s butcher and cut that meat.
I then moved the stickies down a couple inches and drew 2 boxes in the Primary column, 3 boxes in the Secondary, and 4 boxes in the Tertiary column. The group now had to prioritize what content themes could go in each individual box, effectively tasking the group to whittle the board from 40 to 9.
Much like in when facilitating UX Show and Tell, I tried to continually ask Why, or And?, and similar questions to trigger deeper examination into the decisionmaking, while complying with the 90%/no outliers ground rule and not just arguing on behalf of the devil’s advocate.
But stopping there would have left us with an incomplete opportunity to really discover what could appear on this imaginary screen relative to each other. After all, even if we’re designing for 90% of the time, content is still interchangeable and malleable in today’s Web.
So to accommodate such flexibility, we drew 1 addititional Primary box, 2 additional boxes in Secondary and 2 in Tertiary, each directly under another box with a sticky note already in it. Now the participants could add one more sticky note representing content or a theme to display instead of the theme directly above it.
As a result, we’re still maintaining constraints while looking for relationships between what makes sense as either/or content. Similarly, we opened up the ability to promote or demote a tertiary piece of content to secondary depending on the content itself, furthering the discussion among the participants.
So where does this leave us? The next steps almost write themselves: we have a lot of issues to explore through more user research (is what the participants thought was low priority really low priority?), and Sofia now has more guidance when opening her sketchbook to begin to think about how to represent those types of content and in what hierarchy, instead of diving into wireframing or prototyping based on the affinity map alone.
But the discussions between stakeholder and the agency were almost as valuable as what appeared on the wall. Getting people to talk about what should be more important than something else is a far more useful discussion at this early stage than pointing at a wireframe and saying one column should be wider than the other.
While not likely useful for every project, this exercise was valuable for us to generate a prioritization discussion framed by constraints without getting dragged down into premature design recommendations.