Cookit

End to End App Design

project type

UX research, App Design

my role

UX/UI  Designer

project time

74 hours

Prototype
ProblemMethodProcessLatest PrototypeNext Steps

The Problem

Meal planning is a common task for most home cooks, including myself. So, the opportunity to transform this personal challenge into a practical solution for others made this project particularly gratifying.

What distinguishes Cookit from the array of other solutions I explored is its commitment to simplicity and user-friendliness while integrating all essential steps of the process. One of Cookit’s features that makes it particularly unique is its budget-conscious and collaborative grocery list—a rare attribute among its competitors. This feature not only sets Cookit apart but also aligns perfectly with the practical needs of everyday users.

Method

Throughout this project, I leaned heavily on research results in my decision-making and prioritization, keeping the Design Thinking structure in mind. My research modalities included:

1.
User Interview
Empathize
Define
Ideate
2.
Competitor Analysis
Empathize
Define
Ideate
3.
Card Sorting
Define
Ideate
Prototype
4.
Usability Testing
EmpatPrototype
Test

Process

User Interviews

I talked to 7 adults, ages 23-43, five experienced and two less experienced cooks to understand their regular frustrations when meal planning, their tools, and their expectations.

Oops moment!

0% of the interviewees actively used apps for meal planning so I could not collect any data on the competitor apps from user perspective as I had planned in my research plan. However, it intrigued another question: What makes these people not want to seek a meal-planning app yet?

Competitor SWOT Analysis

There are many meal-planning apps on the market. For the purpose of benchmarking, I chose apps rated above 4.3 stars and with numerous reviews indicating popularity.

Research Outcome

1. How Might we help...

2. who would benefit...

3. design priorities...

1.
Must-Have
Features
  • Grocery list

  • Recipe center

  • Collaboration capability

2.
Time & Budget

70% of participants struggle with managing grocery coupons due to time constraints. let’s tackle this!

3.
Simplicity &Customization

Users need to easily customize meal-planning detail level. Goal is to find a balance.

Card Sorting

With a clear idea of the essential information for the minimum viable product (MVP), I began designing the optimal, intuitive information architecture. To achieve this, I set up a virtual card sorting activity using The Optimal Workshop tool.

Constraint

Due to the limitations of the free version, only 20 topic cards can be added, whereas a preferred 30 or more would be beneficial.

the outcome

1. As voted by participants the topics fit best into 4 main categories:

  • Grocery-related topics

  • Recipe-related topics

  • Planning-related topics

  • An account Section

2. And the app navigation flow would look as follows:

Brand Identity & Visual Assets

Inspired by my research insights, I brainstormed core brand value words and generated name options for the app using Namelix. After gathering votes from potential users, I decided on "Cookit" and moved on to logo design:

Usability Testing

Based on testing usability with 9 participants aged 20-40, including some of my original interviewees, the following results indicated that I was able to get close to my initial design goals:

  • Task 1:
    The user creates a new weekly menu and adds it to meal plan

  • Task 2:
    The user adds a new recipe to the recipe book

  • Task 3:
    The user finds a new recipes using the search feature and adds it to recipe book

  • Task 4:
    The user edits and finalizes the grocery list : Assigns people & stores to each item

I also created storyboards to visualize Alejandro and Raya's app interactions. I used the insights to adjust user flows to reflect real usage and develop relevant testing scenarios.

what worked

1.
Thoughtful, Easy & Inviting UI

Stated by 70% of the testers

2.
Intuitive Flows

86% of the testers voted

3.
Logo & Colors

100% of the testers complimented on these

iterations

  • The multi-function add button created confusion for 75% of the testers, so I replaced it with function-specific buttons for each screen

Before:
multi purpose ADD button

After:
function-specific buttons

After:
function-specific buttons

  • Lack of context on the “menu creation” screen confused 55% of the testers hence the description was added.

    Before:

    After:

  • The recipe addition flow confused 65% of testers, primarily due to the multi-function ADD button which I fixed . For more clarification, I implemented the following additional changes:

    Before:

    After:

  • Also added confirmation effect after a new recipe is added to the recipe book, by giving a darker background effect to the newly added recipe:

Latest Prototype

The user creates a new weekly menu and adds it to meal plan
The user adds a new recipe (Beef & Broccoli) to the recipe book
The user finds a new
(Green Bean) recipe using the search feature and adds it to recipe book
The user edits Grocery list (adds chicken) and finalizes the grocery list: assigns people & stores to each item

Next Steps

1.
Create
Missing Flows

For the sign up and account set up process

2.
Improve
Current Flows