FAO: Distribution Illustrator
Making government data more engaging and accessible to Ontarians
Overview
The Financial Accountability Office of Ontario (FAO) needed a more accessible way to communicate complex financial data to the public.
During my internship, I collaborated with the Financial and Communications teams to design and build the Distribution Illustrator, an interactive data visualization tool that turns static reports into a clear and personalized experience, without compromising accuracy or neutrality.
Role
Digital Graphic Design Intern
Team
2 Designers, 1 Product Manager
Timeline
January - April 2022
Tools
HTML, CSS, Javascript
Problem
Users shouldn’t have to scroll endlessly to find what matters.
FAO reports are crucial to informing Ontarians about how provincial policies influence their household finances. However, they tend to be dense and text-heavy, making it difficult for everyday users to digest quickly.
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.
With the context in mind…
How might we make FAO's financial data easier to explore while maintaining the accuracy and credibility of the original report?
So that Ontarians can quickly understand how provincial spending and taxes impact their families without having to read an entire report.
Solution
Introducing the Distribution Illustrator: a simplified way to explore Ontario's family data
An interactive tool that helps Ontarians quickly understand how provincial spending and revenue collection affect different types of families.
Features
Responsive, dynamic graph
When users choose a benefit or contribution category, the graph instantly updates, adjusting bar heights, markers, and labels in real time. Hovering reveals exact values, making it easy to compare and understand financial impacts at a glance.
Streamlined category selection
With a standard dropdown, users can quickly find and compare what matters most without scrolling through a long, cluttered select menu.
Reset button
Clear reset controls allow users to return to the default view at any point so that they can explore without fear of breaking the visualization.
Design process
How did the Distribution Illustrator come to life?
Define — Problem
Understanding stakeholder and user needs
FAO reports are data-rich but are often long, text-heavy, and difficult to navigate. Even when users want details about provincial spending and revenue, the traditional report format forces them to skim or scroll through dozens of pages before finding the info they needed.
During early conversations with the Communications and Financial teams, certain pain points were consistently brought up:
Key insights weren't easily accessible to readers.
Journalists needed reliable numbers fast.
Mobile users struggled with layout and readability.
The data itself wasn't the issue, the format and navigation were. This reframed the challenge from explaining data to making data more explorable.
Define — Goals
What would make this worth users' time?
FAO readers often come to the site with limited time and a specific question in mind. Our solution needed to reduce effort, not add another layer of complexity.
Through stakeholder discussions, we aligned on three goals that would guide the direction of the Distribution Illustrator. Each goal focused on improving how Ontarians access and understand the FAO's reports.
Centralize data in one intuitive place
Allow users to explore data without searching through pages of text.
Ensure accessibility across devices and contexts
Design an experience that is accessible across browsers and devices.
Maintain FAO's brand identity and credibility
Preserve neutrality, clarity, and trust in public data.
Define — Key features
Mapping what users need to navigate data
Before going into our solution, we brainstormed the core user actions needed to interpret data efficiently and accurately. As directed by the communications lead, the interactive graph was to be created and it needed to have these main features:
1
Select and compare categories
Readers must be able to view different benefits and contributions clearly.
2
See changes in real time
Immediate feedback reinforces understanding and engagement.
3
Understand the interface at a glance
Visual hierarchy and simplicity reduce interpretation effort.
Develop — Iterations
Refining readability through design decisions
Once we had a clear direction, we developed and stress-tested the illustrator on both desktop and mobile.
What wasn't working
Text and markers appeared too cramped on mobile.
The dark blue bars lacked visual contrast.
The legend placement cluttered the graph.
What we improved
Introduced pink accents for improved contrast and balance.
Adjusted marker sizes and spacing.
Moved the legend outside the main chart area.
Ensured consistent scaling across breakpoints
These changes transformed the graph from technically accurate to visually understandable.
Develop — Usability testing
Validating assumptions with real users
With our prototype ready, we conducted testing with the Communications and Financial teams to identify usability issues and accessibility gaps.
What we learned:
Simplify interactions as users preferred single selections over multiple filters.
Marker size and text spacing needed further adjustment.
Some text was too small for mobile accessibility standards.
What we changed:
Replaced multi-select with a single dropdown, reducing cognitive load
Added a reset button so users could quickly return to the default state
Improved hierarchy and contrast, especially for mobile readability
Added graphical descriptions for assistive technologies
Deliver — Results
Transforming how Ontarians access financial insights
The final Distribution Illustrator not only delivered on the project goals, it also improved how the FAO communications complex information to the public.
What the redesign achieved:
Clear navigation
Users can move through financial insights without friction.
Faster insight discovery
Key data points are highlighted through interactive filters and responsive visuals.
Improved mobile performance
Mobile users can explore data without formatting issues or readability barriers.
Strong brand alignment
A neutral visual system reinforces the FAO's mission of neutral and evidence-based reporting
Financial data can be intimidating, The redesign set a new standard for how FAO presents data through a more structured, digestible and accessible way for a wider audience.
What I learned
Key takeaways
Accessibility matters more than you think
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 important to keep these things in mind when designing to ensure that a product is accessible to all users.
Testing reveals hidden assumptions
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
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. This includes adapting the graph for reuse on upcoming reports, improving performance across devices, and refining accessibility features to better support users.
Personal reflection
Looking back on the term…
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.
Accessible data empowers better decisions.
Thanks for checking out this case study! If you have any questions or want to know more, don't hesitate to contact me. While you're still here, please feel free to check out my other work or learn more about me. :)
FAO: Distribution Illustrator
Making government data more engaging and accessible to Ontarians
Overview
The Financial Accountability Office of Ontario (FAO) needed a more accessible way to communicate complex financial data to the public.
During my internship, I collaborated with the Financial and Communications teams to design and build the Distribution Illustrator, an interactive data visualization tool that turns static reports into a clear and personalized experience, without compromising accuracy or neutrality.
Role
Digital Graphic Design Intern
Team
2 Designers, 1 Product Manager
Timeline
January - April 2022
Tools
HTML, CSS, Javascript
Problem
Users shouldn’t have to scroll endlessly to find what matters.
FAO reports are crucial to informing Ontarians about how provincial policies influence their household finances. However, they tend to be dense and text-heavy, making it difficult for everyday users to digest quickly.
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.
With the context in mind…
How might we make FAO's financial data easier to explore while maintaining the accuracy and credibility of the original report?
So that Ontarians can quickly understand how provincial spending and taxes impact their families without having to read an entire report.
Solution
Introducing the Distribution Illustrator: a simplified way to explore Ontario's family data
An interactive tool that helps Ontarians quickly understand how provincial spending and revenue collection affect different types of families.
Features
Responsive, dynamic graph
When users choose a benefit or contribution category, the graph instantly updates, adjusting bar heights, markers, and labels in real time. Hovering reveals exact values, making it easy to compare and understand financial impacts at a glance.
Streamlined category selection
With a standard dropdown, users can quickly find and compare what matters most without scrolling through a long, cluttered select menu.
Reset button
Clear reset controls allow users to return to the default view at any point so that they can explore without fear of breaking the visualization.
Design process
How did the Distribution Illustrator come to life?
Define — Problem
Understanding stakeholder and user needs
FAO reports are data-rich but are often long, text-heavy, and difficult to navigate. Even when users want details about provincial spending and revenue, the traditional report format forces them to skim or scroll through dozens of pages before finding the info they needed.
During early conversations with the Communications and Financial teams, certain pain points were consistently brought up:
Key insights weren't easily accessible to readers.
Journalists needed reliable numbers fast.
Mobile users struggled with layout and readability.
The data itself wasn't the issue, the format and navigation were. This reframed the challenge from explaining data to making data more explorable.
Define — Goals
What would make this worth users' time?
FAO readers often come to the site with limited time and a specific question in mind. Our solution needed to reduce effort, not add another layer of complexity.
Through stakeholder discussions, we aligned on three goals that would guide the direction of the Distribution Illustrator. Each goal focused on improving how Ontarians access and understand the FAO's reports.
Centralize data in one intuitive place
Allow users to explore data without searching through pages of text.
Ensure accessibility across devices and contexts
Design an experience that is accessible across browsers and devices.
Maintain FAO's brand identity and credibility
Preserve neutrality, clarity, and trust in public data.
Define — Key features
Mapping what users need to navigate data
Before going into our solution, we brainstormed the core user actions needed to interpret data efficiently and accurately. As directed by the communications lead, the interactive graph was to be created and it needed to have these main features:
1
Select and compare categories
Readers must be able to view different benefits and contributions clearly.
2
See changes in real time
Immediate feedback reinforces understanding and engagement.
3
Understand the interface at a glance
Visual hierarchy and simplicity reduce interpretation effort.
Develop — Iterations
Refining readability through design decisions
Once we had a clear direction, we developed and stress-tested the illustrator on both desktop and mobile.
What wasn't working
Text and markers appeared too cramped on mobile.
The dark blue bars lacked visual contrast.
The legend placement cluttered the graph.
What we improved
Introduced pink accents for improved contrast and balance.
Adjusted marker sizes and spacing.
Moved the legend outside the main chart area.
Ensured consistent scaling across breakpoints
These changes transformed the graph from technically accurate to visually understandable.
Develop — Usability testing
Validating assumptions with real users
With our prototype ready, we conducted testing with the Communications and Financial teams to identify usability issues and accessibility gaps.
What we learned:
Simplify interactions as users preferred single selections over multiple filters.
Marker size and text spacing needed further adjustment.
Some text was too small for mobile accessibility standards.
What we changed:
Replaced multi-select with a single dropdown, reducing cognitive load
Added a reset button so users could quickly return to the default state
Improved hierarchy and contrast, especially for mobile readability
Added graphical descriptions for assistive technologies
Deliver — Results
Transforming how Ontarians access financial insights
The final Distribution Illustrator not only delivered on the project goals, it also improved how the FAO communications complex information to the public.
What the redesign achieved:
Clear navigation
Users can move through financial insights without friction.
Faster insight discovery
Key data points are highlighted through interactive filters and responsive visuals.
Improved mobile performance
Mobile users can explore data without formatting issues or readability barriers.
Strong brand alignment
A neutral visual system reinforces the FAO's mission of neutral and evidence-based reporting
Financial data can be intimidating, The redesign set a new standard for how FAO presents data through a more structured, digestible and accessible way for a wider audience.
What I learned
Key takeaways
Accessibility matters more than you think
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 important to keep these things in mind when designing to ensure that a product is accessible to all users.
Testing reveals hidden assumptions
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
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. This includes adapting the graph for reuse on upcoming reports, improving performance across devices, and refining accessibility features to better support users.
Personal reflection
Looking back on the term…
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.
Accessible data empowers better decisions.
Thanks for checking out this case study! If you have any questions or want to know more, don't hesitate to contact me. While you're still here, please feel free to check out my other work or learn more about me. :)
FAO: Distribution Illustrator
Making government data more engaging and accessible to Ontarians
Overview
The Financial Accountability Office of Ontario (FAO) needed a more accessible way to communicate complex financial data to the public.
During my internship, I collaborated with the Financial and Communications teams to design and build the Distribution Illustrator, an interactive data visualization tool that turns static reports into a clear and personalized experience, without compromising accuracy or neutrality.
Role
Digital Graphic Design Intern
Team
2 Designers, 1 Product Manager
Timeline
January - April 2022
Tools
HTML, CSS, Javascript
Problem
Users shouldn’t have to scroll endlessly to find what matters.
FAO reports are crucial to informing Ontarians about how provincial policies influence their household finances. However, they tend to be dense and text-heavy, making it difficult for everyday users to digest quickly.
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.
With the context in mind…
How might we make FAO's financial data easier to explore while maintaining the accuracy and credibility of the original report?
So that Ontarians can quickly understand how provincial spending and taxes impact their families without having to read an entire report.
Solution
Introducing the Distribution Illustrator: a simplified way to explore Ontario's family data
An interactive tool that helps Ontarians quickly understand how provincial spending and revenue collection affect different types of families.
Features
Responsive, dynamic graph
When users choose a benefit or contribution category, the graph instantly updates, adjusting bar heights, markers, and labels in real time. Hovering reveals exact values, making it easy to compare and understand financial impacts at a glance.
Streamlined category selection
With a standard dropdown, users can quickly find and compare what matters most without scrolling through a long, cluttered select menu.
Reset button
Clear reset controls allow users to return to the default view at any point so that they can explore without fear of breaking the visualization.
Design process
How did the Distribution Illustrator come to life?
Define — Problem
Understanding stakeholder and user needs
FAO reports are data-rich but are often long, text-heavy, and difficult to navigate. Even when users want details about provincial spending and revenue, the traditional report format forces them to skim or scroll through dozens of pages before finding the info they needed.
During early conversations with the Communications and Financial teams, certain pain points were consistently brought up:
Key insights weren't easily accessible to readers.
Journalists needed reliable numbers fast.
Mobile users struggled with layout and readability.
The data itself wasn't the issue, the format and navigation were. This reframed the challenge from explaining data to making data more explorable.
Define — Goals
What would make this worth users' time?
FAO readers often come to the site with limited time and a specific question in mind. Our solution needed to reduce effort, not add another layer of complexity.
Through stakeholder discussions, we aligned on three goals that would guide the direction of the Distribution Illustrator. Each goal focused on improving how Ontarians access and understand the FAO's reports.
Centralize data in one intuitive place
Allow users to explore data without searching through pages of text.
Ensure accessibility across devices and contexts
Design an experience that is accessible across browsers and devices.
Maintain FAO's brand identity and credibility
Preserve neutrality, clarity, and trust in public data.
Define — Key features
Mapping what users need to navigate data
Before going into our solution, we brainstormed the core user actions needed to interpret data efficiently and accurately. As directed by the communications lead, the interactive graph was to be created and it needed to have these main features:
1
Select and compare categories
Readers must be able to view different benefits and contributions clearly.
2
See changes in real time
Immediate feedback reinforces understanding and engagement.
3
Understand the interface at a glance
Visual hierarchy and simplicity reduce interpretation effort.
Develop — Iterations
Refining readability through design decisions
Once we had a clear direction, we developed and stress-tested the illustrator on both desktop and mobile.
What wasn't working
Text and markers appeared too cramped on mobile.
The dark blue bars lacked visual contrast.
The legend placement cluttered the graph.
What we improved
Introduced pink accents for improved contrast and balance.
Adjusted marker sizes and spacing.
Moved the legend outside the main chart area.
Ensured consistent scaling across breakpoints
These changes transformed the graph from technically accurate to visually understandable.
Develop — Usability testing
Validating assumptions with real users
With our prototype ready, we conducted testing with the Communications and Financial teams to identify usability issues and accessibility gaps.
What we learned:
Simplify interactions as users preferred single selections over multiple filters.
Marker size and text spacing needed further adjustment.
Some text was too small for mobile accessibility standards.
What we changed:
Replaced multi-select with a single dropdown, reducing cognitive load
Added a reset button so users could quickly return to the default state
Improved hierarchy and contrast, especially for mobile readability
Added graphical descriptions for assistive technologies
Deliver — Results
Transforming how Ontarians access financial insights
The final Distribution Illustrator not only delivered on the project goals, it also improved how the FAO communications complex information to the public.
What the redesign achieved:
Clear navigation
Users can move through financial insights without friction.
Faster insight discovery
Key data points are highlighted through interactive filters and responsive visuals.
Improved mobile performance
Mobile users can explore data without formatting issues or readability barriers.
Strong brand alignment
A neutral visual system reinforces the FAO's mission of neutral and evidence-based reporting
Financial data can be intimidating, The redesign set a new standard for how FAO presents data through a more structured, digestible and accessible way for a wider audience.
What I learned
Key takeaways
Accessibility matters more than you think
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 important to keep these things in mind when designing to ensure that a product is accessible to all users.
Testing reveals hidden assumptions
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
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. This includes adapting the graph for reuse on upcoming reports, improving performance across devices, and refining accessibility features to better support users.
Personal reflection
Looking back on the term…
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.
Accessible data empowers better decisions.
Thanks for checking out this case study! If you have any questions or want to know more, don't hesitate to contact me. While you're still here, please feel free to check out my other work or learn more about me. :)