ON THIS PAGE
Overview
Problem Discovery
Problem Validation
Finding the Gap
The Solution
The User
Potential Impact
In an Ideal Situation
Process
Learning outcomes

Food Insecurity Data Visualisation

Designing an interactive data visualisation to show the severity of food insecurity around the world.
Over the course of 1 month, I designed an interactive data visualization on Food Insecurity around the world from the year 2017 to 2020. The objective of the project was to create data stories that are shared through visualizations, find a issue and credible sources to support its hypothesis.
Timeline
January - February 2023
Role
UI/UX designer
Tools
Figma, Spline
Problem Discovery

What problem am I trying to solve?

"The number of people in the world affected by hunger increased in 2020 under the shadow of the COVID-19 pandemic. The prevalence of undernourishment (PoU) climbed to around 9.9 percent in 2020, from 8.4 percent a year earlier."

Article by UN Food and Agriculture Organisation
In this day and age of inflation and rising food prices, the topic is important since it deals with humans and food, which is a necessity for survival. The rising number of cases of food insecurity calls for immediate notice and a response to the situation to ensure its mitigation.
Problem Validation

Why is this problem important?

The COVID-19 pandemic and associated response measures impacted various dimensions of food security, including the availability, accessibility, and affordability of food in BC.

Increased unemployment and reduced income substantially contributed to household food insecurity. People who experienced food insecurity before the pandemic were more likely to face increased challenges with food insecurity due to the pandemic and related response measures.
Finding the Gap

What is the gap in the current system?

To spur officials into action, the public must first recognize and address community problems while ensuring leaders take control and implement provisions for those in need.

Food insecurity is a global issue often met with silence and shame. It's crucial to recognize that many others face this challenge, fostering awareness that extends beyond individual experiences. Understanding that conditions are even more dire in some countries can inspire collective efforts for a better, shared future.
The Solution

The service and its components

An interactive kiosk is placed inside a grocery store near the checkout with data visualised on the cost of a healthy meal and how much of the population can't afford it. With a QR code to donate if a person is able to.

icons source: evericons.com

01

Kiosk
The target space is places with food like grocery stores, restaurants, etc. Food insecurity is becoming a big problem, and having spaces that make people more aware of a global crisis is key.

That is why a kiosk at the checkouts of grocery stores while people wait in line to buy their foods might be an effective way to get someone's attention.
check out the prototype
Image source: google.com

02

Visualisation
There are 3 parts to the interaction with the data visualisation:
1. Questions to reflect on
2. The 3d globe with pin markers for the countries
3. Information for each country

02 (1)

Questions
The globe is just an interesting way for people to play around and attract the user on initial glance. No specific information is given out to ensure no one ignores it for the topic it is about.

02 (2)

Globe
The globe is just an interesting way for people to play around and attract the user on initial glance. No specific information is given out to ensure no one ignores it for the topic it is about.

02 (3)

Information
  • The information has a map with the percentage of the country that is facing food insecurity coloured.
  • A scroll bar for the different years.
  • Written information includes the cost of a healthy diet in dollars, currency change value for the US dollar.
  • Last two pieces of information are also visualised by icon. The cost of healthy diet is shown in comparison to the cost of starbucks coffee which is a daily buy for a lot of people. And the percentage of people facing food insecurity out of 100%. So each globe icon represents 10% of the population.

The Prototype

check out the figma prototype
click the circles on the globe to interact
The User

Who all can get involved?

Designed for shoppers, local community members and government to view and in turn to benefit whoever is in need.

Potential Impact

If the repair service is added to the existing service for waste management in Vancouver.
Here is what will happen:

Communities may come together to address food insecurity collectively. Local organizations, charities, and individuals might initiate or participate in efforts such as food drives, community gardens, or meal programs to support those facing food shortages.
You foster a heightened community consciousness on the issue of food insecurity, thereby compelling authorities to address it by implementing effective solutions. Given that sustenance is an essential requirement for living, it should not be regarded as a luxury.
In an Ideal Situation

The prototype has software restrictions, and with integration problems between spline and figma a smooth experience has not been created. But an ideal prototype would iclude:

The dataviz shows data of all around the world and of all recent years (for the timeline of the project information of only 5 countries is shown)
The 3D globe works in unison with the data interactions. (currently an action in spline doesn't lead to change in figma)
The coloured dots change colour based on the interaction, that is, once the country data is viewed, the dots are different colours, similar to visiting a link on google
The interaction should start all over when there is inactivity. The coloured dots refresh to the base colour and the screen returns to the question pages.
Comprehension

Understanding how to visualise data in different formats?

Understanding the data, the topic, the visualisation format, and the audience

The project started with understanding data visualisation and the different ways to do it based on the topic or audience. To do this, we did an activity where we chose a topic that we were interested in and that can be converted into data. The chosen topic was ‘How I socialise’, the number of people I was with and what I did with that group over a period of my 2022 fall semester.

I used two websites to help inform my style:
Dear Data Project by Giorgia Lupi
The Data Visualisation Catalogue
sketch visualisations
3D and interactive graphs
digital interactive visualisation in more detail
See the figma prototype
Main Project

Initial sketches and response to the problem

The cost of a Healthy Diet and the share of people who can’t afford it 2020, worldview

Context: Food, Poverty and Inflation
Data Source:
Daily cost of a health diet, 2021
Share of population that cannot afford a healthy diet, 2021
scenario sketches

Analysing and visualising the data

There was a great emphasis on the ethics of data sourcing. The main points were to make sure it was open source and to avoid associated biases whether self or by the author.

Both the datasets were single-layered and I combined two them to create a more meaningful visualisation. The world in data source had already a map representation of the data by ranges looking at that I was able to understand the entire dataset in an overview.
screenshot of data visualised as graph. source: myworldindata.org
After discussion and brainstorming sketches
Front-end Protyping and Iterations

Designing the interface and the visualisation

Designing for an immersive and reflective experience. While ensuring that the information is clear and not misleading.

The first step was to figure out was how to bring customers towards the kiosk to interactive with it. The idea of an interactive globe on a screen (in an ideal world, a hologram) is very interesting.
different interactions with the globe
different visualisations

Recieveing feedback and making changes

Making the data more clear and visual. The more words, the less people will read and understand.

The feedback included, suggestions to create the visualisation in context with the environment. To have a call to action on the screen at all times to ensure people who want to help others, upon seeing the information, are able to.

The main point was to design the numbers so that they are written and visualised to ensure easier communication and comparison of the data.
User Testing

Formative evaluation

Testing was done to enhance data readability and the overall user experience.

I did two formative evaluation with peers outside the major, with a low fidelity prototype to understand if the data is understood with little to no knowledge about the topic. Then with a mid fidelity prototype I did a usability test with peers in my class to see if anything needed tweaking.
The key insights from the user test responses are:
  • Clearer navigation across countries and years
  • Changing the filled style of the map visualisation.
  • Highlighting changing data over different years.
clear navigation bar
change in data highlighted
clearer map visual
check out the final prototype
Learning outcomes

Notes to future self

Feedback and iterations were central to creating an immersive and informative data visualisation. Here is what I learned:

It is important to ensure that I understand my biases and the biases in data sourcing. The representation of data in different formats can express a very different story.
Some user testing insights are not verbal and are inferred through the confusion and hesitations of the user.
© 2024 Ishita Arora