B

Redesigning the nutrition ranking tool

Exploring data table design with complex filters and tradeoffs in table vs. list view

Project

This project focused on improving filters for complex data tables. While limited to redesigning this tool, the table design and filter behavior developed here were later integrated into the larger MFD design system.

Problem statement

The nutrition ranking tool has two landing pages with similar but not identical information. Despite high traffic, 86% of users leave quickly, often skimming the data before exiting. To improve engagement, the new design focuses on:

  • Filtering multiple criteria while keeping the tool easy to use.
  • Simplifying nutrient comparisons across searches.
  • Adding qualitative details to encourage deeper site exploration.

Proposed design

Redesigned nutrition ranking tool — single filterable data table with composite scoring
Original nutrition ranking tool — split filtering across two pages with card-based results
BeforeAfter

Data table & filtering for multiple criteria

Challenge: The current design splits filtering across two pages, limiting users to one or two nutrients and making the second page hard to find. We aimed to allow unlimited nutrient filters while simplifying food analysis.

Solution: A single, filterable data table. Instead of displaying results as cards, the new table format makes it easier to compare nutrient values.

To support sorting and filtering, the new design separates nutrient filters (which change the table structure) from metadata filters (which refine results without altering the table layout). The table sorts by a composite score, ranking foods based on how well they match selected criteria.

View prototype

Secondary view with hover state

Challenge: Data tables are dense, and too many buttons can clutter the UI.

Solution: Hover interactions for desktop. Relevant actions appear only when needed. Users can hover to see detailed nutrition data in a sidebar, multi-select items, and perform bulk actions.

Bulk action

View prototype

View detailed nutrition data

View prototype

Mobile view

Challenge: Tables are hard to view on mobile and need different design elements to match user intent.

Solution: Scrollable, easily filterable table view. Since mobile users likely want a quick lookup, we prioritized a functional mobile experience over a full redesign, ensuring usability without overcomplicating the interface.

View data table on mobile

View prototype

View nutrition details on mobile

View prototype

Next steps

Our next steps include:

  • Designing for different states (error, no result, etc.)
  • Designing the flow to the Comparison tool and other pages

Key takeaways

  1. Tradeoffs for table and filter designs

    This project was a great opportunity to explore the tradeoffs made by using table views — especially when compared to lists. In-depth exploration of filter options also yielded insights into analytics-dashboard patterns prevalent in common tools elsewhere. It ended up being a really enjoyable exercise — looking at artifacts I’m used to interacting with as a user from a design perspective.

  2. Using states to improve usability

    As data tables are information dense, I explored using different states to display the right interactions as they are needed. The limitation here is the additional cost of a widely divergent mobile design.