際際滷

際際滷Share a Scribd company logo

Bag of Tricks

Download as PPTX, PDF
G
guidecreative

This document outlines an interactive workshop on best practices for nonprofit websites. The workshop will teach attendees how to analyze websites and identify opportunities for improvement. It will cover 10 best practices for effective nonprofit websites: resonating with audiences, having a focused homepage, sharing your mission clearly, using compelling imagery, ensuring easy navigation, including clear calls to action, showcasing stewardship, keeping content fresh, being social, and providing a personal touch through multimedia. Attendees will learn about each practice, discuss examples, and assess their own websites to identify areas for improvement.

1 of 44
Download to read offline
Interactive Workshop: A Bag Of Tricks for Your Nonprofit Website PRESENTED BY: KELLEY JARRETT, MARKET MANAGER GUIDE CREATIVE (@KELJAR) JONO YOUNG, DESIGN PRINCIPAL INTERACTIVE (@CHSWEB) 10/26/2012 1
HASHTAG THIS SESSION #BBDESIGN FOLLOW US @KELJAR @CHSWEB 10/26/2012 2
WELCOME! Meet Jono Meet Kelley Meet Our Esteemed Facilitators/Panel Who do we have out there with us today? What Goes Into a Successful Website? Name one mistake youve seen an organization make on their website? 10/26/2012 3
WERE HERE TODAY TO Review key elements that make nonprofit websites more effective Learn how to analyze a website and recognize these elements Be able to identify opportunities for improvement Empower you to assess your own site and make changes Your Website is an EVOLUTION 10/26/2012 4
HERES THE PLAN Learn Discuss Assess Present Ask 10/26/2012 5
LEARN: TEN BEST PRACTICES 10/26/2012 6
TEN BEST PRACTICES 1. Resonate with Your Audiences 2. Have a Focused Homepage 3. Share Your Mission 4. Use Compelling Imagery 5. Ensure Ease in Navigation 6. Include Clear, Bold Calls to Action 7. Showcase Your Stewardship 8. Keep Your Content Fresh 9. Be Social 10. Provide a Personal Touch Through Multimedia 10/26/2012 7
RESONATE WITH YOUR AUDIENCE Your website does not exist as a boutique just to show off information about your organization. Instead, its actually a tool to mobilize your audience... - Raheel Gauba Design for Good: 4 (More) Nonprofit Design Principles Netwits Think Tank, 10 10/26/2012 8
RESONATE WITH YOUR AUDIENCES Focus on your audience needs - Who are your audience groups and who is most important? - What do they care about need, goals and aspirations? - How do they interact with you on and off your website? 10/26/2012 9
RESONATE WITH YOUR AUDIENCES Speak the right language - Choose a key message and use it consistently - Listen for feedback on whats working and whats not through social media, blogs and surveys - Avoid jargon, too little or too much content - Test! 10/26/2012 10
RESONATE WITH YOUR AUDIENCES Meet users where they are - In less than three years mobile will be the #1 way your audience will access your website Are you ready? 10/26/2012 11
HAVE A FOCUSED HOMEPAGE The Web is a world of first impressions, and quick ones at that. Users form an opinion of a website within the first few seconds of loading it. - Jason Gross The Role of Design in The Kingdome of Content, www.smashingmagazine.com 10/26/2012 12
HAVE A FOCUSED HOMEPAGE Prioritize Content - Wireframes are key for visual hierarchy - Remember YOUR goals - Remember your AUDIENCES goals 10/26/2012 13
HAVE A FOCUSED HOMEPAGE Pass the 3-second test - Is your homepage scannable, understandable, intuitive in 3 seconds? 10/26/2012 14
SHARE YOUR MISSION Design your website around your non- profits actions and purpose. Make the mission statement clear as day. - Blake McCreary Non-Profit Web Design. 10/26/2012 15
SHARE YOUR MISSION Show your story visually - Every image, every link, every element should tell your missions story. 10/26/2012 16
SHARE YOUR MISSION Tell your story clearly & succinctly and make it actionable - Visual interpretation can mean many things infographics, typography, links, video, imagery, photography 10/26/2012 17
USE COMPELLING AND ENGAGING IMAGERY Regardless of what your content actually says, the design around it controls what the users see first and how their eyes move across the sections of the page. - Jason Gross The Role of Design in The Kingdome of Content, www.smashingmagazine.com 10/26/2012 18
USE COMPELLING AND ENGAGEMENT IMAGRY Engage with eye contact Make a personal connection - Connect, speak and engage with a personal connection - Eye contact makes it feel as real as it is 10/26/2012 19
USE COMPELLING IMAGERY Show real stories of impact to gain credibility 10/26/2012 20
USE COMPELLING IMAGERY Match Imagery with your brand, mood and voice - Does quality, composition and candor of your imagery jive with your user experience? 10/26/2012 21
ENSURE EASE IN NAVIGATION User-centric design has become a standard approach for successful and web design. After all, if users cant use a feature, it might as well not exist. - Vitaly Friedman 10 Principles of Effective Web Design, www.smashingmagazine.com 10/26/2012 22
ENSURE EASE IN NAVIGATION YOUR WEBSITE YOUR AUDIENCE 10/26/2012 23
ENSURE EASE IN NAVIGATION Navigation Systems should be intuitive and precise - Provide multiple interaction paths - Ensure context for users who come in through search or links - Does it take two clicks or less for key tasks? 10/26/2012 24
INCLUDE CLEAR, BOLD CALLS-TO-ACTION Assuming that youve written a brilliantly persuasive page, its still next to worthless without a strong call to action - Brad Shorr Five Copywriting Errors That Can Ruin a Companys Website, 10/26/2012 25
INCLUDE CLEAR, BOLD CALLS TO ACTION Remove all obstacles to action from anywhere - Provide a tangible to an intangible (eg. Please give $10 today Please give 10 meals to your community today) 10/26/2012 26
INCLUDE CLEAR, BOLD CALLS TO ACTION Calls to action should be clear and compelling - Never say click here - Say for example become a habitat volunteer today 10/26/2012 27
SHOW STEWARDSHIP Stewardship comes down to being able to show donors how their dollars were used and what impact their contributions had - Cynthia Gomez What Is Stewardship for a Non-Profit? www.eHow.com 10/26/2012 28
SHOWCASE YOUR STEWARDSHIP 60% of donors visit a nonprofits website before making a gift. - Show the impact (stats, infographics) - Be transparent (share your annual report) - Say Thank you 10/26/2012 29
KEEP CONTENT FRESH You need to remember that the Internet is a dynamic place, and make sure your site is constantly changing as well. - Randall Mains Good Non Profit Website Design Principles #5 of 5, blog.pathmakermarketing.com May 21, 2009 10/26/2012 30
KEEP YOUR CONTENT FRESH Always have something new to share - Utilize automatic feeds - Add dates to content posted to the homepage Timely Upcoming Events 10/26/2012 31
KEEP YOUR CONTENT FRESH Gather user-generated content to delegate and let others contribute. 10/26/2012 32
BE SOCIAL Integrating the social experience into your organizations web site will help promote the channel, engage supporters, and provide a constant source of dynamic content - Melanie Mathos & Chad Norman 101 Social Media Tactics for Nonprofits: A Field Guide. John Wiley & Sons, Inc. 10/26/2012 33
BE SOCIAL Social media and viral sharing are highly valuable tools in contributing to web site traffic and brand exposure - Make it easy to connect, interact and contribute 10/26/2012 34
BE SOCIAL Encourage Viral Sharing - Action Sharing - Integrate social activities everywhere 10/26/2012 35
PROVIDE A PERSONAL TOUCH THROUGH MULTIMEDIA Many of todays most successful websites are interactive, meaning they allow people to participate in the content in some way. - Randall Mains Randall Mains, Strategic Web Communication Principle #4: Interactivity blog.pathmakermarketing.com 10/26/2012 36
PROVIDE A PERSONAL TOUCH THROUGH MULTIMEDIA Allow users to consume information in multiple ways - Your audiences preferences for consuming content varies, just as their browsing and navigation styles do. Users want to consume information in various media channels and formats. 10/26/2012 37
TEN BEST PRACTICES 1. Resonate with Your Audiences 2. Have a Focused Homepage 3. Share Your Mission 4. Use Compelling Imagery 5. Ensure Ease in Navigation 6. Include Clear, Bold Calls to Action 7. Showcase Your Stewardship 8. Keep Your Content Fresh 9. Be Social 10. Provide a Personal Touch Through Multimedia 10/26/2012 38
LETS PRACTICE! 10/26/2012 39
DISCUSS AND ASSESS: THE RULES Work as a Team On Your Table Laptop, Youll Have: - A website to audit - The presentation we just reviewed for reference - A digital audit form Use Your Top Ten Knowledge to Assess the Provided Site With Your Team - Expert facilitators can assist with questions Answer all questions and submit the form! 10/26/2012 40
LETS LEARN FROM EACHOTHER! Well have the results on the projector Choose a presenter from your table In 2 minutes, tell us: - The site you audited - The most memorable top ten success - One top ten element missed - One suggestion youd make for this website (optional) 10/26/2012 41
ASK THE EXPERTS 10/26/2012 42
TEN BEST PRACTICES 1. Resonate with Your Audiences 2. Have a Focused Homepage 3. Share Your Mission 4. Use Compelling Imagery 5. Ensure Ease in Navigation 6. Include Clear, Bold Calls to Action 7. Showcase Your Stewardship 8. Keep Your Content Fresh 9. Be Social 10. Provide a Personal Touch Through Multimedia 10/26/2012 43
FOLLOW US! @KELJAR @CHSWEB HASHTAG THIS SESSION! #BBDESIGN 10/26/2012 44

More Related Content

Bag of Tricks

  • 1. Interactive Workshop: A Bag Of Tricks for Your Nonprofit Website PRESENTED BY: KELLEY JARRETT, MARKET MANAGER GUIDE CREATIVE (@KELJAR) JONO YOUNG, DESIGN PRINCIPAL INTERACTIVE (@CHSWEB) 10/26/2012 1
  • 2. HASHTAG THIS SESSION #BBDESIGN FOLLOW US @KELJAR @CHSWEB 10/26/2012 2
  • 3. WELCOME! Meet Jono Meet Kelley Meet Our Esteemed Facilitators/Panel Who do we have out there with us today? What Goes Into a Successful Website? Name one mistake youve seen an organization make on their website? 10/26/2012 3
  • 4. WERE HERE TODAY TO Review key elements that make nonprofit websites more effective Learn how to analyze a website and recognize these elements Be able to identify opportunities for improvement Empower you to assess your own site and make changes Your Website is an EVOLUTION 10/26/2012 4
  • 5. HERES THE PLAN Learn Discuss Assess Present Ask 10/26/2012 5
  • 6. LEARN: TEN BEST PRACTICES 10/26/2012 6
  • 7. TEN BEST PRACTICES 1. Resonate with Your Audiences 2. Have a Focused Homepage 3. Share Your Mission 4. Use Compelling Imagery 5. Ensure Ease in Navigation 6. Include Clear, Bold Calls to Action 7. Showcase Your Stewardship 8. Keep Your Content Fresh 9. Be Social 10. Provide a Personal Touch Through Multimedia 10/26/2012 7
  • 8. RESONATE WITH YOUR AUDIENCE Your website does not exist as a boutique just to show off information about your organization. Instead, its actually a tool to mobilize your audience... - Raheel Gauba Design for Good: 4 (More) Nonprofit Design Principles Netwits Think Tank, 10 10/26/2012 8
  • 9. RESONATE WITH YOUR AUDIENCES Focus on your audience needs - Who are your audience groups and who is most important? - What do they care about need, goals and aspirations? - How do they interact with you on and off your website? 10/26/2012 9
  • 10. RESONATE WITH YOUR AUDIENCES Speak the right language - Choose a key message and use it consistently - Listen for feedback on whats working and whats not through social media, blogs and surveys - Avoid jargon, too little or too much content - Test! 10/26/2012 10
  • 11. RESONATE WITH YOUR AUDIENCES Meet users where they are - In less than three years mobile will be the #1 way your audience will access your website Are you ready? 10/26/2012 11
  • 12. HAVE A FOCUSED HOMEPAGE The Web is a world of first impressions, and quick ones at that. Users form an opinion of a website within the first few seconds of loading it. - Jason Gross The Role of Design in The Kingdome of Content, www.smashingmagazine.com 10/26/2012 12
  • 13. HAVE A FOCUSED HOMEPAGE Prioritize Content - Wireframes are key for visual hierarchy - Remember YOUR goals - Remember your AUDIENCES goals 10/26/2012 13
  • 14. HAVE A FOCUSED HOMEPAGE Pass the 3-second test - Is your homepage scannable, understandable, intuitive in 3 seconds? 10/26/2012 14
  • 15. SHARE YOUR MISSION Design your website around your non- profits actions and purpose. Make the mission statement clear as day. - Blake McCreary Non-Profit Web Design. 10/26/2012 15
  • 16. SHARE YOUR MISSION Show your story visually - Every image, every link, every element should tell your missions story. 10/26/2012 16
  • 17. SHARE YOUR MISSION Tell your story clearly & succinctly and make it actionable - Visual interpretation can mean many things infographics, typography, links, video, imagery, photography 10/26/2012 17
  • 18. USE COMPELLING AND ENGAGING IMAGERY Regardless of what your content actually says, the design around it controls what the users see first and how their eyes move across the sections of the page. - Jason Gross The Role of Design in The Kingdome of Content, www.smashingmagazine.com 10/26/2012 18
  • 19. USE COMPELLING AND ENGAGEMENT IMAGRY Engage with eye contact Make a personal connection - Connect, speak and engage with a personal connection - Eye contact makes it feel as real as it is 10/26/2012 19
  • 20. USE COMPELLING IMAGERY Show real stories of impact to gain credibility 10/26/2012 20
  • 21. USE COMPELLING IMAGERY Match Imagery with your brand, mood and voice - Does quality, composition and candor of your imagery jive with your user experience? 10/26/2012 21
  • 22. ENSURE EASE IN NAVIGATION User-centric design has become a standard approach for successful and web design. After all, if users cant use a feature, it might as well not exist. - Vitaly Friedman 10 Principles of Effective Web Design, www.smashingmagazine.com 10/26/2012 22
  • 23. ENSURE EASE IN NAVIGATION YOUR WEBSITE YOUR AUDIENCE 10/26/2012 23
  • 24. ENSURE EASE IN NAVIGATION Navigation Systems should be intuitive and precise - Provide multiple interaction paths - Ensure context for users who come in through search or links - Does it take two clicks or less for key tasks? 10/26/2012 24
  • 25. INCLUDE CLEAR, BOLD CALLS-TO-ACTION Assuming that youve written a brilliantly persuasive page, its still next to worthless without a strong call to action - Brad Shorr Five Copywriting Errors That Can Ruin a Companys Website, 10/26/2012 25
  • 26. INCLUDE CLEAR, BOLD CALLS TO ACTION Remove all obstacles to action from anywhere - Provide a tangible to an intangible (eg. Please give $10 today Please give 10 meals to your community today) 10/26/2012 26
  • 27. INCLUDE CLEAR, BOLD CALLS TO ACTION Calls to action should be clear and compelling - Never say click here - Say for example become a habitat volunteer today 10/26/2012 27
  • 28. SHOW STEWARDSHIP Stewardship comes down to being able to show donors how their dollars were used and what impact their contributions had - Cynthia Gomez What Is Stewardship for a Non-Profit? www.eHow.com 10/26/2012 28
  • 29. SHOWCASE YOUR STEWARDSHIP 60% of donors visit a nonprofits website before making a gift. - Show the impact (stats, infographics) - Be transparent (share your annual report) - Say Thank you 10/26/2012 29
  • 30. KEEP CONTENT FRESH You need to remember that the Internet is a dynamic place, and make sure your site is constantly changing as well. - Randall Mains Good Non Profit Website Design Principles #5 of 5, blog.pathmakermarketing.com May 21, 2009 10/26/2012 30
  • 31. KEEP YOUR CONTENT FRESH Always have something new to share - Utilize automatic feeds - Add dates to content posted to the homepage Timely Upcoming Events 10/26/2012 31
  • 32. KEEP YOUR CONTENT FRESH Gather user-generated content to delegate and let others contribute. 10/26/2012 32
  • 33. BE SOCIAL Integrating the social experience into your organizations web site will help promote the channel, engage supporters, and provide a constant source of dynamic content - Melanie Mathos & Chad Norman 101 Social Media Tactics for Nonprofits: A Field Guide. John Wiley & Sons, Inc. 10/26/2012 33
  • 34. BE SOCIAL Social media and viral sharing are highly valuable tools in contributing to web site traffic and brand exposure - Make it easy to connect, interact and contribute 10/26/2012 34
  • 35. BE SOCIAL Encourage Viral Sharing - Action Sharing - Integrate social activities everywhere 10/26/2012 35
  • 36. PROVIDE A PERSONAL TOUCH THROUGH MULTIMEDIA Many of todays most successful websites are interactive, meaning they allow people to participate in the content in some way. - Randall Mains Randall Mains, Strategic Web Communication Principle #4: Interactivity blog.pathmakermarketing.com 10/26/2012 36
  • 37. PROVIDE A PERSONAL TOUCH THROUGH MULTIMEDIA Allow users to consume information in multiple ways - Your audiences preferences for consuming content varies, just as their browsing and navigation styles do. Users want to consume information in various media channels and formats. 10/26/2012 37
  • 38. TEN BEST PRACTICES 1. Resonate with Your Audiences 2. Have a Focused Homepage 3. Share Your Mission 4. Use Compelling Imagery 5. Ensure Ease in Navigation 6. Include Clear, Bold Calls to Action 7. Showcase Your Stewardship 8. Keep Your Content Fresh 9. Be Social 10. Provide a Personal Touch Through Multimedia 10/26/2012 38
  • 40. DISCUSS AND ASSESS: THE RULES Work as a Team On Your Table Laptop, Youll Have: - A website to audit - The presentation we just reviewed for reference - A digital audit form Use Your Top Ten Knowledge to Assess the Provided Site With Your Team - Expert facilitators can assist with questions Answer all questions and submit the form! 10/26/2012 40
  • 41. LETS LEARN FROM EACHOTHER! Well have the results on the projector Choose a presenter from your table In 2 minutes, tell us: - The site you audited - The most memorable top ten success - One top ten element missed - One suggestion youd make for this website (optional) 10/26/2012 41
  • 43. TEN BEST PRACTICES 1. Resonate with Your Audiences 2. Have a Focused Homepage 3. Share Your Mission 4. Use Compelling Imagery 5. Ensure Ease in Navigation 6. Include Clear, Bold Calls to Action 7. Showcase Your Stewardship 8. Keep Your Content Fresh 9. Be Social 10. Provide a Personal Touch Through Multimedia 10/26/2012 43
  • 44. FOLLOW US! @KELJAR @CHSWEB HASHTAG THIS SESSION! #BBDESIGN 10/26/2012 44

Editor's Notes

  • #2: TITLE SLIDE.
  • #27: Include in your wordsand in your visuals.Remove obstacles to actionProvide a tangible to an intangiblePlease give $10 todayPlease give 10 meals to your community todayA call to action must be clear and compelling:Donate Now to save a gorillaTell Congress to Stop Child Slavery.Learn how your voice makes an impact.Calls to action are strengthened by:Testimonials: Its worked;Credibility statements: Its reliable;Warranty or guarantee: Its risk-free;High value: Its worth having;Urgency: Its now or never.