Belle Lee - Product Designer

redesigning recipe nutrition calculator

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

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.

Role

Product designer

Date

August 2021

Deliverables

Wireframe
High-fidelity design

Proposed Design

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

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 has also yielded insights into analytics dashboard designs prevalent in common tools elsewhere. This ended up being very enjoyable - looking at artifacts that I am used to interacting with as a user from a design perspective.
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.

Unique challenges of organizing a large volume of content
This project provided an excellent opportunity to view content consumption as a user experience challenge and to identify different ways to improve both reading and authoring workflows. Design is just as important as content, which is why it's important to make your blog as user-friendly as possible.
Working better with engineers through rigorous documentation
At the start of the project, the goal was to document the existing blog styling in preparation for the authoring tool migration. This provided me with a solid understanding of both the existing design and the new components we needed to create, down to the smallest details. By creating comprehensive design specifications, I was able to effectively communicate with the engineers and address any questions they had throughout the implementation process. This experience enabled me to create my own techniques for documenting design that improved communication with engineers.