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.
I designed and built the Distribution Illustrator: an interactive data visualization tool that transforms static, text-heavy FAO reports into a dynamic, filterable experience. It shipped to production and is live on the FAO website.
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 public resources, but the format works against the mission. Dense text, static charts, and no navigational structure mean most readers skim or abandon the report before finding what they came for.
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?
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.
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.
The first version of the illustrator worked, but it didn't communicate.
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 and why
Introduced pink accents to improve contrast and visual balance without compromising the neutral, government-appropriate palette.
Adjusted marker sizes and spacing so the chart remained readable at all viewport sizes.
Moved the legend outside the main chart area.
Ensured consistent scaling across breakpoints so mobile users got the same experience as desktop.
These changes transformed the graph from technically accurate to visually understandable.
Develop — Usability testing
Validating assumptions with real users
We validated with the Communications and Financial teams, the people closest to the data and the report's intended audience. This wasn't user testing in the traditional sense, but it surfaced real usability gaps quickly.
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
Shipped to production — live on the FAO website
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, Beyond the tool itself, the project set a precedent for how the FAO communicates complex data, demonstrating that interactivity and accessibility don't have to come at the cost of credibility.
What I learned
Key takeaways
Accessibility isn't a checklist
Not all users have the same devices, browsers, or abilities. On this project, accessibility wasn't a phase at the end, it was kept in mind since day one. I learned to design for the hardest case first and let the easier cases benefit from that work.
Design and engineering aren't separate disciplines
Building the product I designed revealed constraints I never would have caught in Figma. The experience made me a better designer because I started thinking about implementation earlier in the process, and a better engineer because I understood the intent behind each visual decision.
Simplifying interaction models is harder than adding features
Replacing multi-select with a single dropdown sounds like a minor change. It took real conviction to do it because it meant accepting that a less "powerful" interaction model was actually a better one for this audience. Knowing when to remove capability is a skill I take into every project now.
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.
I designed and built the Distribution Illustrator: an interactive data visualization tool that transforms static, text-heavy FAO reports into a dynamic, filterable experience. It shipped to production and is live on the FAO website.
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 public resources, but the format works against the mission. Dense text, static charts, and no navigational structure mean most readers skim or abandon the report before finding what they came for.
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?
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.
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.
The first version of the illustrator worked, but it didn't communicate.
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 and why
Introduced pink accents to improve contrast and visual balance without compromising the neutral, government-appropriate palette.
Adjusted marker sizes and spacing so the chart remained readable at all viewport sizes.
Moved the legend outside the main chart area.
Ensured consistent scaling across breakpoints so mobile users got the same experience as desktop.
These changes transformed the graph from technically accurate to visually understandable.
Develop — Usability testing
Validating assumptions with real users
We validated with the Communications and Financial teams, the people closest to the data and the report's intended audience. This wasn't user testing in the traditional sense, but it surfaced real usability gaps quickly.
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
Shipped to production — live on the FAO website
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, Beyond the tool itself, the project set a precedent for how the FAO communicates complex data, demonstrating that interactivity and accessibility don't have to come at the cost of credibility.
What I learned
Key takeaways
Accessibility isn't a checklist
Not all users have the same devices, browsers, or abilities. On this project, accessibility wasn't a phase at the end, it was kept in mind since day one. I learned to design for the hardest case first and let the easier cases benefit from that work.
Design and engineering aren't separate disciplines
Building the product I designed revealed constraints I never would have caught in Figma. The experience made me a better designer because I started thinking about implementation earlier in the process, and a better engineer because I understood the intent behind each visual decision.
Simplifying interaction models is harder than adding features
Replacing multi-select with a single dropdown sounds like a minor change. It took real conviction to do it because it meant accepting that a less "powerful" interaction model was actually a better one for this audience. Knowing when to remove capability is a skill I take into every project now.
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.
I designed and built the Distribution Illustrator: an interactive data visualization tool that transforms static, text-heavy FAO reports into a dynamic, filterable experience. It shipped to production and is live on the FAO website.
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 public resources, but the format works against the mission. Dense text, static charts, and no navigational structure mean most readers skim or abandon the report before finding what they came for.
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?
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.
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.
The first version of the illustrator worked, but it didn't communicate.
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 and why
Introduced pink accents to improve contrast and visual balance without compromising the neutral, government-appropriate palette.
Adjusted marker sizes and spacing so the chart remained readable at all viewport sizes.
Moved the legend outside the main chart area.
Ensured consistent scaling across breakpoints so mobile users got the same experience as desktop.
These changes transformed the graph from technically accurate to visually understandable.
Develop — Usability testing
Validating assumptions with real users
We validated with the Communications and Financial teams, the people closest to the data and the report's intended audience. This wasn't user testing in the traditional sense, but it surfaced real usability gaps quickly.
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
Shipped to production — live on the FAO website
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, Beyond the tool itself, the project set a precedent for how the FAO communicates complex data, demonstrating that interactivity and accessibility don't have to come at the cost of credibility.
What I learned
Key takeaways
Accessibility isn't a checklist
Not all users have the same devices, browsers, or abilities. On this project, accessibility wasn't a phase at the end, it was kept in mind since day one. I learned to design for the hardest case first and let the easier cases benefit from that work.
Design and engineering aren't separate disciplines
Building the product I designed revealed constraints I never would have caught in Figma. The experience made me a better designer because I started thinking about implementation earlier in the process, and a better engineer because I understood the intent behind each visual decision.
Simplifying interaction models is harder than adding features
Replacing multi-select with a single dropdown sounds like a minor change. It took real conviction to do it because it meant accepting that a less "powerful" interaction model was actually a better one for this audience. Knowing when to remove capability is a skill I take into every project now.
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. :)