CookIn

scroll

UX/UI Design Case Study

UX Research

User Testing

Branding

Visual Design

A food app for foodies!

FOOD

overview:

CookIn is a cooking app that lets any skill level chef follow and create foodie masterpieces through personalized algorithms.

objective:

CookIn offers user a way to eliminate food waste and save costs by allowing home-chefs to input their pantry ingredients and using them to search recipes that use those items or letting them swap ingredients in tuned with their dietary restrictions with smart algorithms that find recipes based on preferred global cuisines, countries and local ingredients.

softwares:

SKETCH ADOBE XD INVISION PHOTOSHOP INDESIGN

1 USER RESEARCH

ANALYSIS & RESEARCH

Recipe apps are not unique so I jumped in to get my feet wet in the various apps available. I started with a competitive analysis to find out the likes and dislikes and what makes each stand out in the market. These two in particular caught my eye as they used aesthetics and features I wanted to try out.

This led me to create my test script and get ready to ask my users similar questions, I had to understand the user perspective. I took into mind all the likes and dislikes and wanted features from potential users in a cooking app and created my user personas. After organizing the data I received back I created my user personas based on what I felt how a user is defined for this app.

What I found out

They all want the ability to swap out ingredients or to be given suggestions on how to substitute.

They only watch/read the whole recipe or video if it is a new dish they are making. Otherwise they just skip the cooking parts as they already know the beginning or easier steps since they made this multiple times.

Too many options or recipes to choose from is not productive.

1

2

3

4

Don’t always want to buy the whole ingredients list and want to finish their food they have in the pantry or at least try to minimize food waste.

5

They want recipes from all around the world especially users that cook or eat multiple cuisines.

2 USER RESEARCH

MVP & LOW FIDELITY WIREFRAMES

Using Lean UX I gathered requirements and defined the Jobs to be Done in the app and categorized them in to WANT and NEED. As apps can keep making updates, I created a second MVP iteration once the app is on the market. It is important to accept that products such as apps are not meant to be “perfect or complete”. Based on user experience, designers can keep improving without compromising the quality or launch. Using the features organized, I created the user flow for the app.

The next step was to create low fidelity wireframes for the top 3 important features in the app. Using these wireframes, usability testing was conducted to determine any usability flaws or improvements.

User Story

ENTRY

LANDING PAGE

RECIPE MENU OPTIONS

INPUT FIELD (FORM)

FITLERED RECIPE LIST

SUCCESS

User flow Chart

Low Fidelity Wireframes

1 Ui DESIGN

INSPIRATION & MOOD BOARD

Now comes the fun part for me! Keeping in mind everything that was organized, I surfed the Internet (and yes it was for work) and searched for recipes websites first and then pictures of food, drinks and culture. As this was meant to be chefs of all skill levels, I wanted a fun and easy and friendly vibe with users wanting to browse and look at all the vibrant pictures and feel accomplished after creating a recipe. Using the direction I settled on I moved on to the style guide and applied it to the screens. I choose to go with a 12 column grid and two typefaces-one for the headings and one for the inside body text. The color palette was originally very colorful and “popping” but I realized that when it came to the graphics I knew I wanted vibrant food pictures and so everything would be very overwhelming to the user’s eye. Also the primary and secondary actions would also use color to show their state and so I decided to use a highlight color.

vibes!

PLAYFUL

FRIENDLY

HANDMADE

BOLD

SHARP IMAGERY

2 Ui DESIGN

PREFERENCE TESTING

Next I used the style guide created and finished the home screen to conduct A/B preference testing. Using a 12 column grid system and an iPhone X or 11Pro size I started to play around and focused on one screen. The icons at this point were still not defined and needed more work but it let the users see the placement. This lets me understand what users see when they open the app and also what they like, so each screen can be consistent. The first screen on the right was chosen the most. The preference testing now gave me a definitive aesthetic direction to start building my screens.

35%

picked this

65%

picked this

3 Ui DESIGN

RESPONSIVE BREAKPOINTS & FEEDBACK

I started designing from the smallest screen size-a mobile version. Now I went through and identified the breakpoints, XS, S, M, L for each screen. This I admit was a little challenging as there could be so many versions of layouts and each one still needed to flow consistently. There also came a point where I needed to create new elements especially for the Medium and Large screens. For instance, a navigation bar layout or icons that made more sense for a web responsive screen. I started to apply the design elements to all the screens and things started to come together. However, I also knew that usability testing might change my direction or give me a more defined track and understanding of what features work or don’t work or are misunderstood. Early testing and involving users will let me remove unneeded elements and make sure I applied MAYA principle as I don’t want to create something too new for users to understand. The feedback I received helped me give perspective and become either more agreeable about certain elements or remove others that were my personal preference or WANT.

Productive criticisms

1

2

Icons aren’t coherent especially the large screens icons proportions are not right.

The SWAP icon looks a bit like recycling.

The fills of the smaller icons should be different from white.

XS Screen

S Screen

M Screen

L Screen

4 Ui DESIGN

REVIEW AND FEEDBACK

I organized all the feedback I received and went through each screen and its breakpoint to identify which change was needed and which was subjective. Every designer needs to learn how to use feedback objectively and make sure its doesn’t get carried away and completely change the design for a particular user or group. I also need to remember that a deliverable does not need to be perfect and can also apply changes or improvements after launching to test the users in the market. In this case, the important key points were to make the icon proportions correct for all breakpoints and all the design element such as a consistent stroke weight.

5 Ui DESIGN

FINAL MOCKUPS

The first style guide created was just the beginning. The following guide ended up being the final one. Some elements remained the same while some changed and some were added new as I went through each stage. Once I made the breakpoints and had to create new elements for the web sizes, I realized some of the tabs and even buttons needed to be added to the style to include larger screens.

I tried to make the UX/UI as personalized as possible with the feature of saving profiles of special dietary restrictions or include/exclude ingredients but I also wondered for once in a time users if that experience is too time consuming.The biggest challenge I realized along the way was that the algorithms will play an important part in this idea. The database has to be large enough that users can receive ingredients and recipes from the norm. The bigger and global the database stored, the better the experience the users will have.