Designing an Advanced Filter System for Foodee’s B2B Platform
Responsive Web App
UX/UI Case Study
Duration: 6 weeks
Overview
Foodee is a B2B platform that connects local restaurants with corporate clients. I led the redesign of its advanced filtering system to simplify meal selection based on dietary needs, cuisine preferences, and company values. The new system improved usability and increased order completion by 22%, with ongoing refinements driven by user feedback.
Tools
Figma
FigJam
Photoshop
Google Analytics 4
Heap Analytics & HotJar
Skills
User Personas
Usability Testing
Responsive Web Design
Inclusive Design & Accessibility
Applying the Design Thinking Framework
Design Thinking grounded decisions in user needs and guided iterative improvements. The graphic below illustrates how each phase shaped the project.
Customer Personas
Buyer’s Journey
Problem Statement
Foodee’s rigid filters limit clients’ ability to find meals that meet dietary and company needs—slowing decision-making, lowering satisfaction, and reducing order volume.
Defining Opportunity
How might we design flexible filters that streamline meal selection, increase client satisfaction, and drive higher repeat order rates?
Feature Mapping:
A cross-department brainstorming and feature mapping session brought together product, engineering, and sales to identify key pain points and align on high-impact features for users and the business.
01
What is it?
02
Benefit
03
Differentiation
04
Target Segment
Prototype
Brand Color Palette
The palette centers on Foodee’s brand red, paired with retro-inspired pastel green and warm yellow accents to create a dynamic, versatile look for marketing assets.
Brand color
Secondary color
Greyscale
Regular
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789 $%&#!@?*“”
Uses: body copy, medium text sizes.
Do not use: for small or large text, headlines, UI elements, or small text.
Medium
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789 $%&#!@?*“”
Uses: UI elements and small text. Works well for instructions.
Do not use: for headlines
An italic version of Medium can be used for this customer quotes.
Bold
abcdefghijklmnopqrstuvwxyz
abcdefghijklmnopqrstuvwxyz
0123456789 $%&#!@?*“”
Use: Headlines and button text
Do not use: Large paragraphs of body copy.
Typography
TT Norms
Foodee’s typeface, TT Norms, brings a modern, approachable feel—balancing the laid-back vibe of a great meal with the professionalism of a corporate partner. It defines our brand voice across product and marketing.
Iconography
These icons were designed to clearly represent a range of personal cuisine preferences, enhancing clarity and user choice.
Filter System & Restaurant Display Components
Buttons & AA Conformance
High Fidelity Designs
Test Phase
We launched a lean V1 without pricing filters or menu images due to backend limits. User testing showed strong positive feedback on clarity and ease of use—validating our phased approach and helping prioritize V2 features while maintaining stakeholder confidence.
My team loves to use Foodee. There are so many options, ease to orderings, and the site is so user friendly. I would recommend this to anyone!
Allison Lattanzio
Navan
It’s now effortless to apply dietary filters and select diverse-owned restaurants for cultural celebrations. This update has saved us time and aligns perfectly with our company values.
Jamie Patel
Snowflake AI
Foodee’s advanced filters make it easy to find meals that fit everyone’s dietary needs. Choosing and organizing office lunches is effortless, making my job a breeze.
Olivia Barbieri
Captura
Outcome and Success Metrics
The responsive filter system made it easy to navigate dietary, cuisine, allergy, and CSR preferences. Ongoing testing and iteration improved interactions and drove an increase in repeat corporate orders.
+18%
Add-To-Cart Rates
+22%
Completed Orders
+36%
Restaurant Page Views
Final Product UI
Key Learnings
Designing for Impact, Not Perfection
Focused on core UX flows for V1—delivering value quickly within constraints.
Framing Design as Business Strategy
Used design to align teams and solve real business problems—not just improve visuals.
Problem → Design → Outcome
Tied UX decisions to ROI and conversion to gain stakeholder buy-in and show business value.
Strategic UX Thinking
Approached UX as a long-term investment—balancing user needs with business goals.
Acknowledgments
Special thanks to Richard Ballerman for his role in Foodee's design, and to Lia Mattacchione for expertly coding and bringing the responsive designs to life.
Location
San Francisco–based, and available for both in-person and remote collaborations.