Ghia

SERVICES: UX, UI

Responsive web re-design of Ghia’s recipe page complete with an added feature to make their non-alcoholic cocktails more approachable and accessible.

Introduction

Interest in non-alcoholic beverages is growing, but many potential customers lack the knowledge or confidence to use them. Ghia’s own research shows users often feel too intimidated to mix their aperitif, citing confusion around how to serve or pair it. This points to a larger gap in consumer education and approachability within the NA space.

Problem Space:

  • Many users don’t know how to mix or serve non-alcoholic aperitifs.

  • Ghia’s research shows consumers feel intimidated by drink prep.

  • Lack of clear guidance creates hesitation at the point of use.

Research

Working behind the bar, I’ve watched people hesitate over non-alcoholic drinks, unsure if they’re worth the price, or worried they’ll taste like juice. Despite the rise of trendy mocktail menus, NA options are often seen as a functional alternative.

When I began interviewing users, things shifted. I heard stories not just about sobriety or wellness, but about craving flavor, variety, and new experiences. To validate these themes, I ran a survey with non-alcoholic drinkers to reinforce my insights.

Key Findings:

  • Flavor was king

  • Accessibility mattered

  • Transparency around ingredients and usage made all the difference

75.8%

Said when chosing a drink, interesting or new flavors matter most to them

66.7%

Said their greatest challenge with non-alcoholic drinks was the lack of options to chose from

35.7%

Said they want to know what the ingredients are before trying a new drink

User Persona

The users prioritize bold, interesting flavors and want clear descriptions, ingredient transparency, and guidance for how to enjoy the drink. While they’re motivated by wellness and avoiding hangovers, they still expect a premium experience

User Insights:

  • "I want a drink that feels special and exciting, not just a substitute for alcohol."

  • "I want my non-alcoholic drinks to feel something intentional, not an afterthought."

  • "I want drinks that support my goals and fit into my life without feeling like a compromise."

How might we make non-alcoholic aperitifs easier to understand, more accessible to try, and clearer in flavor and ingredients?

Design

Before I started mapping out the design, I analyzed Ghia’s website for opportunities to improve on their existing experience and better accommodate their users. The recipe page emerged as a key area with untapped potential to provide flavor discovery and make product use more accessible.

Identified pain points:

  • Recipes lack immediate context around flavor or ingredients, only listing the base product.

  • Navigation is limited to product categories, offering little support for exploration or decision-making.

  • The design prioritizes imagery over guidance, leaving users with minimal information to inform their choices

Existing design - Recipe Page

User Flow

My initial user flow explored an expansive discovery experience, offering multiple entry points and layered features to support user exploration. While it aligned with user motivations, it quickly became clear that the complexity wasn’t practical given the time constraints and lack of brand assets.

Initial Flow Focus:

  • Filters for mood, flavor, and effort to match varied user mindsets

  • Interactive recipe guides for step-by-step prep

  • Multiple off-ramps including share and explore loops

  • Checkout built into the exploration path

To make the experience more realistic and user-friendly, I scaled back and prioritized simplicity. I focused on what users said mattered most: flavor clarity, ingredient transparency, and easy recipes

Updated Flow Decisions:

  • Simplified filters to four core inputs: base, flavor, effort, and ingredients

  • Removed interactive recipes due to asset and time constraints

  • Refined the layout to reduce decision fatigue and guide users quickly to a recipe

User Flow 1 - Recipe Page

User Flow 2 - Recipe Page

Low-Mid Fidelity Wireframes

This prototype brings the updated user flow to life by focusing on what users cared about most: flavor, ingredients, and ease. I simplified the experience to four clear filters and made flavor the first thing users see. Each drink card includes a short description and flavor tags to help users make quick, confident choices. These tags also carry through to the full recipe pages, where users can see flavor context alongside ingredients and instructions, reinforcing the decision they just made.

High Fidelity Wireframes

The high-fidelity prototype reflects some key improvements based on early feedback. I added placeholder text to the search bar to guide users, animated the tag pills on hover to signal interactivity, and simplified the hover effect.These updates helped improve clarity, accessibility, and overall user confidence in navigating the experience.

Usability Test

Participants completed two task flows using filters and tags to find and view recipe pages. I measured task completion and confidence in finding a drink that met their preferences. Participants also provided qualitative feedback on layout, tag behavior, and ease of navigation.

What Worked

  • Clean Visual Design – Users praised the aesthetic and found it enjoyable to navigate

  • Filtering Felt Effective – Filters helped users explore confidently and find drinks that matched their preferences

  • Tags Encouraged Exploration – Clickable tags were seen as a helpful way to discover more recipes

What Didn’t

  • Tag Behavior Was Confusing – Some users didn’t realize tags led to filtered results and were surprised by the redirect

  • Add to Cart Lacked Visibility – The button was mistaken for a text field and needed stronger visual hierarchy

  • Recipe Cards Could Use Small Adjustments – Users suggested spacing, a description, and hierarchy tweaks for clarity

Final Prototype

The final prototype builds on the earlier high-fidelity version with added clarity and depth. A sensory, looping hero video was introduced on the landing page, using motion to set the tone and create a more immersive entry point. I adjusted spacing on the recipe cards for better readability and moved the drink titles above the tags to reduce confusion. Short recipe descriptions were also added to support quicker, more confident discovery.