Quality coffees are reserved for the café experience, leaving on the go coffee drinkers to choose between settling for sub-par ingredients or having their routines interrupted. The trendy café scene was reserved for those with the luxury of excess time during prime coffee drinking hours.

After months of designing and planning— including an MVP version of the café— we partnered with industrial designers and engineers to create the go to market version of Truebird's automated cafés. The GTM strategy involved 5 of these cafés placed in lobbies and cafeterias of highly trafficked workplaces.

The decisions made early on would shape the customer experience and ultimately, many of the hardware decisions. The final cafés would feature 3 screens performing 3 functions deemed essential by workshopping and surveying users— placing an order, tracking an order, and securely retrieving an order.

My work with Truebird started by identifying stakeholders and conducting a series of Google Ventures style workshops to extract the vision of the founding and investing teams. We collaborated in these workshops by presenting and voting on concepts to establish goals for the project. We would have the founding team sketch and present potential features, user journey map in real time, and discuss goals and visions for version 1 and beyond.

From those meetings, we were able to established business goals for the product and important metrics that we would need to meet which would ultimately define the success of this product. These would serve as a foundation for decision making for this phase of the product. As these machines would be unmonitored, the primary UX goal would to ensure that users were able to complete unassisted transactions and orders were being fulfilled which was most accurately tracked by the percentage of orders left abandoned by customers.

The ordering podium is a vertically oriented 28" touch screen to the left of the café. The screens orientation was determined by early ergonomic testing and the UI system was based on branding done by an external vendor.

Since these kiosks would be unmonitored, the user experience had to be seamless. Flaws in the customer flow that would cause long lines, unfulfilled orders, or a collapse in the experience could mean losing an entire day's revenue. To prevent such events, user experience research played an enormous role in the design process. I was sure to interview and survey users multiple times a week and run frequent usability tests to ensure ease of use and speedy ordering.

When surveying prospective customers, we learned that the biggest deterrent would be long wait times. With that, we'd aim for a total order time of under 60 seconds per user, to relieve order podium congestion. I started by testing 3 high-level drink configuration models and measuring which would allow fastest through-put.

A progressive ordering flow would prove to be the fastest through-put versus single page solutions. This was double-effective as it also allowed for bigger, bolder UI which would provide a spotlight on our partner brands. Users responded positively to the larger test and use of imagery as well.

The café was an experience that people enjoyed and we wanted the interface to be as delightful as the hardware. Alphanumeric animations and smooth transitions made the ordering experience as pleasant as the brand and the product were. Notice, also, the efficiency of screen real-estate— focusing each screen on the only actions we need the user to take— to lower cognitive load and streamline through-put.

Deciding how users identify and retrieve their drink orders would be one of the most important interactions of the flow as it would affect abandoned drink numbers and limit customer frustrations. I would design these user tests to test against three different options to see which users best remembered, and had the easier time comprehending. These concepts were tested in the context of the full flow of the café with a combination or Invision and paper prototyping, where we would ask users to wait with us for up to six minutes and ask them to remember, and to input their passcode at the pick up window.

What’s more annoying than having the last person’s receipt screen in front of you before you start your transaction process? I took to solving the problem with UX trickery. Despite the process being complete, we gave user’s the option to ‘Finish’ or “Finish with receipt’. This language and prominence lead to >85% of users closing the transaction cycle.

The card reading animation is a looping .svg that revolves until the card has been successfully read and the transaction is complete. Once the transaction is complete, the card reading animation finishes its final 1 second loop, vanishes, and the completion animation appears in its place.

Activating the cart would drop the primary flow and reveal another level of z-space. Establishing an architecture keeps the user anchored in the experience and animations tell a story over time that guide the user back to the ordering experience.

The design system and visual patterns were inspirations and interpretations of the brand as established by Mrs. & Mr. Prior to my engagement on the project, there was no UI library or system for Truebird, and this inaugural system would be used by future teams of designers and engineers.

The first iteration of Truebird wouldn't allow for multiple orders in a single transaction. We knew that these tech constraints would hinder long term scale and that multi-order transactions would need to be available. I always look to build UI to scale in situations like this to ensure to UI would be ready when the time comes.

The main screen is a 48" display whose primary purpose is to let customers know the status of their orders. This would be one of the most vital tools to ensure users where tracking their orders properly.

The initial release of the café didn't include the above animations. A queue card would simply disappear and be instantly replaced by the next order. When abandoned orders rose above the goal of 1% I'd observe user behavior to find that customers weren't noticing a change in the queue list. This animation— along with other small optimizations— would grab attention and draw focus to changing orders.

Communicating with engineers is important to accomplish the desired effects. Prototypes were built in principle and formal documentation, specifically regarding motion specs would be vital to accomplishing the brand’s elegant, wafting animations.

Coffee drinkers come in waves. Beyond those times the café would stand mostly idle. During inactive periods, the 48” display would serve as a highly visual advertisement for our roasting partners meant to entice and catch passersby attentions. The menu would remain static at the bottom of the screen as well.

Being considerate of the time and space in which users interact with the café would be critical to its success. I would design on a full 48" screen to ensure accuracy, as well as observe where users would stand when interacting with the cafés. I would test with users and ask questions about their eyesight, and have them stand at realistic distances to gauge appropriate sizing and font weights.

A set of four 5-inch touch screens whose purpose is to guide users to their drink order and allow for easy and secure pickup. These screens display a users name, drink order, and color code of a user's order.

Decisions— like what kind of code would be used to retrieve their orders— would inform hardware decisions. If we chose a solution with an alphanumeric keyboard, the screen shape you be totally different. I'd collaborate closely with the industrial designer and hardware engineers each step of the way to tackle these decisions in tandem as we'd need them.

While extensive work was done to ensure users would remember their retrieval code, we would need to ensure that orders were still fulfillable even if that code was forgotten. A customer could reset their passcode by entering their phone number, which would reset their code to the last 4 digits of their credit card number. Why not have this be the code from the beginning? We found that while relying on the credit card numbers was effective, it created a bottle neck at the pickup windows for users unsure of which card they used, or Apple/Android Pay users.

We would aim for less than 1 percent of all orders placed being abandoned, but when that number was higher than hoped we'd need to learn why and solve for it. I learned users were standing idly by while their drinks were being made. Creating an eye-catching flashing animation would draw attention and lower orders abandoned.