The (simple &) strategic approach to web design

1,177 views
1,126 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,177
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The (simple &) strategic approach to web design

  1. 1. The Strategic Approach to Design Raheel Gauba 1
  2. 2. why? Raheel Gauba © 2010 Blackbaud
  3. 3. Raheel Gauba © 2010 Blackbaud
  4. 4. why? Raheel Gauba © 2010 Blackbaud
  5. 5. why? Raheel Gauba © 2010 Blackbaud
  6. 6. why? Raheel Gauba © 2010 Blackbaud
  7. 7. “ Charity websites are poor campaigning tools and often fail to use the most “ effective web - Precedent (Communications agency in UK) March 19, 2010 technologies ...found the sites often lacked basic information about the charity and appeared to have little overall strategy 3 Raheel Gauba © 2010 Blackbaud
  8. 8. 68% of U.S. online shoppers agree that they will distrust a site that doesn’t have a professional appearance Raheel Gauba © 2010 Blackbaud
  9. 9. 75% of web users admit making judgements about the credibility of an organization based on the design of its website Raheel Gauba © 2010 Blackbaud
  10. 10. it’s simple when users find information quickly and easily, they will return repeat users are extremely valuable, they are more likely to “convert” when users have a positive user experience, they will recommend your site to others Raheel Gauba © 2010 Blackbaud
  11. 11. really? that simple? Raheel Gauba © 2010 Blackbaud
  12. 12. really? that simple? Raheel Gauba © 2010 Blackbaud
  13. 13. really? that simple? Raheel Gauba © 2010 Blackbaud
  14. 14. really? that simple? Raheel Gauba © 2010 Blackbaud
  15. 15. really? that simple? Raheel Gauba © 2010 Blackbaud
  16. 16. yes. 1. Who is your target audience? (audience analysis) 2. What do you want them to do? (tasks) 3. How do they do it today? (usability testing) 4. What to change? (analysis) Raheel Gauba © 2010 Blackbaud
  17. 17. Who is your target audience? 1. Check your CRM 2. Interview staff members (at all levels) 3. Think about new categories of audiences 4. Prioritize! Raheel Gauba © 2010 Blackbaud
  18. 18. Audience Analysis 1. Supporters Donors (online, offline), team fundraisers, previous donors, members, email recipients, d.m. recipients, advocates of cure for AIDS, corporate donors, sponsors 2. Event Participants / Consumers Auction participants, event attendees, ticket buyers, email recipients, fans 3. Grantees Grant recipients, stakeholders within health related services, other organizations 4. Prospects Corporate, foundations, sponsors, researchers, broadway fans, celebrities, portfolio managers, AIDS researchers, past volunteers, members, email recipients, planned givers 5. Young Adults Actors, theatre/entertainment fans, social network participants Raheel Gauba © 2010 Blackbaud
  19. 19. What do you want them to do? 1. Be thorough... 2. Current activities + future desired activities 3. Prioritize! 4. Select top 5 Raheel Gauba © 2010 Blackbaud
  20. 20. Tasks 1. Supporters 1. Donate 2. Subscribe 3. How were the funds used? 4. Learn about sponsorships 5. Share 2. Event Participants / Consumers 1. What’s for sale? 2. Buy Tickets 3. Purchase items 4. Order cards 5. Learn about events/merchandise 3. Grantees 1. Ways to become a recipient 2. View other grantees 3. Apply online 4. Receive email 5. Feedback 4. Prospects 1. Learn about sponsorships 2. How funds have been used 3. Giving opportunities 4. Event info 5. Young Adults 1. Get involved via social networks 2. Become a team fundraiser 3. Ways to create awareness 4. Share Raheel Gauba © 2010 Blackbaud
  21. 21. Usability Testing 1. Invite individuals from target audience 2. Ask them to perform the tasks 3. Record clicks, actions, expressions, questions 4. Don’t help - ask questions instead! Raheel Gauba © 2010 Blackbaud
  22. 22. Clearleft presents Usability Testing Silverback plays a vital role in understanding how folks use Digg.com. While it’s not the only usability tool I use, it’s the one I am using most often. so says Mark Trammell of Digg.com | Next testimonial » Guerrilla usability testing software for designers and developers Capture screen activity Add chapter markers on-the-fly Video the tester’s face Control recording with the remote Record the tester’s voice Export to Quicktime 1. Invite individuals from target audience Features in 2.0 include 2. Ask them to perform the tasks Preview Batch Export 3. Record clicks, actions, expressions, questions Watch sessions within Save selected sessions, tasks, Silverback highlights or projects in one go Tasks & Highlights Performance 4. Don’t help - ask questions instead! Set tasks and mark noteworthy Faster export, better usability moments within a session Raheel Gauba © 2010 Blackbaud Silverback requires
  23. 23. Language: English Deutsch Français Products Downloads Support Community Company Purchase Usability Testing Overview Tour Library Media Free Trial Buy Now NEW VERSION 1. Invite individuals from target audience 2. Ask them to perform the tasks Record onscreen activity Edit into a professional screencast video Share it anywhere 3. Record clicks, actions, expressions,Windows Camtasia Studio screen recorder and editor for questions 4. Don’t help - ask questions instead! Overview Video Download 30-Day Trial How Customers Use Every day, thousands of people around the world use Camtasia Studio to Raheel Gauba © 2010 Blackbaud create videos that train, teach, sell, and more! It's the easiest way to Camtasia Studio
  24. 24. Usability Testing - example Raheel Gauba © 2010 Blackbaud
  25. 25. Usability Testing cont. 1. Create card sets containing top pages of site 2. Ask audience to organize information (most important to least + create groups) 3. Observe the flow, record final iterations 4. Don’t help - ask questions instead! 5. Ask audience to organize info as one group Raheel Gauba © 2010 Blackbaud
  26. 26. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  27. 27. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  28. 28. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  29. 29. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  30. 30. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  31. 31. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  32. 32. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  33. 33. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  34. 34. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  35. 35. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  36. 36. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  37. 37. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  38. 38. Usability Testing - card sorting example Raheel Gauba © 2010 Blackbaud
  39. 39. Analysis > What to change? 1. Look for trends 2. Tackle the quick and easy fixes first 3. Work on navigation > labels > layout > design 4. Repeat! Raheel Gauba © 2010 Blackbaud
  40. 40. Amazon.com added $2.5B to their revenue stream by adjusting the sort order of user comments. Raheel Gauba © 2010 Blackbaud
  41. 41. Microsoft’s Bing.com search engine increased their revenue by $80M just by adjusting the color of their hyperlinks Raheel Gauba © 2010 Blackbaud
  42. 42. American Heart Association enjoyed a 60% increase in donations after conducting a usability analysis and making adjustments to the homepage, updating the design and improved the sign-in process. Raheel Gauba © 2010 Blackbaud
  43. 43. questions? answers? 21 Raheel Gauba © 2010 Blackbaud
  44. 44. why, thank you! raheel gauba brand leader & creative director blackbaud email: raheel.gauba@blackbaud.com twitter: @raheelgauba facebook: Raheel Gauba

×