UX & PRODUCT DESIGN
UX & PRODUCT DESIGN

Shoppable Recipe App

Shoppable Recipe App

Meal planning and grocery shopping made easy.

CLIENT

Grocery Shopii

ROLE

Lead Product Designer

RESPONSIBILITIES

Product Design, Prototyping

CLIENT

Grocery Shopii

ROLE

Lead Product Designer

RESPONSIBILITIES

Product Design, Prototyping

UX & PRODUCT DESIGN

Shoppable Recipe App

Meal planning and grocery shopping made easy.

CLIENT

Grocery Shopii

ROLE

Lead Product Designer

RESPONSIBILITIES

Product Design, Prototyping

For busy consumers, meal planning can often be and daunting task, leading to meaningless or unnecessary trips to the grocery store.

For busy consumers, meal planning can often be and daunting task, leading to meaningless or unnecessary trips to the grocery store.

For busy consumers, meal planning can often be and daunting task, leading to meaningless or unnecessary trips to the grocery store.

We aimed to simplify this experience by creating an app that handles the entire shopping process — from meal searching and planning, to creating shopping lists and checking out.

We aimed to simplify this experience by creating an app that handles the entire shopping process — from meal searching and planning, to creating shopping lists and checking out.

We aimed to simplify this experience by creating an app that handles the entire shopping process — from meal searching and planning, to creating shopping lists and checking out.

The Solution
The Solution
The Solution

By partnering with local grocers, we created a seamless experience for the shopper. Launched from the grocers' site, our simple-to-navigate platform allows the user to browse and choose meals, add them to a meal plan, save favorites, and either create a shopping list for later reference or check out online through the grocer.

By partnering with local grocers, we created a seamless experience for the shopper. Launched from the grocers' site, our simple-to-navigate platform allows the user to browse and choose meals, add them to a meal plan, save favorites, and either create a shopping list for later reference or check out online through the grocer.

By partnering with local grocers, we created a seamless experience for the shopper. Launched from the grocers' site, our simple-to-navigate platform allows the user to browse and choose meals, add them to a meal plan, save favorites, and either create a shopping list for later reference or check out online through the grocer.

UI Kit

A UI kit included fonts, colors, custom icons, toggles and checkmarks to be used throughout the platform.

UI Kit

A UI kit included fonts, colors, custom icons, toggles and checkmarks to be used throughout the platform.

UI Kit

A UI kit included fonts, colors, custom icons, toggles and checkmarks to be used throughout the platform.

Get Inspired

With shopping categories changing on a weekly basis, the shopper can experience featured recipe categories based on the season or upcoming holidays, or view recipes specifically chosen based on time or number of ingredients. This page is meant to get the shopper quickly engaged with the content.

inspiration page
inspiration page
inspiration page
browse page
browse page
browse page
Browse Recipes

A filter bar on the side allows users to filter recipes down based on the things important to them, such as time, number of ingredients, or even dietary restrictions.

In-Depth Recipes

Similar to a recipe website, this page allows the shopper to view the recipe in detail before committing it to their meal plan. It was important that we not only gave the relevant recipe information, but additional information such as nutrition, recipe sponsorships, related recipes, and easy access for the user to favorite it or add to their meal plan.

Meal Planning

Acting as a "cart" experience of sorts, the Meal Planning feature allows the shopper to add their meals for the week and not only view them on a single page, but view all the ingredients for those recipes as well. From this page, they can add additional recommended "paired" recipes. From here, the next action step is to checkout via the grocer, which moves all the selected ingredients to the grocer's online shopping experience, or create their own digital shopping list.

Shopping List

The Shopping List feature allows the shopper to still engage with the Meal Planning feature of the app, even if they don't want to take advantage of the online shopping experience. Ingredients from all recipes are sorted into categories to make shopping a breeze. The user also has the ability to add their own unrelated items to the list, making for a seamless shopping experience.

Personalization

With an account, the user can set personal preferences to help narrow down the recipes seen in the Browse page. Giving information such as dietary restrictions and family size helps pre-sort the recipes displayed, making additional filtering easier each time.

Back to projects