Barebones Kitchen

Responsive Website - UI & UX Design

Objective
While researching other recipe web apps it was difficult to find a simple website that included recipes with the food you should already have in your kitchen. Each site I researched include too much information. The ingredients and directions were not easy to find either. My goal for this project was to create a simple recipe web app for the working adult. They are looking to use their kitchen more and learn a little while they’re making these new meals.

Context
I had the pleasure of creating this project during my time at CareerFoundry and was responsible for the entire design process. I started with the user-centered design process together with the principles of Design Thinking and finished it off by creating each responsive screen.

Duration
The duration of this project was two months. The research phase lasted for 3 weeks. This included competitor research, user personas, user flows, and wireframes. The last five weeks were the design process. It started with digital wireframes, mood boards, brand standards. Then it was moving onto designing four sizes of responsive screen sizes and finally usability testing.

Tools & Skills
•Data Analysis
•User personas
•User Psychology
•User Testing
•Prototyping
•Wire-framing
•Conducting Interviews
•Pen and Paper
•Adobe XD
•Adobe Illustrator
•Mock Ups
•Usability Hub - Preference Testing
•Observation and Understanding

Competitor Analysis
There is an abundence of recipe websites that all focus on different niches. While research a few of these the issues I was finding were not getting to the recipe quick enough. The website would be laid out like a blog post and it was difficut to scroll through the post to find the incredients needed and recipe. Since this happen to me multiple times I wanted Barebones Kitchen to be completely different. Meals are easy to find and the incredents are at the top of the page next to the image and directly below that there is a reciple, listing out each step.

User Personas

Task Flows

Mood Boards
Both of these boards are styled towards my audience with dark blue colors and strong typography. I like the cleanliness and monochromatic color pallette of the second mood board. I fear that the layout might be too simple that is why I am going to go with mood board one. I love the realistic photography used. I want the user to be hungry by looking at the app, but also feel that they can make that meal. Number one is welcoming, warm, and cozy. Compared to mood board two is cooler and would be harder for the user to interact with this style. The color pallet is more on the exploring side than mealtime, but if I used them just enough I can make it feel warm and cozy and push the user to explore new meals at home.

Wireframing

Starting with some simple pen and paper wireframes, Bare Bones Kitchen slowly developed during each design phase. After going through user testing I made some changes with the feedback I received. The largest change was adding the outlined box aroun… — Starting with some simple pen and paper wireframes, Bare Bones Kitchen slowly developed during each design phase. After going through user testing I made some changes with the feedback I received. The largest change was adding the outlined box around the photo. The initial design was boring and brought no attention to the photo. With this outlined box I was able to add in the save and share icons along with a set location for serving size, prep time, and cooking time.

Responsive Screens

Mobile Screens

Print Preview Toggle
During my interviews, multiple users mentioned they liked a print view option when they are looking up recipes. It was important to me that I added this feature and it was simple to access and toggle back and forth between the screens. To achieve this I used a toggle switch at the start of the directions so a user can choose to view the printed version right off the bat if they desire.

If a user would like to use the web version of the directions they will be able to check off the ingredients, as well as mark each step as it’s completed.

Summary
The original hypothesis of this project was: We believe that offering a large number of simple to make recipes with ingredients you should already have at home, for users that are busy working adults with a desire to learn in the kitchen, will result in users using the product to find recipes that want to try for future meals and then learn what ingredients do to meals so they can experiment on future meals.

After finishing the prototype and showing the results to potential users, Bare Bones Kitchen has met and exceeded this hypothesis. A user can find a multitude of simple to make recipes with ingredients they will already have in their kitchen, but they can save these recipes in their profile. The Tips, Tricks, and Did You Knows within the directions will help users learn new techniques while cooking a meal. And finally, the print view toggle switch makes viewing a recipe’s ingredients and directions even easier.

The colors, photos, and layout were key to keep simple because the Bare Bones Kitchen audience is very busy. They are not looking to learn the history of a meal, but instead, create that meal for their family.

Take a look at my other work.

Responsive E-Commerce Website - UI Design