cookable

A responsive website for finding and viewing easy-to-follow cooking tutorials.

My Role as UX Designer
As the sole UX designer leading Cookable's design, I had many roles. I conducted user research, sketched
wireframes, built prototypes, and created final mockups. My mission was to make following cooking tutorials
a breeze – easy to navigate, engaging to use, and encouraging for cooks of all levels.
A webpage for "Cookable" is displayed on a split background of beige and bright orange. The webpage features sections in green, orange, and beige with text "learn," "how," "to," and "cook." It also shows headings "Tutorials that empower" and "Follow along with our tutorials and learn new skills.
Cookable, the Kitchen Companion for Every Cook
The Google UX Design certification ignited the creation of Cookable, a responsive website on a mission to
empower home cooks. Cookable aspires to be your friendly kitchen companion, guiding curious students 
and knowledgeable foodies alike. Through easy-to-follow tutorials, Cookable keeps users engaged and inspired,
transforming them into empowered cooks regardless of their experience level.
Understanding Our Cooks: Unveiling Needs Through User Research
Diving into user research with surveys and empathy mapping, I unearthed two distinct users. Lilibeth, the busy
marketing manager who cooks with her wife, craved clear, concise tutorials on a clutter-free platform. Nikesh,
the software engineering student new to the kitchen, yearned to learn healthy recipes but felt intimidated 
by overly complex instructions. Understanding their needs became the recipe for Cookable's creation.
Image of a profile page for a woman named Lilibeth. The profile includes her bio, personality traits, needs and expectations, goals, and frustrations. Lilibeth is a 33-year-old marketing manager from Chula Vista, California, who enjoys spending time with her family and cooking.
Defining Cookable's Goals
Diving into user research, I unearthed the struggles of busy home cooks. Inspired to create a solution, 
Cookable set sail with a clear mission: to design a user-friendly website with intuitive navigation and engaging,
step-by-step tutorials that empower everyone to become kitchen stars.
Recipe Disaster to Culinary Confidence: Identifying User Needs
User research also revealed a recipe for disaster. Cluttered websites frustrated cooks, key information was buried
deep within tutorials, and the overall experience lacked the spark to ignite culinary confidence. Cookable 
was designed to tackle these challenges.
Two handwritten pages on a wooden table detail brainstorming and planning for an app or website. The first page discusses "How Might We" questions, focusing on cooking insights and features. The second page shows sketches of app layouts and user pathways.
User Research Reveals the Recipe for Success
Journey mapping, illuminated user needs and frustrations.  Picture Lilibeth, the marketing manager,
bombarded by pop-ups and frustrated by missing recipe details. Imagine Nikesh, the software engineering
student, so defeated by complex instructions that takeout wins every time. The key takeaways? Users craved
intuitive search, clear recipe information, and an encouraging atmosphere.
A user persona table for "Lilibeth" is shown, detailing her goal and steps for searching cooking tutorials online to add variety to her bi-weekly meal plan. The table includes columns for actions, tasks, feelings, and improvement opportunities for each step.
Building a Seamless User Journey for Cookable
Transforming insights into action, I digitized my wireframes, bringing the user experience to life. Prioritizing clear
navigation, strategic visual placement, and a prominent search bar, I tackled user pain points head-on. To test 
the flow, I then built a low-fidelity prototype, connecting the key screens involved in searching for and selecting 
a perfect recipe – a crucial step in ensuring a smooth culinary adventure for all cooks.
Refining the User Experience
Usability testing exposed Cookable's initial hiccups. In a remote, unmoderated study, key findings emerged: 
navigation left users lost searching for tutorials, extraneous information caused confusion, and the user flow
itself frustrated participants, even prompting requests for a website usage tutorial. With this feedback, 
I embarked on a refinement journey using mockups, high-fidelity prototypes, and a focus on accessibility 
to ensure Cookable lived up to its user-friendly potential.
Three webpage design mockups for "cookable." The first has a large banner titled "Summer Nights." The second has similar content with highlights and text like "Relax tonight." The third emphasizes "Tutorials that empower" with a mix of green and orange blocks and buttons.
Final Design: From Feedback to Functionality
Building on the learnings from the usability study and peer feedback, my high-fidelity prototype showcased 
the refined user flow for both browsing intermediate tutorials and recipe search. These hi-fi mockups
incorporated the information architecture and design changes, ensuring a smooth and intuitive experience. 
Accessibility was a core consideration – a high-contrast color palette, WCAG AA compliant fonts, clear visual 
hierarchy through headings, and the use of landmarks – all ensured Cookable was welcoming to users 
with assistive technologies.
A collage of six screenshots from a cooking website called "cookable." The images feature various sections like tutorials, intermediate techniques, essential sauce recipes, salsa verde recipe, search functionality, and a tutorial/recipe overview. Different dishes are shown, including pasta and a sauce.
How Cookable Learned to Prioritize User Needs
Cookable's impact was clear – users like Anita B. from Boulder, CO liked the intuitive navigation, encouraging
tutorials, and organized layout. This validation solidified a key lesson: listen to the user. Early design excitement
can lead to feature overload, but prioritizing user needs ensures a truly user-friendly experience.
Cooking Up Success: Key Metrics and Aspirations for Cookable
Imagine Cookable taking flight! To measure its success, I'd track website usage – high numbers suggest frequent
cooks relying on our tutorials. Decreases in abandoned recipes would signify Cookable's effectiveness in guiding
users to culinary triumphs. The future of Cookable? A feature to track user skill growth, and continuous UI
refinements for optimal accessibility – ensuring Cookable empowers cooks of all levels on their kitchen journeys.
An image features a black-and-white checkered pattern with a wavy, distorted effect in the background. In the center, a green flower shape has the words "thank you" written in white, along with a smiley face.

You may also like...

Back to Top