WEBSITE REDESIGN case study

Historica Canada

DETAILS

• Client: Historica Canada

• Role: UX research, strategy and design

• Project: Redesign a 6 year old website and its registration system to boost conversion and generate excitement for the nationally renowned face to face youth camp program 'Encounters With Canada.'

OVERVIEW

Encounters With Canada (EWC) is a fun, bilingual, history-based face to face youth camp for Canadian teens that takes place in Ottawa. The client's goal was to address flagging online registrations by updating the website and improving known usability issues, particularly with the registration system (a related project not covered here).

UX STRATEGY

An assessment of the old site helped point to a winning strategy for the redesign.

The old site tried to satisfy four target audiences equally (see illustration) and in the process lost focus and excitement. All the aspects of the program that teens would be most interested in(adventure, social scene) were buried under audience-targeted navigation.

I decided that a winning strategy for the new site would need be to make teens the primary target audience, above all others.

The old website loses vigor in several ways - for example, by using the main navigation to direct audience types.

But does a website that targets teens need to be so very different?

Yes it does!

I did some online research (see summary illustration, left) and discovered that teens do not browse online information the same way adults do. Teen brains are different from adult brains and teens have different life goals and priorities, all of which comes into play if you want teens to focus on anything.

TOP IMPLICATION

We needed to make the teen perspective the #1 defining factor in the redesign.

See the full strategy doc presented to the client.

Next, I mapped out which audiences needed what content, and based on what I had learned about teen priorities noted what content would be of most interest to teens.

This content would be given highest visual and location priority in the new design.

COMPETITIVE ANALYSIS

Using competitors to benchmark / compare

A review and comparision of other federally subsidized youth experience websites (Katimavik, Experiences Canada) helped me to reject several design ideas based on what I now knew about teens and teen browsing behaviour. The sites where I found most inspiration were actually youth summer camp websites, and sites promoting annual youth events.

DESIGN

Translating a "teen-centric" strategy into design

I used all that preliminary research to annotate my wireframes and inform my design:

• Highlight career theme weeks with illustrated links, right on the home page ➔ satisfies the teen need to explore the world of adults

• Answer top program-related questions right on the home page and in the navigation: Who is this for? Where is it? How long is it? Will I like it / Is it for me? What will I get out of it? ➔ quells teens' natural impatience

• Use less text, more visuals - on all top navigation landing pages ➔ teens skip past a lot of text, tend to have lower reading skill (Grade 6 or lower)

• Use a generous font size, with good contrast and easy to read ➔ teens prefer user interfaces with high usability

• Keep the writing tone casual, youthful, inviting ➔ answers teen question: is this for me?

• Make sure photos are never extraneous, always from EWC photographs, and must communicate genuine EWC experience and values ➔ teens gather a lot of information from visuals and value content relating to their peer group

• Handle graphics in a way that ensures quick load times ➔ teen are much more impatient than adults

Wireframes

See all proposed changes to site architecture, navigation, and content proposed to the client

Key teen questions, noted in red, are addressed within each page's features and components.

Compare: Home page, old vs. new

The old home page uses a photo carousel at the top. The new one features a single stunning photo (varies by season) that pans slightly - giving a sense of live action. The navigation answers questions of top interest to teens versus directing traffic by audience type like the old site.

UI design styles include high usability and accessibility considerations. Selected text colours and sizes exceed WCAG minimum standards for accessibility, and web fonts were chosen for performance, in type styles that emphasize legibility.

All main screens respect the teen preference for less text, more visuals, and are upbeat and engaging. All perform equally well in desktop and mobile.

Secondary screens contain information directed to adult audiences. They have more text, fewer images, but are still appealing.

TEENS AND CELL PHONES

Not all teens have desktop computers at home, but most teens have cell phones - so it was important that the site be fully responsive. It needed to look inviting on any device.

Some teens can only access the internet outside of school, where the desktop computers are, but most teens in Canada have cell phones.

TESTING & VALIDATION

EARLY DESIGN FEEDBACK

In early feedback, teens generally found the site engaging and inviting, dropping comments like "Oh, I'd go there, for sure," and "That looks so fun." We uncovered minor problems with some elements that were easy to fix. For example:

PROBLEM: Some teens said they wouldn't push the "Register Now" button for fear that they might suddenly find themselves locked into a payment or other process they couldn't get out of.

FIX: To address this, we changed the button label to "How To Register" instead, which sounds more instructional than transactional, and less intimidating.

A button leading to registration now persists across all screens to encourage conversion - but teens needed to know that they could back out of the registration process if it was too overwhelming.

CO-VID 19 PROBLEMS

Further user testing was planned but in mid-January 2021 Historica Canada shut down the Encounters With Canada program owing to financial pressures caused by the pandemic. All plans for additional user testing and implementation of this website project were shelved indefinitely.

It's worth noting that up until this point the client had been very enthusiastic about the new site design, and preliminary feedback from all audience groups had been extremely positive.