Tasty: Digital Experience Re-design

'Tasty' is BuzzFeed's famous cooking guide that produce creative 1 minute cooking videos successfully conveying tasty recipes to their target users. They first introduced this idea on Facebook, uploaded tons of videos that eventually conquered instagram as well. A year back, they launched the 'Tasty' app available on iOS and Android. Though the app is a great way to have cooking ideas right at your finger tips, it could use a few alterations in terms of UX design. 

Goal:

To study the existing application and identify key problems in order to redesign and provide a better user experience 

 

Design process:

The steps that I followed for the re-design were:

Phase 1: Inspiration

Phase 2: Research and Ideation 

Phase 3:​ Implementation 

My Role:

I was the sole Researcher and Designer for this project. As a part of my research, I conducted a UX Audit, did a competitive and landscape analysis, interviewed target audience, build personas and journey maps, worked on re-designing the IA and built new wireframes, tested and implemented findings post testing and built high fidelity wireframes and UI Comps. 

UX Audit: Identifying the problems

The user experience audit provides a higher level understanding of what the application provides in terms of:

 

User Value 

Functions 

Experiences 

 

The audit also carries out the heuristics to understand the areas of improvement and advancement.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Problems identified:

  • Unavailability of filters and personalization

  • Insufficient information hierarchy

  • Cognitive load

  • Nested functions

  • Icons go against default designs

  • Incorrect styles and weightage used that led to misleading functions

 

Building assumptions:

Based on the UX Audit, I made the following assumptions:

 

  • Information can be condensed to help users grasp it easily

  • Providing filters would help users come down to the exact information

  • The cognitive load could be reduced by addressing the Information Hierarchy

 

Phase 1: Inspiration - Landscape Analysis

 

 

To further understand the experiences of apps that leaves a user engaged, I decided to study direct as well as indirect competitors of a recipe app. 

A user comes across several experiences in the digital eco-system. As a UX designer, it is our duty to understand these experiences and what interests a user in them, to further incorporate such ideas while build/re-designing a product. 

Applications that I studied were Yummly, Food Network, Tastemade and Pinterest. 

My landscape analysis focused on understanding how these apps: 

- Showcasing recipes

- Provide Recipe details

- Provide Search and filters

Among the 5 apps, Tastemade had a good information architecture whereas Pinterest had the best search functionality. 

Phase 2: Research and Ideation -  User Interviews 

Tasty first became popular among people through BuzzFeed and Instagram.

Tasty has two sets of the target audience, namely:

  • Amateur Cooks

  • Youth - The Instagram Generation

 

To begin with Customer research, I conducted user interviews with the target audience and asked them questions about their experience with recipe applications.

 

The interview questions focused on understanding:

  • What the target audience use to refer while cooking

  • Are there any food recipe apps that they currently use

  • What do they like and dislike about the application

  • Which experience are they most frustrated with

  • Which features do the users feel most engaged with

  • What is their most memorable experience on any application

 

Problems Identified:

Problems Identified:

- Too much of scrolling

- Cognitive load

- Lacks information hierarchy

- Improper filters

 

I arranged the interview findings by utilizing the Rose - Bud - Thorn method to build affinity clusters and understand what my focus of re-design should be addressing. 

Roses (Pink) stand for 'Plus Points', Thorns (Blue) stand for 'Pain Points' and Buds (Green) stand for 'New Ideas' 

 

  • Users wished to see more filters and wanted the liberty to choose what they see on their home feed

  • They wished to see condensed and compact information

  • Users wanted to see budgets, healthy food, calorie count and time consumption for every recipe

  • Users liked how there were 'favorite' boards automatically created on the home feed

 

 Goals

To find a cooking app that is:

  • easy to navigate

  • provides accurate information

  • User-friendly

  • tailored to individual needs

  • Filters and personalization

 Frustrations

  • Unreliable content 

  • Information anxiety 

  • Insufficient filters 

User Persona: 'Troubled Tabitha'

‘If I have to spend more than 30 seconds in understanding the content on an app, then I am automatically disinterested'

 

User Journey Map:

The journey map focuses on highlighting the struggles that users experience while navigating through the recipe app.

 

  • Tabitha observes that the app does not show her content that caters to her personal likes and dislikes

  • She hates that she cannot select multiple filters

  • She wishes she could adjust the servings and also know the nutritional value of every recipe

  • She does not find the filters she is looking for

  • She is exhausted with the amount of information displayed

 

Existing Sitemap: What were the Problems?

 

To begin with ideation, let's have a look at the existing sitemap and the problems:

 

  • No Onboarding process

  • Nested Functions 

  • Lacked information hierarchy 

  • Insufficient filters 

New Sitemap:

New additions and changes:

  • Onboarding

  • Home feed filters

  • Search page and filters

  • Ability to create boards (example: Pinterest)

 

Furthermore, I built an app map to clearly showcase how the additions in the information architecture would look on screens

Phase 3: Implementation - Wireframes Phase 1:

Onboarding 

One of my fixes for the app included adding an onboarding process which would help the users personalise the content to their own tastes. Recipes would populate based on the choices made in this onboarding.  

Home feed Filter: 

  • Content will be populated based on the options selected in the on-boarding process

  • Content can be revised by applying new filters

'Add a Category' :

  • Users can create their own category of recipes by adding their own recipe board

  • Content will be populated based on tags used

User Testing Phase 1: Findings

The method used to summarise Findings: Affinity Clustering (Rose - Bud- Thorn)

 

Users liked:

The ease of information

Onboarding

 

Users Disliked:

Filter icon -  hard to understand

Wanted more symbols and less text

Add a category? Really confusing

 

New Ideas:

An option to clear existing filters

Icons that were universally accepted

Recommendations:

Based on the user findings, the following would be the recommendations that would be carried out in wireframes phase 2:

  • To change the icons of ‘filter’ and ‘guides’ and make them more prominent and easy to understand.

  • To change the placement of the filter option.

  • To rectify the function and placement of the ‘add a section’ feature and remove the redundancy.

  • To change the icons for vegetarian/meat etc. and use the universally accepted icons for users to easily understand.

 

Style Tile:

Before proceeding to the second phase of wireframes, I put together 3 options of style tiles that would go best with the 'Tasty' recipe app:

 

 

Wireframes Phase 2:

Onboarding -  Additions/Changes made: 

- Implemented colors chosen in Style tile 

- Addressed a few onboarding questions 

 

 

Onboarding -  Homefeed Filter / My Profile / Search functionality

- Added UI to all screens 

- Provided home feed tags based on the onboarding process

- Provided 'add a category' option which was inspired by Pinterest 

- Designed 'my profile' page that has recipe boards that a user can create on their own

 

 

 

 

 

User Testing Phase 2: Findings

After testing the high fidelity wireframes, the following were the findings: 

Users Liked:

  • Tags

  • Information Hierarchy

  • Readability

  • Navigation

 

Users Disliked:

  • Gradient colors

  • Image size

  • Iconography

  • Looks ‘desert heavy’

 

New Ideas

  • Center align text

  • Reduce opacity

  • User vector images for background

  • Tag recently viewed recipes

 

Wireframes Phase 3: 

 

Changes made:

  • Condensed onboarding. Focused on the look and feel

  • Filters made much more easy to understand

  • ‘Recipe board’

  • Search Filters

  • Change of colors and backgrounds

  • Much lesser cognitive load

  • Change of Icons

 

 

 

 

Changes mainly focused on the Home Page:

  • Changed Icons

  • Added tags

  • Added icons that explained details of food items

 

 

 

This site was designed with the
.com
website builder. Create your website today.
Start Now