Google Recipe — UX Protothon

4 min readFeb 16, 2019

This project was done for the 5th annual UX Protothon hosted by UW Dubstech. They invited students of all majors to come to test their rapid prototyping and design thinking skills in industry-inspired, time-sensitive design challenges. Two other participants (Fan Lu and Tom Zou) and I formed a team, and only having two and a half hours for the whole process, quickly got to know one another and got to work on the Google Recipe challenge. We started with identifying pain points we had experienced when using a smartphone to display a recipe.

From there we began brainstorming and sketching.

Due to the limited time of the protothon after brainstorming and sketching for about 20 minutes we got started on our mock-ups. The functions I focused on, working on mock-ups and details of user flow, were the Menu Calendar, the Grocery List, the Day-of Pop-up, and the Grocery List Lock Screen Notification. Pictured in the sections below are our mock-ups and details of all the screens we created. The designs are credited to the team members who made them.

Home Screen [Tom Zou]

The home page shows a collection of recipes that are ready to cook. This page displays recommended recipes for the user based on what they have in their fridge, what they have cooked in the past, and popular recipes now. It also offers a search function.

Day-of Pop-up [Mine]

If a user has planned a recipe for that day, when they open the app they are greeted by a pop-up offering them a shortcut directly to the recipe.

Recipe [Tom Zou]

A brief text prompt of recipe showing the time it takes to prepare and the relative cost of ingredients. Users can press the fire bottom to start cooking or press the plus button to add the recipe to their Meal Calendar.

Cooking [Fan Lu]

The step-by-step cooking page provides immersive instruction for users. We imagine the cooking process with a phone is like driving with google map, simple and less distracting. The screen is one of the steps. Basically, it consists of a gif of the current step, text, next step button, a timer of the previous step if needed, and an audio instruction button. Users can also drag the bar to see all the steps.

Meal Calendar [Mine]

This page allows users to meal plan for their future. They can add recipes by searching from the home page or hitting the plus button. When meals are added to the calendar the ingredients needed for them are automatically added to the grocery list.

Grocery List [Mine]

This page shows users what they need to purchase to make the recipes they have planned. By hitting the fridge icon they can add and see what they currently have in their fridge at home (the recipe search feature references this to show recipes for ingredients they have). By hitting the shopping basket a lock screen pop-up is activated to allow for quick access to the shopping list while at the store.