Back to Projects
Website Redesign
Harvard Nutrition Resource
Contribution
Team research, IA redesign, low-fi & Hi-fi prototyping
Focus: Healthy Eating Plate Page UIUX, Tree Testing Data Analysis
Timeline
2 months
Contributors
Xinyu Wang, Mai, Mars
Platform
Website
This project proposed a partial redesign of The Nutrition Source website to improve navigation, content clarity, and visual hierarchy, making credible nutrition information easier for first-time users to explore and understand.
The Challenge : A trusted site without a clear learning path
The Nutrition Source has strong credibility as a Harvard public health resource, especially in a time when nutrition misinformation is widespread. But our initial audit revealed a disconnect: the site had reliable content, yet the experience did not always help users confidently find or use it.
Unclear first impression
The original header did not clearly explain what The Nutrition Source offers or how first-time users should begin
Flat homepage hierarchy
The homepage presented many cards with similar visual weight, making it difficult to identify priority topics
Hidden site structure
The primary navigation showed only a limited view of the site, while the broader structure was hidden deeper in secondary navigation
Weak learning pathways
Many links led directly to individual articles instead of category-level pages, making related nutrition topics feel disconnected
These issues shaped our central design challenge: how might we turn a credible but dense nutrition resource into a clearer, more guided learning experience?
Next
From Credible Content to Everyday Needs
User Research
After the site audit, we needed to understand whether these structural issues affected how real users approached nutrition information. Through semi-structured interviews and affinity mapping, we found that users trusted the site’s credibility, but needed clearer, faster, and more practical ways to use its content.
Affinity Diagram
Themes:
Users
Health Behaviors & Awareness
Information Seeking
Recipes
Reactions to Website
Insight 1
Users cared about eating well, but their food choices were shaped by cost, convenience, taste, time, and family needs
Nutrition guidance needed to feel practical, not just educational
Insight 2
Users trusted The Nutrition Source, but found it dense, academic, and text-heavy
Keep credibility while making content easier to scan and understand
Insight 3
Users wanted clearer recommendations, more visuals, and advice that considered cost, convenience, and cultural diversity
Nutrition education needed to connect to everyday actions: what to eat, buy, and cook
From Content Categories to User-Friendly Pathways: Redesigning the site structure around how people actually look for nutrition guidance
Rewriting labels and reorganizing the site around how users understand nutrition
After user research, we realized that users did not approach nutrition information through academic or institutional categories. They came with everyday needs: understanding what to eat, what to drink, how to build a healthier diet, and how nutrition relates to health conditions.
To support this behavior, we redesigned the information architecture in two ways: first, by reorganizing content into clearer user pathways; second, by rewriting labels to feel more familiar, practical, and easier to understand.
The structure was hidden and hard to scan
The homepage primary navigation only showed a few links, while the full content structure was hidden deeper in secondary navigation. This made it harder for users to understand the site’s full scope at a glance.
Methods
How we tested and refined the content structure : Carding Sorting & Tree Testing
After revising the original page labels, we used two IA research methods to understand whether the new structure matched how users would naturally organize and find nutrition content.
1. Card Sorting
We asked participants to sort revised page labels into groups that made sense to them. Then, we used a similarity matrix to identify strong topic relationships and form major content clusters.
2. Tree Testing
We ran a pilot tree test with 3 participants, then an official test with 6 participants. Users completed scenario-based tasks, such as finding information about immunity, mindful eating, coffee, protein shakes, school nutrition, and food waste.
Designing for a Reference Site Comes With Unique Challenges
The Nutrition Source is informational, not task-oriented.
Users explore freely rather than complete specific actions.
Without clear user tasks, UX methods were harder to apply cleanly.
There were few clear wrong answers, making patterns harder to isolate.
Many topics overlapped, so users’ “incorrect” paths were often still reasonable.
What this taught us
For a reference site, the goal is not to force one correct path. The design needs to support exploration with clearer labels, stronger navigation, and multiple entry points into related content.
So we analyzed the data we got, and came up with this…
Group 1 : What Should I Eat?
The original “What Should I Eat?” section focused on a few core food groups, but related topics like fiber, carbs and blood sugar, added sugar, and personalizing nutrition were not fully surfaced in this pathway.
Before
After
Card Sorting
Users grouped core food topics with related guidance, so we expanded this section beyond basic food groups.
We used the data as a guide, but made final choices based on content logic: Water moved to What Should I Drink?, while Added Sugar stayed here.
So we added
Fibers
Carbs and Blood Sugar
Added Sugar
Personalizing Nutrition
Group 2 : Healthy Food Environment
The original “Healthy Food Environment” section grouped institution-related topics together, but the label felt broad and less immediately clear. We reframed it as Healthy Food Settings to make the category feel more concrete and connected to real places where nutrition decisions happen.
Before
After
Card Sorting
We added
Original : How to Reduce Your Sodium Intake
Nutrition Catering
Original : How to Reduce Your Sodium Intake
Building Active Communities
They were not in the original section but were sorted into this section
Group 3 : Healthy Food Environment
The original “Healthy Food Environment” section grouped institution-related topics together, but the label felt broad and less immediately clear. We reframed it as Healthy Food Settings to make the category feel more concrete and connected to real places where nutrition decisions happen.
Before
After
Card Sorting
We added
Original : How to Reduce Your Sodium Intake
Balanced Salt and Sodium
It was not in the original section but was sorted into this section
Tree Testing
Pilot:
The original label felt too abstract
It did not clearly communicate diet-related guidance
We wanted to make the category easier to understand
Original : Healthy Weight
Balanced Body
Healthy Diet
Official:
This should be more visible and emphasized
A question-based label felt more aligned with their expectations
Improve its priority
Healthy Diet
What is Healthy Diet
Move above "Your Health and Disease"
Group 4 : Disease Prevention
The original “Disease Prevention” section focused on specific conditions, but card sorting showed that users also connected stress, sleep, immunity, and aging with long-term health. We reframed it as “Your Health and Disease” to make the section broader than disease prevention, but still clearly condition-focused.
Before
After
Card Sorting
We added
Original : Sleep
Sleep and Health
Original : Stress
Stress and Health
Original : Healthy Longavity
Healthy Aging
Tree Testing
Pilot:
Official:
Made the category more specific
Nutrition and Your Health
Nutrition and Health Issues
Your Health and Disease
Made the category more condition-focused, Clarified the difference between health issues and general diet guidance
Group 5 : What Should I Drink
We reframed “Healthy Drinks” as “What Should I Drink?” to make the section feel more question-based and decision-oriented, helping users compare water, healthy drink options, sugary drinks, and drinks in moderation in one place.
Before
After
Card Sorting
We added
Water
Added Sugar
Then comes to our new Site Map
From Research Insights to Design Decisions
Using user needs and IA findings to redesign the homepage, Healthy Eating Plate, and recipe discovery experience.
1. Homepage: From Content Wall to Guided Entry
2. Healthy Eating Plate: From Dense Article to Guided Learning
3. Recipes: From Static List to Practical Discovery
Design Critique: Refining the First Prototype
After presenting our low-fi direction, we used feedback from the design gallery to identify what needed to be clarified, prioritized, and improved before moving into the next prototype.
Checking Whether the Design Was Clear Enough
We tested the low-fi paper prototype to see whether users could navigate the new structure, understand key features, and find relevant nutrition content.
Interactions were manually simulated by switching paper screens and components based on participant actions.
Key features attracted attention, but did not provide enough clarity for confident interaction
Users noticed interactive features, but they did not always understand what would happen after clicking.
Change the position of the "Start with your goal" feature?
Add a subitile?
Rethinking the donation section title? Also the " for the community" section?
Visual hierarchy did not always support quick understanding
Some sections did not clearly communicate what was recommended, what was secondary, or what users should focus on first.
Prioritize the visualization?
Add some meanings to the visualization?
Add more visualizations in the recipes page?
Navigation should support discovery, not hide it
Users could sometimes find content only by guessing or using fallback areas like “More Topics.” This showed that navigation needed to make topic relationships and key pathways more visible.
Users participants struggled to find the page, requiring multiple clicks and visiting several pages before finding the right one.
Considering revise the "Building a healthy and balanced diet" label?
Final Redesign : A More Guided Nutrition Learning Experience
Based on testing, we refined the experience to make nutrition content easier to find, understand, and apply.
1
Clarified the goal feature
We made the purpose of the goal selector clearer, so users could understand what content would change after making a selection.
2
Prioritized visualization
We placed visual examples closer to the related content, helping users connect nutrition concepts with real food choices. We used stronger diagrams, food imagery, and examples to make dense educational content easier to remember
3
Made interaction cues more obvious
We added clearer copy and visual cues to show that the Healthy Eating Plate graphic is interactive.
4
Improved scannability
We broke long content into clearer sections (including changing some less important contents into dropdowns), making it easier for users to scan, compare, and continue reading.
1
Made the homepage a clearer entry point
We replaced broad browsing with clearer navigation cards, helping users understand the site’s main content areas faster.
2
Clarified the “I’m looking for…” section
Testing showed users mistook the tag section for a filter, so we added search functionality and reframed it as a clearer discovery tool
3
Reduced reliance on “Explore More”
Users felt limited when important topics were hidden under “Explore More,” so we surfaced key pathways more directly on the homepage.
4
Reworked audience-based sections
The “For the Community” section caused confusion, so we replaced audience groupings with general site navigation cards that were easier to understand.
5
Made donation messaging more transparent
“Make a Gift” felt unclear, so we changed it into a more descriptive call to action that better explains the purpose of the request.
1
Made recipes easier to search and sort
Users wanted faster ways to find recipes by ingredient, cuisine, dietary needs, and personal goals, so we added a clear search bar, quick-sort tags, and filter menu.
2
Created a more inviting entry point
The hero section uses expressive copy and image space to make the recipe hub feel more engaging, approachable, and food-centered.
3
Added stronger visual appeal
Because users wanted more engaging visuals and better recipe previews, we designed recipe cards with images, short descriptions, cook time, and serving size.
4
Connected recipes to real-life needs
The quick tags, such as vegetarian, vegan, gluten-free, budget-friendly, and high-protein, help users start from practical situations instead of browsing a long recipe list.
5
Improved decision-making with recipe cards
Each card gives users enough information to quickly decide whether a recipe fits their needs before opening the full recipe page.
What We Learned From the Redesign?
1. USERS HAVE COMPLEX NEEDS
Users value nutrition and try to make nutritious choices but reality and their needs often get in the way. Our goal is to help address their needs and goals realistically.
2. NAVIGATING KNOWLEDGE TAKES CARE AND DIRECTION
When presenting users with a breadth of information, guidance goes a long way in building confidence and positive experiences.
3. TRUSTWORTHY CONTENT STILL NEEDS TRANSLATION
Harvard’s content is credible but users still need clear guidance, signposting, explicit language, and visual hierarchy to better understand concepts.
Portfolio
Home
Work
Process
Learn
About
Resume
Blog
Legal
Privacy
Terms
2026