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
What was your least favorite part about the flow of this app?
Highlight Response
What do you think about having the main menu that goes into a sub-menu page being a specific type of alcohol?
highlight response
How would you improve the design and flow of this app?
Highlight Response
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.
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.
As a UX/UI Web and Mobile Designer and Thrive Architect Designer, I have worked with multiple startups and marketing agencies to develop powerful content, branding strategies, marketing, and user-focused web and mobile design to help their business succeed.
portfolio
get in touch
Copyright 2023 Maverick Moses, all rights reserved.