You’ve met with your stakeholders, created personas, and developed some user stories, but you still find yourself having a difficult time starting the process of sketching layouts for your web project. Sound familiar?
It can be quite challenging making that last step from goals to content in a way that addresses your stakeholders’ needs well. You can build a Page Description Diagram (PDD) independently to help you determine the priority of each component on a web page, but you are still potentially missing some valuable information: input from stakeholders.
In our efforts to improve the requirements gathering process, we’ve had considerable success involving stakeholders by using what we call a Page Description Workshop (PDW).
A PDD, A Brainstorming Session, And An Affinity Diagram Walk Into A Bar …
Affinity diagramming (Beyer & Holtzblatt, Contextual Design: Defining Customer-Centered Systems) is a broad technique where participants take a set of items and physically group them based on similarity (often using sticky notes). It is commonly used to make sense of user research data, but it turns out that the technique also works very well when building a PDD. Add the active, open exchange of ideas provided by a brainstorming session and what you end up with is a workshop method for creating a PDD with your stakeholders, instead of just for them.
A Page Description Workshop (PDW) uses affinity diagramming because it is an effective and efficient way to build a PDD. But instead of creating the PDD in isolation and then sending it back and forth to multiple stakeholders for feedback, a PDW allows you to identify all of the components needed on a page in less than two hours (your mileage may vary).
Unlike conducting user interviews to gather requirements, hosting a PDW relies less on the UX professional’s specific expertise with the method due to its open-ended nature. Using interviews requires that the interviewer craft an effective framework of questions beforehand and guide the discussion appropriately during the interview to get the right information.
Even when the interview is done well, the information gathered is typically knowledge-based and abstracted from the actual design requirements of the page, whereas a PDW operates entirely within the domain of the page’s content. A Page Description Workshop allows stakeholders to communicate their needs and goals organically, in terms of solutions. It is still helpful to have a UX professional who is an experienced facilitator guide the session, but the process is less dependent on that guidance.
Steps for a Page Description Workshop
1. Organize a multi-disciplinary group of stakeholders.
To have a successful PDW, you need to have the right people in the room. The group should be between three and 10 people, and you should have at least one person from each key stakeholder group. For example, if you work in a web agency, you may choose to have two to four of your clients, the Web designer, a marketing specialist, and a project manager.
2. Prepare the room.
Hopefully you have a box of brainstorming supplies! If not, we highly recommend building one with plenty of sticky notes, index cards, pens, markers, and paper. We also recommend purchasing some easel-size sticky pads if you don’t have ready access to a lot of whiteboard space.
To prepare a room for a PDW, you should first set up a stack of sticky notes and a pen for each participant. Reserve one color of sticky note to represent questions and conditions for later. A distinctive color like red or pink is a good option. Then, create three priority columns, either on the whiteboard or using three sheets of easel paper stuck to the wall. Make sure each column has plenty of room for adding, moving, and grouping notes. The sheets will be labeled “high”, “medium”, and “low” to resemble PDD priorities. Draw a line to reserve space at the bottom of each column and label it “park.” This space is for ideas that might go in that column, but have been cut or need some additional info or consideration to determine whether they should be included or not.
3. Have the facilitator and participants introduce themselves.
Hopefully everyone in the room recognizes one another from prior meetings, but we recommend doing a quick refresher just in case. In the “Brainstorming” chapter of User Experience Re-Mastered, Chauncey Wilson recommends allowing for a minute or less per person. To warm up, consider an activity like having a participant talk briefly about his or her favorite hobby.
4. Explain user experience, the workshop, and your personas.
Since the PDW is a user experience-oriented activity, it may be helpful to explain the goals of the workshop and how they relate to providing an optimal web experience for users. When explaining the workshop, make sure to emphasize that you will focus on one page only, not the entire website. Also, explain each of the priority levels, noting that priority is determined based on how effective a web page component is at meeting user needs, not how likely it is to appear or where it should be placed. This can be counterintuitive, as identity messaging and calls-to-action will often be higher priority than the company logo, for example.
Finally, it’s important to emphasize who you are designing for. Going into the workshop you should post a set of three to five personas—or at least some user profiles—where everyone can see them. Each persona or user profile should have demographics, a set of needs, and potential solutions. These needs and solutions should be used to brainstorm web page components.
5. Free-list web page components for five to 10 minutes.
This is the fun part: have all the participants in the room (including yourself) write down all of the components they envision on the web page. The activity is called “free-listing” because each participant is brainstorming independently without any internal or external criticism.
6. Arrange all of the free-listed components on an affinity diagram.
After participants have completed the free-listing exercise, they should put all of their stickies on one of the three priority sheets (high, medium, or low). Encourage participants to group (i.e. affinitize) similar components (this should put less stress on the facilitator and result in a more productive workshop because the next step will be easier).
There is a certain amount of group brainstorming at this point, as participants can also add new components to the priority sheets if they have more ideas while plotting sticky notes.
7. Walk through the components from high to low.
Once everyone is done plotting his or her sticky notes, the facilitator should then lead a group walkthrough. The facilitator should start with the high priority sheet just in case there is any concern over participants leaving or running out of time later.
While the group talks together about each set of sticky notes on each sheet, there may be new ideas or questions about components. Capture all ideas and questions with sticky notes and plot them near the components they relate to. For questions or conditions that need to be resolved later, use the colored notes that were set aside earlier.
If a component is unclear, deferred, or determined to be unnecessary, move its sticky note to the “park” section at the bottom of its sheet.
8. Take pictures and transcribe the results (if time allows).
When you are all done, make sure to take pictures of all of the priority sheets. If you want to save the priority sheets, tape up the sticky notes so that they do not fall off. If you have time to do so, you can work from the pictures to build a PDD in your wireframing tool of choice. Transcribing the priority sheets is not necessary, but it is a better way to share the results of the workshop with others because it will be easier to read and digest.
Our Experience
We’ve found that in a web agency, it’s generally beneficial to involve team members from different specialties as well as our clients when creating a PDD. Page Description Workshops have consistently been productive meetings where all attendees feel like the project is making progress and taking the right steps forward.
After the PDW, user experience designers have more ammo to start sketching and brainstorming designs. It’s a lot easier to start sketching when there is more guidance concerning page components and fewer unknowns. Similarly, the visual designer, marketing specialist, and other team members have more information to accomplish their goals.
Potential Challenges
These workshops are more effective and efficient when they are performed in-person. If you must work remotely, we suggest trying an online collaboration tool like Trello paired with a conference call line.
Another challenge with PDWs is that they rely on a good facilitator to guard the meeting’s effectiveness and efficiency. Sometimes the group will get itself back on track naturally, but ultimately this is the facilitator’s responsibility. The facilitator should watch out for non-productive conversation and make sure that the priority sheets have a realistic number of components.
It should also be noted that good ideas may surface after the meeting. This means that the PDD created from the workshop should be maintained if there is a window between design and development. Ideally, each new idea should be vetted with the entire workshop team but, realistically, the changes may have to be emailed out. In a lean or agile environment, new ideas may have to be incorporated into a website or page that has already been developed.
Conclusion
In a web agency environment, using Page Description Workshops to create Page Description Diagrams is a useful method for improving communication and contribution between UX, clients, and other internal team members. While we have hypothesized some potential difficulties that may arise with the method, we view PDWs as an essential item in our UX toolkit.
Image of guy holding marker courtesy Shutterstock.
