WE ARE WHAT WE EAT
Translating science into a scroll-driven narrative about malnutrition
ROLE
–
Health Information
Information Design
Visual Communication
TEAM
–
Malavika Ketan Doshi
Revati Naniwadekar
Kimberly Blacutt
Sage Rohrbach
Stacie Rohrbach
TOOLS
–
Shorthand
Illustrator
Photoshop
Zotero
CONTEXT
We Are What We Eat examines how individuals and families engage with information on nutrition
Originally focused on anorexia nervosa, this project explores ways to communicate complex nutritional science—in this case malnutrition—through design. It is not intended to replace professional medical care.
During my assistantship, I was able to contribute to this project both in terms of providing science background and implementing design. I joined the project mid-way, contributing from late research stages and early script development onto visual design and development within Shorthand.
PROBLEM SPACE
Information about anorexia nervosa is often buried in academic research or presented in oversimplified online sources
Individuals and families seeking help must navigate a confusing landscape of medical jargon and limited, superficial online content. As a result, many people struggle to recognize the severity of the illness, delaying care and deepening emotional and informational isolation.
SOLUTION PREVIEW
Communicating the scientific and biological consequences of malnutrition in a way that feels less intimidating
For this prototype of We Are What We Eat, we focused on malnutrition. Clear narratives and supportive visuals break down complex biology and physiology and help people and their families feel more confident navigating care and recovery.
RESEARCH
Conducting literature reviews across multiple dimensions from neuroscience to psychology
We conducted literature reviews, organizing information by topic across multiple dimensions, including neuroscience, biological, chemical, and psychological aspects. This process helped the team determine how to structure and present complex information in our script-writing.
COPYWRITING
Anorexia nervosa involves complex scientific concepts and medical terminology that can be confusing for readers
One of our key challenges was translating this material into language that is clear and accessible while preserving scientific accuracy, ensuring that the content is informative without being overwhelming.
USER TESTING
Feedback revealed that focusing on malnutrition was more effective given the complexity of anorexia
We tested the script with participants of varying ages and levels of scientific literacy to evaluate clarity, accessibility, and engagement. Participants were given a scenario and asked to read an excerpt from the script, followed by guided questions. We gathered feedback and organized information through bucket sorting.
One particular comment on how complex anorexia is stood out to us. We narrowed the prototype's focus to malnutrition, making the material more manageable and actionable for others.
We reimagined this prototype as a modular section that could sit alongside a broader library of resources on anorexia nervosa, allowing participants to explore topics in segments.
KEY ITERATIONS
Addressing organization, visual abstraction, and platform constraints to refine both structure and presentation
[1] Organization Design
To make the content more approachable, we grouped complex information into thematic buckets organized by body systems or functions, depending on what best fit the material. This structure allowed users to navigate the content logically and understand each concept in context.
[2] Abstraction for Complex Chemical Compositions
For complex topics like hormones and neurotransmitters, we created abstracted visuals and custom icons that reflected the emotions associated with each function. This approach helped convey scientific ideas in a way that was visually engaging and easier for users to grasp.
[3] Shorthand Constraints
Animation was limited to simple reveal effects, and responsive layout constraints required careful attention to grids, hierarchy, and element placement to maintain consistency across devices.
FINAL SOLUTION
The final prototype focuses on making malnutrition accessible and engaging through interactive storytelling
We Are What We Eat is currently undergoing user testing and further iteration. You can preview the current prototype below. Each page includes links at the bottom to navigate through the body systems.
[1] Dynamic Movement in Static Images
Subtle reveal animations bring visuals to life, helping users visualize changes caused by malnutrition.
[2] Comparisons through Color
Background and body color changes suggest changes in emotional or physiological states.
[3] Multi-System Perspective
Users can explore the effects of malnutrition across different body systems, providing a holistic understanding of its impact.
REFLECTIONS
Let Constraints Guide You
One of the biggest challenges in this project was translating complex biological processes and terminology, things that felt natural to me, into visuals that others could easily understand. What helped was thinking within the constraints of scrollytelling: focusing on animation flow, visual hierarchy, and how each element would guide the reader.
Connecting My Science Background
My own experience with the sciences helped me break down complex information into bite chunks. Years of watching Crash Course videos and hours in the lab helped make this project fruitful.
ACKNOWLEDGEMENTS
This project was a collaborative effort.
I would like to thank Malavika Ketan Doshi and Revati Naniwadekar for their partnership in research and content development, and Kimberly Blacutt and Sage Rohrbach for user testing the script and co-designing the visuals.
Special thanks to Stacie Rohrbach for her mentorship and guidance throughout the project.
And to everyone who participated in user testing or shared feedback, thank you.
NEXT PROJECT
