UX Designs, Visual Designs

Concept design of Cooklist App

Concept Design of Cooklist Cooklist
Concept Design of Cooklist

This is the concept design of Cooklist App. The goal of this design is to give the client an idea of the direction of future Cooklist App in IOS I am heading in.

  • Screenshots of this concept design: 4 Screenshots
  • Platform: iPhone 7
  • Duration of time: 30 hours
  • My role: UX/UI Designer
  • Tool: Sketch
  • Date: 2017


You will read pictures of the design process, including whiteboard ideation, Wireframes, interaction designs and User Interface Designs of Receipt Feed, Receipt Detail, Pantry and Product Detail pages.

 Information Analysis, Sketches, Ideation

Analysis of giving information, such as requirements of this concept design and user cases consideration, and ideation of this concept design.

Ideation, Sketches, Information Analysis

Receipt Feed: Wireframe, Interaction Design and User Interface Design

My client provided me the explanation of this page, user cases to consider and required features below:

This is where discover new recipes and is the default screen that is shown when the app is opened.

User cases to consider:
1. Opening the app to find something to eat right now
2. Searching for a specific type of recipe
3. Trying to filter recipes
4. Seeing a recipe you like or don’t like
5. Wanting to share a recipe with someone
6. Questioning whether you have all the ingredients to make the recipe or not
7. Wanting to buy the ingredients to make the recipe

Required Features
1. Search bar
2. Filter button
3. Recipe cards
• Recipe picture
• Title
Optional Ideas
• Ratio of ingredients you have to the total number the recipe requires
• Cook time
• Calories
• X button to hide that recipe and show fewer recipes like that
• Add to shopping list button
• Like / save button
• Recipe author & author profile picture
• Review score
• Favorite count
• Main ingredients (chicken, carrots, potatoes)
• Share
• Direct link to view the recipe source
• Consider what type of layout for the recipe feed will work best, grid vs single column.

Wireframe: Receipt Feed
Wireframe: Receipt Feed
Receipt Feed
Receipt Feed

Receipt Detail: Wireframe, Interaction Design and User Interface Design

My client provided me the explanation of this page and required features below:

The recipe detail page shows what ingredients a recipe requires and if you have the products needed to make the recipe. You will notice in the mockups that for each “recipe ingredient” there is an actual product listed underneath it. This is the magic of Cooklist, it shows you the product that you have in your pantry that matches each recipe ingredient.

If the ingredient is not available, then there is an indicator that you are missing that ingredient (red dot in the mockup) and an option to search for the product to add it to your pantry (if you actually do have it) or cart (if you want to buy it).

Cooklist can not show the step by step directions in the app so if the user wants to see instructions for making the recipe we have to open the original source website where the recipe was published.

Required Features
1. Picture & Title
2. Recipe author & button linking to directions on publisher’s website
3. Favorite
4. Add to shopping cart (this adds all ingredients that are missing from your pantry)
5. Time & Calories
6. Ratio of ingredients you have to the total number the recipe requires
7. Number of servings
8. Ingredient list
Each ingredient in the ingredient list must have the following
• Ingredient name
• Quantity
• Product name
• Indicator when the product is missing
• Ability to search for missing products to add to shopping cart or pantry
• Report issue
Optional Ideas
• Nutritional data
• “I cooked this” button
• X button to hide the recipe and show less like it
• Share button (social, email, message, etc)
• History of the times you cooked it
• Tags about diet / cuisine type / etc
• Comments
• Rating
• Total number of likes
• Related recipes
• Swipe on a product in the ingredient list to remove it from your pantry
• Recipe author’s image

Wireframe: Receipt Detail
Wireframe: Receipt Detail
Receipt Detail
Receipt Detail

Pantry: Wireframe, Interaction Design and User Interface Design

My client provided me the explanation of this page, user cases to consider and required features below:

The pantry is where you go to see all the products you have purchased. We believe the key to Cooklist working well is to make it easy to keep the pantry up to date with incoming and outgoing groceries. Purchases made at a connected grocery store are imported automatically into the pantry so it needs to be just as easy to remove purchases.

Use cases to consider:
1. Trying to create a shopping list. Looking at past purchases is really helpful when putting the next shopping list together.
2. Using the current pantry as an anti-shopping list by viewing the products you already have while in the store.
3. Browsing the food you have to get an idea of what to make for dinner.
4. Checking for products that may be expiring soon or that are expired.
5. Adding a product that was not brought into the pantry automatically.

It needs to be easy to navigate the pantry to find any current, past for future product.
Required Features
1. Search
2. Information about search results and active filters
3. Navigation between “Current”, “Past” and “Add New”
• Does not necessarily need to be a navbar like in the mockup but you need some way for the user to navigate through these three states for their purchases and know which one they are on.
4. Camera scan button
• Used to scan the barcode on products or receipts to add them to their pantry
5. Filter
• Users may want to change the order of products in the pantry by purchase date, cost, name, category, expiring soon
6. Each product item
• Picture
• Title
• Remove from current pantry / Add to cart
• Maybe possible with a swipe instead of always visible
Optional Ideas
1. For each product item
• Time since purchased / expiration date
• Core ingredient that the product is matched to
• Cost of the product
Cooklist matches each product to one or more “core ingredients” which are then used to match the product to recipes.
Users may add or remove core ingredients from a product if the Cooklist algorithm matched them incorrectly.
In the mockup above, the core ingredient for each product is listed just under the product title
2. Break up the pantry into major categories where it shows just a few products for each category and has the option to expand more products that are in that category
3.It is nice to be able to search for an item in the current pantry, and then if no search results are found be able to tab over to the “add new” and it is still searching for the same search term
4. Keep in mind that images are sometimes missing and the pantry page should be more about navigating to the right product instead of shopping.

Wireframe: Pantry
Wireframe: Pantry

Product Detail: Wireframe, Interaction Design and User Interface Design

My client provided me the explanation of this page, user cases to consider and required features below:

The product detail page is where users discover new ways to use the product, understand it’s history and make intelligent decisions about buying a replacement in the future.

Use cases to consider:
1. You know you want to cook something with the product and it is a quick way to see recipes that can be made with it.
2. The user arrives at the product detail page by clicking on it where it was linked to a recipe ingredient and they didn’t know what it was or they need to remove it from their Current pantry.
3. May want to save or favorite products, even if they have never purchased them and don’t want to add to cart now
4. It may not be a food product and could be something like tin foil or plastic bags

Required Features
1. Product Name, picture, brand
2. How old the purchase is
3. Recipes that you can cook with that product
4. Purchase history
• Retailer, date, price
5. Current status (In stock or consumed)
• Button that gives you the ability to remove and add the product to current pantry
6. Core ingredients that the product is matched to and the ability to edit them
7. Description & Ingredients
8. Add to shopping cart button
9. Report a problem
Optional Ideas
• Related products
• Quantity
• Cost for the product at grocery stores near you
• Save / Favorites
• Set an alert if the item goes on sale
• Nutritional data
• Unit price per oz
• Share
• Comments
• Ratings

Wireframe: Product Detail
Wireframe: Product Detail
Product Detail
Product Detail


I learned that enough usability tests for the best result are necessary steps. Because the timeline was tough and I did not have enough time for usability tests. I only did one usability test, collected feedback from users and improved the designs. In future, I will manage my time better on user research, wireframes, usability tests and UI design.

I learned that communication with clients during the design process would help for the best outcome.Unfortunately, the client seems busy at that time and did not give me feedback at all.