Joy, love & loneliness: FAM

FAM App Background FAM App Interface

How might we give back to our community more thoughtfully this Holiday season?

We as a team of 6 won first place for this Hackathon

I led the end-to-end product design efforts.

Hackathon Team

Problem

In the process of giving back to the community, how can we help and facilitate our community individuals to combat loneliness during the holiday season?

Focus

Individuals lacking family support around the holidays need a safe and collaborative space to provide them access to a loving and welcoming environment.

Key Research Insights

🕯️

Loneliness during holidays

31% report feeling lonely; 41% worry about loved ones (AARP survey).

"Thirty-one percent of respondents say they have felt lonely during the holiday season sometime during the past five years."

🤝

Disconnection in marginalized communities

LGBTQ+ and marginalized groups feel excluded from family traditions.

"Thanksdreading… you're surrounded by family that doesn't respect your pronouns."

📅

Lack of platforms to plan

Few spaces exist to organize or connect during holiday time.

"The desperate need to foster an environment for us to be together during this time."

👀

Fear of judgment

Social anxiety when joining new gatherings; fear of criticism or rejection.

"I still feel incredibly lonely and isolated."

Design goals

Make planning during Holidays more joyful, approachable, and accessible.

Provide resources to support connection and collaboration among individuals.

Make sure individuals' safety and privacy are taken care of.

Design Solution

Key design #1

Join family dinners during the holidays.

Choose a time, place, or event to share an intimate, warm gathering.

Key design #2

Chat with attendees

Learn more about others and collaborate on dinner plans to feel more involved.

Design process

Exploratory
Define/Ideation
Design
Deliver
Objective
Finding the specific problem space of what the community is struggling with.
Discovering why people feel lonely, what they need, and how we might help.
Exploring directions and variations and learning from what others did well. Turning the concept into a product.
Iterating designs to produce the final product.
Methods
  • Team ideation
  • Secondary research
  • Competitive research
  • Problem statement
  • Persona building
  • Competitive analysis
  • Defining design goals
  • Wireframing
  • User flow
  • Hi Fidelity design
  • Usability Testing
  • Prototyping
  • App development
Result
Defined the problem space, design vision, and whom to design for.
Found the major pain points and our primary user.
Confirmed the concept direction based on the design principles.
Built the final product with developers

Exploratory phase

Competitive Research

We studied 3+ community-focused products to see how they connect people, build trust, and create social experiences. Our goal was to learn what works well and where gaps exist.

Competitive Research Chart
  • Bumble → Simple, friendly onboarding.
  • OneTable → Strong host–guest connections.
  • Airbnb → Visually appealing & trustworthy UX.
  • Meetup / Travello → Clear event organization.

Define phase

Building primary persona:

To better understand the needs and motivation of our target audience and hone in on our primary user, we focused on a member of the LGBTQ community who, based on the secondary research, has most evidently been affected by a lack of family support during Holidays.

LGBTQ Allyship Research Chart

Behavior:

  • Enjoyed celebrating holidays since childhood
  • Holidays now bring feelings of stigma and judgment
  • Leads to avoiding time with family members

Needs:

  • A Holiday support system
  • Accessible and resourceful platform
  • Openly discuss and share holiday happiness with like-minded individuals at dinner.

Pain points:

  • A plethora of anxiety during holiday dinner with family
  • Have a hard time trusting new platforms
  • Lack of peer support during holidays

Design phase

Userflow:

Based on all the research, we thought to build user flow for a user initially using the app around some user experience design principles.

  • Require users to set up a detailed profile for security.
  • Provide clear next steps and facilitate the process.
  • Engage the user's attention on the most critical things in bite-size pieces.

Users will follow two important flows if they sign up as an attendee.

*For the given time of this hackathon we decided only to create user flow and screens for signing up as an attendee.

Set up personal attendee profile

Set up profile flowchart

Sign up for a dinner

Sign up for a dinner flowchart

Low/Mid Fidelity wireframes:

We built wireframes and prototypes to receive feedback, iterate, and ensure the flow works. We refined design details to achieve the vision and goals.

We designed around below content strategy principles:

  • The tone of voice should be warm and welcoming.
  • The app should provide features for collaboration and connection before the event.
Wireframes progression from low to high fidelity

Setting up a personal profile:

-Attendees need to create in-detail personal profiles to help Host in accepting the invite

What is your name?
Add your picture
When is your birthday?
How do you identify?
Where are you located?

Choosing a dinner invite

  • -Filter the events to your choice
  • -Tap to see event details
  • -Read reviews about hosts' old parties
  • -Exact location of the venue isn't shared till seat confirmation
Event browsing screen
Event details screen

A tool for collaboration

  • -Chat option for a conversation about event details.
  • -Menu could be discussed, and items could be assigned
Event overview and chat screen
Menu planning screen

Final design

Building profile

Step-by-step profile creation | Multiple verification options for security

Step-by-step profile creation Multiple verification options for security

Discovery

Event details and RSVP
Easy event exploration based on dietary restrictions and filters
Event search and filters
Before confirmation of a seat at the table, the host has the opportunity to review and verify the profile
Break the ice form
Any additional questions can be requested by the host
Seat confirmation

Collaboration

Chat menu
Attendees can suggest, assign, or bring dishes for the dinner
Chat group
Chat collaboration
Chat option enables attendee communication

FAM prototype using React Native

We worked with Software Engineers to convert Fam into a functional prototype.

Within the given time frame and with technical difficulties, we weren't able to build a 'Verifying profile' and 'Collaborating on menu items' in the actual prototype

What I learned:

  • Understood the differences between online and offline apps.
  • Better form design: what should I specify next to UI specs for handoff
  • Design decisions affect risks, costs, and development efforts.
  • Involving developers in design workflow right from the start of the project adds a powerful new perspective to UX work.
  • How to ask better questions from developers, and how to educate them to ask better questions from you
USE PROTOTYPE

Reflections

I learned tremendously as a designer and a collaborator! We were a very diverse team of engineers and designers. We learned to work together to overcome challenges, adapt to virtual-only circumstances, and develop a design we're proud of as a team!

1 / Collaborating with Engineers.

I learned the importance of handing off organized Figma files with clear annotations for development. Additionally, I understood the technical difficulties that come with prototyping a concept.

2 / Time management

With minimum hackathon time, I learned how we need to prioritize features to build an MVP that solves our problem.

3 / Design Process

I learned that the design process is not always linear and can be tweaked per the project's parameters. We need to innovate methods for ambitious challenges.

Let's work together

I'm always interested in new opportunities and collaborations.