Web Design Without Politics at EdUI 2009
•
9 likes•966 views
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.
Recommended
More Related Content
What's hot
What's hot (16)
Similar to Web Design Without Politics at EdUI 2009
Similar to Web Design Without Politics at EdUI 2009 (20)
More from NewCity
Recently uploaded
Recently uploaded (20)
Web Design Without Politics at EdUI 2009
- 1. Web Design Without Politics
- 2. Goals for Today Learn tricks for getting the best input from stakeholders. Have fun. PHOTO BY ROB
- 3. A couple of things before we start
- 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
- 12. Let’s Try It
- 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
- 21. Finding holes
- 22. Finding holes
- 23. VT FINANCIAL AID KJ EXAMPLE
- 24. VT FINANCIAL AID KJ EXAMPLE
- 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
- 30. Nav Bar Survivor
- 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”
- 36. NAV BAR SURVIVOR
- 37. Posterframes
- 38. Posterframes 1. Place posters on the walls representing your main landing pages.
- 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.
- 41. imperial college london – collaborative wireframing
- 42. imperial college london – collaborative wireframing
- 43. imperial college london – collaborative wireframing
- 46. IMPERIAL COLLEGE HOME PAGE WIREFRAME
- 47. IMPERIAL COLLEGE LONDON – FINAL DESIGN
- 48. Mood Boards
- 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
- 53. MOODBOARDS AT TUFTS ALUMNI
- 54. MOODBOARDS AT TUFTS ALUMNI
- 55. MOODBOARDS AT TUFTS ALUMNI
- 57. Design Consequences 1. Take 7 minutes to sketch out the home page screen from your KJ session.
- 59. Design Consequences 1. Take 7 minutes to sketch out a screen.
- 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.
- 63. Digital Paper Prototyping Same advantages of paper prototype
- 64. Digital Paper Prototyping Same advantages of paper prototype Can be easier to prepare and run a usability test
- 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/
- 68. Thanks!
- 69. Thanks! Please fill out your evaluation forms
- 70. Thanks! Please fill out your evaluation forms David Poteet
- 71. Thanks! Please fill out your evaluation forms David Poteet dpoteet@newcityexperience.com
- 72. Thanks! Please fill out your evaluation forms David Poteet dpoteet@newcityexperience.com Melissa Beaver
- 73. Thanks! Please fill out your evaluation forms David Poteet dpoteet@newcityexperience.com Melissa Beaver melissa@newcityexperience.com
Editor's Notes
- Intro - 5 minutes KJ intro - 5 minutes KJ session - 30 minutes Nav Bar Survivor, Poster frames, Mood boards - 10 minutes Design Consequences intro - 2 minutes Design Consequences - 20 minutes
- 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.