Aprajita Ranjan
 

Cooki It_v1..png
 

Section 1

COOK it CHALLENGE

Background

When I started working on the project, the first version of Cook It app was recently launched but was not able to attract traction. After testing the app with several individuals, I identified following issues with the existing product:

  1. The product lacked vision.

  2. No research had been done on users.

  3. App’s UI appeared non-intuitive.

This case aims to uncover and alleviate the usability issues that are present in the Landing Page and Create Recipe pages of the existing iOS mobile app of Cook It.

 
Grey Background.png
 
Landing Page 5.gif
 
Create 3.gif
 
 

Section 2.1

Competitor Analysis

empathize

In order to gain actionable insights on how to improve Cook It’s experience, I researched some competitors within the vast landscape of recipe apps, social networks and cooking games with these specific learning goals in mind:

 
Grey Background.png
 
  • What information do recipe apps provide on recipe cards to prompt users check complete recipe?

  • What image size on recipe card attracts maximum user attention?

  • How do cooking games provide an experience similar to how user would cook in real-life?

  • What are some best practices for activity feed experiences?

 
 
competitors logo_v2.png
 
 

 Section 2.2

User Analysis

empathize

I looked at various direct and indirect competitors and created two proto-personas that that could evolve based on further validation research — 

  1. Learners: users who wanted to learn from others.

  2. Creators: users who wanted to quickly create recipes and showcase their talent to others.

 
Grey Background.png
 

USER PERSONAS

Persona-01.png
 
 

Section 3.1

issue spotting

define

With these personas in mind, I set out to conduct user interviews, 5-second comprehension testing and guerrilla usability testing with the existing Cook It app.

All users were given a series of task, and were timed during each task to see how easily were they able to accomplish each task.

Below are a some of the key insights gathered from these interviews:

 
Grey Background.png
 

INITIAL USABILITY TESTING

usability testing 1.png
 
 

Section 3.2

Analyzing Issues

Define

To identify the specific pain points that needed to be remedied so that users can better accomplish their goals, I carefully reviewed each test and wrote down every instance when a user struggled with the app. Creating an affinity map with these notes helped me group and define common issues.

 
Grey Background.png
 

AFFINITY MAP

Affinity Map for Cook It.png
 
 

Section 4

Design decisions

Ideate, Prototype

When redesigning the app, I decided to preserve existing architecture of Cook It and instead focus on redesigning the app's UI to improve usability.

Through affinity mapping, I figured that all individuals unanimously found the app to be complex and inconsistent. Thus, I kept my focus on producing simplistic, cleaner and cohesive solutions.

 
Grey Background.png

STYLE GUIDE

Color

Color.png
 

Typography

 

Icons

 

Simplification of Tab Bar

 
Tab Bar.png
 
 

Section 4.1

home page

Ideate, Prototype

Users were not able to immediately realize that the cards were clickable and would lead them to the recipe. I redesigned the cards primarily working on type hierarchy and layout, and providing users with more information they’d need on a recipe card.

 
Grey Background.png
 

RECIPE CARD IN HOME PAGE

Existing Recipe Card with limited information about the recipe.

Re-designed recipe card with necessary details and easily accessible buttons

 

 SECTION 4.2

Create RECIPE PAGE

Ideate, Prototype

Individuals felt confused and overwhelmed in the create recipe page, and would thus quit almost immediately.

Through my solutions, I tried to make the Create pages more appealing, intuitive and interactive (with quick tutorials) to help users successfully cook dishes in this virtual kitchen.

 
Grey Background.png
 

CREATE RECIPE PAGE

Existing page with pop-up for choosing first appliance for creating recipe.

Re-designed page asking users for dish’s name to help pre-source ingredients.


Existing virtual kitchen with blank space for ingredients and utensils (meant more work for users).

Re-designed virtual kitchen with
pre-sourced ingredients & appliances (reduced user efforts).


Existing page for searching ingredients or utensils.

Re-designed search page providing users with recommendations for their recipe.

Search.png

Existing steps page.

Re-designed steps page.

 
 

Section 5

design validation

test

With the clickable prototype, I went back to users for usability test (with each task being timed again). Result from testing with 7 users were optimistic and showed significant improvement in user interactiveness with the app.

While almost all users could successfully create recipes, 4 of 7 users could do it in first try (and within 2 minutes). They all were excited with the product.

Below are some key insights gathered from the comprehension and usability testing.

 
Grey Background.png
 

VALIDATION TEST

 
 

Section 6

Closing thoughts

This is a very exciting endeavor where I am being challenged to communicate complex ideas with intuitive designs. I also found that language and presentation are key when introducing users to a new type of product.

As next steps, I would like to do the following:

  • Create consistent designs across all pages.

  • Create responsive web and mobile design (iOS and Android) for other devises.

 
Grey Background.png