Art of Visual Data

Desktop Mockup showing Article Home Screen.

Designing Emotions.
Stories Within Data.

Timeframe

January – February 2025
April 2025

Context

Although global datasets like the UN's Sustainable Development Goals are publicly available, they often remain cognitively inaccessible to general audiences. In a 2025 survey, only 24% of business decision makers considered themselves data literate. This gap makes complex metrics feel distant and inaccessible—not only in understanding global issues but also in applying data within everyday decision-making—leading to missed opportunities for awareness, education, and meaningful action.

Solution

Art of Visual Data (AoVD) tackles the challenge of making complex global data accessible and understandable. This project removes the cognitive barrier of complex data through an engaging visual storytelling, accessible UI/UX, and gamified learning. By translating abstract statistics into human-centered visuals, AoVD empowers users to not only understand data but care about it—building data literacy while connecting to real-world problems.

Team

Individual

Numbers to Stories

While exploring global datasets, I realized that statistics alone rarely drive change—people connect with stories, not spreadsheets. To make the data resonate, I designed a platform that transforms impactful SDG indicators into narrative-driven experiences.

gathering data

Building empathetic narratives

Looking through the 17 Sustainable Development Goals dataset, I set out to connect five different indicators to build an honest narrative that seeks emotional connection. Emotionally engaging stories can improve information retention by up to 70%. When we incorporate narratives and emotion within statistics, they become much more than numbers.

Desktop Mockup showing Article Home Screen.
Organizing SDGs through Affinity Mapping
Sustainable Development Goal Indicator datasets [1.3.1, 4.1.2, 3.3.1, 8.7.1, 16.9.1]. Five dense tables with data from varying years.
Full Pre-Designed Datasets

what's the story?

The Narrative

Note icon.

Children without legal identity (16.9.1) are often found in environments of low socioeconomic support (1.3), where they are disproportionately engaged in child labour (8.7.1) (regionally), which follows with a low quality of health (HIV, 3.3.1.c).

how do we communicate?

Early Challenges

Sword icon.

The challenge would be to design a platform that presents a clear, unbiased statistical story by including all points of data (even with varying timelines), while creating an efficient way of consuming data that is both physically and cognitively accessible.

defining our users

Who are we designing for?

What's up!

Eris

Persona Image of Eris.

I'm Eris, I study International Development at UofT! I often need to pull statistics from datasets and translate them into reports and presentations. I'm also a visual & kinesthetic learner so I usually struggle with reading dense datasets.

Left Arrow
Right Arrow

Pain Points

  • Difficulty translating raw datasets into clear, engaging reports and presentations.
  • Needs a way to make statistical information more accessible and easier to connect with.

Goals

  • Quickly identify key insights and explain the datasets and their story in depth.
  • Find tools or methods that make dense data easier to interpret for a visual and kinesthetic learner.
Heyo!

Lewis

Persona Image of Lewis.

I'm Lewis, I work with local communities to raise awareness about child welfare issues. I often use data summaries to do my work, but it's challenging for me to compare datasets. I wish I could visualize how the data moves!

Left Arrow
Right Arrow

Pain Points

  • Finds it challenging to translate static data summaries into engaging stories.
  • Difficulty identifying patterns and relationships in datasets, making it harder to communicate insights.

Goals

  • Find a way to visualize how data changes and connects over time.
  • Find a tool or method to compare data in a much more appealing and efficient way.

defining our users

User Journey

I focused on the process of what it would be like for Eris to research and gather key insights on datasets for her university presentations. It examines how information overload and cognitive barriers hinder her ability and confidence in her research.

Persona Image of Eris

Eris

Goal: trying to gather key insights about global issues for her school presentation.

User journey chart showing four stages: Starting Research, Bouncing the web, Interpreting Data, and Creating Report. A white curved line connects each stage, with descriptive labels about challenges and emotions at each point. The background features a grid pattern.
Vines in a Pixel Art Style.

research summary

Research Icon.

What do we need?

Vines in a Pixel Art Style.

Accessibility

Eye Vector.

65% of the general population are visual learners, a learning style that research usually isn’t done in. It is essential that we are inclusive in the variability of all our user's abilities.

Confidence

Mountain Vector.

Only 24% of business decision makers considered themselves data literate. We need to improve user confidence and understanding in reading data.

Connection

Connection Vector.

Engaging stories improve information retention up to 70%. We need a unique tool able to compare multiple metrics and visually speak on how the data moves or their relationships.

information architecture

Let's talk navigation

Mapping the primary navigation and content hierarchy helped clarified which screens were essential for the MVP. This ensured the website effectively supported the user journey, from initial entry on the Home Page to exploring articles and their in-depth content pages.

Information Architecture Map. A flowchart showing the main navigation and content hierarchy of the website, including Home Page, Articles, and In-Depth Content Pages.
Information Architecture for MVP

article ideation

What are we creating?

Initial sketch of graph visualization.

The types of graphs I decided to use were simple, commonly seen graphs such as bar graphs, pictograms, pie graphs, etc...

For the general style of this website, I started out with a black/orange colour palette, eventually switching to a light version.

Initial sketch of graph visualization.

design challenges

AI for accessibility

Although patterns and relationships is visually established as an upward trend, we lack linguistical confirmation. This challenges our linguistically learners as well as our weaker data readers. What we needed was a way to educate our users of the graph's context and contents.

Version 1. Heavily visual focused dataset.

My solution was to implement a chatbot. We can utilize the linguistic strengths of Artificial Intelligence and implement a tool to maximize understanding and accessibility. This allows the user to pull specifics or get a general understanding of the data.

ChatGPT response summarizing graph.

ChatGPT Prompting

Chatbot implementation providing context and explanations for the data.

AI Chatbot Implementation

final designs

This is Art of Visual Data

Art of Visual Data (AoVD) is a platform and brand that translates complex global datasets into visual stories, improving data literacy for all through accessible design, storytelling, and gamification. The ultimate goal of AoVD is to advocate awareness of global issues through the power of design.

Figma Prototype. Full website walkthrough here.

extra tools

DataSense

The 'DataSense' tool of the AoVD website is designed for the general public interested in improving their data literacy skills. This tool gamifies learning with rankings, achievements, and Zeigarnik effect-based progress bars, encouraging reflection and long-term engagement.

Vines in a Pixel Art Style.

design achievements

Research Icon.

What did we make?

Vines in a Pixel Art Style.

Clarity

Eye Vector.

Consistent graphing tools paired with chatbot support helped reduce information overload. This noticeably boosted user confidence by 60% and made navigating data more intuitive.

reflection and conclusion

Innovating stories for the future

I believe Art of Visual Data has the potential to innovate a world where we all understand each other a bit more better—not just through accessible media, but by actually voicing issues for those who lack representation themselves.

AoVD makes reading data so much more enjoyable compared to raw datasets.

— Eric, 3D Artist

Magnifying Glass Icon.

So what did I learn?

  • Complex data doesn’t necessarily require complex graphs, just good hierarchy and colour coding!
  • It’s important to not mislead with data. Design with honesty.
  • It’s important to always keep accessibility in mind while designing, if they can’t see it, it doesn’t exist!
  • People love a good story. Build narratives, make an impact.
  • Relax on the animations, our developers don’t need overtime!

Related Projects

Art of Visual Data Typeface Booklet.
  • Typography
  • Data Visualization
  • Print Design
  • System Building

see project