Background & Briefing
| Many advertisers, business owners and policy makers alike are unaware of how consumer behavior has changed. The Consumer Barometer is a global research project Google commenced several years ago, to provide insight into how consumers use online and offline media in their purchase process. In 2012, Google approached CLEVER°FRANKE to redesign the Consumer Barometer and enhance it to provide deeper insights into this process. |
Strategy
| During several interactive sessions with the Google team we formulated ultimate goals and starting principles for the new Consumer Barometer. The aim was to make complex research easier to understand. Google shares results with it’s client community and further establishes it’s position as thought leader in the field of online channel research. Google challenged us to push boundaries by setting a new benchmark for making complex research easy to understand. | From a user perspective we aimed to provide actionable insights in order to make better decisions. By inspiring the user with a rich and interactive experience, one is more prone to explore the data in further detail. |
Concept
| After the goals and principles for the new Consumer Barometer were set, we started to write down our initial ideas. The final concept, the ‘datasphere’, draws it’s analogy from the galaxies and stars. All the 1.7 million data points are individual nodes that can be connected with the right links. The sphere consists of three different environments for users to explore the immense dataset, each environment build specifically for different target audience groups. One environment focuses on people who want to be guided through the dataset. Within this section of the website, we’ve created four different stories that can be found in the data. |
The second environment, the data map, was designed to give users the opportunity to see the depth and parameters of the research data in one overview. The user can explore different routes and plot the data accordingly. The final environment enables the user to quickly plot the data in a graph tool. Users can make quick comparisons in the data for very specific queries and download their findings in image or dataset. |
User experience & user testing
| Because of the tight schedule and experimental nature of the project, we started out creating wireframes. We focussed on a smooth and intuitive navigation. Mouse movement is tracked by the navigational structure so that the user is literally drawn to various elements in the website. We quickly prototyped our first concepts in order to user test the ideas and get feedback. | Understanding the target audience is key to the success of any project. We presented our initial concept and designs to a panel of ten specialists in the field of advertising, marketing and business. The results proved invaluable for the final design. We refined this design and the visualizations and eliminated elements that proved not to be useful. |
Design and visualization
| Google challenged us to set a new benchmark and that’s what we’ve done. Our main goal was to offer an experience in which the user really wants to explore and dive into the Consumer Barometer. At the same time we also wanted the data to be presented as clear as possible. We did this by putting data in meaningful contexts. This provided clear insights that were further enhanced by adding additional information and annotating the data. At any point in the website the user is given direct response when interacting with data and results are shown instantly. By adding semantically correct category definitions the user not only ‘sees’ the results but can read the outcome in a context as well. For example: “People who are [age range] with [income] purchase [online only]". |
Technical development
| Agile development Through short sprints in the design and development cycle we were able to quickly prototype and see whether choices made were feasible. Since the frontend was strongly coupled with the design process, we later divided the frontend storyline into smaller (shorter) chunks, to be able to work on every app/visualization with varying combinations of requirements, deployment-, design-, and time-constraints. Google App Engine The project was built on Google's App Engine technology. This platform allows web-applications to be deployed to serve as many users of the application as possible, as long as there is enough bandwidth and processor power. The Google App engine does just that; it automatically copies the web-application to multiple computers that share the demand. When the demand goes up or down, the engine scales accordingly. Big data The data for the project contains anonymous information about online and offline purchases from 43 different countries. Together with aggregated data about continents, products and industries, this contributes to a dataset of over 1,7 million cached records. The cached data records were retrieved or derived from a larger data set through a series of database queries. This process took four separate databases / computers a combined 72 hours to complete. |
Canvas HTML5 browsers allow for hardware accelerated graphics through an element called 'Canvas'. Its speed is unprecedented compared to for example Java Applets and Adobe Flash, not to mention the portability across platforms and devices. D3.js We experimented with D3 to built our visualizations with a unique template system (one graph programmed, four graphs visualized). |
Outcome
