The Modern Family Table
Project Overview
The Modern Family Table is a local business delivering home-cooked meals to families throughout the Philadelphia suburbs. Their goal was to create a reliable online ordering experience that simplified browsing meal options and placing orders — even with complex menu configurations and delivery restrictions.
I designed and built a customized WooCommerce-powered ecommerce website that met both customer needs and business capabilities.
UX Challenges
The project presented several unique complexity points:
- Complex menu structure: Customers can choose from many meal options, combinations, and substitutions.
- Delivery restrictions: Delivery only operates within specific ZIP codes, requiring real-time validation in the ordering flow.
- User confidence: Because there are many choices, customers may have questions — needing clear information points and support.
🔍 Research & Strategy
To ensure the site met user needs and business rules, I began with foundational UX planning:
Information Architecture
Created a clean sitemap showing all key content sections (Homepage, Meal Plans, Individual Meal Pages, Checkout, FAQ).
Wireframing
Established key page layouts with low-fidelity wireframes. These focused on:
- Homepage hierarchy
- Meal plan browsing
- Individual meal detail
- Purchase flow with conditional options
Style Tiles
Before visual design, I developed style tiles (color palettes, typography, textures, and icons) to align on the visual language and tone.
-
- Wireframe of Home Page
-
- Wireframe of Meal Plans
-
- Wireframe of Individual Plan
-
- Style tile option #1
-
- Style tile option #2
-
- Winning style tile
Design Implementation
Once the UX structure was approved, I moved into visual and technical development:
Visual Design
- Refined the winning style tile into full UI elements.
- Designed clean, approachable pages that reflect the brand’s homemade and family-friendly feel.
Functional Development
- Built the site on WordPress with WooCommerce to handle ecommerce.
- Used Gravity Forms (with add-ons) to manage complex meal option logic and bundle rules.
- Integrated a zipcode validation script that checks delivery eligibility before checkout, improving user clarity early in the purchase process.
UX Enhancements & Features
Smart Order Validation
- Prevents checkout for non-serviceable ZIP codes.
- Reduces frustration and support requests.
FAQ Support within Purchase Flow
- Answers customer questions at the point where complexity is highest (meal choices and options).
Custom Meal Option Logic
- Simplifies how users select and customize meals, even with many conditional rules.
Responsive Design
- Ensures consistent experience on desktop and mobile.
Outcomes
The final site delivers:
- A user-friendly way to browse and order meals
Clear guidance when menu configurations become complex
Reduced friction at checkout through delivery area validation
A cohesive brand presence online matched to the business’s personality
The Modern Family Table is now equipped with a robust ecommerce platform that supports both customers and operational requirements.