Food52: Shoppable Recipe

The Challenge

At Food52, we are constantly thinking of ways to bridge the gap between content and commerce. Our users are interested in fun, accessible, and seamless ways of purchasing products from our shop, and we are determined to help them set their dream table. We saw an opportunity area where we can test on answering every comment that says,"Where can I buy that beautiful dinnerware/pot/tablecloth in your recipe photo?" 

‍

Design Direction

The critical importance of this project was finding the right balance. The number one goal of any recipe site user is the recipe. We must tread carefully with this in mind and develop design solutions that will not prioritize our commerce strategy over the user's needs.

The design should serve the browsing users who want to be inspired by the beautiful imagery while minimizing the intrusiveness for other users who simply need an excellent mashed potato recipe.

‍

Wireframing

‍
‍

High Fidelity

After the research & the initial wireframing of screens, we decided to pursue two different approaches of display and optimize for the A/B test in three groups (A, B, and control)

• A: Exposed under the photo as thumbnails: The thumbnail variation will enable our users to recognize the items in the image/instantly.
• B: CTA-triggered: The CTA variation will benefit users who are specifically interested in the products in the photo.

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

‍

Closing

‍Problem: 

• Testing out a content-to-commerce strategy with the recipe photos tagged with items from shop.

Solutions:

• Creating and suggesting various design approaches that fits the appropriate prioritization level.
• Staying faithful to the main goal of the page & the users needs.
• A/B testing different designs against the control group to assess the best results.

‍

Results:

Please inquire in person

‍