Responsive Cocktail Recipe Website UX Case Study
Project Overview
The Product:
La Coctelera is a responsive web platform designed for cocktail enthusiasts of all levels, from a beginner to a professional mixologist. It allows users to discover, share, and create cocktail recipes. The platform emphasizes community, easy navigation, and a visually appealing presentation of recipes.
Project duration:
February 2025 to March 2025
The problem
Existing online cocktail recipe resources are fragmented, difficult to navigate, or lack a strong sense of community. Users struggle to find recipes, personalize their searches based on ingredients or preferences, and share their creations. Existing platforms also lack features such as ingredient substitutions, user ratings, or convenient ways to organize favorite recipes
The goal
Design a user-centered and intuitive responsive web platform, La Coctelera, that addresses the challenges outlined in the problem statement: facilitate easy discovery, promote sharing and community, prioritize user experience, and create a delightful and engaging experience.
My role:
UX/UI designer, leading La Coctelera website design.
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, and responsive design.
Understanding the User
User research: summary
I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that target users treat online shopping as a fun and relaxing activity when they need a break from school or work.
My research showed that a key user group was middle and upper-middle class adults aged from 21 to 55 living in urban and suburban areas with active social scenes. This user group enjoys entertaining, hosting parties, and socializing.
Research revealed additional user worries, such as:
- Inability to save and organize cocktail recipes in the same place. Users want to save and organize cocktail recipes in the same place instead of printing them out, saving links in browser bookmarks, and successfully forgetting where they have those recipes.
- Cluttered and overwhelming recipe websites. Users complained about difficulty navigating on cluttered cocktail recipe websites with pointless information and tons of flashing ads.
These insights helped me in the design process. I made sure it met user needs and addressed their concerns.
User research: pain points
Finding the Right Recipe
Users struggle to find recipes that match their skill level, available ingredients, or desired taste.
Search functionality is poor, making it hard to filter by ingredients, occasion, or dietary restrictions.
Recipes don’t offer substitutions for hard-to-find items.
Lack of Community
Users have no way to share their own recipes, ask questions, or connect with other cocktail enthusiasts.
There are no user reviews or ratings of the cocktail recipes.
Website Usability
Existing websites are difficult to navigate or have cluttered designs.
Existing websites are not mobile-friendly, making them hard to use in the kitchen.
Meet the users
Anna: The Practical Planner
Demographics: 40 years old, busy parent, likes to entertain occasionally.
Tech Savvy: Uses technology for practical purposes, prefers simple and efficient interfaces.
Motivations: Find quick and easy cocktail recipes for specific occasions, plan drinks for parties, manage her recipe collection.
Frustrations: Limited time for complicated recipes, difficulty finding recipes based on available ingredients, disorganized recipe collections.
Goals: Quickly find appropriate cocktails for different events, organize her favorite recipes in one place.
Quote: “I need to be able to find a great cocktail recipe in a few minutes, especially when I’m planning a party. I don’t have time to sift through endless websites or complicated instructions.”
David: The Social Mixologist
Demographics: 35 years old, works as a software developer, enjoys hosting parties.
Tech Savvy: Very comfortable with technology, active in online communities.
Motivations: Share his own cocktail creations, discover unique and interesting recipes, connect with other cocktail enthusiasts.
Frustrations: Existing platforms make it difficult to showcase his recipes, lacks a dedicated space for cocktail-related discussions.
Goals: Build a reputation for his mixology skills, find inspiration for new creations, connect with a community of like-minded individuals.
Quote: “I love experimenting with new ingredients and sharing my creations with others. I’m looking for a platform where I can connect with fellow cocktail lovers and get feedback on my recipes.”
Sarah: The Enthusiastic Beginner
Demographics: 28 years old, works in marketing, lives in a small apartment.
Tech Savvy: Comfortable with technology, uses social media regularly.
Motivations: Wants to learn more about cocktails, impress friends at gatherings, and try new things.
Frustrations: Overwhelmed by complex recipes, lacks basic bar equipment, unsure where to start.
Goals: Find easy-to-follow recipes, build a small collection of go-to cocktails, learn the basics of mixology.
Quote: “I want to be able to make delicious cocktails at home without feeling like I need to be a professional bartender.”
Starting the design
Paper wireframes
Next, I sketched out paper wireframes for each screen in my website, keeping the users’ pain points about navigation, browsing, community, saving process and search flow in mind.
My messy paper wireframes from the ideation stage of the design thinking process.
For the home screen, I prioritized a clean interface and a user-friendly experience by introducing the following design elements:
- The search bar lets users find the recipes they wish easily and rapidly without taking extra steps.
- Simple category navigation from beginners to professional bartenders. The home screen features easily navigable categories, allowing users to browse and discover cocktail recipes according to their level with minimal effort.
- The submit button invites those who want to share their recipes with the community.
Focused on these key elements, the paper wireframing phase laid a foundation for the following digital wireframing and prototyping stages.
La Coctelera Homepage v1.0. Red dots were used to mark the elements of each sketch that would be
used in the initial digital wireframes.
Paper wireframe screen size variations
Because La Coctelera customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
La Coctelera website Homepage. Desktop and mobile layout versions.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
By prioritizing the search bar and showcasing the “Cocktails by Levels” category on the homepage, I aimed to enhance the user discovery process.
Digital wireframe screen size variation(s)
Low-fidelity prototype
To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of searching for a recipe, consulting it, and saving it for the future.
At this point, I received feedback on my designs from my team members about things like the placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.
Click on this link to open the prototype in a new window.
Usability studies Findings
After creating a low-fidelity prototype, I conducted a usability study. Findings from the usability study revealed specific areas where the mockups could be improved.
- Users find filter options limited and expressed their desire to have filter options for non-alcoholic recipes and other dietary restrictions.
- Users were frustrated by the “Save the recipe” and “Rate” buttons at the bottom of the recipe page, especially when scanning the recipe and saving it to their collection.
- It was unclear to users whether the search bar was limited to cocktail names or if it also supported searches by taste and ingredient.
Refining the design
Mockups
Based on the insights from the usability study, I made changes to improve the site’s search flow. I modified the following: integrating contextual hints within the search bar, adapting the text above the search bar to ‘I want something…’ to guide user input, and expanding filter options to provide a more refined recipe search experience.
“Looking for a cocktail?” text misled some users. The “Cocktails by levels” categories were not prominent enough.
“Looking for a cocktail?” text replaced with a shorter and straightforward “I want something…” guiding text. Categories, supported with images, are more visible now.
To simplify recipe saving, I replaced the ‘Save’ button with a bookmark icon at the top of the page, next to the cocktail name, eliminating the need to scroll.
The “Rate the recipe” and “Save” buttons are at the bottom of the recipe page.
The bookmark button is placed next to the cocktail’s name, facilitating the process of adding a recipe to favorites.
Mockups Original Screen Size
Mockups Screen Size Variations
I adapted my mockups to support additional screen sizes, based on my earlier wireframes, to guarantee a consistent and smooth experience for users accessing recipes from diverse devices, such as mobile and tablet.
High-fidelity prototype
My hi-fi prototype followed the same user flow as the lo-fi prototype. It included the design changes made after the usability study, as well as several changes suggested by my team members.
Click on the link to open the prototype in a new tab.
Accessibility considerations
I employed headings with varying text sizes to create a clear visual hierarchy and guide users through the content
To ensure an inclusive design, I implemented landmarks to facilitate seamless navigation for all users, including those who depend on assistive technologies
The website employs a high-contrast color palette, with color combinations meeting AAA contrast standards to ensure optimal accessibility
Going forward
Takeaways
Impact: The implemented changes, such as the simplified search and intuitive recipe saving, resulted in a significant improvement in user satisfaction, as measured by positive feedback and increased task completion rates during usability testing.
What I learned: I learned the critical importance of thorough user research in identifying pain points and informing design decisions. Usability testing revealed unexpected challenges that wouldn’t have been apparent otherwise. Also, I improved my skills in creating responsive designs and ensuring cross-device compatibility.
Next steps
Future development will focus on usability testing of the new website, ideating on new features based on user feedback, and designing a “Submit a recipe” flow.
Let’s connect
Thank you for your time reviewing my work on the La Coctelera responsive website!
I welcome your feedback and would be happy to discuss this project further. You can find my contact information below.
For more projects, navigate to the portfolio section or visit my portfolio on Dribbble or Behance.
Email: vera@espinacco.es