UX/UI Design Case Study
A food app for foodies!
CookIn is a cooking app that lets any skill level chef follow and create foodie masterpieces through personalized algorithms.
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.
SKETCH ADOBE XD INVISION PHOTOSHOP INDESIGN
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.
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.
They want recipes from all around the world especially users that cook or eat multiple cuisines.
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.
RECIPE MENU OPTIONS
INPUT FIELD (FORM)
FITLERED RECIPE LIST
User flow Chart
Low Fidelity Wireframes
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.
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.
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.
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.
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 each design element such as the stroke weight needs to be consistent.
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.