Bailey Thigpen

Home

Projects

About

Contact

Bailey Thigpen

Overview

Discover

Define

Ideate

Design

Results

GLIST

0-1 Responsive app design for recipes and grocery lists

Simplifying and enhancing the everyday culinary experience by creating an intuitive app to collect recipes, plan meals, grocery shop, and cook.

Design Systems

Responsive

B2C

GLIST

0-1 Responsive app design for recipes and grocery lists

Simplifying and enhancing the everyday culinary experience by creating an intuitive app to collect recipes, plan meals, grocery shop, and cook.

Design Systems

Responsive

B2C

GLIST

0-1 Responsive app design for recipes and grocery lists

Simplifying and enhancing the everyday culinary experience by creating an intuitive app to collect recipes, plan meals, grocery shop, and cook.

Design Systems

Responsive

B2C

Problem Statement

My partner and I spend many hours every week planning our meals and putting together our grocery list. Who has the time?!

Problem Statement

My partner and I spend many hours every week planning our meals and putting together our grocery list. Who has the time?!

Overview

This project originated from a recurring challenge my partner and I face each week: the cumbersome and frustrating process of grocery planning. We found ourselves spending hours sifting through disorganized notes to locate recipes, compiling grocery lists, and then scrambling to find recipe instructions when it was time to cook. Fortunately, my background as a product designer and my partner's expertise as a principal software engineer allowed us to turn this problem into an opportunity! We decided to design and develop a solution from the ground up, aiming to streamline our own grocery planning and, hopefully, assist others who face similar difficulties.

Role

Senior Product Designer

Timeline

May - August 2024

Team

Just me and 1 Software Engineer

Overview

This project originated from a recurring challenge my partner and I face each week: the cumbersome and frustrating process of grocery planning. We found ourselves spending hours sifting through disorganized notes to locate recipes, compiling grocery lists, and then scrambling to find recipe instructions when it was time to cook. Fortunately, my background as a product designer and my partner's expertise as a principal software engineer allowed us to turn this problem into an opportunity! We decided to design and develop a solution from the ground up, aiming to streamline our own grocery planning and, hopefully, assist others who face similar difficulties.

Role

Senior Product Designer

Timeline

May - August 2024

Team

Just me and 1 Software Engineer

Overview

This project originated from a recurring challenge my partner and I face each week: the cumbersome and frustrating process of grocery planning. We found ourselves spending hours sifting through disorganized notes to locate recipes, compiling grocery lists, and then scrambling to find recipe instructions when it was time to cook. Fortunately, my background as a product designer and my partner's expertise as a principal software engineer allowed us to turn this problem into an opportunity! We decided to design and develop a solution from the ground up, aiming to streamline our own grocery planning and, hopefully, assist others who face similar difficulties.

Role

Senior Product Designer

Timeline

May - August 2024

Team

Just me and 1 Software Engineer

Discover

Discover

Current process

I began by outlining the entire process, from brainstorming meal ideas to the actual cooking. This comprehensive mapping revealed several opportunities for improvement and sparked new ideas.

Mapping the current process

I began by outlining the entire process, from brainstorming meal ideas to the actual cooking. This comprehensive mapping revealed several opportunities for improvement and sparked new ideas.

Current process

I began by outlining the entire process, from brainstorming meal ideas to the actual cooking. This comprehensive mapping revealed several opportunities for improvement and sparked new ideas.

Competitive analysis

I investigated existing apps that address some of the challenges in our current process. To do this, I created accounts on 6 popular recipe/grocery apps and thoroughly tested and documented each one over the course of a week.

Mapping the current process

I investigated existing apps that address some of the challenges in our current process. To do this, I created accounts on 6 popular recipe/grocery apps and thoroughly tested and documented each one over the course of a week.

Competitive analysis

I investigated existing apps that address some of the challenges in our current process. To do this, I created accounts on 6 popular recipe/grocery apps and thoroughly tested and documented each one over the course of a week.

QUICK REVIEW

CookBook

They have allllllll the features you could possibly imagine, but it’s not always intuitive to use!

QUICK REVIEW

Yummly

Cute and great for actually shopping! But missing some key features (edit recipes, view directions in-app, changing ingredient list, etc).

QUICK REVIEW

RecipeChef

Detailed recipe categories. A lot of oddities in the user experience, but overall not too bad.

QUICK REVIEW

OrganizEat

Too many usability issues! Lots of design oddities and unexpected / unpredictable behaviors.

QUICK REVIEW

RecipeBox

A very cluttered interface. Had a 'discover new recipes' feature which took up a lot of the app and is not what I'm interested in.

QUICK REVIEW

Samsung Food

Had the 'discover new recipes' and a blog/articles feature that took up most of the app. Extremely hard to create a meal plan.

Feature comparison

Delving into the details, I compiled a list of page types and features observed across the apps. By noting which features were common among them, I was able to develop my own feature list and prioritize them effectively.

Mapping the current process

Delving into the details, I compiled a list of page types and features observed across the apps. By noting which features were common among them, I was able to develop my own feature list and prioritize them effectively.

Feature comparison

Delving into the details, I compiled a list of page types and features observed across the apps. By noting which features were common among them, I was able to develop my own feature list and prioritize them effectively.

The features are bucketed into common pages/flows I noticed throughout all apps:

  • View All Recipes

  • Recipe Creation Flow

  • Recipe Detail Page

  • Grocery List

  • Meal Planner

Brainstorming to identify opportunities

By consolidating likes, dislikes, ideas, and questions, I identified potential areas for improvement and expansion beyond existing market solutions. While many apps are available, none offer all the essential features we need or emphasize simplicity and usability.

Mapping the current process

By consolidating likes, dislikes, ideas, and questions, I identified potential areas for improvement and expansion beyond existing market solutions. While many apps are available, none offer all the essential features we need or emphasize simplicity and usability.

Brainstorming to identify opportunities

By consolidating likes, dislikes, ideas, and questions, I identified potential areas for improvement and expansion beyond existing market solutions. While many apps are available, none offer all the essential features we need or emphasize simplicity and usability.

BRAINSTORM

Opportunities

  • Focus on usability!

  • Create a useful dashboard/homepage

  • Simplify recipe creation

  • Easily browse current recipes

  • Allow users to access the full recipe and edit it

  • Help with ideation during meal planning?

  • Make the grocery list practical and simple

  • Prioritize key actions, and hide others

  • Use color and type to enhance, not as a focus

Define

Define

Defining the brand

To put purpose behind the project, I tried to mimic the skills of my product and brand manager peers and used Notion to develop the company mission, principles, and brand pillars.

Defining the brand

To put purpose behind the project, I tried to mimic the skills of my product and brand manager peers and used Notion to develop the company mission, principles, and brand pillars.

Defining the brand

To put purpose behind the project, I tried to mimic the skills of my product and brand manager peers and used Notion to develop the company mission, principles, and brand pillars.

Planning, scoping, and prioritizing

Leveraging the insights from the discovery phase, I developed a detailed list of design tasks, prioritized them from P0 to P3, and estimated the level of effort (LOE) for each. This approach proved invaluable for planning and tracking progress on a project of this scale.

Planning, scoping, and prioritizing

Leveraging the insights from the discovery phase, I developed a detailed list of design tasks, prioritized them from P0 to P3, and estimated the level of effort (LOE) for each. This approach proved invaluable for planning and tracking progress on a project of this scale.

Planning, scoping, and prioritizing

Leveraging the insights from the discovery phase, I developed a detailed list of design tasks, prioritized them from P0 to P3, and estimated the level of effort (LOE) for each. This approach proved invaluable for planning and tracking progress on a project of this scale.

Ideate

Ideate

Brand design inspo

I sought branding inspiration from other food-related products and found myself most inspired by the natural colors of fruits and vegetables. To refine my color palette, I used a color picker tool to test hues directly from food images.

Brand design inspo

I sought branding inspiration from other food-related products and found myself most inspired by the natural colors of fruits and vegetables. To refine my color palette, I used a color picker tool to test hues directly from food images.

Brand design inspo

I sought branding inspiration from other food-related products and found myself most inspired by the natural colors of fruits and vegetables. To refine my color palette, I used a color picker tool to test hues directly from food images.

Wireframing the primary screens

With a mobile-first approach in mind, I used Figma to create basic wireframes for the app's primary screens and flows.

Wireframing the primary screens

With a mobile-first approach in mind, I used Figma to create basic wireframes for the app's primary screens and flows.

Wireframing the primary screens

With a mobile-first approach in mind, I used Figma to create basic wireframes for the app's primary screens and flows.

Here's where I landed on a few of the primary screens:

WIREFRAME

All Recipes

A view of all the recipes a user has added.

  • Tabs for All, Favorites, and Categories (based on meal type only for the first iteration)

  • Ability to both search and filter

  • Ability to add recipes to meal plan or glist on each card

  • Ability to add new recipes here

WIREFRAME

Recipe Detail Page

View and edit each recipe's details.

  • A view to see and edit all of each recipe's details

  • A tab to view the recipe's ingredient list

  • A tab to view the recipe's cooking directions

  • Ability to add recipe to meal plan or glist from here

WIREFRAME

Add New Recipe

Add new recipes to the collection.

  • Ability to add recipes by entering the details manually

  • Ability to add recipes by entering a URL from a blog or site

  • Options to add image, meal type, serving size, and total cook time

  • Ability to add both ingredients and directions one by one, or by copy/paste in a large text area

WIREFRAME

Meal Plan

Plan meals ahead of time.

  • Ability to plan/view meals by the day

  • Ability to plan/view meals by the week

  • Ability to add recipes from this view

WIREFRAME

Grocery List

Create grocery lists based on recipes.

  • Ability to add all ingredients from a recipe to the grocery list

  • Tabs for viewing All items, items by Aisle, and items by Recipe

  • Ability to check off items, rearrange items, and add custom items not from a recipe

Identifying component needs

We decided to utilize an existing component library to streamline development. I explored Google's Material 3 design system and compared its components to those in my wireframes. Material 3 provided nearly everything we needed and was also easily customizable to align with our brand.

Identifying component needs

We decided to utilize an existing component library to streamline development. I explored Google's Material 3 design system and compared its components to those in my wireframes. Material 3 provided nearly everything we needed and was also easily customizable to align with our brand.

Identifying component needs

We decided to utilize an existing component library to streamline development. I explored Google's Material 3 design system and compared its components to those in my wireframes. Material 3 provided nearly everything we needed and was also easily customizable to align with our brand.

Design

Design

Color

The key to effective color usage for this app was ensuring that recipe images remain the focal point. We achieved this by using a black primary color, incorporating neutral tones extensively, and including accents inspired by real foods.

Color

The key to effective color usage for this app was ensuring that recipe images remain the focal point. We achieved this by using a black primary color, incorporating neutral tones extensively, and including accents inspired by real foods.

Color

The key to effective color usage for this app was ensuring that recipe images remain the focal point. We achieved this by using a black primary color, incorporating neutral tones extensively, and including accents inspired by real foods.

Typography & iconography

I chose a modern sans-serif typeface with clean lines and balanced proportions. Combined with the rounded styling of Material 3 icons, this typeface contributes to a friendly and approachable aesthetic.

Typography & iconography

I chose a modern sans-serif typeface with clean lines and balanced proportions. Combined with the rounded styling of Material 3 icons, this typeface contributes to a friendly and approachable aesthetic.

Typography & iconography

I chose a modern sans-serif typeface with clean lines and balanced proportions. Combined with the rounded styling of Material 3 icons, this typeface contributes to a friendly and approachable aesthetic.

Responsive grid system & element styling

I created grid and spacing guidelines based on a 4px scale, and defined rounded and elevated styles to help add a modern, friendly character to the product.

Responsive grid system & element styling

I created grid and spacing guidelines based on a 4px scale, and defined rounded and elevated styles to help add a modern, friendly character to the product.

Responsive grid system & element styling

I created grid and spacing guidelines based on a 4px scale, and defined rounded and elevated styles to help add a modern, friendly character to the product.

Creating components

Starting with Material 3 components as the foundation, I configured each one according to our defined foundations and styles. Additionally, I developed a few custom components to fill in the gaps where Material 3 didn't meet our specific needs.

Creating components

Starting with Material 3 components as the foundation, I configured each one according to our defined foundations and styles. Additionally, I developed a few custom components to fill in the gaps where Material 3 didn't meet our specific needs.

Creating components

Starting with Material 3 components as the foundation, I configured each one according to our defined foundations and styles. Additionally, I developed a few custom components to fill in the gaps where Material 3 didn't meet our specific needs.

MORE COMING SOON!

Thanks for scrolling!

I'm always open to discussing new opportunities to connect and create.

Contact Me

thigpen.j.bailey@gmail.com

+1 (919) 818-0813

LinkedIn

Thanks for scrolling!

I'm always open to discussing new opportunities to connect and create.

Contact Me

thigpen.j.bailey@gmail.com

+1 (919) 818-0813

LinkedIn