Your SlideShare is downloading. ×
Twf homepagedesign sb_okey
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Twf homepagedesign sb_okey

1,868
views

Published on

Presentation notes from April 29, 2010 workshop: Web design, content and usability for nonprofits.

Presentation notes from April 29, 2010 workshop: Web design, content and usability for nonprofits.

Published in: Design

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

  • Be the first to like this

No Downloads
Views
Total Views
1,868
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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