Buzzfeed Tasty — A UX Case Study
I love food and more so, I love cooking. And my love for cooking brought me across Tasty, a vibrant app that has an amazing collection of quick, easy and eye-catching recipes.
Although I loved most of the recipes I have tried so far, I had a feeling that the app was not so easy to use, in general. This is when the UXer in me decided to look up the reviews from other users, to confirm my hypothesis. With ratings as high as 4.9 on the iOS App Store and 4.7 on the Google Play Store, most of the review comments, as expected, were about how amazing the recipes are. But, many users also reported problems with the app itself. Here are some examples:
Thus, I decided to do some research on the iOS Tasty app (Version: 2.8) from the users’ perspective. I was very curious to see if modifying some UI elements can improve the User Experience of an app which is already quite highly rated by its users.
Disclaimer: This case study is only for educational purpose, and I don’t intend to disregard anybody’s work. I love the recipes on Tasty and am simply trying to fill the gap between 4.9 and 5 🙂
Heuristic Evaluation (based on Jakob Nielsen’s Heuristics)
In order to identify potential usability issues, I started off by checking the app against the 10 Principles suggested by Jakob Nielsen.
The points marked in ‘(-)’ are worth noting.
- Visibility of system status:
(+) Tasty does a pretty good job of providing visibility about where a user is in the app, at any given point.
- Match between system and the real world:
(-) Tasty provides the option of adding ingredients of the recipes to a shopping list. But, unlike the real world, this list shows the ingredients separately for separate recipes.
- User control and freedom:
(+) Users have the option to select and deselect filters while looking for recipes.
(-) Users cannot save recipes unless they have logged in using a Facebook account.
- Consistency and Standards:
(-) Normally, the ‘trending’ and ‘popular’ recipes are visible on the ‘Discover’ screen. But, if a person selects the ‘vegetarian’ option, these categories vanish. Surely there would be some popular vegetarian recipes.
- Error Prevention:
(+) While typing search keywords, users are presented with suggestions in many cases, preventing misspellings and typos.
- Recognition rather than recall:
(-) A user might save lots of recipes for later use. Since, the user doesn’t know, in which category a recipe is automatically saved into, it can be very hard for the user to find a saved recipe at a later point in time.
- Flexibility and efficiency of use:
(+) Provision of Step-by-Step Mode for novice users
- Aesthetic and minimalist design:
(+) Colorful and minimal functionality app
- Help users recognize, diagnose, and recover from errors:
(-) In case of simple misspelled searches, no results are shown. Also, there are no suggestions. This can leave users confused and lost.
- Help and documentation
(+) Users are able to leave and receive feedback and photos of dishes prepared. This can help users decide whether or not to prepare a recipe.
To verify if the negative points identified in the Heuristic Evaluation phase are actually problems for the users, I decided to test with it some users and find out their experience with Tasty. So, I designed the following tasks:
- Find an ‘Avocado’ recipe which is highly recommended by other people and can be prepared quickly.
- Find an ‘easy healthy Chinese dinner’ recipe for your family. Add the ingredients of this recipe to the shopping list and say what do you think about this list.
- Assume that you have recently turned vegetarian; how would you make sure that you do not see any non-vegetarian recipes that would tempt you?
- Mark a recipe as your favorite and find it in your saved recipes.
5 Users (from different age groups)
Thinking Aloud Method
Testing Limitations: Since, I used my own phone for physically testing with the users, I logged into my Facebook Account and the users did not have to do anything for logging in.
From User Testing, I gathered data related to how the users behaved and what they said and did, while performing these tasks. There were many common problems that surfaced from the tests, and thus, I grouped the observations based on similarity and coherence.
From this mapping, it became easy to identify major pain points in the app:
Next, I created a simplistic persona loosely based on the user testing results and observations.
Revisiting the user testing sessions and creation of a persona made me realize that users may have special dietary requirements and preferences.
Customer Journey Map
Having room, in terms of time, for thinking further, I decided to dig deeper and look for more opportunities for improvement. So, I created a Customer Journey Map. This helped me visualize a user scenario and understand what could a typical user be thinking or feeling at each and every touch point.
And then, it was time for some thinking and redesigning!
Users had some trouble navigating through the app with the Actual IA of the Tasty app.
- The four main menu items are: Discover, Guides, Shopping and My Recipes.
- Categories ‘Trending’ and ‘Popular this week’ seemed ambiguous to most users.
- Category ‘Recent’ was unclear.
- The ‘Guides’ option is also present on the ‘Discover’ screen which confused some users.
So, to make navigation easier and to get rid of ambiguity and unfamiliarity, I decided to make the following changes (highlighted in green) in the New IA.
- The main categories became: Discover, Shopping, My Recipes and Settings.
- Removed ‘Popular this week’ and retained the ‘Trending’ recipes category.
- ‘Recently Viewed’ recipes are moved to the main screen, that’s where the users tried to look for them.
- Renamed Category ‘Recent’ to ‘Recently Added’
- Renamed ‘All likes’ under My Recipes to ‘Liked’ and added Search option.
After restructuring the app in terms of navigation, I went on to creating basic wireframes on paper, to try out the various possibilities for problem solving. Paper, pencil and eraser was all that was needed.
Next, I created an interactive prototype where I made changes to screenshots from the original app and added interactions, wherever necessary. This section presents comparison between the original screens of the Tasty app and the modified screens from my prototype.
Originally, the ‘Settings’ icon was placed inside the ‘My Recipes’ section of the main navigation. In a user task, while trying to remove non-vegetarian recipes by default, users either tried to apply filters repeatedly or in most cases, look for some kind of settings to do so. The location of the ‘Settings’ icon was difficult for the users to find. So, I moved it to the main menu and removed ‘Guides’ which was also available on the ‘Discover’ screen. Additionally, I provided options to set other dietary preferences in addition to Vegetarian, if required.
Although the idea of having a Shopping List in the app was appreciated by most users, it did not seem practical and usable to them. This is because the ingredients were presented according to individual recipes, leading to repetition of many ingredients resulting in a long list of ingredients. Due to this reason, I consolidated the list of ingredients from all selected recipes and made it more readable by adding lines in between the ingredients.
Some other changes that I made to the Shopping List are as follows:
– Made longer ingredient names visible
– Removed the ‘Edit’ button and added a ‘Recipes’ button on the Shopping List
– Renamed the ‘Edit Shopping List’ screen to ‘Recipes on List’ as no other screen was named with a Verb.
– Also, there was no way to return to a recipe from the Shopping List, so I added links to jump to a recipe details from the ‘Recipes on List’ screen.
Recipe Details Screen
The main problem on the ‘Recipe’ screen, that I noticed by testing with Users, was spotting if a particular recipe was liked and rec= ommended by other customers. ‘XX% would make it again’ did not give an idea about how many people had actually liked a recipe. This is why, I based the recommendation system on Star-rating, clearly mentioning how many reviews is a specific recipe rated upon. Some smaller changes are mentioned in the image below.
It is always good to have lots of options to choose from. Searching, in general, makes it easier to look for something specific. In addition to regular keyword search, Tasty app provides predefined filters to make the search easier.
But, despite of this being an attractive idea, it is a little difficult to add multiple filters while searching, especially for novice users, simply because of the number of clicks involved. Also, the filters are not visible unless user clicks inside the search bar.
I tried to redesign it in a way that the filters are available even without clicking into the search bar and it is possible to select multiple filters without the repetitive click-wait-click-wait cycle which can be annoying at times.
Additionally, I think that spelling errors can be handled in a more user-friendly manner by providing suggestions like Google does, instead of showing a dead-end to the users!
Below is the prototype I created to incorporate my ideas and test it with some users.
Again, it was time to test with real users. So, I got in touch with 5 users and asked them to perform the exactly same tasks as mentioned before. This time 2 users tested the app physically on my phone, while 3 tested it online on UserTesting.com
The outcome was that users were able to perform much more in comparison:
Even though, most of the tasks became relatively easier to perform this time, the prototype itself had its limitations:
- Since it was not possible to add interactions to many recipes in the prototype, the users could not open the recipe they would have opened in the original app which led to some disappointment. One user just did not open the recipe I had designed and hence could not do most of the tasks which were within the ‘Recipe’ screen.
- I had added star-ratings to only a few recipes on the ‘Discover’ screen, this was a little confusing for some users.
- Due to limited number of interactions in a prototype, some actions performed by users did not have any effect on the prototype which caused some confusion at first. But, eventually, they managed to make their way through it.
Through this Case Study, I got an opportunity to explore the possibility of improving the User Experience of an already high rated iOS app. One should always keep learning, they say. UX designers should also always keep thinking about improvements to products even though they may seem perfect.
Both the sessions of testing with users turned out to be really informative and made me realize how differently people think. Something which can be extremely easy for someone might be pretty complicated for another one. So, it is important to try to find a middle ground, as much as possible.
I also realized that it is better to keep the prototypes simple and test them step-by-step since bigger prototypes can confuse the users into believing that they are real applications and every action will have a reaction.
Overall, this was a great learning experience and I thoroughly enjoyed myself working on this one. As it turns out, this is my first story on Medium. I hope you enjoyed reading it. Please leave your thoughts and/comments below.
Thanks for your time!
Improving the User Experience of an ‘almost’ 5-Star rated app was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.