Family Feast

A recipe sharing site to keep recipes organized and to connect with others

Family Feast Main Screen
Home screen for Family Feast

Overview

Family Feast is a responsive recipe‑sharing web application designed to help families centralize, organize, and share their favorite meals. Built with a modern aesthetic inspired by iOS 26’s liquid glass UI, the design emphasizes simplicity and accessibility across mobile, tablet, and desktop devices. I led the entire design process—from research and wireframing to high‑fidelity prototyping and responsive layouts.

Problem

Families often keep recipes scattered across notes, text messages, and various devices. This fragmentation makes it difficult to locate recipes quickly, maintain consistency, and collaborate with other family members.

Goals

Create a centralized, user‑friendly recipe library for families, enable easy browsing, filtering, and recipe creation on any device, deliver a visually engaging yet accessible experience using modern design trends.

User Persona: Samantha Lee

Samantha Lee is a full‑time working mom who wants to keep her family’s meals organized and stress‑free. She often finds herself searching across multiple apps and devices for recipes while juggling a busy schedule. Samantha needs a simple, intuitive tool that saves time and keeps all her family’s recipes in one place.

Design Process

Wireframes

Wireframes
Wireframe

Rough sketches of what I envisioned the Family Feast app to look like


Low Fidelity

Low Fidelity
Low Fidelity mockup

Removed placeholders and started adding in content that would be used in the final version


Final Design

High Fidelity Mobile
Final Design for Family Feast on Mobile


High Fidelity Tablet
Final Design for Family Feast on Tablet

Expanded content to ensure that it fits on a tablet screen


High Fidelity Desktop
Final Design for Family Feast on Desktop

Adjusted spacing and sizes of content for desktop devices


Key Features

  • Recipe cards with liquid glass styling: Visually engaging cards that highlight titles, tags, likes, and creator info.
  • Advanced filtering & search: Quickly narrow results by category, ingredients, or user favorites.
  • Cross‑device responsiveness: Optimized layouts for mobile, tablet, and desktop.
  • Create & edit recipes: Step‑by‑step forms for adding ingredients, instructions, and photos.
  • Modern aesthetic: Gradient background with a textured pattern and iOS‑style glass UI elements.
  • Prototypes

    High-Fidelity UI

    Mobile Home
    Final Design for the Home screen on Mobile
    Mobile Edit
    Final Design for the Edit Recipe screen on Mobile
    Mobile Liked
    Final Design for the Liked Recipes screen on Mobile

    Desktop Home
    Final Design for the Home screen on Desktop
    Desktop Create
    Final Design for the Create Recipe screen on Desktop
    Desktop Filter
    Final Design for the Filter screen on Desktop

    Mobile Prototype: Ensure that all functionality is working and easy to navigate through

    Desktop Prototype: Ensured that everything flows smoothly from mobile to desktop

    Accessibility Considerations

  • Chose colors and opacity levels to ensure sufficient contrast between text, buttons, and the background.
  • Designed large, clear tap targets for recipe cards, buttons, and filters.
  • Added consistent hover, focus, and active states to improve navigation for keyboard and assistive technology users.
  • Used clear iconography paired with labels for features like filters and likes to avoid reliance on color alone.
  • Structured layouts and headings for clarity across different devices and screen sizes.
  • Reflection

    Family Feast challenged me to balance visual innovation with usability. The iOS‑style liquid glass components elevated the brand while still maintaining strong accessibility and contrast standards. Designing responsive layouts taught me how to adapt UI components for multiple breakpoints without losing cohesion. If expanded in the future, I would explore collaborative features like recipe sharing between households and richer user profiles.