Role

Product Designer /
Frontend Implementation

Timeline

Nov 2021 - Oct 2022 (1 year)

Skills

Data Visualization, Interaction Design, D3.js, Prototyping

What Europeans Eat

Turning raw food consumption data into an interactive visual system

This project involved transforming a large dataset from the European Food Safety Authority (EFSA) into an interactive dashboard that helps users explore food consumption behavior across age groups and countries.

I handled the UX flows, chart design, data modeling, and frontend implementation using D3.js.

Project Outcome

  • A fully coded interactive dashboard used to communicate European food consumption patterns

Link to the dashboard

The Context

Help tackle global food shortage with data visualisation of food consumption

Growing demand — especially for meat — increases pressure on crops and supply chains. To support better planning, I turned a messy public dataset into an interactive dashboard that helps people understand what Europeans eat, by country, age group, and category.

Key challenges

  • Structuring a messy, inconsistent dataset into a usable format

  • Choosing the right chart types to match user questions

  • Designing interactions that reveal complexity without overwhelming users

  • Building a fully coded prototype with smooth transitions and dynamic filtering

Excel (left) and R (right), the tools I used to clean and process the data.

Excel (left) and R (right), the tools I used to clean and process the data.

Excel (left) and R (right), the tools I used to clean and process the data.

The Approach

Creating a dashboard in 12 weeks

Understanding user questions

  • “How does consumption differ by age?”

  • “How do countries compare?”

  • “What are the top food categories?”

Designing a modular chart system

I created a visual system with:

  • comparative bar charts

  • age-group selectors

  • region filters

  • category-level drilldowns

Everything followed consistent scales, colors, and spacing to ensure readability.

Brainstorming sketch

Brainstorming sketch

Brainstorming sketch

Coded with D3.js for real interactivity

I implemented the dashboard using D3.js allowing:

  • animated transitions

  • live filtering

  • dynamic tooltips

  • responsive layout

The goal was to create a polished, production-quality feel, not just a conceptual mockup.

Initial interactive prototype

Initial interactive prototype

Initial interactive prototype

Final Experience

Iterations after usability testing

Interactive filtering

Users can explore consumption by region, age group, or category.

Pattern discovery

Animated transitions help highlight trends and outliers as users switch views.

Lightweight UI

Charts follow a neutral, minimal visual design to keep attention on the data.

Outcome

The dashboard helped transform static EFSA data into an accessible visual narrative.

It demonstrated my ability to handle both complex data modeling and high-fidelity interaction design — bridging design and engineering.


What I learned:

Complex data design requires clear hierarchy, consistency, and an understanding of user intent — not just pretty charts. Building it end-to-end strengthened my systems mindset and improved my collaboration with engineers.