A Tale of Two Websites: Taking Your Website from Good (Enough) to Great Health Check, Heart and Stroke Foundation

2

What is Health Check?

• Food information program of the Heart and Stroke Foundation

• In grocery stores and restaurants

• Products and menu items must meet nutrient criteria – Developed by registered dietitians based on recommendations in Canada’s Food Guide

• Helps Canadians identify healthy choices

• Encourages industry to offer healthier choices

• Voluntary, not-for-profit

• Over 1800 products, 200 brands, 75 food categories in grocery stores

• Over 800 restaurant outlets

• 85% consumer awareness

3

Where we started

• Site launched in 1998 with program

• Information for various audiences but mostly focused on healthy eating information for general public

• Updates – content and some redesign, but no major investments

• Lack of strategic plan and process

• Design and content were out of date

• Competitive healthy eating sites

4

Who is visiting?

• 10,000 monthly visitors

• Did not have a sense of who the visitors were

• Traffic was not increasing

• 20% return rate

• Users were not coming back

5

Who do we want to talk to?

• Canadians

• Food industry – Grocery manufacturers

– Restaurants

– Retailers

• Health professionals

• Media

• Workplaces

6

The website rebuild

XT+M engaged in Summer 2008

Phase One:

GATHERING INTELLIGENCE

7

Gathering intelligence: Website audit

• What we wanted to know:– Identify strengths and weaknesses

– Review Health Check competitors

– Develop recommendations for a stronger site

8

Gathering intelligence: Website audit

Look and feel Usability andfunctionality

Communicationand integration

Websites reviewed

Criteria

9

Website audit: Design

Images below fold

Scroll to access product info

Layout unbalancedCluttered & Crowded

Text heavyScreen fold

Weak call-to-actions

Link to same content

Crucial real estate

Recipe buried

10

Website audit: Usability and functionality

• Develop alternative search methods

• Create own web experience– No customized features

– Enable customization: online profiles, web community: forums and chats, online newsletter and updates, features: RSS feeds

• Create push and pull – Static website

– Through interactive elements

– Showcase content

– Sincere interest in the visitor

“Let us make a special effort to stop communicating with each other, so we can have some conversation” – Miss Manners

11

Website audit: Communication and integration

• Messaging clear and consistent– Messaging evident but diluted by design

– Fails to direct user to next steps

• Interactive tools utilized– Users are not a participant on site

– Only alternative method of content delivery is PDFs

• Perception of currency and relevancy– Dated and static look and feel

• Delivery of content – next steps– Lacks cross-linking

– Related calls-to-action missing

– No direction on how to put knowledge to use

12

User survey

• October 2008

• 1090 responses: 90% were new visitors

• Demographics– Male 12%/Female 88% and 50% had families

– 75% English – 25% French

• User experience:– Information – healthy recipes, about Health Check, nutrition information

– Functionality – tips, tools, newsletters, ask an expert

• Results:– Loyal , active and invested audience

– Trusted brand

– Audience wants community

– Looking for push-pull interactivity

13

REBUILDING THE SITEDefine | Design | Develop | Deploy

Rebuilding the website

14

From this

15

To this

16

Rebuilding the website: Define

• Overall goal: Destination for healthy eating information

• Overall strategy: Develop a user-friendly, interactive experience for visitors

• Approach:– Re-launch and strengthen online brand

– Create a robust online information architecture that supports growth (phased-in approach)

– Create an infrastructure that supports interactivity and viral sharing

– Focus messaging and content on call to actions and next steps – engage user

• Plan:– Develop process, work plan, timeline and assign responsibilities

“A goal without a plan is just a wish” – Antoine de Saint-Exupery

17

Rebuilding the website: Strategy

18

Rebuilding the website: Design

Information Architecture

19

Rebuilding the website: Design

Interface design

20

Rebuilding the website: Design

Content development

• Content audit

• Copy deck synchronized with IA

• Focus content on messaging

• Next step focus

21

Rebuilding the website: Develop

• Open-source Drupal content management system (CMS)

• Develop CMS templates in English and French

• Design and build product, restaurant and recipes databases

• Populate English and French content, 1800 products, 200 restaurants, 80 recipes

• Website optimization

22

Rebuilding the website: Develop

23

Rebuilding the website: Deploy

• Review

• Testing and quality assurance in English and French

• Modify website

• Website goes live – proposed dates:– February 2

– February 28

– March 26

– April 20

– May 12

LIVE: May 28

24

Project management

• Communications throughout:– Weekly scheduled meetings

– Weekly status updates

– Email and phone calls throughout as needed

• Face-to-face meetings

• Project leads on both sides

25

Lessons learned

• Challenges:– Internal human resources and capacity – competing priorities and no one person in charge

– Committed internal team and stakeholders – many people with many ideas

– Amount of information/content – lots of information and two languages

– Health Check team and consultants in different cities – limited face-to-face interaction

• Opportunities:– Building on a strong brand

– Committed internal team and stakeholders provided input throughout

– Amount of information/content

– Good fit with consultants, flexible team, and open communications

26

Lessons learned: Define

• Planning stage

• Website audit and user survey

• Website strategy and planning

• Senior management buy-in

• Other stakeholder buy-in

27

Lessons learned: Design

• Information architecture (IA)– Theory versus practice

• Interface design– Design supports content

• Messaging and content– Content

– Messaging and language

– Bilingual site

• Interactivity– What is realistic

28

Lessons learned: Develop

• Site production– Database design

– Data entry

• Content population – English and French

• Review, testing, quality assurance– Team review

29

Lessons learned: Project management

• Communications and flexibility

• Expertise of cross-functional team

• Timelines

• Tracking decisions

• Training

“It is hard enough to remember my opinions, without also remembering my reasons for them.”

– Friedrich Nietzsche

30

Conclusion

• Top ten lessons learned

1. Everybody has an opinion.

2. Assign a point person and record and track all decisions.

3. Web architecture differs in concept and reality.

4. Review as a group. Review again.

5. Nobody needs to know everything, but somebody needs to know something.

6. Resist the urge to say everything on every page.

7. Nobody knows your organization’s audiences and messages like you do.

8. Nobody knows website development like website developers.

9. However long you think it will take – double it and add 10%.

10. What’s in it for them?