Recipe Sharing

App Screen 1
App Screen 2
App Screen 3
App Screen 4
Role: UX Designer & Researcher
Duration: 4 months
Tools: Figma, Adobe Illustrator, Figjam
Team: Chico, Ziyun, Mila, Meshach, and Azuna

Project Overview

This project addressed the challenge of maintaining family connections across generations. We aimed to develop a digital service that helped grandparents share family recipes in accessible formats, allowing grandchildren to learn, cook, and build deeper relationships. The goal was to strengthen emotional bonds and preserve cultural traditions in a meaningful, interactive way.

The Problem

Goals

  • Design a user-friendly, clean interface that is convenient and intuitive for all users, including tech-savvy individuals.
  • Create content that highlights meaningful family moments and celebrates cherished family traditions.
  • Develop interactive, gamified experiences to actively engage both older and younger generations.

User Pain Points

  • Parents struggle to balance work and family time, feeling disconnected due to busy schedules, digital distractions, and ineffective family apps.
  • Many families struggle with open communication, especially on sensitive topics, as smartphone distractions widen the gap and hinder children's communication skills.
  • Generational gaps in values, technology use, and daily habits create barriers to connection and understanding between younger and older adults.

Research

Methods Used

  • User Interviews
  • Competitive Analysis
  • User Testing
  • Surveys
  • Personas
  • User Flow

Key Findings

  • Tag-Team Parenting: Parents face increasing challenges balancing work and childcare due to lower income, limited time, and rising childcare costs (average increase of 5.3% in 2024), especially as return-to-office policies resume.
  • Diverse Family Dynamics: Families across different sexes, genders, races, ages, and family structures experience unique parenting and communication challenges.
  • Generational Gaps: Age and generational differences contribute significantly to communication breakdowns within families.
  • Screen Time and Bonding: Excessive screen use is reducing valuable family bonding time, making meaningful connection more difficult.
  • Fathers’ Work-Life Struggles: 67% of fathers feel guilty about missing key moments in their children's lives due to work, despite growing efforts to promote equal parenting roles.
  • Paternity Leave Progress: Paternity leave increased by 250% among Canadian companies in Quebec to encourage greater father involvement.
  • Underdeveloped Support: Marriage counseling services, especially in Asian communities, remain limited and need further development.
  • Parenting with Technology: Tools like smartphone babysitting are playing a growing role in raising children.
  • Digital Impact: Technology is shaping family relationships and influencing parenting and family management.

Early Prototype

Screenshot showing ingredients interface Screenshot showing voice listening feature Screenshot showing recipe name input Screenshot of recipe view

This prototype showcases the initial concept for the recipe-sharing mobile application. It features a minimalist design with simple colours. The main purpose of this prototype was to test functionality and identify areas for improvement to help us refine and develop a polished final version.

The Solution

Design Decisions

We used a decision matrix to select our final design, focusing on engagement and feasibility. Our research showed that generational gaps often come from a lack of shared interests, so we prioritized creating an engaging, shared experience. Feasibility was also crucial to meet our project timeline. We were inspired by Nainai’s Recipe, a 3D cooking game that connects players through family recipes. While this concept aligned well with our goal of connecting generations through food, we recognized that 3D animation was beyond our team’s capabilities and timeline.

Design System

The design system uses a warm, earthy colour palette with brown (#86674B) buttons placed on soft off-white (#F9FAFC) backgrounds, supported by soft green accents (#DCF1AA) and vibrant orange-red highlights (#E8571B). Bright orange (#FFAD3A) is used for playful and secondary highlights, while black (#000000) is used for text and also to add colour and depth to certain elements within the mobile application. Typography blends SF Pro Display and Darker Grotesque to create variety and visual interest. The primary title style uses SF Pro Display Semibold at 35px, while secondary titles use Darker Grotesque Bold at 24px. Body text is set in SF Pro Display Semibold at 15px, 18px, 20px, and 22px, depending on the section and visual hierarchy. This combination of colours, typefaces, and sizing builds a cohesive, accessible, and engaging visual language across the design.

Design System

Color Palette

#86674B
#F9FAFC
#000000
#DCF1AA
#E8571B
#FFAD3A

Typography

Heading 1

SF Pro Display Semibold 35px

Heading 2

Darker Grotesque Bold 24px

Body Text

SF Pro Display Semibold 15px, 18px, 20px, 22px

UI Components

Screenshot showing ingredients interface

Results

Key Achievements

  • Incorporated personalized recommendations to enhance user engagement and discovery of new recipes.
  • Improved user experience by minimizing distractions and making it easier to access family members' recipes.
  • Implemented user feedback to ensure the design better meets user needs and expectations.

User Feedback

  • "The voice input process offers a detailed and thoughtful flow, providing users with clear steps to follow."
  • "The AI-generated recipe page invites exploration, and the "4 servings" icon draws attention in a way that encourages interaction."
  • "The button content sparks curiosity, creating opportunities for users to engage with the interface."
  • "The voice recording step introduces an interactive element, adding variety and engagement to the experience."

Key Takeaways

What Worked Well

We significantly enhanced the mobile application's visual design and overall functionality, implemented essential accessibility features, and optimized the navigation for a more seamless user experience.

Lessons Learned

Communication challenges sometimes led to misalignment and delays, as information wasn’t always shared clearly or on time. Establishing clearer expectations, regular check-ins, and faster feedback loops could have improved collaboration and helped the team stay more connected throughout the process.

Thesis Project Sleep Tracker