Jun 5

Jun 5 The Globe And Mail's TasteGraph

TasteGraph is an interactive data visualization tool for The Globe and Mail, Canada's largest national daily newspaper. The Globe and Mail is undertaking a significant move towards using data analytics tools. TasteGraph enables The Globe and Mail to better understand the psychographic profiles of their audiences, gain holistic knowledge about their readership, see the impact of certain taste correlations, and use these insights to inform advertising strategies.

This is possible thanks to an intuitive User Experience, a clean interface design and narrative Data Visualization tactics and techniques.

PROBLEM :

The Globe and Mail is seeking an interactive visualization tool that reveals and explores the related interests and consumer patterns of their audiences. However, we are exploring a corpus of audience tastes, which results from the analysis of The Globe and Mail media storage, and massive amount of ad data. The challenge is not only to show an extensive list of taste affinities relative to advertisement audiences, but also to visually represent these profiles with a compelling storytelling tool.

GOALS:

1. Illustrate, evaluate and give an overview of taste performance measures for any given group of readers.

2. Compare taste affinities between any two selected groups.

3. Show deeper insights about the affinities of any selected taste concerning other tastes.

TEAM:

1 x Project Manager (Principal Investigator)
3 x Data Scientists
2 x Developers
2 x Senior UX / UI Designer (Myself being one of them)
1 x Design Intern

TOOLS USED:

Adobe XD
Adobe Illustrator / Photoshop
HTML, CSS, JavaScript
ReactJS
Tableau
Focus Group : Whiteboarding
User Testing (Observation + In-dept interviews)

PROCESS :

1. RESEARCH & DISCOVERY

During a research internship at The Globe and Mail, I had access to interview end-users of this solution. These users are mainly the advertisement sales team at The Globe and Mail. I first used an affinity map to group similar observations together to extract interesting patterns.

Marketing Team (Focus Group) : Whiteborad

2. EMPATHIZE / DEFINE

Most of the insights collected during the whiteboarding sessions were mainly helpful for the data scientist team to define how to congregate the big data set at hand and clean it. Although this didn’t inform the interface a lot, it definitely helped me and the team draft a narrative journey starting from the overall data to the targeted taste (which is indicative of a group of people who tend to like to the same thing)

3. CREATE

I outlined the information architecture below then I proposed the system architecture to use it as a back bone to my prototypes and make sure the UX userflow stays simple and seamless.

> Paper Protoype:

> UI library / Icons / Illustrations / Brand / Colors / Themes:

> UX Userflow

4. TEST / VALIDATE

We recruited 12 marketing employees from The Globe And Mail and asked them to go through the whole application and give their feedback.

Many minor comments were valid and some were due to some bugs so everything was noted and corrected.

One major key finding was that two of the marketing employees were colour blind and pointed out that the black and red cirlces look the same to them. To make the chart more accessible, we have to immidiated go back to literature, research and modify accordingly. The best solution for that was to create a pattern instead of a color.

5. DEVELOP

I constantly followed up with the data scientists and developers team to make sure the prototype built stays true to the design.

I jumped in to help with coding using HTML, CSS as I have experience in front-end development and although I am also familiar with JavaScript it was the first time I use AngularJS and it was gratifying to see the design and chart react to my edits.