Centralize recipes for an efficient search experience

Project Overview

About Popular Table

In 2020, my former colleague founded Popular Table, a social cookbook app. Unfortunately, the project didn't fully get off the ground. Therefore, in 2023, when I was refining my design skills, I collaborated with her to revamp the original concept and design a Minimum Viable Product (MVP).

Problem

People lack a centralized system for organizing recipes found online or in cookbooks. This lack makes searching for and sharing saved recipes time-consuming and frustrating.

Solution

A mobile application that enables users to store their personal recipes or those from third parties. These can be organized and searched efficiently.

Pivoting from the original idea based on research

The founder's original concept was to develop a social cookbook app, enabling home chefs to share their recipes and draw inspiration from those they follow - similar to Goodreads, but for cooking.

However, our updated research invalidated the original idea 👀

• User research revealed that the most significant challenge was organizing and searching for recipes. Furthermore, home chefs rarely posted their creations on social media, instead being passive consumers of recipe content.
• Competitive research discovered a recently launched app, Pepper, beat Popular Table to market as a “social cookbook”.

Research to pinpoint the priority problem

Competitive analysis to surface opportunities

A deep-dive and SWOT analysis of four competitive products:

• Pepper - Direct competitor, specializing in social features for sharing recipes
• Cookbook - Direct competitor, specializing in saving recipes from third-party sources
• Instagram - Commonly mentioned during user research for recipe discovery
• New York Times Cooking - Commonly mentioned during user research for credible recipe source

SWOT Analysis

User Interviews to prioritize opportunity space

I conducted five virtual interviews to understand how people discover, organize, and access recipes. The purpose was to identify key pain points that Popular Table might address.

All participants passed the following screener:

Rapid hypothesis validation after each interview

Stakeholder alignment on the priority problem to solve

Based on an Affinity exercise, I created a synthesized Opportunity Tree to further the business objective of increasing closed beta sign-ups.

The prioritized problem

I presented my insights to the stakeholder, using the Opportunity Tree and the developed persona. Using the framework of customer value, business value, and effort, we prioritized the following problem:

I want a central place to save my recipes

Key learning By demonstrating the business impact of each of the opportunity identified by research, I was able to influence the founder to reprioritize ideas and pivot their original solution.

Solution

A mobile application, Popular Table, that allows users to save their own or third-party recipes, which can be efficiently organized and searched.

Through a divergent thinking workshop, I finalized the list of Priority 1: "Must Have" features for the MVP and backlog items for consideration in the future roadmap.

User flows and sketches to identify how users might save recipes

Our initial approach required users to leave the third-party app (such as Instagram or TikTok) where they discovered the recipe, and save and categorize it in Popular Table.

Following user testing with low-fidelity sketches, we discovered that users prefer to continue browsing the third-party app and delay visiting the Popular Table. To address this, we adopted a common iOS modal pattern (used by Slack, Gmail, etc.). This allows users to save the basic recipe from the third-party app without having to navigate away.

Wireframing to tackle a key design challenge for completing recipes

Since users are saving third-party recipes like TikTok or Instagram, the recipe data is inconsistent and incomplete. In order to create a useful search experience, we needed to help users complete recipes.

I came up with 3 ideas to test with users to inform the impact when evaluating it against effort.

Designing the sitemap for user experience planning and navigation design

Informed by a card sorting exercise and user tests, I outlined the hierarchical arrangement of pages, content, and features, to provide a bird's-eye view of the entire MVP system.

Usability tests reveal opportunities for iteration

I carried out five virtual usability tests on three key user flows in the MVP. This helped me prioritize several iterations.

Simplify the recipe preview card

Increase hierarchy of primary CTA

Reduce visual density of tag selection

Usability test success metrics

High-fidelity designs

Prototype for saving, completing, and searching recipes

Click to view the Prototype

High-fidelity designs of key flows

Below are the key screens for the Popular Table app, along with highlights of my design decisions.

Saving a recipe from Instagram

Job to be Done: I want to save recipes in one system of record, so I can easily search them.

Design decision

• Efficiency of use: When users find a recipe they like on a third-party app, they want to save it to Popular Table quickly so they can return to their task. This workflow allows the user to remain entirely in the Instagram app by utilizing the iOS modal to efficiently tag the post.

Completing the recipe details

Job to be Done: I want to easily complete a recipe, so I can search and cook it in the future.

Design decision

• Data reliability: In order to enhance the search and cooking experience in Popular Table, I addressed the UX challenge of encouraging users to fill in missing recipe data from third-party posts. Considering the Impact vs. Effort and user feedback, I designed an efficient three-step workflow to complete the information.

Searching recipes in the cookbook

Job to be Done: I want to search my cookbook, so that I can find a recipe to make.

Design decisions

• Matching search mental models: Based on user research, I designed a search bar at the top of the Cookbook page. This helps users understand that they can search for saved recipes. I used a similar design pattern for the Filter experience.
• Efficiency of use: I designed interactions that guide users through the workflow as they type their search. For instance, before typing, users will see "recent" and "trending" searches. After they've entered at least three characters, the "best matches" will appear.

I decided to leverage the Chakra design system for the following reasons:

• Developer was most comfortable using React Native
• Simplicity and modularity of the components
• High Accessibility standards

Check out the UI kit here

Branding the Popular Table app

Brand values served as the foundation

Community | Modern | Efficient | Inspired | Organized

Color Palette

I chose orange as the primary color, typically associated with the earth, creativity, and motion. I selected Teal as an accent color to provide contrast against the neutral palette and the color-rich food photography.

Typeface

I selected Noto Sans as the primary typeface for the mobile app. This unmodulated sans serif font comes in various weights and styles, making it ideal for the visually rich app. It also complements Oswald, the font used in the logo and marketing site.

Logo

I revamped the logo for Popular Table, taking a fresh approach to its literal interpretation. The updated version uses a fork and spoon to symbolize the culinary industry, while a circle encapsulates them to represent the brand's focus on community.

I selected the Oswald font for the logotype because of its boldness, energy, and consistent point size, making it versatile for different logo sizes. When creating the logo image, I used the curve of the Oswald "O" as a reference for shaping the fork and spoon.

Project Outcomes

Measuring success

Future Iterations

• Build out Recipe Search experience with categories and trending recipes
• Enhance experience for cooking mode, which allows users to cook their recipes from Popular Table
• Kick-off additional research to validate social feed idea and MVP functionality

Learnings

• Involving engineering early allowed us to validate feasibility our solution
• Demonstrating business using a opportunity tree identified backed research helps build stakeholder alignment
• Testing with users at varying stages of solution fidelity allowed me to de-risk decisions