Despite restaurants and cafes offering accepting many forms of electronic payment, the Point of Sale (POS) systems in use at bars have largely remained unchanged.
The idea to design a mobile payment app for use at bars came to me when I came back to the US. In Japan, most bars are cash only so the problem of customers leaving their cards at the bar doesn't happen. However upon returning to the US I went out with a friend, and she left her card at the bar. This caused her a great deal of stress.
Upon talking to bartenders and bar owners I learned that this is a common occurrence. Since tabs are closed at the end of the night the bar patron is unable to leave a tip. No one wins in this situation.
I visited a few bars around my area for research purposes and performed some market research online.
I downloaded and created accounts on the direct and indirect competitor's apps, and analyzed their strengths and weaknesses. I studied their landing pages carefully and took note of how they marketed themselves and monetized their product. I made sure to include an example of a failed app in my analysis.
It's hard to talk about mobile payment solutions these days without someone mentioning Venmo, so I also included them in my analysis.
With this information I created two provisional personas, one for the bar owner and one for the customer.
"Our bar serves a lot of college kids and it wasn't uncommon to see 20 cards or more forgotten over the weekend" - Bartender, 34M
"Waiting for my drink, waiting to close out my tab, I feel like I'm always waiting on the bartender or trying to get their attention" - Customer 28F
I interviewed 6 subjects aged 21-34 in a semi-structured format over the phone. It included 3 females and 3 males. 1 bar manager, 1 bartender and 4 customers.
When beginning this project I assumed that integration with current POS systems would be feasible. The validation of this assumption would be crucial for the success of this app.I called and spoke to a representative from a mobile payment app from my analysis that specializes in bars. I was told that integration with existing POS systems is very simple. It's a matter of switching on a setting on their POS terminal.
When conducting my user research I began to see 2 distinct personas emerge. I created 2 personas to represent a Bar owner and customer, respectively. Meet Rick and Phoebe.
I created some "How might we" questions based on my personas.
Barfly will address Phoebe's concerns by allowing her to open a tab, order a drink, and close a tab all through the app. She knows the bartender received her order and doesn't have to get his attention. This allows her to wait less to order and close her tab while giving her more time to socialize with her friends.
Barfly's integration with existing POS systems allows Rick to offer his customers a mobile payment solution without the need for hardware installation and upfront costs. He simply pays a fee as part of a SAAS business model.
No more waiting at the credit card machine for payment clearance while customers wait at the bar unattended. This will give bartenders more time to converse with customers, build rapport, and make drink recommendations.
I prioritized features and organized them with a product roadmap
I mapped out the user flow for finding a bar, opening a tab, ordering and paying for a drink. Taking inspiration from a travel app which prompted me to check in for my flight automatically after walking into the airport, I decided to add a feature which asks users if they want to open a tab automatically after entering a bar.
I compared 3 task flows for "Ordering a drink and paying". Traditional analog payment, Competitor task flow,
and my proposed Barfly task flow. I identified "choke points" where time is lost in the first two task flows.
Barfly has no such choke points. This allows Pheobe to order and pay for drinks quickly.
Before diving into digital wireframes, I sketched out some wireframes on a whiteboard.
I researched examples of good app onboarding and wanted to provide the user with a good onboarding experience which explained core functionality in no more than 4 steps. I also provided the option to skip
straight to the sign up and log in page.
I knew this app would combine combine ordering with mobile payment functionality, so I downloaded various popular apps which provided a good experience in both. I used them as inspiration for my wireframes.
I had been hearing good things about maze.design and similar usability testing tools and decided to give it a try.
I like the detailed dashboards and analysis they provide. I was able to recruit 13 participants which is far more than what I am usually able to recruit with skype screen share testing.
I created a style guide using a dark UI theme. Since most bars have dim or low lighting, I believe dark UI was appropriate in this case. I chose font and CTA colors based on Apple's Human Interface Guidelines for dark UI.
I created the logo brand colors using retrowave/vaporwave aesthetic which harkens back to 80's and 90's design. This is reflected in my empty state screen as well. This style has gained popularity with the younger demographic which is represented in my bar customer persona and the aesthetics work well with dark UI.
Using insight I gained from usability testing, I incorporated a few changes into my hi-fi mockups. I removed the add payment prompt from the open tab screen, as the page had a high number of misclicks and many users
seemed to find it confusing.
I also added a simple prompt where users receive a notification automatically after they've entered a bar asking them if they want to open a tab. I took inspiration for this feature when a popular flight tickets app asked me if I wanted to check in for my flight automatically after entering the airport.
This was my first end to end product development experience and I found it to be very valuable and rewarding.
Analyzing an industry, identifying pain points, customer base, best task flows, and monetization strategies is invaluable to the UX process and strategy.
From a UI perspective, it was interesting working with dark UI and the different approach to it compared with light UI. For example, using color differentiation to express elevation instead of shadows.
I look forward to taking what I've learned here and applying it to my future design work.