Tasty: Digital Experience Re-design

'Tasty' is BuzzFeed's famous cooking guide that produces 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 fingertips, it could use a few alterations in terms of UX design. 

 

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

Project Goal

Design Steps

Inspiration

Research 

Ideation 

Testing 

Visual Design

My Role

UX Research

UX Design 

Visual Design

UX Audit

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

 

User Value 

Functions 

Experiences 

 

Problems identified:

  • Unavailability of filters and personalization

  • Insufficient information hierarchy

  • Cognitive load

  • Nested functions

  • Icons go against default designs

  • Incorrect styles and weight 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.

Landscape Analysis

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

Competitors studied:

 Yummly

Food Network

Tastemade

Pinterest. 

My landscape analysis focused on understanding how these apps: 

  • Showcasing recipes

  • Provide Recipe details

  • Provide Search and filters

 

User Interviews

Target Audience

Amateur Cooks 

Home cooks 

Youth - Instagram generation

Interview touchpoints

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

 

Interview findings

Problems identified:

  • Too much of scrolling

  • Cognitive load

  • Lacks information hierarchy

  • Improper filters

 

The interview findings were arranged 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' 

Key insights:

  • 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

User Persona

 Frustrations

  • Unreliable content 

  • Information anxiety 

  • Insufficient filters 

Troubled Tabitha

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

Goals

To find a cooking app that is:

  • easy to navigate

  • provides accurate information

  • User-friendly

  • tailored to individual needs

  • Filters and personalization

 

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 Site Map: 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 

 

Revised Site Map 

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. 

 

Ideation: Wireframes Phase 1

One of my fixes for the app included adding an onboarding process which would help the users personalize 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 - Affinity Map (Phase 1)

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.

Exploring Style Tiles

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:

 

Ideation: Wireframes Phase 2

Onboarding -  Additions/Changes made: 

  • Implemented colors were chosen in Style tile 

  • Addressed a few onboarding questions 

Onboarding -  Home feed 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 - Affinity Map (Phase 2)

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

 

High Fidelity UI Comps 

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

Protoype

This prototype was created on inVision. I hope you enjoy the experience of this iterated Tasty app!

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