@keljar BBcon 2012 presentation

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 you’ve seen an
organization make on their website?
10/26/2012 3

4. WE’RE 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. HERE’S 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, it’s 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 what’s working
and what’s 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 AUDIENCE’S 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-
profit’s 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
mission’s 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 can’t 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 you’ve written a brilliantly
persuasive page, it’s still next to worthless
without a strong call to action…”
- Brad Shorr
“Five Copywriting Errors That Can Ruin a Company’s 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 nonprofit’s 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
organization’s 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 today’s 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

39. LET’S PRACTICE!
10/26/2012 39

40. DISCUSS AND ASSESS: THE RULES
• Work as a Team
• On Your Table Laptop, You’ll 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. LET’S LEARN FROM EACHOTHER!
• We’ll 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 you’d make for this website (optional)
10/26/2012 41

42. ASK THE EXPERTS
10/26/2012 42

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