An E-Commerce Solution for Recipes

Project Summary

The Recipes feature introduced to the Unata platform served two primary objectives, one for users and the other for clients (small to large grocery chains). For users, it would allow them to view recipes from their favourite grocery chains and add ingredients for those recipes directly to their cart. On the other hand, it would enable grocery chains to promote and highlight specific products in a more engaging way.
Project Type
Recipe, Grocery, E-Commerce

Early Design Challenges

Much of the initial testing for web and mobile brought up a lot of usability problems. Issues ranged from people not knowing how to favourite recipes and also not knowing or understanding how to add ingredients from the recipe pages to their cart.

Creating A Recipe Page Focused on E-Commerce

Our initial designs for the page de- emphasized the e-commerce experience and as a result people ignored the shopping options altogether. It also probably didn’t help that the product tiles were along the sides of the page. Ads are normally the type of content you would expect to see here, so it’s no wonder that people ignored the products in our designs.

So, in order to address this problem and meet the needs of our users and our clients, we made a shift in focus for the design of the recipes page. Pushing e-commerce to the forefront, but still maintaining the look and feel of a traditional recipes page.

Communicating to Users that they are Purchasing Products Not Ingredients

During user testing sessions, people also faced additional confusion when asked to add products to the cart. Some believed that they were adding the ingredient amounts (i.e. 1 tsp baking soda) to their cart, while others had difficulty knowing how much of a specific product they needed to meet the recipe requirements (i.e. how many packs of strawberries did they need for 1 cup).

To solve this problem we made a small ui change. We introduced a “Recommended Quantity” for each product which explicitly told users how many of each item they would need for the recipe.

De-Emphasizing E-Commerce For Mobile

We realized very quickly when testing for mobile that many of the solutions we had come up for web wouldn’t translate over to mobile very easily. In early user testing sessions people ignored the products entirely when we attempted to create an e-commerce focused recipe page for mobile. The solution was to integrate a “Shop Ingredients” button to allow users to be aware that they could purchase products for the recipe.

Cooking Mode: The Answer For Messy Recipes & Dirty Hands

Imagine you’re following a recipe which requires you to get your hands a little dirty. You need to see what the next step is but don’t want to get your phone dirty. So you have to wash your hands. But, what if you didn’t have to. This is why we introduced Cooking Mode. An easy way to view the steps for a recipe even when your hands are a bit messy.