View the prototype here
Role: UI/UX Designer and Researcher
Tool: Adobe XD
Duration: 1 month
Context
As part of my CareerFoundry coursework, I was tasked with creating 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
I conducted three user research interviews to uncover users' goals, wants, and behaviors surrounding cooking. This information became the basis for Cookling's design.
Key Patterns Identified
1. Being able to see the end product through videos and pictures was important to all users interviewed.
2. All three users mentioned AllRecipes as one of their go-to cooking sites.
3. All users said they had to look up how to do something online within the past two days.
Frustrations
1. Some recipes don't have enough images, videos, or ratings for users to tell if it's reliable.
2. Food blogs have lengthy intros before the actual recipe instructions.
3. Some recipes look too complicated and time-consuming to make them worth trying.
Needs & Goals
1. Users want written and visual instruction, as well as ratings on a recipe before they start making it.
2. Users want quick and easy explanations of the unclear parts of a recipe without having to navigate away from the page.
3. Users want to 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. Reflecting 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 new recipes and provide them with the necessary tools and information to complete it through 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
By Caroline Arima