At EdUI 2009 we looked at 5 proven techniques you can take home to your institution and use to get participation and yes, "buy-in," during the web design process:
1. KJ sessions for getting the best ideas from a group of people - and getting them to agree!
2. Nav Bar Survivor - a great trick for solving the "What should be in the top nav?" argument
3. Posterframes - Poster sessions for fleshing out landing pages
4. Mood Boards - Get input from your team on the emotion and tone of your website.
5. Design Consequences game for generating alternative designs quickly
These are all techniques we've learned or developed to help a large group of people from various parts of an institution work together to develop their site architecture in a short period of time. And not fight about it later.
We did the KJ session hands-on during the workshop.
4. A couple of things before we start
Copies of the slides will be sent out after the workshop in
PDF format and posted to SlideShare.net
5. A couple of things before we start
Copies of the slides will be sent out after the workshop in
PDF format and posted to SlideShare.net
Ask questions anytime.
6. A couple of things before we start
Copies of the slides will be sent out after the workshop in
PDF format and posted to SlideShare.net
Ask questions anytime.
Please silence your cell phone.
7. A couple of things before we start
Copies of the slides will be sent out after the workshop in
PDF format and posted to SlideShare.net
Ask questions anytime.
Please silence your cell phone.
If you’re tweeting we’re @davidpoteet and @misb
9. 5 Techniques for Collaboration
1. KJ Sessions
2. Nav Bar Survivor
3. Posterframes
4. Mood Boards
5. Design Consequences
10. Who should participate?
Core team
Need a leader who is accountable and has authority to
make decisions.
Key stakeholders
especially anyone who has the ability to derail the process
Representatives of key communities & audiences
Workgroups of 4-5
distribute core team members among these workgroups
4-7 for KJ sessions
11. KJ Method
Technique for gaining rapid
group consensus
Inventor Jiro Kawakita
Can be used for strategic
planning, problem solving,
brainstorming and yes,
information architecture
13. Choose a site
Your careers site (for people looking for positions at your
institution)
Your faculty & staff site (for people who work at your
institution)
14. KJ - Step 1
Make a list of your key audiences (together)
15. KJ - Step 2
Answer individually on your sticky notes with a marker:
What would someone come to your web site to FIND or
DO?
FIND – looking for certain information, answering a
question
DO – accomplish some task, use some sort of application
16. KJ - Step 3
Put all your sticky notes on the wall.
Without talking, read each others notes.
When you see two things that go together, move them next
to each other.
If they say EXACTLY THE SAME THING put them on top of
each other.
17. KJ - Step 4
Discuss the groups and name them.
Don’t worry about getting the names exactly right, you can
work on that later.
Look for any orphans – find a place for them or make them
a group of one.
18. KJ - Step 5
Use your dot stickers to vote on the notes or groups you
think are most important to your audiences.
You can put more than one dot on the same note.
A dot on an individual note counts as a vote for the whole
group too.
19. Using KJ for Information Architecture
Start by identifying and prioritizing your audiences.
Find participants from those audiences.
OR people who know their needs well and can role play.
Consider doing both and comparing the results.
20. KJ Method
1. Gather 4-7 people for ~1 hour
2. Start with focus question
3. Put opinions (or data) onto Sticky Notes
get the real sticky notes
one answer per note
use a fat-tipped marker
4. Put Sticky Notes on the wall
5. Group similar items (without talking)
6. Discuss & Name the groups
7. Vote on priorities
26. Bottom-Up Instead of Top-Down
Site Structure
Task
Question TaskQuestion Question
Task
Question Comment Comment
Goal Task Motivation
27. Bottom-Up Instead of Top-Down
Don’t start with the buckets at the top and fill them.
Site Structure
Task
Question TaskQuestion Question
Task
Question Comment Comment
Goal Task Motivation
28. Bottom-Up Instead of Top-Down
Don’t start with the buckets at the top and fill them.
Start with one bucket of all the tasks, questions and
motivations of your audiences.
Site Structure
Task
Question TaskQuestion Question
Task
Question Comment Comment
Goal Task Motivation
29. Bottom-Up Instead of Top-Down
Don’t start with the buckets at the top and fill them.
Start with one bucket of all the tasks, questions and
motivations of your audiences.
See what patterns emerge.
Site Structure
Task
Question TaskQuestion Question
Task
Question Comment Comment
Goal Task Motivation
31. Nav Bar Survivor
1. Imagine you’ve already
clicked deeper into the site
from the home page.
32. Nav Bar Survivor
1. Imagine you’ve already
clicked deeper into the site
from the home page.
2. Nominate links that should
always be available no
matter where you are on the
site. Put them on stickies on
the wall.
33. Nav Bar Survivor
1. Imagine you’ve already
clicked deeper into the site
from the home page.
2. Nominate links that should
always be available no
matter where you are on the
site. Put them on stickies on
the wall.
3. Consolidate any that are
closely related.
34. Nav Bar Survivor
1. Imagine you’ve already
clicked deeper into the site
from the home page.
2. Nominate links that should
always be available no
matter where you are on the
site. Put them on stickies on
the wall.
3. Consolidate any that are
closely related.
4. Everyone votes on their top
5.
35. Nav Bar Survivor
1. Imagine you’ve already
clicked deeper into the site
from the home page.
2. Nominate links that should
always be available no
matter where you are on the
site. Put them on stickies on
the wall.
3. Consolidate any that are
closely related.
4. Everyone votes on their top
5.
5. Top 7 are your main
navigation, plus “Home”
39. Posterframes
1. Place posters on the walls
representing your main
landing pages.
2. Work from KJ session or
other data to place essential
content and navigation onto
each poster.
40. Posterframes
1. Place posters on the walls
representing your main
landing pages.
2. Work from KJ session or
other data to place essential
content and navigation onto
each poster.
3. Experiment with different
groupings and
arrangements.
49. Mood Boards
Gather magazines, your own
publications, print out
websites – anything.
50. Mood Boards
Gather magazines, your own
publications, print out
websites – anything.
Teams of 4-5 make collage
posters representing ideas,
messages and qualities of
the brand that they want the
site to express.
51. Mood Boards
Gather magazines, your own
publications, print out
websites – anything.
Teams of 4-5 make collage
posters representing ideas,
messages and qualities of
the brand that they want the
site to express.
Might start with 3 adjectives
on the board.
52. Mood Boards
Gather magazines, your own
publications, print out
websites – anything.
Teams of 4-5 make collage
posters representing ideas,
messages and qualities of
the brand that they want the
site to express.
Might start with 3 adjectives
on the board.
Teams present their Mood
Boards to the group
60. Design Consequences
1. Take 7 minutes to sketch
out a screen.
2. After 7 minutes, pass your
screen to the person on your
left.
61. Design Consequences
1. Take 7 minutes to sketch
out a screen.
2. After 7 minutes, pass your
screen to the person on your
left.
3. Now pick something on that
screen and sketch the
screen you see after you
click.
65. Digital Paper
Prototyping
Same advantages of paper
prototype
Can be easier to prepare and
run a usability test
Easier for team to observe
66. Digital Paper Prototyping
1. Create wireframes in your favorite graphics program.
2. Project on the wall or share through a screen sharing
application.
3. User points to the wall or moves the mouse on the screen
and says “click.”
4. Person acting as computer changes the screen, passes
control back to the user.
67. Read more
KJ Sessions
http://www.newcityexperience.com/general/unlock-the-wisdom-of-
your-group-–-host-a-kj-session-for-site-architecture/
http://www.uie.com/articles/kj_technique/
Mood Boards
http://en.wikipedia.org/wiki/Mood_board
Design Consequences
http://www.disambiguity.com/design-consequences-a-fun-
workshop-technique-for-brainstorming-consensus-building/
Digital Paper Prototyping
http://www.newcityexperience.com/general/usability-testing-hack-
digital-paper-prototyping/
These are all techniques we have developed, learned and adapted over the years working in a higher ed setting. They’re born partly out of necessity, because we have to get input from a wide range of stakeholders during the process. But we’ve found they help us get - real work done rather than just meetings - deeper insights - clearer guidance - smoother process with less conflict and territorialism - faster and less expensive
In this example, content and links are taken from a set of “mental models” on the wall in the same room with the posters. This can also be done with data from a KJ session or other research like a Carewords Survey.
Pamela Agar at Imperial College London explains the elements of the Media landing page to the whole team. By going through this process, everyone on the team has a thorough understanding of how and why you arrived at the proposed architecture, and key stakeholders become advocates for the plan.
The earliest version of the Imperial College London home page wireframe
The Imperial College London homepage wireframe, now rendered in OmniGraffle.
The final Imperial College London home page design
Create your wireframes in your favorite graphics program (like OmniGraffle, Axure, Vizio, Illustrator). Project your screen on the wall or share it through a screen sharing application like Glance.