Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ux for nonprofits_5-19-11

1,608 views

Published on

User Experience for Non-Profits

Published in: Design, Technology
  • Be the first to comment

Ux for nonprofits_5-19-11

  1. 2. What is User Experience? A Presentation by Richard Smallbone and Karen Maxwell May 19, 2011
  2. 3. Who we are <ul><li>Richard Smallbone </li></ul>Karen Maxwell
  3. 4. Objectives <ul><li>A good understanding of a successful User Experience </li></ul><ul><li>How to develop a persona </li></ul><ul><li>Examples </li></ul><ul><li>How this applies to you </li></ul><ul><li>Tools to help you </li></ul>
  4. 5. What is User Experience? <ul><li>UX Design is how it works </li></ul>
  5. 6. What is User Experience? Good UX design is problem solving
  6. 7. What is User Experience? <ul><li>Great design is where beauty , functionality , and ease-of-use all come together. </li></ul>
  7. 8. What is User Experience? <ul><li>Who are your users, and how do you ensure you're reaching them with content that's relevant to their needs and interests? </li></ul>technology business objectives users
  8. 9. What we do
  9. 10. User Experience Specialists design across multiple channels <ul><li>Skillset includes: </li></ul><ul><li>Digital Strategy </li></ul><ul><li>Visioning Consultation & Workshops </li></ul><ul><li>Persona Development </li></ul><ul><li>Social Media Consultation & Workshops </li></ul>Web Kiosk Mobile Requirements Gathering Information Architecture Visual/Interactive Design Development Accessibility Testing Maintenance <ul><li>Usability and Accessibility Testing </li></ul><ul><li>Information Architecture </li></ul><ul><li>Visual and Interaction Design </li></ul><ul><li>Front-end Development </li></ul>
  10. 11. How we do it
  11. 12. <ul><li>IBMi’s five-stage process builds comprehensive user knowledge and uses the results to build solutions that deliver on user needs and business objectives. </li></ul>IBM’s five-stage process Visual Design Interaction Design Usability Accessibility Information Architecture Functional Specs & Content Requirements User Needs & Site Objectives user research, stakeholder interviews, persona development, ethno/techno/psychographics detailed description of required site functionality to meet user needs develops the application flows to facilitate user tasks establishes a mental model for the user to interact with a system or application Brand alignment, page layout, page elements, text, imagery and navigational components
  12. 13. Why good User Experience is important <ul><li>Good design and usability is good for business </li></ul><ul><li>Addressing the user’s real goals mean lower percentage of site abandonment </li></ul><ul><li>Better UX means fewer customers move to the competition </li></ul><ul><li>The better the experience translates to more sales </li></ul><ul><li>A useable design is a key to building on-line trust with your audience </li></ul><ul><li>A good (user) experience correlates with a willingness to repurchase a product or service, a reluctance to switch and a likelihood to spread a positive word-of-mouth endorsement </li></ul>
  13. 14. Persona development
  14. 15. What is a Persona? <ul><li>A composite description of a real person who represents a primary customer segment. These descriptions contain detailed information on the motivations, goals, and preferences of a representative customer. </li></ul><ul><li>Why are personas valuable? They help to make informed, fast decisions. By creating a shared, vivid picture of target customers’ behaviors, project teams can better evaluate how to satisfy customer needs resulting in less scope creep from unwanted and unnecessary features, faster consensus across the team, and none of the pitfalls from self-referential design. </li></ul>
  15. 16. Understanding Your Audiences <ul><li>To successfully create engagement and cut through the noise, you have to have a deep understanding of your target audience </li></ul><ul><li>who they are </li></ul><ul><li>what they want/need/expect </li></ul><ul><li>unique characteristics about them </li></ul><ul><li>needs and scenarios about how they will interact with the site or application </li></ul><ul><li>features on the site that address this </li></ul>
  16. 17. Name: John Adams What is your admin fee: How much of my $$ go to charity Role: Traditional Donor <ul><li>Wary of sharing personal matters over social sites </li></ul><ul><li>Blackberry for work and computer at work/home. Follows industry websites through Google Reader </li></ul><ul><li>Values his reputation at work and perception of his community involvement </li></ul><ul><li>Gives to other causes outside of work </li></ul><ul><li>Quick info </li></ul><ul><li>Recognition </li></ul><ul><li>Location: Toronto, Ontario </li></ul><ul><li>Age : 52 </li></ul><ul><li>VP, Corporate Finance </li></ul><ul><li>Create interest for John to join Non-profit Xs Facebook page </li></ul><ul><li>Communicate the value of becoming involved with “Non-profit X” </li></ul>what would their message to us be? Organization’s Key goals Characteristics Wants/needs
  17. 18. Persona development - exercise
  18. 19. Examples
  19. 20. Very clear communications for specific target audiences News and blog updated with timely, relevant information Easy-to-find donation link
  20. 21. Easy-to-find donation link (could be higher in the page) Very clear communications for specific target audiences Regional information
  21. 22. Quicklinks to sub-sites Animated slideshow with messages directed at specific audiences Navigation organized by audience type
  22. 23. How this applies to you <ul><li>Make the focus of your organization clear to your audience </li></ul><ul><li>Make it easy to donate/volunteer </li></ul><ul><li>Provide targeted information for different audiences (based on role/region etc.) </li></ul><ul><li>Make it easy for the to get information from you </li></ul><ul><li>If you have the resources to keep it up-to-date (VERY IMPORTANT) maintain a news section/blog </li></ul>
  23. 24. Tools
  24. 25. Wordpress <ul><li>Plugins for: </li></ul><ul><li>Surveys </li></ul><ul><li>Polls </li></ul><ul><li>Slideshows </li></ul><ul><li>Galleries </li></ul><ul><li>Social Networking (add to Facebook, Twitter etc.) </li></ul><ul><li>Traffic Stats </li></ul><ul><li>Contact Forms </li></ul><ul><li>Calendars </li></ul><ul><li>Initially started as a blogging platform, Wordpress is now a capable tool for building fully-featured websites </li></ul><ul><li>Wordpress.org will host your website for free, or you can install the Wordpress on your own server. </li></ul>
  25. 26. <ul><li>Design based on an existing template with minor modifications: </li></ul><ul><li>Custom header graphic </li></ul><ul><li>Minor CSS changes </li></ul><ul><li>Widgets </li></ul><ul><li>An RSS feed allows students, teachers and parents to receive updates in their RSS readers </li></ul><ul><li>The calendar is updated by office staff through an easy-to-use interface </li></ul>
  26. 27. Flickr/Creative Commons <ul><li>Flickr is a photo-sharing website with millions of users worldwide. </li></ul><ul><li>Creative Commons licensing allows Flickr users to make their photographs available, without cost, usually with the requirement that they are credited for the photograph. </li></ul><ul><li>Be aware that model releases may be required in cases where a person’s face is clear and identifiable. </li></ul>
  27. 28. Photo by ageing accozzaglia Photo by Ronald Wong Photo by Allan Chow
  28. 29. Photo by Rosie O'Beirne
  29. 30. Photo by John Gevers Photo by Charles Pieters
  30. 31. iStockphoto.com <ul><li>Low-cost stock photography. Usually $5-$10/image for web use, $20+ for print use. </li></ul><ul><li>Also includes Video, Audio, Illustration, and Flash Animation. </li></ul><ul><li>All iStockphoto photographs with clear and identifiable faces are model-released, meaning that you are free to use them without concern. </li></ul>
  31. 33. Keep it simple. Make it easy. Focus on user needs. Use available tools.
  32. 34. Questions? <ul><li>Thank you </li></ul>
  33. 35. Helpful Links A List Apart Smashing Magazine Ideas on Ideas Mashable Flickr iStockphoto Persona creation http://www.alistapart.com/ http://www.smashingmagazine.com http://www.ideasonideas.com/ http://mashable.com http:// www.flickr.com/creativecommons / http:// www.istockphoto.com / http:// www.deyalexander.com.au/resources/uxd/personas.html

×