Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:7Length:1.1 hours
  • Overview
  • Transcript

2.3 Wireframing Workshop

In the final lesson of this course we look at the layout of key pages such as the homepage. Clients have many stakeholders, all with different views of what should appear on these pages. In this lesson we explore some exercises you can do with these stakeholders to establish a way forward. Along the way we will educate the clients about the need to prioritise their messaging.

Related Links

2.3 Wireframing Workshop

Hi folks, and welcome to this final lesson in our course on how to workshop your way through the web design process. In this lesson we turn our attention to how to do collaborative wireframing with stakeholders in a workshop setting. As I have said in many occasions on this course, one of the primary reasons to workshop with clients is to educate them about the web design process, and to ensure that the final design you show them won't come as a surprise. And there's no better way of doing that than exploring how some of the key pages on your website might look, and the way we do this is through a series of wireframing exercises. Now there are lots of ways you could explore wireframing a client's website. But in this video, I want to share with you my favorite three exercises. The first of which is probably the most effective, and the one that I try and carry out with pretty much all my clients. The idea of the exercise is to help the client prioritize their content and resolve some of the more contentious issues that may exist around key pages, pages such as the home page. The exercise begins with some of more of that competitive brainstorming that I seem to like. Split your stakeholders into a number of smaller groups, and encourage them to write down as many screen elements as they can think of that would be nice to appear on their homepage. The idea is to demonstrate just how many things you could put on a homepage, and how cluttered that would become. Once they've had a few minutes to think of as many things as they can, bring the groups back together and discover which groups have come up with the most ideas. Now, after awarding the winning group for coming up with the most ideas, compile a list of all of the elements that people have come up with on a flip chart or a whiteboard. Now point out the obvious fact that there are far too many elements to include on any single page. Explain to the users only have limited attention, and then it's necessary to prioritize what we want them to be looking at. Most people will appreciate this fact because they've used enough websites themselves to know how annoying it is to come across a really busy and cluttered page. But if you need to prove the point, there's some excellent research out there you can turn to, some great articles such as this one on the BBC. For the sake of this exercise we're gonna convert user attention into user attention points. Give the groups between 15 to 20 user attention points, depending on the complexity of the organization's offering. Explain that every element that they want to add to a page is gonna cost at least one point of user attention. If they wish users to pay more attention to one screen element over another, then they have to give it more user attention points. So, for example, if they wanted people to look at the news section over site search, they need to assign news with more user attention points. Give the group a few minutes to work out how they wish to spend their user attention points. And almost without fail, you'll find that they spread those points extremely thinly to allow them to add as many screen elements as they possibly can. Now at this point, I normally show them the Yahoo and Google homepages. I then ask the group which they think is the most effective, and without exception, everyone always says the Google homepage. I explain that Google have spent the vast majority of their user attention points on that search box, while Yahoo hosts spread their points around very thinly. I point out that they have essentially built the Yahoo homepage. Now this proves a light bulb moment for many participants. So I then encourage them to repeat the exercise they've just done, but this time to make some hard decisions about what's in and what's out, so that they can spend their points more wisely. This exercise not only educates the client about user attention and prioritization, it also gives you a prioritized list of screen elements that you can use to build your homepage around. Because this is agreed by all of the stakeholders, it's gonna save you a lot of time further down the line, and a lot of those revisions you have to do. You may be concerned that getting stakeholders to define specific screen elements may prove too restrictive when it comes to designing the page. And if that's the case, then there's an alternative exercise that achieves similar things, but is less focused on a particular page of your website. Instead of designing the homepage, the group is asked to design a book jacket. If you think for a moment about a book jacket, it has a clear hierarchy to it. The front cover is the most valuable real estate, followed by the back, then there's the spine, and finally, an inside flap. You can use this hierarchy to get your stakeholders thinking about the priorities of their homepage, without actually getting into detail. This exercise tends to work best if you split the stakeholders down into smaller groups and ask each group to sketch out a book jacket. Ask them to design a book jacket that represents their organization, deciding what content should appear on the cover, the back, the spine, and the inside flap. While doing this exercise, they'll start to prioritize and decide on their key content and messages. Yet this still leaves you with the flexibility when it comes to designing the webpage itself because they haven't been working on a website. The final exercise I wish to mention in this lesson encourages stakeholders to actually start sketching out real pages. Known as the Six Up Exercise, it helps clients understand that there are many different approaches that you could take to the same page, and that no approach is right or wrong. It also helps you to define what kind of homepage it is that the client is actually after. Do they want something that's very news heavy, or are they so focused on getting users to complete cause to action that that has to come first? Give each stakeholder a longer sheet of paper divided into six sections, and ask them to sketch out one version of the homepage in each of those six boxes, a different version in each box. You'll find that people find it easy to come up with one or two ideas, but beyond that they're gonna start to struggle. And at this point, make some suggestions of different approaches that they could take. For example, suggest they try designing homepages for different target audiences and see how that comes out, or with an emphasis on different products or services. Maybe suggest they try producing one or two ideas around different kinds of websites. For example, what if the homepage focused on selling products, or what if it put the emphasis on latest news? Once everyone has completed their six boxes, get the group back together and discuss the results. Look for common themes and see if you can reach a consensus as a group about the right direction to go. One underlying theme from all of these exercises, it helps a stakeholder prioritize their messages and their key content. And that's really the key lesson I want to leave you with in this final video. Getting the client to understand the importance to prioritization and guiding them through that process is a skill that you really need to develop. Fortunately, workshops are an excellent way of educating the client and focusing them on what is really important. But more than that, it provides some invaluable information that can inform your design direction, and help justify that direction when you present it to clients. That's why I would encourage you to give workshops a go and incorporate them into your design processes. I promise you that it's worth the time, and that you'll find the clients are much better informed, and the approval process is a lot easier. So that's really it for this course. Thank you for joining me, and hopefully you've learned something useful. Now all you need to do is go away and arrange a workshop. Good luck with that, and thanks for watching.

Back to the top