Luis Uribe
UX Designer
Made with

'Cooknow!': The engaging cooking app for newbies

Personal Case Study - May 2021

Design Process

My Role: UI/UX Designer & UX Researcher

Duration: 1 month and a half

Team or solo project?: Personal solo project 

Tools & Devices: Figma & Photoshop

Context

CookNow! is a proposed product solution to the noticeable declining percentage of people who can cook each new generation since 'Gen. X'. (source: https://www.wellandgood.com/home-cooking-decline/).

Why?

As I approached graduation for my Bachelor of Arts in Interactive Media Design from the University of Washington - Bothell, one of my courses had me create a personal case study to add to this portfolio. I was intending on doing something similar to this before even hearing of such an assignment; everything aligned perfectly.

I wanted to create something fun and engaging with simplicity as a forefront principle in the product's usability and aesthetics: the goal is to be as user-friendly as possible.

I was inspired by the noticeably occurring trend by my own personal relationships with folks around my age and from the statistics listed above. Plus, food is just fun to think about, it provides many possible varieties that remind me of a Lego Puzzle or programming in general. Why? Because in all these practices, smaller components combine with others in one of many possible ways creating a larger whole product.

And here, using UX design methodologies, I provide a look at one of the many possible cooking apps that could be geared towards a young-adult audience.

Step 1: Research
Guiding Research Questions

Guiding Research Questions

Guiding Research Questions

To first get me planted in the right direction, I had to figure out some context on the environment I was trying to work in - cooking apps.

I devised four simple questions that ended up creating a simple but contextual document serving as a reminder (and really, as a list of requirements) on what the app I prototyped needed to be about. You can see said work to the right of this paragraph.

'Cook Now!': The engaging cooking app for newbies

Competitive Analysis

Moving along, I realized that looking at some product competitors could lead to discoveries in trends that work and vice-versa, and simply help in idea iteration in the long run. I tried finding apps that centered on teaching new users how to cook, and found the following results on the left:

'Cook Now!': The engaging cooking app for newbies

Persona

Reflecting on some considerations from the previous method, I made a persona of a user who could probably benefit from my app idea. This persona helped me empathize with the users more and helped me focus on some details from a user's perspective (such as simple UI practices, being allowed to view recipes from a user, use of video tutorials, etc.).

'Cook Now!': The engaging cooking app for newbies

Customer Journey Map

Furthermore, I created a customer journey map that helped me picture a potential journey of a user benefitting from our app. Here's the work I did for that method on the left:

Logo Design

A simple swirl showcases a shape commonly seen in certain sauce (or other similar food-additive) patterns. Plus, it simply looks cool. The pink color used is meant to evoke the feelings of 'joy', 'intuition', and 'playfulness'. A scrollable tablet image is shown on the right!

Step 2: Design

Information Architecture

As the design process started to come to fruition, a base idea for the whole app's layout needed to be documented. I used the method mentioned in the title to start the design phase.

Below, my simple but efficient blueprint can be seen:

Day-to-day contextual application

In addition to the work shown above, I managed to ask some friends and family some questions regarding their opinions on cooking apps while working on this project. Some of their responses and feelings have been subtly applied to the persona, customer journey map, and perhaps, even certain features could be reflections on their desires (such as the 'community' feature I ended up creating). This work is all written as rough notes in my design journal.

Doing all the aforementioned + after doing some further sketches, I finally reached the last stage:

Final UI Design
'Cook Now!': The engaging cooking app for newbies

Sign-Up/Log-in Page

This page is simple and allows the user to get started right away with its intuitive form.

The phrase underneath the logo entices the user to try the app with facts.

'Cook Now!': The engaging cooking app for newbies

Discover

This is the main 'Home' page where users can find new recipe video tutorials to choose from - simple cards with the required information listed on them are chosen as the main visual components of this app. The navigation bar on the bottom indicates where the user is through an icon indicating the page a user is on turning to the color white alongside having a slightly bigger font on its descriptive title relative to its counterparts. A dynamic navbar would be used, but a 'fixed' navbar option would be present in the app's settings for the user if desired.

'Cook Now!': The engaging cooking app for newbies

Search Function (Filters)

Easy and simple 'bubble' buttons and color indications allow for a quick and efficient filter process for the user as seen on the right:

'Cook Now!': The engaging cooking app for newbies

Community

A delighter feature. Look at cooking articles, news, and apply for a recipe of yours to be posted on the app through this page!

'Cook Now!': The engaging cooking app for newbies

Community Search (Filters)

Filters for the community page on the app as shown to the right:

'Cook Now!': The engaging cooking app for newbies

User Profile

This is what a user's profile page would look like. It would have three collections to choose from allowing a user to select what they need quickly. All other settings and features are intuitive.

The '+22 Pearls' button is a 'delighter' feature brought into this app - pearls can be collected by the user after uploading a picture of their finished recipe from an app lesson that would hypothetically be approved by a 'food-in-pictures' scanning algorithm.

Scrollable Image here!! ^ (use mouse wheel)

Scrollable Image here!! ^ (use mouse wheel)

Lesson Page

This page is where the magic happens! Users can learn how to make something simply by watching the video provided or by selecting the 'Read Transcript Instead' button replacing the video with a step-by-step list essentially composed from the transcript of the video.

Comments are shown for recipes that have them to increase user engagement and the feeling of 'belonging to a community' on the application.

And near the bottom of the screen, the 'Pearl' delighter feature photo proof button is conceptually displayed.

'Cook Now!': The engaging cooking app for newbies

XP Redemption Page

This is one of the main delighter features of the application: a feature that allows a user to get rewarded for learning their newfound hobby! People love free stuff, so it's only natural to add something along those lines to our product idea to help improve its user retention.

*According to Panera's marketing strategy on the "Think with Google"'s site, it was found in 2018 that "Search data shows that 'reward(s)' searches related to specific brands have grown more than 40% year over year

Conclusion

Optimistic Beginnings

Admittedly, as I said earlier in my case study, this is only 'one of the many possible cooking apps that could be geared towards a young-adult audience'. While that statement is obvious in nature, what I really mean is that the true value of this project really lies in the lessons it has taught me.

I simply didn't have enough time this quarter to truly delve into the more sophisticated user-tracking progression systems I was hoping to start conceptualizing. Additionally, while the UI isn't too bad, I deep down know I could've made a slightly more aesthetic rendition of my app idea given more time. But I quickly realized during the project's beginning stages that perhaps, a more simplistic but foundational app idea could still provide a great deal of learning and practice as an upcoming designer and corporate professional into the workforce.

I'm proud that I was able to turn those simple questions I asked earlier into a simple but efficient app solution that embarks the needed recipe lesson features alongside some community and user-reward options that can spark emotional responses and thus, improve user retention.

I learned through this project as well, the importance of users wanting to belong to a community, having a user-friendly product, and users wanting rewards for their work -all of these lessons can be set as mental 'bookmarks' to possibly refer to in many upcoming products or responsibilities elsewhere. Plus, the goal of this case study was to explore a solution, not to make the most sophisticated 'end-all-be-all' product I could devise in a short time frame.

Thank you for reading this entry, and stay tuned for further work!