Adding Curb Appeal: Website Redesign


Published on

Presentation given at 2010 NTEN Conference about designing or redesigning a website for your organization.

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Adding Curb Appeal: Website Redesign

  1. 1. Adding Curb Appeal <ul><li>Presented By: </li></ul><ul><li>Christy Van Heugten </li></ul><ul><li>IT Project Manager, Event 360 </li></ul>Your Mission is Our Passion .
  2. 2. Adding Curb Appeal
  3. 3. Who is the Builder? <ul><ul><li>Who will be involved in the process? </li></ul></ul><ul><ul><li>How will you setup communications to ensure everyone is on the same page? </li></ul></ul>
  4. 4. Who is the Builder? Because you can? Or because you should?
  5. 5. Analyzing Web Traffic
  6. 6. Analyzing Web Traffic – Google Analytics <ul><ul><ul><li>How are people getting to the register and/or donate page? </li></ul></ul></ul><ul><ul><ul><ul><li>Is it easily accessible from the Home page </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Number of clicks to register/donate – try to keep minimal. It is okay to bulk up certain pages if it shortens the overall process. </li></ul></ul></ul></ul><ul><ul><ul><li>Keep aware of the trends and what pages are being visited and not visited . </li></ul></ul></ul><ul><ul><ul><li>Make sure there are correct “exit” pages instead of losing people. Is there an external site link on a donate page? </li></ul></ul></ul>Find out where your visitors are going and where they aren’t going.
  7. 7. Analyzing Web Traffic – Google Analytics <ul><li># of Visits </li></ul><ul><li>First-time visits </li></ul><ul><ul><li># of page views </li></ul></ul><ul><ul><ul><li>Average bounce rate </li></ul></ul></ul><ul><ul><ul><ul><li>Average time on site </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><li>Daily visits </li></ul></ul></ul></ul></ul>Common measurements used:
  8. 8. Analyzing – User Tests <ul><ul><ul><li>Feedback from someone who is new to the organization, event, etc. </li></ul></ul></ul><ul><ul><ul><ul><li>Likes and Dislikes of current site, if applicable </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Likes and Dislikes of similar organizations’ sites </li></ul></ul></ul></ul><ul><ul><ul><ul><li>Interview for the top 3 -5 pieces of information they would most likely look for on the site or action they would perform </li></ul></ul></ul></ul><ul><ul><ul><li>Monitor site gravitation without giving them guidance. </li></ul></ul></ul><ul><ul><ul><li>Give them a few tasks to complete without any instruction; see how easily they can complete them. </li></ul></ul></ul><ul><ul><ul><li>Survey actual site users; post-event, super volunteers, donors, etc. </li></ul></ul></ul>
  9. 9. Analyzing – Eye Movement <ul><ul><li>1. Headlines draw eyes before pictures. </li></ul></ul><ul><ul><li>2. People scan the first couple words of a headline. </li></ul></ul><ul><ul><li>3. People scan the left side of a list of headlines. </li></ul></ul><ul><ul><li>4. Your headline must grab attention in less than 1 second. </li></ul></ul><ul><ul><li>5. Smaller type promotes closer reading. </li></ul></ul><ul><ul><li>6. Navigation at the top of the page works best. </li></ul></ul><ul><ul><li>7. Short paragraphs encourage reading. </li></ul></ul><ul><ul><li>8. Introductory paragraphs enjoy high readership. </li></ul></ul><ul><ul><li>9. People read text ads more than graphic ads. </li></ul></ul><ul><ul><li>10. Multimedia works better than text for unfamiliar or conceptual information. </li></ul></ul><ul><ul><li>-released by The Poynter Institute, the Estlow Center for Journalism & New Media, and Eyetools </li></ul></ul><ul><ul><li> </li></ul></ul>Here's a Freebie!
  10. 10. Analyzing Web Traffic
  11. 11. THEN…
  12. 12. NOW…
  13. 13. Building & Remodeling
  14. 14. <ul><ul><li>Who? </li></ul></ul><ul><ul><ul><li>Will be responsible for setup/managing site </li></ul></ul></ul><ul><ul><ul><li>Is target audience? </li></ul></ul></ul><ul><ul><li>What? </li></ul></ul><ul><ul><ul><li>Overall emotion do I want to evoke? (excitement, drama, hope) </li></ul></ul></ul><ul><ul><ul><li>CMS limitations </li></ul></ul></ul>Before you jump in…
  15. 15. <ul><ul><li>Why? </li></ul></ul><ul><ul><ul><li>How do I want to present my 30 second pitch to a reader? </li></ul></ul></ul><ul><ul><ul><li>What is the 1 or 2 actions you want the average visitor to do? Call to action…clear and concise. </li></ul></ul></ul><ul><ul><li>When? </li></ul></ul><ul><ul><ul><li>Event Date/Time </li></ul></ul></ul><ul><ul><li>Where? </li></ul></ul><ul><ul><ul><li>Organization Location or Location of Impact </li></ul></ul></ul><ul><ul><ul><li>Event Location </li></ul></ul></ul>Before you jump in…
  16. 16. <ul><li>New Website </li></ul><ul><ul><li>Site Architecture </li></ul></ul><ul><ul><li>The Importance of Colors </li></ul></ul><ul><ul><li>Logo of organization </li></ul></ul><ul><ul><li>Valuable Real Estate </li></ul></ul><ul><ul><li>Check for an organization style guide for colors, font and reference </li></ul></ul><ul><ul><ul><li>If one does not exist, this is a great time to create one to ensure your website style translates to all other organization presence. </li></ul></ul></ul>Planning
  17. 17. <ul><li>Site Architecture </li></ul><ul><ul><li>Plan out your navigation before building content pages. </li></ul></ul><ul><ul><li>Make a navigation visual “map” to be able to move it around. Simplify. </li></ul></ul><ul><ul><ul><li>Post-It notes on a wall </li></ul></ul></ul><ul><ul><ul><li>MS Visio map </li></ul></ul></ul><ul><ul><ul><li>Excel </li></ul></ul></ul><ul><ul><li>“ Is it in the right place?” “Is it on the right page?” </li></ul></ul>Planning
  18. 18. <ul><li>Colors are important! </li></ul><ul><li>Not everyone sees things the same way. </li></ul><ul><li>Some color combinations are much harder than others to view. </li></ul><ul><li>Consider age of audience and gender </li></ul><ul><ul><li>Higher rates of color blindness in males </li></ul></ul><ul><ul><li>Loss of blue color receptors with age </li></ul></ul>Planning
  19. 19. <ul><li>Can you read this? Can you read this? </li></ul>Planning Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this? Can you read this?
  20. 20. <ul><li>Ask why are you redesigning? </li></ul><ul><li>Add value and try to simplify </li></ul><ul><li>Don’t fix what’s NOT broken </li></ul><ul><li>If you reorganize the site, be prepared to address those that are familiar with the old site </li></ul>Redesigning
  21. 21. Highlighting key messages / actions <ul><li>Keep it minimal on Home Page. Main ones: Register & Donate. Too much direction will lose their focus. What is your main goal? If you could only get them to do one thing, what would it be? </li></ul><ul><ul><li>Incorporate the mission in a snapshot </li></ul></ul><ul><ul><li>Thirty-second pitch / Elevator pitch </li></ul></ul><ul><li>Multiple instances of main action. Put Register as a bold graphic in the header as well as within the navigation and content. </li></ul>
  22. 22. <ul><li>National Series </li></ul><ul><ul><li>Keep the event/mission message and general layout the same, but allow for personalization for each community. </li></ul></ul><ul><ul><li>The more you can centralize content and make updates in one place instead of multiple. (i.e. Convio’s Reusable content pages, Blueprinting function for TeamRaisers) </li></ul></ul><ul><ul><li>Make search function easy to get to </li></ul></ul><ul><ul><li>Clearly identify the National or Headquarters organization and if the work done there is any different. </li></ul></ul>Single look for multiple events/chapters/affiliates
  23. 23. <ul><li>Signature Series – focus on the mission </li></ul><ul><ul><li>Internal Navigations with one general main navigation </li></ul></ul><ul><ul><li>Keeps the brand of the organization prominent when faced with many unique events. </li></ul></ul><ul><ul><li>Cost - efficient </li></ul></ul>Single look for multiple events/chapters/affiliates
  24. 25. The 10 Commandments
  25. 26. <ul><li>I. Thou shalt clearly state who you are and what do you. </li></ul><ul><li>II. Thou shalt be able to point to where your top 3-5 online goals are represented on the homepage. </li></ul><ul><li>III. Thou shalt offer clear, concise navigation. </li></ul><ul><li>IV. Thou shalt provide scannable, up-to-date content that entices visitors to click for more. </li></ul><ul><li>V. Thou shalt dedicate space to each of your audience groups. </li></ul><ul><li>-Lacey Kruger, Senior Interactive Architect at Convio </li></ul>
  26. 27. <ul><li>VI. Thou shalt convey a visual hierarchy so visitors know where to look and what to do first. </li></ul><ul><li>VII. Thou shalt include 3-4 ways for visitors to engage. </li></ul><ul><li>VIII. Thou shalt avoid the Flash intro or any other gratuitous animation. </li></ul><ul><li>IX. Thou shalt make sure most relevant content is above the fold. </li></ul><ul><li>X. Thou shalt balance meaningful content with relevant supporting graphics. </li></ul><ul><li>-Lacey Kruger, Senior Interactive Architect at Convio </li></ul>
  27. 28. Apply to Communications
  28. 29. Applying it to Communications <ul><li>Same </li></ul><ul><li>Keep it simple </li></ul><ul><li>Streamlined with bullets and short paragraphs </li></ul><ul><li>Always make it clear how to take action/engage </li></ul><ul><li>Clear, concise calls to action. Don’t be afraid to ask them to do something! </li></ul><ul><li>Stick to web-friendly fonts and colors </li></ul><ul><li>Attention span is limited. Make good use of headlines, bullets, etc </li></ul><ul><li>Use content space wisely. Try to lure to website </li></ul><ul><li>Opposite </li></ul><ul><li>Do not add fancy background images </li></ul><ul><li>No wrappers or navigation </li></ul>
  29. 30. <ul><ul><li>What is done well and what can be improved? </li></ul></ul><ul><ul><li>National Kidney Foundation </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Wavetec Vision </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Census Website </li></ul></ul><ul><ul><li> </li></ul></ul><ul><ul><li>Conservation Fund </li></ul></ul><ul><ul><li> </li></ul></ul>
  30. 31. Evaluation Code: 193 How Was this Session? Call In Text Online Call 404.939.4909 Enter Code 193 Text 193 to 69866 Visit Enter Code 193 Session feedback powered by: Tell Us and You Could Win a Free 2011 NTC Registration!