Fraser Institute

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 two-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.

• Brokedown key insights into chunks that defined aspects of the users/target audience
• Conducted user interviews and testing of solutions
• Workshops
• Comparative analysis - ex. Heritage.org

The Vision

After our discovery workshop, user interviews and research, we felt we had a strong grasp on what we needed to design in order to achieve success. Our objective was to create a fully-responsive, interactive site that allowed 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 different visualizations and the data table download page. Now, individuals can discover what data is important and 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 those 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 easily-identifiable areas where the UI could be improved. For example, navigation for the data visualizations were frequently found underneath graphs/maps, which made it difficult customize the map without having to scroll often. Maps also had no separation between the interactive area on the white HTML page background — leading several users to zoom into a 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 rough ideas before reviewing them with the team. The sessions generally involved a few developers, a project manager and myself, in order to gain helpful feedback from different perspectives.
• After several whiteboarding sessions, detailed hand sketches were created to present the overall concept to the client and collect their feedback. This approach allowed us to convey our vision for the site without getting bogged down in the design details. Instead, we focused on the objective, major components on the page and potential functionality.

Interactive Prototypes

Once the sketches were approved, my team 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 real users. This exercise helped both the client and our team understand how everything was going to work together and identify any sticking points in the user experience. It was also helpful in getting meaningful feedback from users on whether their needs were being met with our design. Originally, our map was contained within a max-width box on the page, but after user feedback, we updated the design to be a full-screen map. This change stemmed from several users' requests to make the experience feel more immersive. 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 had used in their PDF reports and annuals.
• Style tiles were employed in order to convey 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 create a grounded "frame" by anchoring the content on the page and gave our team more flexibility with what elements could be used on the map. By utilizing the darker background, we were able to highlight specific pieces of content using a white box container. This proved to be very successful in drawing the user's focus where we wanted it on a 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-fleshed out prototype before we started development. This endeavour was successful in collecting feedback for any last design tweaks.

The Solution

• A 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 allowed users to share specific data visualizations of their choosing through email, Facebook, or Twitter
• Utilization of colour 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