Overflow

Mobile Drink Ordering

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.

Category

iOS, Android

Industry

Food & Drink Services

Services

Graphic Design, App Design, Web Dev, DevOps, Project Management

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

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.

Apis and 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 setup 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, and 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, 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.

Common Pitfalls We Avoided

There are a lot of options for your API protocol to the backend, from REST, to Ajax, to protocol buffers, but the right solution for Overflow was websockets. This is generally not the easy route as race conditions can definitely cause problems depending on how you write your code. However, the advantages websockets provided us were worth it. Primarily, we needed to keep the front-end of both the bartender's app and the patron's app in sync. This asynchronous solution allow us to achieve a smooth experience for all users.

Another common pitfall is to release without load testing. It's tempting to trust the tools in place and just see how it goes, but it's better to actually know at what point your software breaks.There's a number of users who will find that for you, if you don't take the time to find it for yourself! We tested the Overflow API in a production setting and found our break point. It was way lower than we thought. So, we raised it until it could handle well over triple the load it needed for our launch. In the case of Overflow, we used a tool called Artillery to handle load testing. Because Overflow uses asynchronous programming and websockets, we needed something that could connect to those websockets and simulate specific kinds of traffic and requests. At the time, traditional load-testing tools did not support this. Artillery, on the other hand, support websockets and it allowed us to write test scenarios quickly and flexibly

If there is a pitfall that we could highlight to entrepreneurs and app developers it would be to never over-engineer your solution before you survey your customers. With Overflow, we consulted the target customer multiple times before beginning development. We conducted mock-tests and allowed the customers to use it a very early alpha stage. Before even writing one line of code, we took our graphic designs of what we thought the app should be to bar managers to give us feedback. It allowed meaningful insights to steer the app and achieve a very high-user rating. It allowed us to make essential changes to our idea without wasting development time and budget.

The final pitfall to avoid is thinking that a simple to use app is simple to develop. Here is where expertise in UI/UX really shines. Simplicity requires long debates with UI specialists and real endusers. It requires a larger budget than software which can appear more featured on the outset.The reality is, that the more seamless an app is for the user, the more work is going on behind the scenes of the app. The more a user has to do the "work" or "thinking", the less is going on behind the scenes. It is hard to overstate the importance of talking to real end users for your app, getting inside their head and workflows, and truly understanding what their needs are. The downside of talking to a lot of people, is that they will all have their own ideas of a cool feature you should add. Knowing which kind of feedback to implement in your app and which suggestions you need to put to the side can be tricky. Sticking to your MVP-guns is also very important. So, evaluating their feedback through the lens of your minimum viable product is essential

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 frontend 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 are 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!

Kick Off Your Project

Supercharge your already existing team or build your team with us. Diagnose the skillsets you need from design, to frontend, to backend, to devops, to project management.