What's For Lunch?
Educational experience about school lunch around the world!
Interactive Education
Illustration
Role
Designer, Illustrator
Timeline
7 weeks
Tools
Procreate, Figma, After Effects
platform
Web
The Problem
School lunch is a childhood staple across the world and it differs from country to country. With different cultures and nutritional priorities, no school lunch is the same and children may be curious as to what other children are eating for lunch.
The Solution
What's For Lunch? is an educational platform that showcases a variety of school lunches around the world. Users can navigate through a collection of countries and interact with ingredients to learn more about common menu items across the globe.
The goal is to make users excited to learn more about food nutrition and to expand their perspective on food by showing them different cultures.
Research
Use Case Personas
Before starting any design, I defined two types of users (a young student and an educator) and their individual needs. A student would care more about an experience that feels like play than homework, while an educator wants a tool that could spark classroom conversation. Focusing on these two use cases helped me identify what aspects of What's For Lunch? to prioritize and the overall visual direction.
Content Research & Competitive Analysis
The food on every tray is researched, not assumed. For France and Japan, I pulled from School Meals Coalition case studies on school lunch programs. For South Korea, I used personal blogs from teachers working abroad who documented what their students actually ate week to week. The choice of which foods to illustrate came down to two criteria: what does school policy mandate, and what shows up most often.
I also looked at three existing resources that cover similar territory, and all three revealed the same gap in different ways.
The World Food Programme website is information-rich and visually varied, but it's built for a policy audience. For a child, it reads like homework. The data is strong but the engagement isn't.
World Population Review has comprehensive country-by-country information and a map interaction but the map navigation doesn't connect meaningfully to the lunch topic, and the rest is a wall of text with no visuals.
Free Rice is the closest to what I was building: it covers global school meals and features an interactive game mechanic that prompts users to learn more. The strengths were real, it was easy to understand, gamified, digestible. But the country list was limited, the photos showed meals without explaining them, and the game itself wasn't connected to the school lunch content specifically.
The pattern across all three: plenty of information exists, but nothing was designed to make a child want to engage with it. That was the opening.
Sketches & Sitemapping
Sketches
Since I knew this was going to be a graphic heavy project where the presentation of the food would make or break the user's engagement, I started with many sketches. I wanted to lean into the idea of using food as its own data visualization. The main interaction I wanted from the beginning was an "exploded view" of a meal, but I was still exploring different directions for the rest of the experience.
Sitemap
The full experience is bigger than what the prototype covers. What's For Lunch? was designed with three sections: Countries (the primary browse experience), Compare (a side-by-side tray comparison tool), and Build a Tray (a creative mode where users assemble their own global lunch). The prototype covers the Countries section in full, which includes the landing page, the country carousel, and the ingredient detail pages. The sitemap documents the full intended scope.
Layout Planning & Design Testing w/ AI
Wireframes
The wireframes went through a few rounds of iterations before landing on the final layout. Below are some examples of Lo-Fi wireframes I made early on in the process. Some notable changes include editing the copy to be more aligned with the tone of the whole experience (from instructional and neutral to more fun and engaging: "START" became "Let's Eat!"). I also created wireframes for the two sections that were left out of the final prototype for future exploration.
Visual Design
My original plan was for the design to be bold and punchy with colorful vector graphics of the food. However, I wasn't super confident in my abilities to create the type of vector designs that I wanted. Since I didn't have much time to work solely on food graphics, I used Adobe Firefly to generate some test graphics in a vector art style. I used the generated graphics as placeholders to determine if I wanted to continue with spending time on making my own vector graphics.
After I saw the placeholder graphics, I decided to pivot to hand drawing the food. I felt the bold vector approach created the wrong tone I wanted to convey. The handmade quality resolved this problem and I even expanded the illustrations to beyond just the food. The navigation logo uses a handwritten underline. Handwritten annotations appear on the detail screens alongside the illustrated facts. The whole system started feeling like a scrapbook or a field guide made by someone who loves food, which is exactly the right register for the audience.
Illustration That Makes You Hungry For More
I drew all of the food in Procreate in a semi-realistic style. I wanted each item to be recognizable without a label and also look appetizing. The more appetizing it looked, the more a user would want to know more about the dish and in turn explore more of What's For Lunch?. Each item was chosen based on real data on school lunches in Japan, South Korea, and France.
I also illustrated extra decorative elements that are more cartoonish and would appeal to an even younger audience.
What I Learned
For this project, the decision to draw all of the main content by hand ended up causing some time management problems even though I settled on this style to save time. Although I am happy with the final outcome of the illustrations, in the future I need to plan better in terms of asset creation. I also should give myself more time to experiment with different styles instead of settling on the first iteration. Overall, this project taught me the importance of time management and planning.
Future Exploration
At this moment, there are still many aspects of this project that I want to continue to iterate on. One aspect is the “Build A Tray” and “Compare” pages. I’d like to include those pages in a future prototype as well as include more countries to explore. I also want to include more opportunities for engagement and calls to action throughout the experience.
