Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

Twf homepagedesign sb_okey

Wird geladen in …3

Hier ansehen

1 von 60 Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (19)

Ähnlich wie Twf homepagedesign sb_okey (20)


Aktuellste (20)

Twf homepagedesign sb_okey

  1. 1. The Web Farm <ul><li>Web Design, Content and Usability for Nonprofits </li></ul>
  2. 2. Hi, I’m Emily Lonigro <ul><li>LimeRed Studio, Inc: Design, builds and tests off- and online marketing collateral. </li></ul><ul><li>The Web Farm, Inc: Online marketing, measurement and website optimization </li></ul>
  3. 3. Overview <ul><li>Rampant, big problems </li></ul><ul><li>How to think about your customers </li></ul><ul><li>User testing & usability </li></ul><ul><li>Branding, design & resources </li></ul><ul><li>Sites I like </li></ul>
  4. 4. Big problems <ul><li>Cramming everything on the homepage </li></ul><ul><li>No clear call to action or too many! </li></ul><ul><li>Bad writing </li></ul><ul><li>Way too much copy </li></ul><ul><li>No user testing </li></ul>
  5. 5. Specific to Nonprofits <ul><li>Design by committee </li></ul><ul><li>Talking to coworkers instead of clients </li></ul><ul><li>Lack of small, easily digestable info </li></ul><ul><li>Industry-speak </li></ul><ul><li>Thinking you’re different than business </li></ul>
  6. 6. Why are these big problems? <ul><li>If you’re going to compete online, you had better compete with guts. </li></ul><ul><li>Think about how YOU do things online—who do you trust? </li></ul><ul><li>You’ve got 3 seconds. </li></ul>
  7. 7. How to fix these problems <ul><li>Understand your audience </li></ul><ul><li>Think about goals </li></ul><ul><li>Do some user testing & think about usability </li></ul><ul><li>Look at websites that do a good job of selling </li></ul><ul><li>Make plans for the future and test! </li></ul>
  8. 8. Your Audiences <ul><li>Who are they? </li></ul><ul><li>What do they want? </li></ul><ul><li>What do you want them to want? </li></ul>
  9. 9. Thinking about customers <ul><li>This is hard! You have to talk to all kinds of people at the same time. </li></ul><ul><li>Four different kinds of personas: </li></ul><ul><ul><li>Competitive </li></ul></ul><ul><ul><li>Spontaneous </li></ul></ul><ul><ul><li>Humanistic </li></ul></ul><ul><ul><li>Methodical </li></ul></ul>
  10. 11. Let’s do some user testing now
  11. 12. Audiences Audience Need Solution Utility Ongoing
  12. 13. GOALS, goals and more goals PAGE ACTION GOAL HOW HOME sign up for newsletter fill out sub request pop-out window with info ABOUT connect on linked in click on a button headlines, subheads, bullet copy SERVICES email quote request big, huge button to form page great copy, before & after, list of services
  13. 14. What’s really cool about this
  14. 15. Example
  15. 16. Usability rationale <ul><li>Don’t make people think. At all. </li></ul><ul><li>We don’t read web pages; we scan them. </li></ul><ul><li>We don’t figure things out; we guess. </li></ul><ul><li>We have a limited attention span and frustration factor. (phone number) </li></ul><ul><li>We stick to what works. </li></ul>
  16. 18. Usability best practices <ul><li>Create clear hierarchy </li></ul>This is a headline This is a subhead And some body copy CALL TO ACTION
  17. 19. Usability best practices <ul><li>Don’t reinvent the wheel. It works really well already. </li></ul><ul><ul><li>Use standard navigation and placement </li></ul></ul><ul><ul><li>Make links obvious </li></ul></ul><ul><ul><li>Don’t hide things! </li></ul></ul>
  18. 20. Usability best practices <ul><li>Name your nav something obvious </li></ul><ul><li>Customer-centric or standard </li></ul>
  19. 21. Usability Best Practices <ul><li>Same thing with Calls to Action </li></ul><ul><ul><li>Make them simple </li></ul></ul><ul><ul><li>Make them a contrasting color </li></ul></ul>
  20. 22. Usability best practices <ul><li>Simplify, simplify, simplify </li></ul><ul><ul><li>Get rid of complicated search </li></ul></ul><ul><ul><li>Get rid of words </li></ul></ul><ul><ul><li>Streamline forms </li></ul></ul><ul><ul><li>Get rid of happy, welcome talk </li></ul></ul>
  21. 23. <ul><li>BEFORE: The Illinois Chapter of the Sierra Club is a statewide organization representing over 23,000 individuals committed to protecting the Illinois environment - for our families, for our future. </li></ul><ul><li>AFTER: Protecting Illinois’ environment for our families and our future. We are the Sierra Club’s Illinois Chapter — 23,000 strong. </li></ul>
  22. 24. Usability best practices <ul><li>Page titles should be on every page and match the navigation </li></ul><ul><li>Use breadcrumbs too if your site is huge </li></ul>
  23. 25. Purpose of your homepage <ul><li>Creating portals to interior content for audience profiles </li></ul><ul><li>Get quick results </li></ul><ul><li>Establishing the online face of your business </li></ul><ul><li>Working as your online marketing partner </li></ul><ul><li>Cutting through competitive clutter </li></ul><ul><li>Remember: your homepage might not be your top landing page, so take a look at your analytics </li></ul>
  24. 26. Content structure <ul><li>Group content by what is intuitive for your audience </li></ul><ul><li>Don’t be coy and hide things </li></ul><ul><li>Don’t forget things like a disclaimer, privacy policy, 401 error, site map and contact </li></ul><ul><li>Include a site map somewhere. The footer is a good place for that. </li></ul>
  25. 27. How does this content and usability stuff fit into design? <ul><li>The design is only as good as the content and organization </li></ul><ul><li>Take one key idea and design around that. You can expand later, but keep that in mind always </li></ul><ul><li>When you have a strategy, everything is easier </li></ul><ul><li>Less guessing! </li></ul>
  26. 28. Design best practices <ul><li>Install, configure and use analytics </li></ul><ul><li>I’m repeating this because I can’t stress enough how important this is </li></ul>
  27. 29. Design best practices <ul><li>Use your most valuable real estate </li></ul><ul><li>Balance images and text </li></ul><ul><ul><li>Too much text is hard to read </li></ul></ul><ul><ul><li>Too many images is hard for search engines to read </li></ul></ul><ul><ul><li>Make sure the text you use is packed with keywords </li></ul></ul>
  28. 30. Design best practices <ul><li>Make contacting you super easy </li></ul><ul><ul><li>Stick phone number and/or email up top </li></ul></ul><ul><ul><li>Call to donate or join up top </li></ul></ul><ul><ul><li>Reiterate blown-out navigation in footer with contact links (good place for social media) </li></ul></ul>
  29. 31. Design best practices <ul><li>Copy </li></ul><ul><ul><li>Break up large paragraphs with bullets </li></ul></ul><ul><ul><li>Write compelling headlines and subheads </li></ul></ul><ul><ul><li>Use customer-centric navigation (but don’t get too creative) </li></ul></ul>
  30. 32. Design best practices <ul><li>White space is your friend </li></ul><ul><li>So are deliberate sections </li></ul>
  31. 33. Let’s make some wireframes. <ul><li>Fireworks </li></ul><ul><li>Omnigraffle </li></ul><ul><li>Or, you can just draw with a pencil. Gasp! </li></ul>
  32. 34. Let’s start designing!
  33. 35. Leave design to the professionals Would you hire your neighbor to build you a house because he likes to tinker around in the garage? No.
  34. 36. Word list <ul><li>Make a list of words that describe YOUR org that will resonate with YOUR audience. </li></ul><ul><li>Specific, visually-rich words </li></ul><ul><li>At least 10 of them </li></ul>
  35. 37. Sally’s great word list <ul><ul><li>Phoenix (resilience, drive, calculated risk, constant effort, hard work, my success is function of client’s success) </li></ul></ul><ul><li>T-shirt slogan (an inside joke, comedy, laughter, boiling ideas down to few key words, optimism) </li></ul><ul><li>Seanchai (Gaelic for storyteller or old talker) (act-of-writing, stories, words, grammar, history, transfer of knowledge, thought leader) </li></ul><ul><li>Purple brain (I say that my brain changes color when I speak French or am fully engaged in conceptual conversation; this is happiness for me) </li></ul><ul><li>Lounge chair (sun shining down on you, satiation, work is done, you can relax now; reward) </li></ul><ul><li>Bordeaux (rich, cultured, appreciative, tasteful, well-traveled and educated—also a subset of a set—one wine among many, speaking to organization) </li></ul><ul><li>Roman Viaducts Slash Stonehenge (innovation, invention, community, momentum, family, heritage, legacy, functioning unit, leadership, ritual, ceremony) </li></ul><ul><li>Pangea (name of our planet when all continents were connected) (interconnected, global, human context, global economy, global trends) </li></ul><ul><li>Straght A’s (perfection, perfection can be enemy of good, diligence, integrity, tiereless, you see what you get, transparent) </li></ul><ul><li>Couch (homey, relief, comfortable, homey, safe, the right solution at the right time) </li></ul>
  36. 38. Image search <ul><ul><li>veer.com </li></ul></ul><ul><li>istockphoto.com </li></ul><ul><li>images.google.com </li></ul><ul><li>Flickr.com </li></ul><ul><li>gettyimages.com </li></ul><ul><li>jupiterimages.com </li></ul><ul><li>paper-source.com </li></ul><ul><li>crateandbarrel.com (I like to ask clients to choose a duvet cover) </li></ul><ul><li>reprodepot.com (I like to ask clients to choose fabrics) </li></ul>
  37. 39. Sally’s Moodboard
  38. 40. Sally’s Design concepts
  39. 41. Sally’s Website
  40. 46. Color palettes <ul><li>Simplicity is key </li></ul>
  41. 47. Recap: steps to redesign <ul><li>Do some user testing to get a baseline </li></ul><ul><li>Use your analytics to get real data about your traffic </li></ul><ul><li>Create a solid content structure & look at the specific content on each page, especially top-performing pages </li></ul><ul><li>Do some SEO </li></ul><ul><li>Create design guidelines </li></ul><ul><li>Hire a pro to design and build your site (and decide who is going to make decisions) </li></ul><ul><li>Test before you build the whole thing </li></ul><ul><li>Test after you build the whole thing </li></ul><ul><li>Use analytics and test and make changes forever and ever </li></ul>
  42. 48. Advanced topics - web analytics <ul><li>Web Analytics is the measurement, collection, analysis and reporting of Internet data for the purposes of understanding and optimizing Web usage. from the Web Analytics Association </li></ul><ul><li>Web Analytics Assocation </li></ul><ul><ul><li>http://www.webanalytics association.org </li></ul></ul><ul><li>University of British Columbia Award of Achievement in Web Analytics </li></ul><ul><ul><li>http://www.tech.ubc.ca/webanalytics </li></ul></ul><ul><li>Web Analytics Wednesday </li></ul><ul><ul><li>http://www.webanalyticsdemystified.com/wednesday/ </li></ul></ul>
  43. 49. Advanced topics - multivariate testing <ul><li>Multivariate testing is a process by which more than one component of a website may be tested in a live environment. </li></ul>Headline one Headline two Headline three GO SUMBIT SEND +
  44. 53. Why testing is hard <ul><li>It’s not, but dealing with people is. </li></ul>IT Dept says: You want to put CODE on MY pages? No way. Designer says: My design is rock solid. You’re an idiot and don’t know anything about design. Marketing says: I know what I’m doing. You want to prove me wrong? No way! So present it to the BOSS: Long term, we can make more money/get more signups/ for a minimum cost. It’s stupid not to do it. Oh, and the utility is free.
  45. 54. Advanced topics: SEO <ul><li>This is the Wild West of the Internet </li></ul><ul><li>Search Engine Optimization is the process of increasing the amount of visitors to a Web site by ranking high in the search results of a search engine . </li></ul><ul><ul><li>keyword research </li></ul></ul><ul><ul><li>page titles & h1, h2 headlines </li></ul></ul><ul><ul><li>page and site descriptions </li></ul></ul><ul><ul><li>keyword density in copy </li></ul></ul>
  46. 55. Resources <ul><li>http://www.webdesign.org / </li></ul><ul><li>http://www.marketingsherpa.com / </li></ul><ul><li>http://www.webdesigndev.com / </li></ul><ul><li>http://www.usertesting.com / </li></ul>