CASE STUDY PRODUCT DESIGN
RECIPE REDESIGN
Redesign the Yummly recipe experience to help users make quick decisions about what to cook for the night and to showcase premium features that assist in preparation.
ABOUT YUMMLY
Yummly is a content aggregator that delivers all things recipe-related such as ingredients, articles, and short-form videos. Apart from content, Yummly also offers features such as shopping carts, and meal planners to help users, find, plan, and cook their next meal.
OBJECTIVE
Users often felt lost navigating between features and content on the existing recipe page. The objective is to redesign the Yummly recipe experience to help users browse and to better surface premium features.
RESPONSIBILITIES
Led the research, product planning, and prototyping efforts to find directions and validate solutions through prototype testing.
DURATION
- 2 weeks research
- 1 week ideation
- 1 week prototype
- 1 week testing
- 5 months engineering
METRICS
TEAMS
EMPATHY
BUSINESS CONTEXT
The recipe experience page is the heart and soul of the Yummly experience. It is also the place where products made the big bet in advertising premium features such as shopping carts, nutritional facts, and meal planners. However, Yummly incrementally deployed these new features onto the page with little research and design efforts. It was always been, let's put it somewhere and test it out. As a result, feature placements feel random without any narrative, followed by low engagement and short recipe experience session length.
From a business standpoint, it was time to redesign the recipe page to help users navigate and use more premium features.
EMPATHY
PAIN POINTS
Working with the Q&A managers, we audited all the user reviews regarding the existing recipe experience. We then group these feedbacks based on consistency to identify user pain points.
ANALYSIS
USER INTERVIEWS
I conducted 45-minute focus interviews via Google Meet with five Yummly users who commonly explore online recipes and use cooking directions. Candidates were selected based on their activity levels within the app.
ANALYSIS
OPPORTUNITIES
I identified all of the consistent pain points and suggestions from the user interviews and labeled them into recurring themes to further converge our findings.
PROBLEM STATEMENT
The current Yummly recipe experience does not deliver content and features functionally and behaviorally.
SOLUTION
The new Yummly recipe experience will rearrange content and button placements to help users make quicker decisions and plan their weekly meals.
DEFINE
DESIGN GUIDELINES
Yummly has its design personality and keywords centering around its main user archetype - busy people who are looking for something easy and cheap to cook.
DEFINE
FEATURE PRIORITIZATION
Once features were defined, together with product managers and engineers, we used a 2x2 Feature Prioritization Matrix, to define what we could achieve in an MVP given specific production time and resources.
IDEATION
LAYOUT EXPLORATION
I started off thinking about the basic layouts and mechanics for the new recipe experience page. A layout would need to showcase important information from the get-go like; images, reviews, and ingredients.
For option 1, I thought of using accordion component blocks to showcase different types of content, while giving a little preview information on each component, but it was scratched off because the design team believed the approach de-emphasized the importance of ingredients when people are trying to browse.
For option 3, I thought of a sticky tab on the top that serves as a navigational scroll to take users to a certain area. But this concept was also challenged, because, quite frankly, there was just too much information embedded inside of a recipe.
Ultimately, the team decided to go with tab selection (option 2), because it provides a dedicated space for users to browse and operate ingredients, without the need to see features that were irreverent for people to make a quick decision.
IDEATION
INGREDIENTS LISTING
Different types of ingredient listing UIs were explored earlier. From the left, I thought of using a card view, to maximize the aesthetic, and make it more graphical. In the middle, I also thought of another way to play around with images and buttons more vertically.
Ultimately these proposals were shot down because adding ingredient images will take the operation team too long to release and also it needs a lot of maintenance effort moving forward. So I had to work with what we already had and reduce the engineering load.
IDEATION
IMAGE SIZE EXPLORATION
Image is also important when choosing a recipe, I wanted to make sure the right image size and portion are incorporated to bring balance to the content below. So different sizes were explored ranging from full screen, half screen, and ⅓ of a screen. They were all retrofitted with 10 random Yummly recipes. I then discussed with the content and operation team to make sure the best size was selected.
IDEATION
MAIN CTA PLACEMENT
Another iteration was the design of the hovering CTA button on the bottom, I had to work under two premises, one, the button needed to incorporate both the shopping cart and meal planner features. Two, both buttons do not have more emphasis from one to another, they need to be treated equally. So I did a few iterations to make the button feel obvious while not trying to be intrusive to the browsing experience.
DESIGN
PROTOTYPE #1
TESTING
USER FEEDBACK
DESIGN
PROTOTYPE #2
IN TWO MONTHS...
DATA OUTCOME