DRINKSTAR — Product Case

Goal

Encourage users to engage in offline interactions by creating an environment where they can easily organize meetups and events at bars. Promote venues through the platform and motivate users to organize events through a point system that can be exchanged for discounts.

🎯 Objectives

• Create an intuitive and user-friendly interface for organizing meetings and events.
• Help people expand their social circles through the DrinkStar platform.
• Provide users with the opportunity to quickly share their parties and attract new people.
• Provide a convenient mechanism for promoting bars and establishments through communities on the platform.

🧐 Issue

Many users remain in the online space and lack sufficient motivation to move communication offline. Bars are also not always recognized or visited by new customers due to limited visibility. We need to find a way to engage users in attending events and support venues in their promotion efforts.

Usage Scenarios

Script Writing for Respondents

Our research focused on understanding what users truly want and the challenges they face. We began by creating a list of interview questions to gather in-depth feedback. All the questions were open-ended to allow participants to express their thoughts freely.

Since it was crucial for us to understand how they organize events, interact with bars, and perceive new connections, we divided our script into several topics: event organization, bar selection, social interactions, and motivation.

Interview

We used Google Meet for the interviews — it was convenient and quick for everyone. Each conversation lasted about 30–40 minutes. To streamline the process, we used tools like a 'note-taker' to capture key points.

• Introduction: Explaining what will happen.
• Working through the script and probing deeper if we found it valuable.
• Allowing the respondent to add anything they considered important at the end.

Transcription

After the meetings, we used automated transcription tools (such as Otter.ai and the notes recorded by our note-taker) and then manually reviewed the transcripts to ensure nothing was missed. We gathered all pieces of information, grouped them by topic, and highlighted the key points.

Persona Creation

Based on the collected data, we began creating personas — fictional characters representing different types of users. We divided respondents into several groups, including those who frequently organize events and those who only join gatherings.

After that, we created a user journey for each persona, allowing us to prioritize their issues and identify the areas that needed attention first.

Once we created these personas, we were able to move on to developing the first interface prototypes. This provided a foundation for designing solutions tailored to the real needs of our users.

Planning & Prototype Goals

At this stage, we also defined the key metrics for successful testing: time to complete each task, number of clicks, and task completion success rate. The main questions we asked ourselves were:

• Can users intuitively create and manage events?
• How easily can users expand their social circles through the platform?
• What are the main friction points in the bar discovery flow?

Creating Low-Fidelity Prototypes

The next step was creating low-fidelity mockups in Figma. Here, we focused on rapid prototyping, using only basic elements such as buttons, input fields, etc. The mockups were very simple — just grey blocks and placeholders for text — allowing us to concentrate on the core aspect: how the user navigates through the interface.

Our goal was to create:

• A main screen
• An event creation screen
• An event details page
• A page for browsing bars and selecting a location

Maze Testing

In Maze, we created endpoints based on our scenarios. We linked the clickable Figma prototype with the user journey scenarios:

• Create an event and invite friends: set the starting point and completed it after the user clicks "Create Event".
• Join an existing event: the user must click a specific area on the screen to join an event.
• Choose a bar for your event: observing how users select the appropriate bar from the list.

Maze tracks how long each action takes and the number of clicks made. We also wrote a script for testing with open-ended questions and included various question variations to ensure more objective assessments.

Test Results & Iteration

We gathered all the test results and compiled them into a report, which we discussed as a team. During the team meeting, this report helped us identify major issues and uncover service gaps that we had missed, as well as discover interesting, non-obvious patterns. This allowed us to make informed decisions to improve the prototype.

We were dissatisfied with the initial results, and after identifying significant mistakes, we iterated the process. After completing the testing cycles and implementing all the necessary changes in the low-fidelity prototypes, we prepared the final design version.

Reworking the Design System

The old design system had serious issues. Each component was overly complex with an excessive number of unnecessary layers, often leading to overload. Everything was organized chaotically, without any system: styles lacked consistency, component naming was illogical, and layer structure was confusing. This made any changes challenging, as it required dealing with "chaos" in every component.

Initially, we considered switching to ready-made component libraries such as Chakra UI or Ant Design. After presenting the pros and cons through iterative discussions with the client, it was decided that we would not transition to ready-made libraries at this time, based on business requests.

Reworking Components Gradually, Step by Step

Realizing that a one-time replacement of all components would not be effective, we chose a gradual, iterative approach. We started with the most problematic components, simplifying their structure by removing unnecessary layers and introducing logical organization, breaking them down into atoms and reworking them.

Implementing Design Tokens

While reworking the component structure, we simultaneously created variations for both light and dark themes. This made it easy to switch between themes by using different sets of color tokens for each one (e.g. primary-color-light or primary-color-dark).

In addition, we implemented the ability to quickly change fonts in the mockups using variables in Figma. This allowed us to easily adapt the mockups between iOS and web versions by simply replacing a few font tokens.

Optimization of Structure in Figma

Apart from component structuring, we completely reworked the organization in Figma. We built a new component structure with a minimal number of layers and a clear organization:

• Clearly divided components into logical groups with a new naming system.
• Established standards for each element — from spacing to dimensions.
• Added convenient navigation through parameters.

Communication with Developers

We worked closely with developers during the implementation of the new design system. Each component was documented in Confluence, including use cases, rare cases, instructions, and recommendations for its implementation.

For efficient communication, we created a dedicated channel in Slack where developers could get answers to their questions and make minor changes. We regularly conducted syncs to discuss the work status, gather feedback, and make adjustments to the design or documentation.

Final UI

After multiple iterations and refinements, the interface has become significantly cleaner, more intuitive, and user-friendly. Through our systematic approach of testing and optimization, we successfully simplified the component structure, removed unnecessary complexity, and created a more streamlined user experience.

Plan & Product Improvements

After launching the product, our goal is continuous improvement using modern UX methodologies, analytics, and neural networks.

Integrating Metrics & Analytics

• Enhancing the product using tools like Google Analytics and Hotjar to track user behaviour: action completion times, conversions, and key drop-off points.
• Monitoring changes using Google Data Studio and Tableau to visualize key metrics and analyze user interactions in real-time.
• If results are promising, implementing a continuous product improvement process through A/B testing.
• Using AI for analyzing large datasets and personalizing the user experience.