View the prototype here
Role: UI/UX Designer and Researcher
Duration: 1 month
Tools used: Adobe XD, Google Sheets, POP by Marvel
Context
As my CareerFoundry capstone project, I created a responsive web recipe app based on user interviews and competitive analysis.
Early on, I discovered that many of my interviewees often needed visual and written aid while cooking, and had to spend extra time searching the internet for how-to answers.
Thus, Cookling was born.
What is Cookling?
Cookling is a responsive web app designed to help people learn about their favorite foods and how to prepare them. Home cooks of all levels are able to learn proper cooking techniques while making their favorite foods through helpful explanations and how-to videos.
User Interviews
Cookling's design is based on 3 user research interviews that uncovered users' goals, wants, and behaviors surrounding cooking.
Key Patterns Identified
All 3 users mentioned
1. Being able to see the recipe's end product through videos and pictures was important
2. AllRecipes was one of their go-to cooking sites.
3. They had to look up how to do something online within the past 2 days.
Frustrations
1. Some recipes don't have enough images, videos, or ratings to tell if it's reliable.
2. Food blogs have lengthy, often annoying intros before the actual recipe instructions.
3. Some recipes look too complicated and time-consuming to be worth trying.
Needs & Goals
1. Multiple modes of instruction (e.g. written and visual), as well as ratings on a recipe, before beginning to cook.
2. Quick, easy explanations of the unclear parts of a recipe without having to navigate away from the page.
3. See what the final product is supposed to look like.
User Personas
These user personas are synthesized from information collected in the user interview stage. Reflective of users' experiences, behaviors, and goals, these three characters helped shape Cookling's core objective of food education.
MVP
In this section, I narrowed in on defining the core features of the app based on key takeaways from the user interviews. By only including the essentials, I was able to release the first iteration of the product and get valuable feedback quickly.
Objective
To help users find and complete new recipes by providing them with the necessary tools and information such as high-quality videos, images, and additional resource links.
Hypothesis
Our app aims to help aspiring home cooks educate themselves on the foods they eat and proper cooking techniques through easy-to-understand recipes with instructional videos and explanations.
User Flow Diagram
The user flow makes it easy to visualize the user's journey. The user flow diagram is essential to reducing pain points and ensuring there are no missing steps for users when completing their goals.
Paper Prototype
As part of the Lean UX cycle, I made a paper prototype using POP by Marvel.
I tested the early concept screens with users and improved on the design before conducting usability tests.
This is a cost- and time-efficient method of testing that proved my initial concept was viable.
Low- to Mid-Fidelity Wireframes
Using valuable feedback about how users interacted with my initial sketches, I created low-fidelity wireframes and began applying styling to transform them into mid-fidelity wireframes.
Cookling Style Guide
Color Palette & Typography
Responsive Design
In order to accommodate for a variety of device sizes, I designed my screens for XS, S, M, and L breakpoints. Using this responsive design technique ensures that users will have the best viewing experience possible on whatever device they use.
Final Mock-ups
To understand how the final product will look on a device, I created several presentation mock-ups in varying styles and sizes. These screen designs are a culmination of the research, testing, and feedback that I collected throughout this project.
Thank you for reading!
Cookling
a responsive web app