FAO, Distribution Illustrator
Designing accessible, interactive communications at the FAO
Visual design
Interaction design
Role
Digital Graphic Design Intern
Team
2 Designers, 1 Product Manager
Timeline
January - April 2022
Tools
HTML, CSS, JavaScript
Overview
What is the Financial Accountability Office of Ontario (FAO)?
The Financial Accountability Office of Ontario, or the FAO, is a provincial organization that produces a variety of reports focused on independent analysis of Ontario's finances and trends in the provincial economy. This includes topics such as health care, taxes, budgets, education and child care, etc.
I worked as a Digital Graphics Co-op Student as part of the communications team. I mainly worked closely with the lead graphic designer and I was assigned various digital communications tasks and products to complete for publication. Typically if a report had to be released, each of these tasks had to be done within a week's timeline as reports were released every week.
During my time at the FAO, I was able to:
Increase social media and web engagement by 5%
Design 15+ AODA complaint communication products
The big project…
In March of my internship, 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.
Why?
Understanding the problem
With the amount of important information that the FAO reports cover, they tend to be on the longer side. 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.
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: Exploring Ontario’s Family Data
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
Ideate
Feature Brainstorming
Comp. Analysis
User Flows
Prototype
Style Guide
Lo-fi Wireframes
Test
Hi-fi Wireframes
Final Flow
Results
Final Pitch
Key Takeaways
Next Steps
Define
What's the problem?
Lengthy Reports & User Engagement
With the amount of important information that the FAO reports cover, they tend to be on the longer side. 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.
Who are we solving for?
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.
What are we trying to solve?
Have all data in one place without having to go through different sources to get specific information.
Accessibility! Data should be accessible to ALL Ontario citizens. This means flexibility across different contexts (i.e. browsers and devices).
Ideate
Required Features
As directed by the communications lead, the interactive graph was to be created and it needed to have these main features:
The ability to select and display the different contribution and benefits categories.
A responsive graph; Whatever the user selected should be reflected in the graph.
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.
Test
User Feedback
After these initial 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
Some features need to be simplified; The user is able to select multiple options but that seemed to be too complex.
The marker is fine as a circle, the size just needs to be adjusted.
Need to keep accessibility standards in mind. Some of the text was too small or cramped on mobile versions.
Results
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
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.
Final Product
The graph was able to be released on time, with all the key features! Check out the demo below.
What I learned
Key Takeaways
♿ Importance of 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.
🧪 Understanding how to apply user feedback received through 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.
🔍 Narrowing down ideas and features for usability purposes
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
📊 Using this style of infographic for future reports
Figuring out ways data in the graph can be changed to be reused in other reports.
📈 Improving features and accessibility for greater audience reach
With the short timeline given, there are definitely things that could be revised for a more accessible and improved user experience.
Personal reflection
Looking back on the project and internship…
As my first internship, this experience stands out as a major learning milestone for me. It was one of the first times I got to design and build a product that directly contributed to public accessibility and understanding. Balancing design intent with technical implementation, while ensuring accessibility standards were met, has influenced how I approach design products by thinking more holistically about what makes them successful.
Overall, this experience only furthered my appreciation for designing with purpose and understanding how accessibility and usability come together to make information more transparent and inclusive.
