Stephanie Lawrence & Tonja Terterian - A Tale of Two Websites: Taking Your Website from Good (Enough) to Great | Presented by XT+M


Published on

So you’ve got a website. Is it doing what you want it to? Do you know what you want it to do? Attend this workshop to witness a real website makeover from the “before” to the “after” and all of the lessons learned along the way. Learn what was involved in rebuilding the Heart & Stroke’s Health Check Program site – a national bilingual website with multiple audiences and many expectations. Find out the importance of research, design, content, functionality and audience-specific information in creating a great website.

Published in: Education, Technology
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Stephanie Lawrence & Tonja Terterian - A Tale of Two Websites: Taking Your Website from Good (Enough) to Great | Presented by XT+M

  1. 1. A Tale of Two Websites: Taking Your Website from Good (Enough) to Great Health Check, Heart and Stroke Foundation
  2. 2. What is Health Check? <ul><li>Food information program of the Heart and Stroke Foundation </li></ul><ul><li>In grocery stores and restaurants </li></ul><ul><li>Products and menu items must meet nutrient criteria </li></ul><ul><ul><li>Developed by registered dietitians based on recommendations in Canada’s Food Guide </li></ul></ul><ul><li>Helps Canadians identify healthy choices </li></ul><ul><li>Encourages industry to offer healthier choices </li></ul><ul><li>Voluntary, not-for-profit </li></ul><ul><li>Over 1800 products, 200 brands, 75 food categories in grocery stores </li></ul><ul><li>Over 800 restaurant outlets </li></ul><ul><li>85% consumer awareness </li></ul>
  3. 3. Where we started <ul><li>Site launched in 1998 with program </li></ul><ul><li>Information for various audiences but mostly focused on healthy eating information for general public </li></ul><ul><li>Updates – content and some redesign, but no major investments </li></ul><ul><li>Lack of strategic plan and process </li></ul><ul><li>Design and content were out of date </li></ul><ul><li>Competitive healthy eating sites </li></ul>
  4. 4. Who is visiting? <ul><li>10,000 monthly visitors </li></ul><ul><li>Did not have a sense of who the visitors were </li></ul><ul><li>Traffic was not increasing </li></ul><ul><li>20% return rate </li></ul><ul><li>Users were not coming back </li></ul>
  5. 5. Who do we want to talk to? <ul><li>Canadians </li></ul><ul><li>Food industry </li></ul><ul><ul><li>Grocery manufacturers </li></ul></ul><ul><ul><li>Restaurants </li></ul></ul><ul><ul><li>Retailers </li></ul></ul><ul><li>Health professionals </li></ul><ul><li>Media </li></ul><ul><li>Workplaces </li></ul>
  6. 6. The website rebuild <ul><li>XT+M engaged in Summer 2008 </li></ul><ul><li>Phase One:  </li></ul><ul><li>GATHERING INTELLIGENCE </li></ul>
  7. 7. Gathering intelligence: Website audit <ul><li>What we wanted to know: </li></ul><ul><ul><li>Identify strengths and weaknesses </li></ul></ul><ul><ul><li>Review Health Check competitors </li></ul></ul><ul><ul><li>Develop recommendations for a stronger site </li></ul></ul>
  8. 8. Gathering intelligence: Website audit Look and feel Usability and functionality Communication and integration Websites reviewed Criteria
  9. 9. Website audit: Design Images below fold Scroll to access product info Layout unbalanced Cluttered & Crowded Text heavy Screen fold Weak call-to-actions Link to same content Crucial real estate Recipe buried
  10. 10. Website audit: Usability and functionality <ul><li>Develop alternative search methods </li></ul><ul><li>Create own web experience </li></ul><ul><ul><li>No customized features </li></ul></ul><ul><ul><li>Enable customization: online profiles, web community: forums and chats, online newsletter and updates, features: RSS feeds </li></ul></ul><ul><li>Create push and pull </li></ul><ul><ul><li>Static website </li></ul></ul><ul><ul><li>Through interactive elements </li></ul></ul><ul><ul><li>Showcase content </li></ul></ul><ul><ul><li>Sincere interest in the visitor </li></ul></ul><ul><ul><li>“ Let us make a special effort to stop communicating with each other, so we can have some conversation” – Miss Manners </li></ul></ul>
  11. 11. Website audit: Communication and integration <ul><li>Messaging clear and consistent </li></ul><ul><ul><li>Messaging evident but diluted by design </li></ul></ul><ul><ul><li>Fails to direct user to next steps </li></ul></ul><ul><li>Interactive tools utilized </li></ul><ul><ul><li>Users are not a participant on site </li></ul></ul><ul><ul><li>Only alternative method of content delivery is PDFs </li></ul></ul><ul><li>Perception of currency and relevancy </li></ul><ul><ul><li>Dated and static look and feel </li></ul></ul><ul><li>Delivery of content – next steps </li></ul><ul><ul><li>Lacks cross-linking </li></ul></ul><ul><ul><li>Related calls-to-action missing </li></ul></ul><ul><ul><li>No direction on how to put knowledge to use </li></ul></ul>
  12. 12. User survey <ul><li>October 2008 </li></ul><ul><li>1090 responses: 90% were new visitors </li></ul><ul><li>Demographics </li></ul><ul><ul><li>Male 12%/Female 88% and 50% had families </li></ul></ul><ul><ul><li>75% English – 25% French </li></ul></ul><ul><li>User experience: </li></ul><ul><ul><li>Information – healthy recipes, about Health Check, nutrition information </li></ul></ul><ul><ul><li>Functionality – tips, tools, newsletters, ask an expert </li></ul></ul><ul><li>Results: </li></ul><ul><ul><li>Loyal , active and invested audience </li></ul></ul><ul><ul><li>Trusted brand </li></ul></ul><ul><ul><li>Audience wants community </li></ul></ul><ul><ul><li>Looking for push-pull interactivity </li></ul></ul>
  13. 13. Rebuilding the website REBUILDING THE SITE Define | Design | Develop | Deploy
  14. 14. From this
  15. 15. To this
  16. 16. Rebuilding the website: Define <ul><li>Overall goal: Destination for healthy eating information </li></ul><ul><li>Overall strategy: Develop a user-friendly, interactive experience for visitors </li></ul><ul><li>Approach: </li></ul><ul><ul><li>Re-launch and strengthen online brand </li></ul></ul><ul><ul><li>Create a robust online information architecture that supports growth (phased-in approach) </li></ul></ul><ul><ul><li>Create an infrastructure that supports interactivity and viral sharing </li></ul></ul><ul><ul><li>Focus messaging and content on call to actions and next steps – engage user </li></ul></ul><ul><li>Plan: </li></ul><ul><ul><li>Develop process, work plan, timeline and assign responsibilities </li></ul></ul><ul><ul><li>“ A goal without a plan is just a wish” – Antoine de Saint-Exupery </li></ul></ul>
  17. 17. Rebuilding the website: Strategy
  18. 18. Rebuilding the website: Design Information Architecture
  19. 19. Rebuilding the website: Design Interface design
  20. 20. Rebuilding the website: Design <ul><li>Content development </li></ul><ul><li>Content audit </li></ul><ul><li>Copy deck synchronized with IA </li></ul><ul><li>Focus content on messaging </li></ul><ul><li>Next step focus </li></ul>
  21. 21. Rebuilding the website: Develop <ul><li>Open-source Drupal content management system (CMS) </li></ul><ul><li>Develop CMS templates in English and French </li></ul><ul><li>Design and build product, restaurant and recipes databases </li></ul><ul><li>Populate English and French content, 1800 products, 200 restaurants, 80 recipes </li></ul><ul><li>Website optimization </li></ul>
  22. 22. Rebuilding the website: Develop
  23. 23. Rebuilding the website: Deploy <ul><li>Review </li></ul><ul><li>Testing and quality assurance in English and French </li></ul><ul><li>Modify website </li></ul><ul><li>Website goes live – proposed dates: </li></ul><ul><ul><li>February 2 </li></ul></ul><ul><ul><li>February 28 </li></ul></ul><ul><ul><li>March 26 </li></ul></ul><ul><ul><li>April 20 </li></ul></ul><ul><ul><li>May 12 </li></ul></ul><ul><ul><li>LIVE: May 28 </li></ul></ul>
  24. 24. Project management <ul><li>Communications throughout: </li></ul><ul><ul><li>Weekly scheduled meetings </li></ul></ul><ul><ul><li>Weekly status updates </li></ul></ul><ul><ul><li>Email and phone calls throughout as needed </li></ul></ul><ul><li>Face-to-face meetings </li></ul><ul><li>Project leads on both sides </li></ul>
  25. 25. Lessons learned <ul><li>Challenges: </li></ul><ul><ul><li>Internal human resources and capacity – competing priorities and no one person in charge </li></ul></ul><ul><ul><li>Committed internal team and stakeholders – many people with many ideas </li></ul></ul><ul><ul><li>Amount of information/content – lots of information and two languages </li></ul></ul><ul><ul><li>Health Check team and consultants in different cities – limited face-to-face interaction </li></ul></ul><ul><li>  </li></ul><ul><li>Opportunities: </li></ul><ul><ul><li>Building on a strong brand </li></ul></ul><ul><ul><li>Committed internal team and stakeholders provided input throughout </li></ul></ul><ul><ul><li>Amount of information/content </li></ul></ul><ul><ul><li>Good fit with consultants, flexible team, and open communications </li></ul></ul>
  26. 26. Lessons learned: Define <ul><li>Planning stage </li></ul><ul><li>Website audit and user survey </li></ul><ul><li>Website strategy and planning </li></ul><ul><li>Senior management buy-in </li></ul><ul><li>Other stakeholder buy-in </li></ul>
  27. 27. Lessons learned: Design <ul><li>Information architecture (IA) </li></ul><ul><ul><li>Theory versus practice </li></ul></ul><ul><li>Interface design </li></ul><ul><ul><li>Design supports content </li></ul></ul><ul><li>Messaging and content </li></ul><ul><ul><li>Content </li></ul></ul><ul><ul><li>Messaging and language </li></ul></ul><ul><ul><li>Bilingual site </li></ul></ul><ul><li>Interactivity </li></ul><ul><ul><li>What is realistic </li></ul></ul>
  28. 28. Lessons learned: Develop <ul><li>Site production </li></ul><ul><ul><li>Database design </li></ul></ul><ul><ul><li>Data entry </li></ul></ul><ul><li>Content population </li></ul><ul><ul><li>English and French </li></ul></ul><ul><li>Review, testing, quality assurance </li></ul><ul><ul><li>Team review </li></ul></ul>
  29. 29. Lessons learned: Project management <ul><li>Communications and flexibility </li></ul><ul><li>Expertise of cross-functional team </li></ul><ul><li>Timelines </li></ul><ul><li>Tracking decisions </li></ul><ul><li>Training </li></ul><ul><li>“ It is hard enough to remember my opinions, without also remembering my reasons for them.” </li></ul><ul><li>– Friedrich Nietzsche </li></ul>
  30. 30. Conclusion <ul><li>Top ten lessons learned </li></ul><ul><ul><li>Everybody has an opinion. </li></ul></ul><ul><ul><li>Assign a point person and record and track all decisions. </li></ul></ul><ul><ul><li>Web architecture differs in concept and reality. </li></ul></ul><ul><ul><li>Review as a group. Review again. </li></ul></ul><ul><ul><li>Nobody needs to know everything, but somebody needs to know something. </li></ul></ul><ul><ul><li>Resist the urge to say everything on every page. </li></ul></ul><ul><ul><li>Nobody knows your organization’s audiences and messages like you do. </li></ul></ul><ul><ul><li>Nobody knows website development like website developers. </li></ul></ul><ul><ul><li>However long you think it will take – double it and add 10%. </li></ul></ul><ul><ul><li>What’s in it for them? </li></ul></ul>