Cocktail Captivation


OBJECTIVE: Create a high-fidelity prototype showcasing the mobile application for a secret cocktail lounge. The app must provide a way for users to solve a riddle in order to gain access to the bar. In addition, the app must utilize a mobile menu that will allow users to easily scroll through drink items and place an order right from their table, to be delivered without the need for a server to interact much with the customers.

Platforms: Miro & Figma

Skills: Wireframing, UX Research, UI Design, Prototyping, & Interaction Design

Overview


This project was done specifically for this portfolio as a way to showcase as much of my full capabilities as a UX/UI designer. It focuses on a mobile application for a secret cocktail lounge, which is a mock business for the purposes of this project. 

Due to the global pandemic, I saw many local restaurants and bars suffer, ultimately closing their doors forever. But I also saw businesses grasping at whatever they could to stay afloat, and still welcome customers with a shift in service from full-contact, to contactless. Many businesses adopted a digital menu where customers could scan a QR code and view. However, many of these menus remained as a PDF, forcing patrons to have to zoom into the screen to explore the menu.

Hence the need for a mobile friendly menu. One specifically designed to be viewed and interacted with on a mobile device. This notion therefore fueled the initial concept of this project.

In speaking with former colleagues and current friends who still work in the service industry, I learned that even with the digital menus, they still felt unsafe going up to tables directly and interacting with the customers in close proximity for extended periods of time.

That’s when the idea to incorporate a mobile ordering system into the mobile menu materialized. 

This project is meant to highlight a potential solution to the above problems, both with the customer and the business in mind. I utilize wireframe created in Miro, combined with user research, to create a high fidelity user interface within Figma to showcase how this mobile application can come together.

timeframe

From idea to the high-fidelity prototype, this project was created in an intensive two weeks. This included research, wireframing, and prototyping.

My Role

This project was done specifically for this portfolio as a way to showcase as much of my full capabilities as a UX/UI designer as possible, so I initiated and performed all roles.

goal

Create a high-fidelity prototype showcasing the mobile application for a secret cocktail lounge, and include a way for customers to view the menu and place orders from their table through the app.

Wireframe


My approach was to create a wireframe of the main pages that would be contained in the app. This included a login screen that would allow users to log in to their accounts with the bar, with an option to create an account as well. After they log in, they would be directed to the riddle page where they would need to type in the correct answer to move on to the password and table reservation page. 

They would need this password to enter the secret cocktail lounge, so I made sure to include a tab for the password page in the main bottom menu.

Once at the restaurant, the customer would be able to scroll through the mobile menu and add individual drinks to their cart. From there, they could select the order tab on the bottom menu which would take them to their cart where they would need to type their table number into the field to place their order. After placing their order, they’d be directed to a confirmation page with an option to leave a tip for the bartender, who would ultimately deliver the drinks to the table, limiting their time in direct contact with the customers.

The last page would be an account page where customers can view all of their account details, as well as have the ability to change their profile photo, and update their contact and billing information.

Despite being a wireframe, I envisioned much of the UI as I created the wireframe, including how the colors and images would ultimately work together to have a luxe visual aesthetic.

RESEARCH HIGHLIGHT: 70% of users prefer contactless service at restaurants and bars over full-contact service.

user research


I presented my wireframe to a sample of 20 potential users, including former colleagues in the restaurant/service industry to get a sense of what went well and what didn't go well with concept design. First I asked a couple of feeler questions just to introduce the topic better. Then went into asking qualitative research questions to establish their opinions on how the design could be improved.

When at a restaurant or bar, do you prefer looking at a physical menu or a menu on your phone?

Mobile - 14

Physical - 6

If your favorite restaurant or bar had an app, would you download it?

Yes - 12

No - 8 

What was your favorite part about the flow of this app?

Highlight Response

  • It was very clear about what would be the next step. It reminded me of the whole process of going to an actual secret bar. First you need the password to get in. Then you need to see the drink menu and order with a bartender. Then you need to pay and leave a tip. So the app seems to flow nicely so far. ~ User

What was your least favorite part about the flow of this app?

Highlight Response

  • I really didn't like how I couldn't see the price of a drink until the order page. Ya girl might be on budget, you know? So definitely that. I also would like to see a confirmation page or something that tells me when I've added the drink to the cart and when I've submitted the tip. I can definitely see myself accidently hit those buttons more than once thinking it didn't work. ~ User

What do you think about having the main menu that goes into a sub-menu page being a specific type of alcohol?

highlight response

  • I actually really like this organization. It's better than all the menu items being on one page. This way I can pick which type I'm in the mood for and easily see what my options are. ~ User

How would you improve the design and flow of this app?

Highlight Response

  • Adding confirmation pages or pop up windows would be super helpful to the design. Right now, there's no way for me to know when I've ordered a drink and when my tip has been submitted. I know which buttons to press and what they do, but a visual confirmation that it worked would be helpful. ~ User

Research Influence


Pricing

Many users expressed wanting the drink prices to be displayed on the main menu, rather than just on the confirmation page.

Reservation

Users expressed a confusion as to whether or not the reservation had gone through, so I planned to add a confirmation pop-up to remedy that.

add to cart

Rather than going directly to the cart, I decided to add a pop-up window that would give users the option to either return to menu or view the cart.

tip confirmation

Similar to the reservation, users expressed concern over whether or not the tip was registered, so I decided to add a confirmation pop-up when a tip is selected.

design guidelines


Before I could start creating the high-fidelity prototype, I needed to develop a system of design guidelines that I could easily reference as I built the app layout, in order to maintain consistency.

Since this project was done with a mock business, I had to also design the logos and branding, which I did utilizing the platform, PicsArt. I also sourced icons from Flaticon.

prototype


After setting the design guidelines and knowing the changes that needed to occur, I started on the high-fidelity prototype within Figma. I sourced the images from DepositPhotos.

Taking the input from the user research, I added three new layouts to the overall design: A popup window for the table confirmation, a popup window for the add to cart, and a popup window for the tip send. I also added the prices of the drinks to the sub-menu page.

In order make this as much like an app as possible, in addition to designing the pages, I also incorporated clickable links, text fields, and buttons that would allow me to see how all the pages flow together and interact with each other. Below you can see how the flow between pages looks on the backend, then view a demo video of the app fully functioning in a Figma prototype presentation.

Click to play

hi-fi prototype

demo

Final Thoughts


This was a really fun project to work on. Since it was a mock business, I got to really let my imagination soar with this design. There were many nights where I stayed up a bit too late because I couldn't take my eyes of the screen as I watched every step I took unfold into the design that it is today, and even when laying in bed, all I could picture was how I could improve the UX and UI of this app design the next day.

I started this project as a way to showcase my passion and creativity, as well as display my skills for UX and UI design. What I found along the way was an invigorated mentality and pride in what I was creating, hitting milestones with newly learned concepts that I could integrate into my design and know for my future as a UX/UI designer.

Get In Touch


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.