Mix & Drinx

The Challenges

Personalization

Offering flavor experimentation without overwhelming the user

Usability & Fun

keeping the interface intuitive while maintaining a playful brand feel

Social Element

Making the app feel like a shared experience, not just an order

Competitive Analysis

Age limit

An age-verification pop-up or sign-up asking if the user is over 18/21.

Common

Recommendations

User recommendations, reviews, favorites, and ratings.

Common

Images & illustrations

Strong emphasis on eye-catching visuals, product images or colorful illustrations.

Common

Store

Store with accessories like beverage-specific glasses and ready-made cocktail packages.

Common

User Flow

Wireframes

Birthday Verification

Instead of a simple yes/no age check, users enter their date of birth. This makes verification clearer and more engaging, while also allowing underage users to be directed to non-alcoholic options.

Understanding the user

During sign-up, the app learns about the user by identifying allergies and capturing taste preferences to personalize the experience.

Making it engaging

Early wireframes outlined the cocktail creation steps. They highlighted the need for ingredient visuals and better navigation.

Order review

A structured layout lets users easily check their chosen ingredients, customize details, and confirm the final cocktail before adding it to the cart.

Design

Onboarding

Onboarding

Date of birth

The user begins by entering their date of birth. If they are under 18, a message appears informing them that they can only order Mocktails (non-alcoholic drinks).

Personalization

The user can mark any allergies or skip the step if none apply. Choosing a preferred flavor helps make the flow more personal and engaging.

Onboarding completion

The user finishes the journey with a smile, cheering on a yummy animation cocktail.

Creating a Cocktail

Creating a Cocktail

Home

After the onboarding, the user lands on the Home screen, where they can start creating their own cocktail or choose from a variety of existing options to generate a surprising mix.

Cocktail or Non-Alcoholic

After the onboarding, the user lands on the Home screen, where they can start creating their own cocktail or choose from a variety of existing options to generate a surprising mix.

Drink size options

The cocktail ordering process includes five steps with a progress bar that also allows going back to edit. The first step is choosing a bottle size that animates based on the user's selection.

Choosing flavors & ingredients

In the following steps, the user selects the alcohol base, liqueur, and fruits, with pairing recommendations and an animated carousel for smooth transitions between ingredients.

Shake Interaction

In the final step, the user performs a shake gesture to mix their cocktail, adding a delightful UX moment that feels both playful and interactive.

Customization

Customization

Customized bottle

If the user wishes, they can personalize their bottle by adding and editing text - adjusting the font, color, and size.

Design Options

They can add their own design or choose from a variety of existing patterns.

Order Tracking

At the end of the process, the user reaches a tracking screen with delivery time and order status. While waiting, they can explore other users' cocktails for inspiration.

Conclusions

1. Recommendations: helping users discover new and personalized flavor combinations.
2. Social Integration: Making cocktail creation a shared and social experience.
3. Seamless Ordering: From easy customization to smooth doorstep delivery.