Challenge

When I joined the team as Product Designer, a beta version of the app existed. I had three main challenges to solve:

a) Cook It had multiple visions with no defined direction.

b) Users were neither defined nor researched upon.

c) Users faced usability and engagement issues while testing the existing app.

Solution

a) Helped founder set a goal and vision for the product. Identified and defined different types of target users.

b) Identifying user pain-points and redesigning end-to-end iOS mobile app, enabling users easily create and share their recipes with their network.

 
 
 

MY ROLE & EXPERIENCE

This is an ongoing project where my role not only involves using UX and UI methods for redesigning the iOS app, but also defining long term strategy and vision for company as a whole.

In order to facilitate redesigning the app, I have conducted comprehensive research on users and competitors, created wireframes, designed low/high fidelity mockups, clickable prototypes, performed usability testings, and provided well-defined design assets to the engineering team.

This is one of the most interesting projects I have worked on, as it doesn’t just test my UX/UI design skills, but propels me to think in terms of responsive designs.

 
CookIt_Background-13.png
 

design methodology

Process-02.png

Product Goals (and unique selling points):

  1. Social Media for recipe — enabling users to view recipe posts of their network; easily create and share their own recipes with their network.

  2. GPS for cooking — providing users with step-by-step instructions for each recipe. Also accept voice commands from users.

  3. Virtual Kitchen — to help users easily create great recipes in virtual kitchen; learn new recipes in a virtual kitchen environment.

Research 

Competitor Analysis

CookIt is a new concept in many aspects. It has features like virtual kitchen, and at the same time it wants to position itself as a social media for recipes. Thus, my research was not restricted to just recipe apps. I scrutinized cooking apps like Food Network, cooking games like Cooking Mama, and social media apps like Instagram. Below are the key insights I gathered from my research:

 
 
Competitor-01.png
 
 
 

User Analysis

Our research helped us identify two types of users — a) users who wanted to learn from others; b) users who wanted to quickly create recipes and showcase their talent to people.

Persona-01.png
 
 

Ideation

 
 
UI sketch ideas for Create Screen

UI sketch ideas for Create Screen

 
Background-14.png
 

Design Decisions

I am currently improving the UX and UI design for the mobile version of Cook It’s app. Our main focus, as on date, is to improve the interactivity of Landing and Create pages for the mobile app, and re-launch it during Christmas.

Improving User Engagement

When I joined the team, I realized that Cook It’s app had a lot of cohesive elements for the user, but they weren’t properly implemented in the existing design. Thus, it became necessary to gauge the user interactivity in the existing design.

After testing the usability of the app with 6 testers and understanding their pain-points, I redesigned and simplified several elements of the app to improve user engagement and provide them with smooth navigation throughout the app design. I especially focused on understanding user’s comfort and vulnerability when using apps on mobiles.

 
 
 

Redesigning Tab Bar

I started the design process by redesigning the tab bar for the mobile app. In order to provide consistency to icons, I created each one as an outline.

Taking inspiration from Instagram, in version 2, I brought Create (+) icon to the top header from the tab bar, thereby reducing the number of tabs from 5 to 4.

 
 

Existing Tab Bar

Old Tab Bar.png

Proposed Tab Bar version 1

5 Items.png

Proposed Tab Bar version 2

4 Items.png
 
 
 

Redesigning Landing Page

When I tested the existing app with 6 users, 4 testers thought that this was like a social media app like Instagram meant for sharing recipe images. It took them more than 30 seconds to realize that the recipe cards on the landing page could be clicked for viewing the recipe in detail.

3 of the the testers didn’t find information to be sufficient enough to compel them to learn more about the recipe.

This interaction made me realize that Cook It was definitely moving in the right direction of being projected as the social media app for recipes. However, users needed more basic information to realize that through this app they could also view/create recipes.

 
 
 
 

Redesigning Create Page

This prototype showcases a few scenario for the Create Screen. Click on play to view the prototype.

 
 

Existing Cook It Create Screen Prototype

Proposed Cook It Create Screen Prototype