Creating an interactive digital story that helps people understand malnutrition
WE ARE WHAT WE EAT CASE STUDY
ROLE
–
Information Designer
Content Designer
TEAM
–
Malavika Ketan Doshi
Revati Naniwadekar
Kimberly Blacutt
Sage Rohrbach
Stacie Rohrbach
TIMELINE
–
Scriptwriting:
15 Weeks
Development & Testing
17 weeks
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. I joined the project mid-way, contributing from script development through to visual design and implementation within Shorthand.
PROBLEM SPACE
Information about anorexia nervosa is either buried in academic research or oversimplified in 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, we narrowed the focus specifically to malnutrition to break down complex biology into manageable, thematic segments organized by body systems. Clear, accessible narratives pair with supportive, abstracted visuals to help individuals and their families understand the physical realities of the illness.
INITIAL RESEARCH & FOUNDATION
Before I joined, the team conducted literature reviews across neuroscience, biology, chemistry, and psychology
They mapped out the information and research to figure out the best way to group the ideas together. They organized content into a script divided into sections such as Introduction to Anorexia Nervosa, Biological Onset, and Biological Impacts.
PIVOTING CONTENT DIRECTION
Introducing content restructure based on the human body systems
Instead of organizing the information topically, I introduced the strategy to restructure the script around human body systems, such as the digestive, endocrine, and cardiovascular. By grouping the information into thematic buckets, we made the content more approachable.
Anorexia nervosa involves complex scientific concepts and terminology that can be confusing for readers. I translated this material into language that is clear and accessible while preserving scientific accuracy, ensuring that the content is informative without being overwhelming.
SCOPE CHANGE
Pivoting project scope based on user testing
We tested the script with participants of varying ages and levels of scientific literacy to evaluate clarity, accessibility, and engagement. Specifically, I interviewed a public health professional whose insights led me to question if we had properly defined our scope.
Based on these insights, we reimagined the prototype as a modular section that could sit alongside a broader library of resources on anorexia nervosa, allowing users to explore topics in manageable, focused segments.
DEVELOPMENT
Designing around Shorthand’s software limits
Building the digital experience inside Shorthand brought distinct technical limits. Motion was restricted to basic reveal effects, and responsive layout boundaries required careful attention to grids, element placement, and text hierarchy to guarantee total consistency across mobile, tablet, and desktop screens.
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
