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.
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.
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.
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.
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.