WINELY EXTENSION

The Problem

People want the full dining experience. Currently, Yummly only caters to one part of that experience: the food. With the new Winely feature, the app now sets the stage for the complete in-home dining experience.

What's missing in the market? 

Today, there are a number of specific apps that deliver on one aspect of the overall experience, but do not address all at once. By combining the food and wine experience in Yummly, we’re creating the excitement of the full dining experience, where there’s an element of adventure and exploration. It takes the user in new directions and reduces the burden of decision-making. This will ultimately allow users to focus on the fun aspects of their evening, rather than the minute details.

The Vision

Winely was designed to provide users with the full dining experience at home, where they can have all of their needs met at the touch of a button. Thus, achieving a well-rounded, convenient, and more personalized user experience.

Our intention is not to merely create an application, but to create an experience.

Context Scenario

We started with a context scenario to empathize with our users and brainstorm circumstances before, during and after they would use the new Winely feature. This allowed us to better understand the intent of the user, their experience doing the task, and the goal they wish to achieve – ultimately providing us with a hierarchical list of important features.

Sketches

Once we had an idea of user intent and features from the context scenario, we diverged to compile several sketches. We focused on the recipe recommendations design as we felt it was the most important interaction that would influence the rest of the concept. In addition to the standard iPhone screen, we wanted to branch out and explore what a futuristic possibility might look like to incorporate the app in a smart refrigerator screen.

Initial Wireframes

It was very important to us to maintain the look and feel of the Yummly brand throughout our design process. With the first round of wireframes, we mimicked the original home and recipe screens, while adding the new feature details and additional screens. This established the flow for the whole app extension design.

Mockups

For our visual design mock-ups, we wanted the flow to seamlessly introduce the new feature to users and intuitively take them through each step of the task.

Upon opening the app, the user would receive the standard Yummly splash page, and then immediately receive a pop-up overlay on the home screen detailing the new Winely feature. They would have the option to either close the screen or learn more with a tutorial. For the scope of this project, we assumed the user would close the pop-up and continue to the home screen — thereafter clicking on the new plus icon in the navigation menu to take them to the camera.

Once in the camera, users can either take a picture of the wine bottle in real-time, or they can upload a picture from their photo gallery. After they've taken or selected their wine label image, the app will automatically take them to a recipe recommendations screen, specifically curated for their particular wine. The recommendations are organized by featured food categories that would pair well.

From the list provided, the user can select their desired recipe. They would then be taken to the recipe details screen, which includes all pertinent information associated with the meal. To order the ingredients, the user would add which ones they need from the list and select "buy" to be taken to Instacart for delivery.

Iterations & Insights

Using the design principles, we tested, evaluated and iterated the mockups based on consistency, perceivability, learnability, predictability and feedback.

1.     Participants ignored the full-screen pop-up and wanted to quickly exit it, feeling it was an inconvenience. Instead, they preferred, and paid more attention to, a smaller notification pop-up on the home screen. So we changed the full-screen overlay to a pop-up bubble to conveniently alert users of the new Winely feature.

2.     Participants felt that the plus icon was vague and unpredictable, as it did not seem directly related to the action of taking a picture of a bottle of wine. After testing a few options, we updated the main navigation with a camera icon to be more intuitive for users. 

3.     On the recipe details page, participants were confused and needed more feedback on how to add ingredients to their cart. They felt that the buy button committed them to purchasing the items, but they didn’t know what that meant. We added more feedback, incorporating +/- icons next to the selected items, so that the users would know exactly what they added to their shopping list.

4.     Participants were unsure of the Instacart integration and needed additional feedback about where the buy button led. They were confused why there wasn't a "checkout" before they committed to buying. So we added an additional splash screen between the recipe details and buy screens to show that the selected ingredients were sending to Instacart for purchase.  

Final Product

Looking Ahead