L’Express Toronto

UX + UI: redesign for Toronto’s leading French-language website

god 6.7
the new brief

Canada’s leading French language newspaper wants to upgrade its web presence and transition from print to digital

L’Express has outgrown both the design and functinality of their current website.

They approached Human Made to do the build, and Human Made asked me to do the design.

What do you want your new website to do?

  • To help Ontarians live in French. L’Express is a community of Francophones and Francophiles offering news, stories, ideas and activities.
  • New areas of content that are easily curated and the information is easily found: News, Events, Jobs, Business Directory, Classifieds, Schools Directory
  • Curated content brings attention information important to the user
  • Ads from local businesses allows users to find goods and services in French
  • Mobile-friendly (current site is not)
  • A modern content management system

From the brief…

“We want “to help Ontarians live in French. L’Express is a community of francophone and Francophiles offering news, stories, ideas and activities.”

the solution
ux
research
testing
branding
ui

Nous parlons français avec le Canada et le monde

A ‘traditional’ UX + UI project

We started at the beginning of the loop, and went through Discovery, Planning, Design, Development & testing, Iteration, and Building

Step 1: Discovery

To start, we ran a 3 day discovery workshop to consider the following issues:

  • What is the overall vision
  • Why will people want to use the site
  • What are the current issues?
  • What do the analytics say?
  • Who are the intended (and actual) audience?
  • What are the project constraints?
  • What is the path of future growth?
  • What are the functions needed on the site that don’t yet exist?
  • How does the initial plan break down into workable, agile sprints/phases?
  • What’s the current content of the site?
  • What’s the migration plan?
  • What is the current technology of the site?
  • What bespoke functionality does the current site have?
  • What are the admin/user roles in the new site, and who will fill those roles?
  • Who are your competitors, and how well do they address the same concerns as your (planned) website?
  • How will ads work?
  • Do you have visual guidelines/branding for your new site?

Step 2: Design development and planning

Competitors, complimentary, and related sites

We researched other sites in lexpress’ space

lexpress competitor mobiles

Analysis

We established a baseline user population based on analytics of the current site

  • The users came from around the world, and a great proportion of them were from French-speaking Europe, with a significant population in Francophone Africa and the Middle East.
  • We established two types of French speakers: Native speakers, and “Francophones” – speakers of French as a second language.

Step 3: Definition

UX personas and user journeys

We created a population of ten user personas based on the analytics

Idealised user journeys were imagined and added to the persona document

Information architecture / Sitemap

Initial sitemap was created based on the user journeys

lexpress first tree

Step 4: User testing

We used treejack from optimal workshop to test our initial IA.

Treejack is an “Information Architecture Validation Software” package which tests user’s ability to find information in an architecture by posing simple questions, and requesting that a user find where they think the answer will be in the IA.

We tested with a population of volunteer users, most of whom were current lexpress website users.

Treejack ‘question’ screen

This is what a user-tester sees in treejack. The user is asked a question at the top, and then has to navigate through the hierarchy by clicking ‘menu items’.

tj 3

Treejack ‘found it here’

When a user-tester thinks they have found the answer to the question in the tree, they click “I’d find it here”

tj 4

Treejack results

The results of a treejack test tell us how well (or poorly) our architecture performed in the real world of users.

In the screen below, the centre circle’s colour represents how well this task was accomplished. Green is good, red is not. In this case, we have some room for improvement!

lexpress tree

Step 5: IA ‘finalisation’ and wireframes

Using the results of the treejack study, and the

Treejack ‘question’ screen

This is what a user-tester sees in treejack. The user is asked a question at the top, and then has to navigate through the hierarchy by clicking ‘menu items’.

tj 3

Treejack ‘found it here’

When a user-tester thinks they have found the answer to the question in the tree, they click “I’d find it here”

tj 4

Treejack results

The results of a treejack test tell us how well (or poorly) our architecture performed in the real world of users.

In the screen below, the centre circle’s colour represents how well this task was accomplished. Green is good, red is not. In this case, we have some room for improvement!

lexpress tree

Wireframes

Putting it all together, we took the essential page elements, the IA, and our user analysis into a set of wireframes.

Step 6: User Interface design and branding

Site design adapted from the print edition

We took the l’express print edition as a baseline for developing a new web brand, as it had moved with the times more than the website.

lexpress print edition

Mobile-first design

summing it up

C’est tres bien!

“Thanks for your help. You made a great effort in clarifying our initial site structure and goals.”

Eric Mazare – L’Express

Let’s talk





Start typing and press Enter to search