MOBILE DRINK ORDERING
Overflow
About The Project
While Chipotle and Starbucks may have the budget to make a bespoke app to facilitate mobile ordering and order pickup, most bars don't. Overflow is an app that allows patrons to order and pay for drinks at bars. Bartenders can then see incoming orders, accept them, and mark when a drink is picked up.
UI/UX
Even though we have a lot of experience designing apps and websites in a traditional setting, we found a new challenge with designing the iPad app that the bartenders use because the iPad is permanently mounted on a stand. We designed version 0.1 knowing there would need to be changes so we made sure to have plenty of time and budget left to get feedback from customers and iterate on the app. How users interact with an iPad on a stand is different from how they interact with an iPad in their lap.
Referring to the helpful insights from the book Crossing the Chasm by Geoffrey A. Moore, the goal was to focus our very earliest versions on the group of users the book terms the"innovators". They will only be about 3% of your customers, but they will be the earliest adopters. Watch them use your app, get their feedback, and iterate. The best user experience insight is from users' actual experiences.
User Stories
For an app that duplicated a service that was previously done manually, the first step was to understand the process as it was. It's easy to make the wrong assumption that you know what a business needs, especially with something as seemingly straightforward as making a drink. We started by understanding the life cycle of an order: patrons gather with friends, perhaps one buys a round, and the bartender acts as both "cook" and "cashier", both taking the payment and making the drinks.
It's our responsibility to ensure that the benefits of the app outweigh the friction: patrons enjoy spending the extra time with friends not waiting at the bar; bartenders see the extra tips roll in as they complete more orders. It's our responsibility to ensure that the friction is eliminated as much as possible whether that's making sign-up as easy as possible, or making sure the bartenders' app is attention-grabbing and simple to use.
APIs & Other Integrated Solutions
Even though it seems basic, push notifications are essential to mobile apps! The same is true for Overflow, both for the patron coming into the bar who needs to know when their order is ready to be picked up at the bar, as well as for the bartender who needs to know the status of all the incoming orders. Many other apps will have necessary uses for push notifications just like this.
Overflow automatically detects if the user already has Google Pay or Apple Pay set up on their phone. If they do, those customers do not have to enter the entire credit card. Implementing this feature meant we had to get approved by Apple and Google, so it's easy for us to do it again on your app if needed!
The app is also trying to keep three systems in sync: the phones, the bartender's iPad, and the server. To make this run smoothly and nearly instantaneously, we used WebSockets.
The app, therefore, has nearly instantaneous updates on the status of the order from the moment the bartender marks a drink as ready and the moment the patron's phone is alerted.
Websockets also allowed us to get around dropped connections on cell phones, something that phones themselves don’t really pay attention to until the user tries to access something online. We were able to test the dropped connection scenario but putting a phone in a microwave (don't turn the microwave on!) The app syncs back up as soon as the connection is back. This type of scenario is even more useful for workers in a field who have to use their tools in remote areas where service may not be available, but the user's experience has to be smooth and the data cannot be lost.
Wireframes and Mockups
To prevent wasting time and money, we showed mockups of the app to potential customers before we wrote any code. It cannot be overemphasized how essential it is to get feedback early and often. Wireframes should be basic and crude, focusing on UX. Mockups should establish the style guide. The style guide sets standards for use throughout the entire app. A good style guide enables developers to implement style based on simple wireframes, saving design time and expense. Simple screens such as a Settings page should be easy for a developer to style without a full mockup.
Technology
As with many of the projects we work on, the backend is done in Python/Django. This robust language and framework is fast for web development and has tons of libraries ready to use and modify. The front end is in React with additional libraries from Typescript, Reactstrap, and Redux. With these tools in place, we can make the site beautiful and responsive.
Perhaps one of the pieces we are particularly proud of is the extensive tests we developed in the Cypress environment. Because this application allows users to reach out to their clients, we want to make sure that every scenario works absolutely perfectly and with our automated tests running, this is now possible!
Python
A great balance between programmatic ideals and practicality.Javascript
Used since day on for front and backend development.Django
The most respected framework for creating quality web software.Ionic
A powerful platform to support mobile development for iOS and Android.Bring order to your chaos
Benefit from an experienced CTO in your back pocket for a fraction of the cost