Co-op Project • 5 minute read

Project Type
Co-op Term,
Financial Accountability Office of Ontario
Project Link
Team
1 Project Manager, 2 Designers, 2 Developers
Role
UX Design, Web Development and Design
Timeline
1 month, March 2022
Tools
HTML, CSS, Javascript, Figma
OVERVIEW
In March of my Winter internship at the FAO, I collaborated with the Financial team to help design a visual for their April 21, 2022 report, The Impact of Provincial Spending and Revenue Collection on Ontario Families. Typically for all of the FAO reports, matching infographics containing data or graphs from the report are created to be posted on social media. I was tasked with creating a visual that could be more interactive and personalized for users. Working closely with the lead graphic designer and Financial team, I designed and programmed the Distribution Illustrator, an interactive graph containing data from the mentioned report.
PROBLEM

How often do users scroll through the whole report or engage in infographic social media links? How can we increase user engagement?

SOLUTION

Distribution Illustrator: An interactive graph that allows users to see Ontarian family contributions to and benefits from the provincial government's spending during the 2019-20 year.

The Distribution Illustrator has all the data in one place, the user just needs to select a category and the graph will change accordingly to display the information.

Find out how we got here 👇

DESIGN PROCESS
DEFINE
Problem
Target Audience
Goals
User Personas
IDEATE
Ft. Brainstorming
Comp. Analysis
User Flow
DESIGN
Style Guide
Iterations
TESTING
User Feedback
Final Flow
RESULTS
‍Key Takeaways
Next Steps
DEFINE

Problem

Lengthy Reports
With the amount of important information that the FAO reports cover, they tend to be on the longer side.
User Engagement
Because of said lengthy reports, it can be hard to maintain user engagement and retention as one scrolls through the report. It's common for users to just skim through the page.

Target Audience

Ontarian families and media outlets. With the topics that the FAO covers, it's important for consumers, especially media outlets, to understand the content from the report and what's being analyzed specifically. Some users may not have the time to scroll through the whole report to understand the data and what it is covering.

Goals

data icon
Goal 1
Have all data in one place without having to go through different sources to get specific information.
accessibility icon
Goal 2
Accessibility! Data should be accessible to ALL Ontario citizens. This means flexibility across different contexts (i.e. browsers and devices).
IDEATE

Feature Brainstorming

As directed by the communications lead, the interactive graph was to be created and it needed to have these main features:
  1. The ability to select and display the different contribution and benefits categories.
  2. A responsive graph; Whatever the user selected should be reflected in the graph.
  3. An overall visual appealing and easy to use product; It should be easy for the user to understand how the graph works and how to use it.
PROTOTYPE

Style Guide

Sticking with the brand colours, we chose to go with FAO blue, pink, and green for the bars. This provides colour contrast so it's easy to depict between the different categories.

Iterations

Once the initial features were decided and implemented, the Distribution Illustrator went through a number of iterations.

This is what one of the first iterations looked like. The main things that were pointed out to change by the lead graphic designer and I were the colours, font, and size of the green markers.
On mobile, the graph looked squished so some of the text overlapped, the markers were too large, and the use of the darker blue wasn't eye catching. The graph was also smaller compared to the rest of the page on desktop.

Here, in a later mockup we changed the dark blue to pink and tested out a different version of the green marker. The colour change made the graph overall more eye catching and bright. We also colour coded the Benefits and Taxes text so it's clear for users what the data they're looking at is.
The graph legend was also placed in the graph originally which did look cramped.
TESTING

User Feedback

After these intial prototypes and we got approval from the communications lead, we began user testing. Members from the Communications and Financial teams were asked to test the illustrator and provide feedback regarding any glitches and how well it fulfilled user needs.
Key Findings
  1. Some features need to be simplified; The user is able to select multiple options but that seemed to be too complex.
  2. The marker is fine as a circle, the size just needs to be adjusted.
  3. Need to keep accessibility standards in mind. Some of the text was too small or cramped on mobile versions.

Final Features

Responsive Graph
The user can select any benefit or contribution option and the graph will change and display data according to their choice. Originally the user was able to select multiple options but this was simplified to only one option at a time.

The user is also able to hover over the bars and the marker to get specific numbers.
Dropdown Menu
With simplifying the select feature, the original select menu was replaced with a dropdown menu.
Reset Button
We also decided to add a “reset” button to the graph as the user would have to keep refreshing the page to see the original graph before it was implemented.
For accessibility purposes, graphical descriptions were also added in case the illustrator couldn't be used or displayed.
RESULTS

Final Product

The graph was able to be released on time, with all the key features!

Check out the demo 👇

View the graph

Key Takeaways

  1. Importance of an accessible design: Not all users have access to the same browsers and devices, or something may be limiting them to have the same experience as others. It's importance to keep these things in mind when designing to ensure that a product is accessible to all users.
  2. Importance of user feedback and testing: The project helped me to understand the importance of user feedback and testing; what I think may look and work well may not be the case for general users and in usability.
  3. Narrowing down ideas and features:  I was not only designing the overall layout and appearance of the graph, I was also implementing the proposed features. Being able to quickly and properly adjust features based on feedback and user testing was an important skill; I had to decide what was and what wasn’t possible in the time given.

Next Steps

  1. Using this style of infographic for future reports: Figuring out ways data in the graph can be changed to be reused in other reports.
  2. Improving features and accessibility so it can reach a bigger audience: With the short timeline given, there are definitely things that could be revised for a more accessible and improved user experience.

Let's get in touch!

Thanks for checking out my page! If you'd like to connect or just share some book recs, my inbox is always open.
© 2024 Therina Castor