Food52

human-centered design • Ux/ui • mobile app

overview

Food52 is an online platform that aims to inspire and enliven its expansive community of home cooks by sharing their own recipes and stories. However, Food52's website experience failed to engage a large portion of its members and approached Berkeley Innovation ↗ to help address their problem.

As a Product Design Consultant, I reimagined the website's community to encourage more activity for both existing and new users of Food52 in a newly designed 0-to-1 mobile app.

logistics

Timeline
February - May 2021

Team
Etheline Nguyen,
Jessica Huang,
Michael Cabrera,
Jennifer Tran (Mentor)

Tool
Figma

process

Competitive Analysis
Discovery Research
User Testing
Affinity Map
Concept Map
User Flow
Persona
Rescoping Problem
Design Exploration
Wireframe
Prototype

The problem

While there are over two million registered community members of the Food52 website, engagement among these members with its current features and offerings is significantly low.

Thus, to address Food52's large fall out in engagement, we asked:

💭

How might we ensure the website's community offerings meet the needs of our existing members to increase engagement?

discovery research

In contrast to Food52’s enormous user base and following, the individual members’ engagement within the community fall relatively short. As the disparity between the number of users and their activity was the main problem, we decided to learn why users weren’t being as engaged—or choosing to stay unengaged.

By conducting research, we hoped to understand:

How to maintain user retention
How to create or mimic a loyal following
What makes a successful online community

To address these questions, we conducted a 3-step research plan to identify the pain points and elements of an engaging community.

6 Competitive Analyses

Survey/Screener

14 Interviews/User Testing

insights: Some pain points we uncovered

🙈

Most of the community is located under a single tab—not visible to many users.

While Food52 wanted to spark an engaging community, most of the site's community offerings were located under a single tab. Due to the unintuitive design, majority of users never navigated to, and thus never discovered, these features.

“I want them to peel back the curtains; don’t just tell me there is community, show me.” - Rachel, Active User

😰

Current offerings require users to produce original content, which is both daunting and too high of a commitment.

Users are mainly encouraged to participate in the community by posting user-generated content (UGC), such as sharing their own recipes. However, even posting a short comment is time-consuming.

Most of the website’s traffic is from users searching for others’ recipes, not posting their own. The lack of UGC, in turn, discourages other members to participate as well.

“I don’t contribute mainly because I don’t have time to.” - Vincent, Non-user

“If more people were actively engaging, I would feel more encouraged to engage actively.” - Rebecca, Non-user

🤐

Users lack personal connections with other users, undermining trust within the community and disincentivizing participation.

Knowing more about other users of a community builds credibility and trust, which encourages contribution. The current Food52 website fails to offer opportunities for users to build authentic connections with others.

“[For me, the ideal] community is a place to establish friendships.” - Stephanie, Non-user

“Community is a safe space to share ideas, talk to others, and learn from others.” - Rebecca, Non-user

defining the target Persona

And now... meet Alex!

From our research insights, we generated 2 main personas: (1) the existing Food52 user who comes to the site for recipes, and (2) the average foodie looking to join an active online community.

Because our problem scope focused on increasing community engagement, we decided to move forward with our second persona—Alex.

rescoping the problem

Hold on...

While Food52 was initially interested in fostering a tight-knit community among their existing users (female-identifying, age 44-55), this demographic tends to contribute less to an active community compared to a younger demographic. Thus, to solve the problem of a disengaged community, we decided to expand the target audience, in addition to the original aim of improving the user experience.

The reiterated emphasis for a lively community then led us to revise our scope to better guide our ideation process.

Our revised problem scope:

💡

How might we incorporate community as a holistic experience on Food52 to engage existing and new members?

now, to address the problems...

With my team, I started ideating various features that would address the biggest pain points, with a couple things in mind:

Feature Requirements

Engaging spaces of discussion
Easy participation
Reliable community
Maintain site's intent: recipe search

Design Considerations

New ideas rather than redesigning current ones
Improving touch points outside of the community tab (ex. recipe reviews) for a holistic experience
Web vs. Mobile solution
'How do we differentiate from competitors like New York Times Cooking?'

We then selected the top five ideation concepts by sorting for low effort & high impact.

visualizing our solution

Thus, our key insights, refocused problem scope, and top ideas all pointed to a new direction for the final solution—a mobile app, instead of a website redesign.

After solidifying this direction and confirming with the clients, we started imagining what the mobile solution would look like on Figma.

Low Fidelity Wireframes:

Mid Fidelity Prototypes:

Finding Recipe Inspiration

On her dashboard, Alex browses through recipes that are suggested based on her chosen tags, community favorites, and staff picks, and is also presented with user-created recipe collections.

Community Support Throughout the Process

As Alex cooks, she uses the video walkthrough that not only presents the original directions, but also pulls the most relevant tips for each step from other community members.

Engaging with the Community

Keeping in mind that people feel intimidated to post, we designed a clear, yet friendly CTA to prompt Alex to share how the process went and what she might do differently next time.

Low-commitment Reactions

In the comment section, Alex can quickly upvote advice that came in handy while she was cooking to help other users in their cooking journey. This is a simple way to interact with the community even if she didn’t want to post original content.

Inspiration, Curated

Alex enjoys the recipe and wants to share with other community members who also love tofu so she adds the recipe to a collaborative collection named “Easy Tofu,” allowing other members to easily view it as well.

Building Friendships

From the collections, Alex finds John, who she shares a lot in common with. She wants to befriend John and follows his profile. Later, she is notified that John is following her back—they are now friends!

Pain points & Motivations...

Dislike of time-consuming interactions
Want for genuine trustworthy connections
Intimidation to contribute to a professional community
Wish to easily access recipes

... Addressed!

Easy, low-committment ways of engagement
Humanizing users via customizable profiles
Prioritizing user generated content in visibility
Personalized, curated recipe feeds & discovery

💡 Reflection & Takeaways

With the help of exceptional teammates and amazing clients, I not only enjoyed but learned so much from this semester-long project! From addressing stakeholder needs to designing a mobile prototype from scratch, the project offered many opportunities for learning and improvement:

Navigating a broad project scope.

Proposed with a broad problem statement, our team was initially lost on how to narrow down the scope to start designing. While we eventually decided to prioritize an active community based on our user research (respondents mostly age 20-40), we wish we had more time and resources to recruit interviewees within the company’s original target demographic (age 40-50), as this may have steered the project in different directions.

I learned that narrowing a broad problem scope is not only crucial in creating a non-ambitious, feasible design, but dictates the entire navigation and road-map of the project.

A more targeted solution.

During our user testing, we uncovered that there is a difference between an app for social media and an app for pure utility. It is important to define the intention of the user experience, whether it be focusing on fostering genuine connections or accessing high quality recipes with only few entry points to the community. We wish we better clarified our vision and Food52’s definition of “community” in order for a more solidified intention behind our solution.