How can we improve the user retainability of Tasty?

APP REDESIGN, HACKATHON, RECIPE APP
Duration: 48 hours

Context: Reiterate Design Hackathon by IxDA

Team: Palka Dhirawani, Sayli Pednekar

Tools Used: Figma, Miro, Canva

My Contribution: Conducted user interviews, created user personas, brainstormed 5 out of 7 new features, and designed high-fidelity wireframes.

PROJECT OVERVIEW

Why choose an app that already has 10+ downloads and a whooping 4.7 stars?

For this competition, my team member and I were tasked with redesigning and improving the usability of one of 5 existing mobile apps by top companies, one of which was Tasty by Buzzfeed. Tasty is an app for the world's largest food network where you can search, watch and cook over 3000 recipes. It was an app that we ourselves would have used if only the UX issues were resolved. The challenge then became something that we genuinely wanted to take on.

The goal for this redesign was to utilize Buzzfeed's popularity and colossal community and emphasize its core characteristics which are fun, engaging, and creative. We aimed to make the app appealing to audiences of all age groups and diverse ethnicities.

INFORMAL USER INTERVIEWS

"The pink is so overwhelming!"

Due to a lack of time, we called up a couple of friends and family members to gather their opinions about the app. We asked them questions about whether they had used other recipe apps before, what would be their primary purpose for using one, what would keep them from using Tasty, and how the app as a whole or a particular screen made them feel.

CRITICAL POINTS

  • Difficulty in accessing some features or having to memorize how to access them.
  • The search screen is cluttered and difficult to read.
  • Unable to save multiple recipes all at once. One has to open the individual recipe page to save it.
  • Unfamiliarity with some of the ingredients and difficulty with using the US metric system.
  • No option to edit the recipe collections automatically made by Tasty on saving a recipe.
  • Need a feature to filter out recipes by particular ingredients.

USER PERSONAS

To better comprehend what kind of new features we could integrate, we created realistic representations of our 3 key audience segments in the form of user personas.

COMPETITIVE ANALYSIS

After understanding the user pain points and crafting user personas, we wanted to understand the relative strengths of other competing recipe applications.

On realizing that Tasty’s favorability comes from its plethora of recipes and YouTube popularity, we decided to keep the recipes as its primary focus point. Tasty was more convenient to navigate than all other applications, which we wanted to enhance. We also identified unique value propositions that Yummly had over Tasty. It was evident that we had to include some innovative features to improve Tasty’s user retention.

NEW FEATURES

Bringing something new to the table

After noting down the paint points, we decided to bring some novel features which would improve the user experience and retention.

Random Recipe Selector

A random recipe will be selected every time the ‘GO’ button is clicked. Sometimes when there are many choices, it could be  overwhelming for the user when they want to shortlist one. Since tasty has an immense database of recipes, this feature solves the problem of having to choose.

Ingredient Information

Extra information about each ingredient is provided along with images and substitutions incase some ingredient is unavailable or unknown to the user.

Filter by ingredients

The user can filter out recipes according to all the ingredients they have available at home. This feature can also be used to exclude any ingredient from recipes.

Personal Notes

For users that don't know a particular ingredient, they can click on the info button and basic information about the ingredient, along with its picture and a substitute will be displayed

Following Filter Tags

A user can also select filter tags that they want to follow. Once they select these tags the user will get a notification every time a new recipe with that tag is added on the app.

Tasty Blog Section

After noting down the paint points, we decided to bring some novel features which would improve the user experience

Customizable Collections

The user can create customized recipe collections according to their needs and also mark the recipes they’ve made before.

COLOR SYSTEM

Color can set people’s expectations about any product

Warm colours like red and orange are usually associated with food and induce a passionate hunger in people. The overbearing pink was replaced by a more subtle and contextual orange, while the Tasty brand's blue colour was maintained as an accent colour.

BEFORE

AFTER

Information Architecture

To amalgamate our added features with the existing ones into the app, we devised an information architecture to decide how to best organize and structure all the components.

FINAL PROTOTYPES

Home Screen

“What we’re loving now” sounds unclear and does not give enough information about when this recipe will change. Changing it to “what we’re loving this week” clarifies the timeline.

The banner occupies a lot of screen space. We have reduced its size so that it does not overpower the other elements and we’ve also added the recipe video in place of the static image to make the user more engaged.

The user can also like and save recipes to their collections from the homepage itself.

Categories have been arranged and displayed to access recipes quickly instead of having to filter them out.

Filter Recipes

A user can only filter recipes after clicking the search bar. Moreover, you can select only one filter at a time. Once you select the filter, the search results are displayed. This has been solved by adding a separate tab for Filters called “Search”. In this section, you can easily apply multiple filters at a time and get your results.

We have implemented the functionality of filtering by ingredients for users that want to make recipes only from the ingredients they have present at home.

The old search was cluttered, and new section has a lot of whitespace and distinction.

Recipe Information

The layout of this page has been changed to give it some more stucture.

The duration as well as the level of difficulty of the recipe has been mentioned at the start.

The list of ingredients and preparation steps can be minimized, in case a user just wants to skim through the recipe.

The preparation section, a crucial part of the recipe was placed at the end after showing similar recipes. This has been shifted just above nutrition info. Checklist has also been added.

The comments section has been compartmentalized so that the user does not have to skim through all of them and figure out what type of comment they need.

Profile Page

The user can see all their liked recipes, and recipes they have tried out and also edit their profile.

Users can also save recipes and group them together under collections that are curated and customized by them, along with the cookbooks provided by Tasty.
Reflections

The whole hackathon experience was refreshing and made me realize my shortcomings. I realised the amount of time I took to design the prototypes, and how much time I took to design the prototypes, and also how important user research is when it comes to defining and ideating.

The judges' feedback was very helpful. They told us to keep in mind the visual hierarchy and design guidelines. They also suggested various ways to improve the typography. Another thing they pointed out was icon consistency. They also gave an example of users who can get confused with the save and like icons on the home page since they are used interchangeably in different applications. Overall the experience helped me improve my ideation and UI design skills.