Profile photo

Gavin Baradic

Designer & Engineer

Recipelist

Recipelist

Turn your favorite recipes on Pinterest into your grocery list within seconds using Recipelist. Ordering the ingredients is just another click away.


Client
Tamarack Studio
Scope
Product Design, Engineering
Stack
React Native, GraphQL, Expo
Duration
2016

Background

Recipelist was created after identifying a common problem Pinterest users experience when trying to organize ingredients from several recipes they have saved.

For many people, Pinterest serves as the primary platform for saving meals and recipes. It even provides the user with useful information upfront, like ingredients and their quantities.

However, it becomes difficult for the user to prepare a grocery store trip or compile a list of ingredients to buy online because recipes can only be viewed one at a time and ingredients couldn’t be compiled into a single list. Recipelist solves this problem.


Anatomy of a Pin

Pinterest made retrieving data straightforward by providing well formatted data within their API. This included formatted ingredients, including categories and amounts.

Pin example.

Engineering Stack

While creating the strategy for the tech stack, I considered the cross-platform nature of the application. UI and logic was consistent between the two platforms. However, there was a decent amount of data that needed to be stored on the product’s database. Rails was chosen for this task because it could easily render the front-end site, create database models, and integrate with a GraphQL controller layer.

Engineering stack.

Reusing Code Across Platforms

Application logic between the desktop and mobile apps were able to be shared since both of the front-ends relied on React and React Native, respectively. This was especially beneficial for the Redux stores, as the states were identical across platforms.

Redux store.

Design Solutions

Given that Recipelist would be used in tandem with Pinterest, it was important that the experience felt familiar and easy to use. Concepts like “Boards” and “Pins” needed to be represented in ways that users would recognize easily.

Grouping ingredients by category helps organize ingredients that may be near each other while in a physical grocery store space. Ingredients can be checked as done and the “Clear All” button removes all ingredients when a grocery trip is complete. These additional design considerations are complementary to many user’s expectations and behaviors when grocery shopping.

Mobile application.

Web Application

The application was first built out as a web application that was a single page application. Pinterest boards and pins were displayed on the left two thirds of the page with the running list of ingredients displayed on the right.

The web application is also fully responsive and provides a smart banner to download the native application.

Web application.

Mobile Application

Mobile Application

The mobile application separated the two workflows into separate tabs. The first tab is dedicated for adding the meals from the users Pinterest boards. The second tab displays the grocery list and it’s ingredients.