Blue Bottle

In late 2014, Blue Bottle had recently inquired Tonx, a coffee subscription service based in LA. Their new digital team was excited to experiment in the digital space, and test ideas about how design could improve the Blue Bottle customer experience. They invited me to help them prototype an idea during a two-week sprint: an app that enables you to visit a café and buy coffee beans without standing in the long customer line. The idea is simple: Walk into a café, pay for a bag of coffee, and leave without wasting a moment.


Launch & Landing Screens

Scan & Pay

Pick up the bag of coffee and scan the barcode. You learn about where the coffee is from, tasting notes, and the price. Tap "Pay" to pay for the coffee. If this is your first purchase, you're asked to create an account. As part of the experience, we wanted to let you get as far as you can in the app without signing up for an account.


Returning Customer

Returning customers skip the sign up and log in process. Your credit card information is saved. You can change your credit card information from the pay screen, or account settings. The receipt displays an illustration of the Blue Bottle café you purchased your coffee from.


Find a Café

The second purpose of the app is to help you locate a nearby Blue Bottle café. From the home screen, tap "Find a Café". If you allow the app to use your location, you can see nearby cafés on the map. If you didn't have location turned on, you would see the list of all Blue Bottle cafés. Tapping a café opens a screen with information about each café: address, hours, and description. 


Settings & Orders

You can access Settings from the Find a Café screen. In addition to account information and payment, you can view past orders. This was crucial for settings because down the road, Blue Bottle wanted to add the option to order a coffee subscription from the app.