You are here

What They Needed

Some Background on Fraser Institute
Back in the late 70s and early 80s the fiscal world was changing. There was an adjustment to free market economics underway. Economists Milton and Rose D. Friedman wrote Free to Choose. The book advocated free market principles and the free movement of capital. This was the genesis of the economic thinktank Fraser Institute.

The mission of the Fraser Institute is to measure and communicate how government policies affect the lives of Canadians. Their data-rich research is published and available to the public through a variety of channels. One of the many reports released by the Fraser Institute is the Economic Freedom of the World Annual Report.

The Fraser Institute had a wealth of information about the state of the world in regards to economic freedom. Typically this information was available in a PDF document. Fraser Institute was seeing other organization presenting their research, or similar data in more modern and engaging ways. Fraser Institute wanted a more interactive way to share this information with their target audience. They wanted users to be able visualize the rich data they had, and then be able to manipulate and use it.

They needed a leading-edge solution, and it had to be highly focused on design, usability and user experience. Fraser Institute needed a digital experience that allowed users to drill down to a specific country and then filter the data by several categories. It was key that the Economic Freedom Map was easy to share.

How We Helped

ImageX was asked to create a digital experience that clearly communicated the information-rich content of the Economic Freedom Ranking report. The challenge was finding and integrating a technology that would accommodate the visualization of dynamic data. The users would also be able to view the data in several different ways. In order to delivery a product like this ImageX required flexible, but powerful graphical charting technology. We selected D3 which is a JavaScript library for visualizing data. D3 allowed us create rich interactive SVG bar charts and graphs with smooth transitions and interaction.

The Data Views
The default view when you first visit the Economic Freedom Map is Map view of the world. The top ten ‘most free’ countries are ranked in a list on the left side of the screen. Users can drill down to a specific country by using the search bar or by clicking on the map. The ranking for that specific country is displayed in detail: rank, score and categories.

The next view is the Graph view. This view allows users visualize the data using a graph, or bar chart, and to filter that data by several categories. Users can also compare up to 5 countries at a time.

The map view had an additional layer of functionality that was customized to allow users to share their graph. This was critical because sharing was a ‘must have’ requirement for this project. When the user clicks on the ‘Share’ icon at the top they have the options to share on Facebook, Twitter and email. This was particularly challenging because we needed to create a ‘live snapshot’ of this data so that the user could share.

When the user chooses their method of sharing we change stylesheet in the background. This resizes the elements appropriately and generates an image and attaches the image metadata for sharing.

The final view is the Dataset and this section of the Economic Freedom map allows users to download the full data set or any filtered views of the data. The download can also include the data for the sub-indicators for each of the main indicators.

The Design
The Economic Freedom map needed to be as visually compelling and support the required functionality. The design process started with reviewing a key competitor’s site and several sites with similar types of content. We identified the elements that work well and the ones that we didn’t think worked. The next step was creating whiteboard sketches to work on details like user interactions with the functionality.

When the overall design concept was solidified interactive wireframes were developed. This stage was used to communicated the idea and help the client understand how the solution was going to work. At this stage the concept has been worked out and the functionality, form and user flow are clearly defined.

The color scheme was carried over from the printed report and used with the design elements on the map itself and even in the treatment of the data. The map was set upon a dark background which helped to form the page and highlight the areas that are interactive and clickable.

The Results

The Economic Freedom Report is now a truly engaging digital experience that is responsive and dynamic. Users can manipulate the data, choose how they want to visualize it and then use that information however they like, including sharing on social media or by email.

The user experience has been greatly improved with the new interactive map. The daily pageviews increased +1,300%. Bounce rate decreased 13%, and the average time spent on the page increased 96%. The user feedback and testimonials has been outstanding.

“This is great and it will help me as a teaching aid in my economic freedom courses.”
- Professor B.D., Warsaw.

“This is so much better. Excellent job. I especially like the built-in timeline.”
- J.K., Bosnai.

“The interactive world map with customized graphing and data downloads will make it significantly easier for people to analyze and share economic freedom data, and it works on smartphone, tablet or desktop computer.”
- L.W., Canada.

Related Case Studies

International Partnership for Microbicides
Baptist Housing