Bevry is a mobile web app for collecting and sharing cocktail recipes, with a playful twist.
Frontend Development
•
Scrum Master
•
UX/UI Design
•
Brand Design
•
Usability Testing
•
Web Design
Overview
Scope
Bevry is a multi-semester student group project done in a team of five Master’s students.
The goal was to design and develop a responsive CRUD web app with Vue.js and Nest.js. The app’s theme is a cocktail recipe sharing app, with a wealth of features that emphasize the fun and social aspects of cocktail mixing.
The project was combined with a Master’s course to develop a comprehensive brand identity and brand book for Bevry.
Involvement
Frontend development, Scrum Master, UX/UI design, brand design, usability testing, web design
Date
October 2023 - June 2024
Tools and Technologies
Figma, Vue.js, Nest.js, Webstorm, Gitlab, Jira, Confluence, Adobe Illustrator, Adobe InDesign
The Problem
Cocktail enthusiasts often struggle to organize, discover, and share unique drink recipes in an engaging and social way. Existing platforms provide recipe collections but lack interactive features that foster community engagement and personalized experiences.
Bevry aims to fill this gap by offering a dynamic, feature-rich web app where users can not only explore and create cocktail recipes but also interact through likes, comments, and customizable profiles. Bevry goes beyond traditional recipe apps by also including functionalities such as multiplayer party games, bar inventory, and shopping lists.
The One-Stop App For Cocktail Enthusiasts
Objective
Bevry is a responsive mobile-first web app designed for cocktail enthusiasts who want to explore, create, and share drink recipes in an engaging and interactive way.
The platform goes beyond traditional recipe apps by integrating social and group-driven features, allowing users to not only manage their own recipes but also connect with others through likes, comments, and party games.
With Bevry, users can discover new cocktail inspirations, customize their profiles, manage their personal bar inventory, and play party games with friends. The app enhances the mixology experience by providing a centralized hub for both personal recipe management and community engagement.
Additional Features
To create a unique and engaging user experience, Bevry offers the following functionalities:
- Customizable accounts with personalized preferences
- Recipe Management: create, edit, delete, and explore cocktail recipes
- Likes, comments, and recipe ratings to foster community
- Filtering & search based on ingredients, popularity, or category
- Privacy controls to toggle between public and private recipes
- Multiplayer mini-games to make the next cocktail party an unforgettable hit
- Bar inventory management and shopping lists to keep track of ingredients and receive recipe suggestions
Target Users
Bevry is designed for cocktail lovers of all experience levels, from casual drink enthusiasts to mixology experts. Whether users are looking for new cocktail ideas, sharing their own creations, or planning a cocktail night with friends, Bevry offers a social and interactive space to connect, create, and experiment.
Defining A Brand Identity
Before developing the app proper, we started by defining a brand identity for Bevry by identifying not only what we wanted the app to be, but also what Bevry needed to be in order to meet its target users half-way.
First Step: Research
To find our own market niche for Bevry, we gathered insights from comparable apps and websites and analyzed them based on their features, content, architecture, design, and more.
Logo, Brand Colors, Typography
Next, we generated logo ideas and iterated upon those first designs until we landed on something that resonated with all of us. We went with bright colors that evoked the idea of fruity freshness, combined with soft, organic shapes reminiscent of the air bubbles in a good sparkling drink.
Logo With Claim
Brand Colors
Mood Board
Designing A Marketing Landing Page
To solidify our concept for Bevry’s brand identity, we created high-fidelity screen designs for a marketing landing page. I was heavily involved in this step. I created a styleguide for marketing purposes, designed the landing page and contributed design iterations to the “about” page design.
The landing page serves as a digital flagship for Bevry and promotes the app and its features. The design should convey the values that Bevry stands for and reflect the experience that Bevry promises. Above all, this includes creativity, love for experimentation, community, and fun.
Styleguide
First, colors and fonts were defined based on existing resources for the brand book and optimized for use in an interface design.
I also created two typography sets: one for marketing purposes, in which we used Quicksand for a more playful heading font, and one for the app itself.
The brand set was designed for marketing purposes and consists of striking lettering that stands out and attracts attention. The Quicksand font is used for brand headings. Inter is used for body text.
Brand Set
The app set is used exclusively in the app itself and uses Inter as the font for both the headings and the body text. The headings are kept smaller in order to achieve a smooth user experience without unwanted interruptions of attention.
App Set
Design Process
The screen designs were created according to the mobile first principle.
The aim was to create a colorful, striking design that would attract attention and create interest in the app. Color gradients, playful image masks and scrolling effects were used to make the landing page a joyful experience.
The CTAs are of particular importance, as they take visitors directly to the web app by clicking a button without them having to install a native app, so they can get started right away with what the landing page promises.
End Result
The result is an appealing, responsive screen design that playfully transports the core values of the Bevry brand. Try the prototype out yourself!
Creating Bevry’s Brand Book
The crowning jewel of the brand design process was the creaton of the brand book, which included a meticulous documentation of all the brand guidelines we defined for Bevry. Additionally, we created designs for print forms, such as letters, stickers, advertisement posters, and cocktail shakers.
Designing The App Itself
Low-Fidelity Wireframes
The low fidelity wireframes were created by two team members.
High-Fidelity Wireframes
Next, we went to work on creating high-fidelity designs, where I joined in as well. We kept the designs rather minimalistic, as we wanted to focus on developing all the main views and features first due to time constraints, but still focused on consistency and brand identity.
Development of Core Features
Core Features
In the first semester, we implemented primary functionalities for creating, sharing and discovering cocktail recipes of all kinds. Only registered and logged-in users can view the recipe collection. Recipes are divided into categories that enable targeted filtering. A search bar allows users to refine their search by searching not only by category, but also by recipe name or ingredient. Recipes can be edited or deleted by the users who created them.
Recipe Interactions
Users can also like recipes and collect all their favorite recipes - whether they are their own or created by other users - in a favorites list. A rating function makes it possible to give recipes a star rating as well as post a public comment.
If mixing a drink involves several steps, these can be saved individually and clicked through in a step-by-step guide. This makes it easy for users to follow a recipe without losing the thread in pages of instructions. If a recipe is only intended for your own eyes, it can also be made private.
User Management
Apart from their posted recipes, users can also customize their profile to express their individuality. This includes uploading and changing their profile picture and updating their username. If users decide they no longer want to use Bevry, they also have the option to delete their account.
Under The Hood
Frontend
We used Vue.js due to the framework’s flexibility, performance and simplicity, which enables efficient development.
The integration of Vuetify as a UI framework was chosen due to its appealing and responsive components. With its predefined components, Vuetify made it easier for us to develop a consistent user interface, saving us time overall.
For state management, we chose Pinia, a state management library specifically for Vue.js. We use Pinia for our entire user management (login, registration, logout) to save the status of the user. Overall, Vue.js, Vuetify and Pinia formed a powerful combination for us, which has led us to a successful project so far.
Backend
We worked with NestJS in the backend. Additional packages we used included TypeORM to handle the database entities, JWT and bcrypt for login and registration security and Swagger to use OpenAPI. With OpenAPI we were able to automatically display our endpoints in Swagger and keep the collaboration between back- and frontend development up to date.
Usability Testing
Together with a second member of the team, I prepared and conducted a usability test at the bi-yearly Project Vernissage of the St. Pölten University of Applied Sciences, where we exhibited Bevry as a student project. The main goal was to gather feedback and insights for possible improvements that we planned to implement in the following semester.
Designing the Usability Test
We set up a comprehensive test design, including a definition of the testing method and mode, hypotheses, survey questions, and tasks for users to complete. Since we were going to test with users simultaneously to get as many impressions as possible, we also defined how to code the performance of participants so both of us would score performance according to the same criteria.
Results
The results of the survey showed that the majority of respondents had a positive experience when searching and posting cocktail recipes in the app.
The positive aspects of the app that were particularly well received were the drink categories and the design. Five people praised the structured organization with categories, the large selection and the seasonal categories. On the other hand, five people emphasized the design, which was described as simple, modern and with appealing images.
Surprise factors mentioned by respondents included a positive user experience, the clear layout and praise for a beautiful and “cool” logo.
We also identified several opportunities for improvement during observation, including user feedback concerns, making certain interactions more visible, and simplifying certain processes such as the recipe creation process.
Task Performance Matrix
Net Promoter Score
During the user tests, we also asked about the Net Promoter Score (NPS). This is the key figure that measures customer loyalty to a product, service or brand. The result was an NPS of 60.
An NPS of 60 is generally rated as “good” and indicates that the majority of participants have a positive perception of the product or service and are likely to recommend it to others. A higher NPS generally indicates greater customer loyalty and satisfaction.
Implementing The Fun Stuff
With the start of the following semester, we took what we learned from the usability tests and other feedback rounds, and got to work on implementing additional functionalities to truly make Bevry a unique, well-rounded experience.
Additional Features
Now that we had a solid foundation, we added the following funtionalities to make Bevry stand out from the rest of cocktail recipe apps:
- A shopping list to add and manage needed ingredients
- A bar inventory that directly connects to the shopping list, including recommendations for recipes based on current inventory
- A games hub that hosts multiple in-app games
The ability for users to create ingredients that aren’t available in the database - Support for adding recommended substitutes for individual ingredients to a recipe
- Recipe drafts so users can save their progress on creating a recipe without posting it
- A full redesign of the user interface that is fully in line with the completed brand design
- Email verification and extended settings options
- A fun loading animation
Using Scrum For A Smoother Development Process
Based on the previous semester's collaboration, we took some lessons learned in terms of time and project management into this new semester. From the beginning, I advocated to use Scrum and all its intended rituals for our work process this semester in order to have better control over deadlines, division of labor, and to-dos. Throughout the semester, I assumed the role of scrum master. I ensured that all team members were following Scrum procedures and educated members on different facets of the framework where necessary, so that everyone had the same level of understanding of our processes.
We organized our work in two-week sprints and used Jira to create and track tickets on the Kanban board. This process proved to be extremely helpful, not only in meeting our initial deadlines for individual features, but also in terms of communication. As it was now visible at a glance who was working on what, we were able to better coordinate dependent to-dos and quickly communicate blockages to the right person.
We used the weekly meetings to update each other on our respective status and to discuss current problems and next steps. We also used the meetings to discuss current tasks related to the tenders and made joint decisions on delivered design proposals, drafts and more.
Cross-Program Collaboration
We had the amazing opportunity to call for tenders from other study programs to request tasks and services from other students outside of our study program.
We created tenders for various tasks for Bevry. These included:
- Photography for recipe-, marketing and portfolio photos,
- A revised design of all screens for a uniform visual appearance and interaction concept based on the finished brandbook, as well as for the design of custom icons,
- Sound design for the creation of soundtracks and sound effects, especially for the minigames,
- And animation design for a loading animation as well as for animations within the minigames.
In order to make communication easy for the contractors, we defined the respective clients of the tender as the primary contact person for the contractors. In addition, all contractors were added to the Jira project and tickets were created for their individual tasks so that everyone could keep track of the current status of the project.
Minigames
To make mixing cocktails even more fun, we have added the Games Hub to Bevry. This area of the app is dedicated to minigames. We decided to develop two games that can be used in different contexts. As Bevry is designed to emphasize the shared fun of cocktails, one of the games had to be a party game that could be played with multiple players. This minigame uses the new bar inventory and therefore ingredients that players already have to hand. On the technical side, it is based on timeouts and random values.
On the other hand, the fun shouldn't have to stop outside of a cocktail party - so we decided to turn the second minigame into a single-player game that allows players to enjoy the fun of mixing cocktails at any time without actually needing any ingredients. At the same time, this minigame uses real recipes from Bevry's recipe collection. This allows players to playfully discover new recipes and make the cocktails themselves if they are interested. The HTML Canvas API was used to implement this game.
Due to my prior experience in game design and development, I was heavily involved in the process of creating and implementing both of these playful additions to the Bevry experience.
Spin The Wheel
The minigame Spin The Wheel is all about speed and fun in a group. At the beginning, random ingredients are collected and provided, which then become a wild mixture during the game. In turn, the players have to “spin a wheel” to choose an ingredient that has to be poured into a glass in the middle. Once this is done, the cell phone is passed on to the next person. This continues until the hidden timer runs out and the last person to spin the wheel has to drink the mixture. Depending on the ingredients, this player can be the winner or loser of the game.
Mix It Up
Named after Bevry’s brand claim, the mini-game Mix It Up is a single-player game in which players get to know some of the app's recipes. The aim is to collect all the correct ingredients of a recipe with a glass. The aim is to avoid using the wrong ingredients so as not to lose any lives. As soon as a recipe is finished, the player moves on to the next level with the next recipe. This continues until the player runs out of lives and the score achieved is saved on a high score board.
Retrospective
My contributions in this project were multi-faceted and included frontend development (specifically, the recipe page and adjacent pages, profile and settings pages, as well as both minigames), game design and development, usability testing, documentation and Scrum, as well as a supporting role in UX/UI design and usability considerations.
I only had a little experience with Vue and was able to considerably deepen my knowledge in this area. I had never worked with the Vuetify component library before, but I was able to pick it up quickly. As I had primarily focused on UX/UI design during my bachelor's degree, I felt a bit “out of practice” when it came to programming, but I was able to get back into the swing of things. I was able to improve my programming skills as well as gain in-depth experience with Gitlab and Git.
I also took care of setting up a ticket system and a central location for documentation. We used Jira to divide up our tasks and track progress. In Confluence, we documented task assignments and test design and evaluation for a first round of usability tests, among other things.
While the use of Scrum was not new to me, it required a certain discipline and communication skills. The fact that we were so efficient and were able to implement so much in such a short time through the use of Scrum confirmed for me how valuable the time invested in project management really is.
The End Result
Bevry is one of the most exciting, comprehensive projects I have had the priviledge of working on. The result is a functional web application with a solid, consistent brand identity that makes the simple act of sharing cocktail recipes truly fun and unique
Try Bevry yourself - no download necessary!
