Case Study

Fraser Institute

Sharing economic freedom data with the world.

The Fraser Institute's (FI) mission is to "improve the quality of life for Canadians, their families, and future generations by studying, measuring, and broadly communicating the effects of government policies, entrepreneurship, and choice on their well-being."


My Role

I led the redesign of The Fraser Institute's "Economic Freedom" site from concept to completion from the fall of 2016 until early 2017. Throughout the project, I created all concepts and designs, presented deliverables, provided UX/UI consultation, conducted discovery exercises, and worked closely with the team during the development process.

Agency

ImageX

Team

  • Project Manager
  • Development Lead
  • 3-5 Developers

The Challenge

We were tasked with redesigning FI's Economic Freedom site, in order to make it more visually-engaging and easy to navigate for users while keeping the current brand found on the FI main webpage. Originally, the Economic Freedom site was all static text pages and PDF resources for graphs and heat maps — no interactivity at all. In fact, it was very difficult to view any information at all without having to dig through PDF docs or lines in an excel sheet.

Goals:

  • Find a way to visualize data across the world and over time
  • Increase user satisfaction through a more engaging experience
  • Provide a way to share specific graph visualizations easily through email and social media
  • Give users the ability to customize the data visualization and download only what they need

Constraints:

  • Visual aesthetic must stay within the brand guidelines of Fraser Institute
  • Short timeline for launch with limited development resources
  • Data visualizations had to feel like an "app" and visible inside single screen window
  • Design must be flexible enough to accommodate additional levels of categories and information for future launches over the next 2-3 years

Metrics:

  • Increase pageviews on site
  • Decrease bounce rate
  • Increase time spent on page (use of interactive graphs)

Target Audience:

  • Researcher
  • Writer
  • Journalist

The Approach

Our approach was to pull FI's data out of a standard table view and allow the user to interact with it through maps and graphs with a variety of filters.


The Discovery

We conducted a 2-day workshop exercise with the client in order to identify and elaborate on key details for the project, such as feature priority, user personas, user journeys, pain points of the old site, content management, and more. During these workshops, we worked closely with the client asking questions and getting them involved in the discovery through sketching and sticky note exercises.

  • Breakdown key insights into chunks that define aspects of the users/target audience
  • Conduct user interviews and testing of solutions
  • Workshops
  • User Interviews
  • Comparative Analysis - ex. Heritage.org

The Vision

After our discovery workshop, user interviews, and research we felt there was a strong grasp on what we needed to be designed in order to achieve success. What we wanted to create is a fully-responsive, interactive site that allows users the ability to customize the data they want to see. It was important to be able to carry through their chosen filters of specific countries and categories across the different visualizations and to the data table download page. This way, users can use the visualizations to discover what data is important to them and have them easily download that specific data set — without the need for additional filtering.






The Process

Collecting Our Findings

We collected inspiration from competitor sites and other map/graph examples by documenting the best ideas and removing the ones that weren't applicable to the Economic Freedom site. For example, one competitor site (Heritage.org) had a similar concept of an interactive map and graph for their data. However, after extensive testing, there were definitely a lot of areas where the UI could be improved. For example, often times navigation for the data visualizations were underneath the graphs/maps which made it difficult customize the map without having to scroll often. This also posed a problem for the map which had no separation between the interactive area on the white HTML page background — leading several users to zoom into the map when they are actually trying to scroll down the page itself. A key observation on competitor sites was that not one of them was responsive, which rendered the experience unusable on mobile and tablet devices.

Whiteboard Sessions and Sketches

  • Once we had all of our research and initial brainstorming notes in place, we took to the whiteboard in order to sketch out our rough concepts and reviewed with the team. The sessions generally involved a few developers, project manager and myself in order to gain helpful feedback from different perspectives.
  • After several whiteboarding sessions, detailed hand sketches were created in order to present the overall concept to the client and gain feedback. This approach allowed us to convey our vision for the site concept without getting bogged down in design details. Instead, we focused on the concept, major components on the page, and potential functionality.




Interactive Prototypes

Once the sketches were approved, we created some "proof of concept" interactive prototypes using an online software. We used these prototypes to test the overall experience flow with the internal team, the client, and with real users. This exercise helped the client and our team to understand how everything was going to work together and identify any sticking points in the user experience. It was also very helpful in getting meaningful feedback from users on if their needs were being met with our design. Originally, our map was contained within a max-width box on the page but after our user feedback, we updated the design to be a full-screen map. This change from several users requests to make the experience feel more immersive and, as it turns out, many users wanted to replicate a familiar experience to Google Maps which they used frequently.





Design Aesthetic

  • The Fraser Institute had very specific brand guidelines that needed to be adhered to. Since the color scheme was very limited, we pulled inspiration from existing branded materials that the Fraser Institute used in their PDF reports and annuals.
  • Style tiles were used in order to iterate potential design element combinations quickly, and it was decided to use the core, dark blue, brand color for the background of the site. This helped to create a grounded "frame" by anchoring the content on the page and gave our team more flexibility with what elements can be used on the map. By utilizing the darker background, we were able to highlight specific pieces of content by using a white box container. This proved to be very useful in focusing the user's attention where we wanted to on the page with a lot of content.
  • Full page designs were created by combining our wireframes with the chosen style tile. Because we were using Adobe XD for this project, we were able to design right on top of our prototypes so both the client and users could test a fully-designed prototype before we started development. This was successful in collecting feedback for any last design tweaks.









The Solution

  • Full-page interactive map and graph data visualizations utilizing the D3 javascript library
  • Playable economic freedom timeline animation
  • Responsive design to view data on mobile and tablet devices
  • Custom filter URLs that allow users to share specific data visualizations of their choosing through email, Facebook, or Twitter.
  • Utilize color identifiers to easily specify the different quartiles of economic freedom rankings throughout the site
  • Customizable dataset download filters to give users the information they want





The Impact

There were significant improvements in daily pageviews, bounce rate, and time spent on the page that exceeded our initial goals. After the site launch, the Fraser Institute was flooded with feedback from their site users around the globe to give them praise for the new site experience — within the first 3 months.

+20% Increase in Traffic 14 min Avg. Time On Site 47% Decrease in Bounce Rate

What users are saying:


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


^ Back to Top