Christine YimDigital Visual Designer

New York

Clink

Clink is a cocktail app that helps new drinkers order with confidence.

  • UX case study
  • 2023—2024
  • Drexel University senior project
Role
UI design lead in a team of five: branding, UI kit and marketing. Also surveys, personas, task flows and usability testing.
Duration
September 2023 to June 2024
Tools
Figma, Adobe Illustrator and Photoshop, Microsoft Suite

In my last two years of college my order at every bar was the same vodka cranberry. I had no time to research cocktails before going out, and no app would recommend one. Four other Drexel students shared the frustration, so we made Clink.

Clink is a mobile app that helps new and inexperienced drinkers explore drinks and order with confidence. I led its branding, UI kit and marketing, and worked on the research and testing with the team.

Deliverables

  • Research
  • Personas and journey maps
  • Site map and task flows
  • Brand identity
  • UI kit
  • Prototype
  • Marketing

01

Problem

Ordering a drink should not be the hard part of a night out.

Unfamiliar ingredients and long menus make ordering at a bar harder than it should be, and no existing app helped people choose.

How might we help new and inexperienced drinkers read a bar menu with confidence, make informed choices, and enjoy the evening without feeling overwhelmed?

02

Research

Six weeks to check the problem was real, and whose problem it was.

We set three goals: validate our assumptions, understand who the users are, and learn their pain points, needs and motivations.

  1. Social media

    Reddit gave us anonymous, unfiltered experiences. It showed the frustration was more widespread than we expected.

  2. Survey

    102 people responded. The results defined our audience as new drinkers aged 21 to 28.

  3. Interviews

    Ten sessions of 45 to 60 minutes over Zoom showed how people think when they order, and surfaced two use cases: at the bar, and before going out.

96.7%
sometimes, often or always order alcoholic drinks at restaurants or bars
57.6%
have low confidence that they will like a new drink they order
82.6%
are interested in learning more about drinks
67%
of those least familiar with drinks are aged 21 to 23
“I was intimidated when I went to the bar for the first couple of years. I never really knew what to order.”
“I get overwhelmed by the many drink options. I wish menus provided more information, like whether a drink is sweet or salty, as I usually just guess from the ingredients.”

03

What we found

Two personas, the same four problems.

Emily is an introvert who would use Clink to avoid shouting over the bar. Emilio is an extrovert who would use it when the bartenders look busy. Their journey maps shared four pain points, and each one pointed to something the app could do.

Pain points

  1. Crowded, noisy environment

    It is hard to get around and talk to a bartender in a loud, busy room.

  2. Menu overload or scarcity

    Too many options, or too few, make it hard to choose with confidence.

  3. Uncertainty about taste

    Unknown flavours and ingredients leave people unsure what they will like.

  4. Limited decision time

    People feel pushed to decide quickly in a high-pressure setting.

Opportunities

  1. Pre-bar drink exploration

    See a full drink menu with photos, taste profile and ingredients before arriving.

  2. Personalised recommendations

    Suggest drinks that match a personal taste profile, so nobody depends on a busy bartender.

  3. Order history recall

    Look back at drinks you liked or disliked to guide the next choice.

  4. Ingredient-based customisation

    Offer alternatives for specific liquors or ingredients.

04

Design

Eight features, mapped before any screen was drawn.

With the research done, we defined the first version of the app and then designed it in rounds.

  1. Feature research

    Competitor analysis, an effort and impact matrix, NUF analysis and surveys narrowed the first version to eight features.

  2. Site map and task flows

    The team drew these in a whiteboarding workshop, which gave the design a structure to follow.

  3. Wireframes

    We sketched, whiteboarded and digitised wireframes, using A/B tests with participants to settle open questions.

  4. UI kit

    I led the UI kit. I followed the Atomic Design method and organised it in Figma with variables and variants, so components stayed consistent across the app.

  5. Prototype

    We tested at low, mid and high fidelity, over Zoom and in person, and revised the flows after each round.

05

Brand

Dark, warm, and readable in a dimly lit bar.

I led Clink’s style and branding, and the marketing for the senior showcase.

  1. Brand direction

    I surveyed 25 people on the adjectives they associated with the concept. From their answers I proposed a classy, upscale and engaging identity with a dark interface.

  2. Marketing

    Instagram posts and stories, fundraiser materials, exhibition posters, and business cards.

06

Outcome

Shown to real users at Drexel’s senior showcase.

Impact

  1. Tested in public

    We presented Clink at the senior showcase and exhibition and put it in front of users directly.

  2. Interest from the business community

    The response was enthusiastic, with interest in bringing Clink to market.

Next steps

  1. Survey with the prototype

    Gather detailed feedback on function, usability and visual design using the high-fidelity prototype.

  2. A full design system

    Grow the UI kit into a design system with reusable components, guidelines and documentation.

  3. Accessibility

    Explore and build in accessibility features.