Translating nutrition research into a scroll-driven, digital narrative about malnutrition
WE ARE WHAT WE EAT CASE STUDY
ROLE
–
Information Designer
Researcher
SKILLS
–
Health Design
Information Design
Motion Design & Animation
Microinteractions
Shorthand
Literature Review
TEAM
–
Malavika Ketan Doshi
Revati Naniwadekar
Kimberly Blacutt
Sage Rohrbach
Stacie Rohrbach
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 OVERVIEW
Communicating 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
We organized 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
Simplifying medical terminology
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.
ITERATIVE 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.
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.
KEY CHALLENGES
Addressing organization, visual abstraction, and platform constraints to refine both structure and presentation
1. Content Organization
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.
Addressing Complex Visualizations
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.
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. Preview the current prototype below. Each page includes links at the bottom to navigate through systems.
Dynamic Movement in Static Images
Subtle reveal animations bring visuals to life, helping users visualize changes.
Comparisons through Color
Background and body color changes suggest changes in emotional or physiological states.
Multi-System Perspective
Users can explore the effects of malnutrition across different body systems, providing a holistic understanding of its impact.
REFLECTION
Letting constraints guide every step of ideation, production, and timeline management
Translating complex biology into scrollytelling visuals required balancing clarity with production. By working within animation and layout constraints, organizing assets, and managing timelines, I kept the project moving efficiently while ensuring every element guided the reader. My science background helped me break down dense information into digestible chunks, making the content both accurate and accessible.
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
Conceptualizing a micro-app to help parents capture birth experiences
The Birth Story – Student-Client Project