Learn nutrition data behind custom recipe
Designing data-heavy interfaces using clear layouts and smart visuals to simplify complexity
Project
This project was an extension of the My Foods dashboard, using new design elements for different user stages. The updated details view was later added to the main dashboard, keeping the site visually consistent.
Problem statement
The My Foods dashboard was designed for signed-in users, but most Recipe Nutrition Calculator visitors were one-time mobile users who left after completing their task. The page had too much information, making it hard to digest, especially on mobile screens. We focused on three key questions:
- How can we simplify the information into digestible sections?
- How can we ensure consistency across features?
- How can we optimize for both desktop and mobile?
Proposed design
Desktop view
Challenge: The old design overwhelmed users by displaying all information on one page without structure. Inconsistent formatting and user flows added friction, making it harder to find key details.
Solution: A structured, consistent design. The new single-page app uses two-column modals to compare ingredients and nutrition data without extra navigation. Nutrition details are grouped into sections, accessible via the navbar. The design follows dashboard elements, ensuring consistency and helping regular users navigate faster.
Old design
New design
Mobile view
Challenge: The old design worked on mobile but had too many page changes and “re-calculate” buttons, making it hard for users to follow the flow.
Solution: A mobile-friendly, seamless experience. The new design keeps everything on one page, updating automatically based on selections. A “calculate” button jumps to nutrition facts, and an “edit recipe” button jumps to ingredients, helping users navigate easily on small screens.
Old design
New design
Next steps
The objective of this project was to organize existing data to match the new design. Our next steps include:
- Define more specific user personas using this page; study their goals, user behaviors, and friction points on this page
- Run a usability test to validate readability and usefulness of each section
Key takeaways
Data-heavy UX design
By deeply exploring different options, I became adept at presenting content-heavy, complex data. By combining different techniques — such as simple layouts, strategic labels, progressive disclosures, and the right visualization methods — users can be helped to digest large amounts of raw information.
Mobile design strategies
While we focused on the desktop experience for the Meal Planner dashboard, mobile played a much bigger role in the Recipe Nutrition Calculator project. Accounting for different inputs (e.g. no hover-over effects, breaking up forms into several steps) and limited real estate were all additional intricacies present in designing for smaller screens.