Ordering with Clarity
Mobile App for Drink Ordering

Overview

As an exploration, I spent some time working through a concept for a simple drink ordering app.

During 2020, countless businesses had to completely change how they did things. For many small coffee shops this forced them to offer take out and often contactless ordering.

Many of these shops already utilized reliable solutions for point of sale in their shops, but lacked online ordering options that weren't cumbersome.

Inspired by that, I've been working on a design concept for smaller scale coffee shops to improve their online ordering experience.

Starting Point

Desirable

‍Both for the customer and barista. This should reflect the best of larger scale apps in clarity and aesthetic and give the user confidence in their transaction.

Feasible

This could be used as an all in one point-of-sale system for the shop, to be used in-shop and online. This shouldn't just become another add-on to their business.‍

Viable

This solution should be part of a sustainable process for the shop, able accomplish everything the customer and barista need for a great interaction.

Common Flow

I brainstormed through both user angles to come up with a shared flow that covered the wants of the customer and the needs of the barista to prepare the order.

Items like drink size, temperature, milk choice and special notes are in an order that corresponds with the physical workflow at the coffee counter. While selection, quantity, price and payment are in the order that would reflect the customers expected flow.

Shared Elements

The process of ordering a coffee has a lot of variables we take for granted.

I compiled a list of the items the app would have to account for to serve the customer and barista well.

  • Customer Contact info
  • Timeframe for order
  • Selection of drinks
  • Quantity of drinks
  • Definition of drinks
  • Drink Size
  • Temperature (Iced or Hot)
  • Milk Choice
  • Pricing (reflected in customization)
  • Order Total
  • Payment
  • Confirmation of Order
  • Estimation of Pickup Time
  • Recent and Saved Orders
  • Shop Contact Info

App Flow

Based on these variables, I worked on an app user flow that would capture the info that needed to be conveyed.

Prototypes

Using the concepts from the user flow exploration, I built prototypes that incorporated the shared elements identified.I tried to balance amount of options with visual clarity to not overwhelm the customer. I used contrasting color schemes for options and larger items for major selections in the process.

Visual Treatment

In version two, I worked to incorporate color, more nuance, imagery and branded elements to the design to improve the usability and enjoyment of using the app. Balancing the amount of options with visual clarity is a challenge in any of these types of apps. I also reorganized some elements and consolidated others.

One notable change was moving "Pickup Time" to the confirmation page, instead of leading with it. It seemed redundant to lead with that, only to have it editable and needing to be confirmed near the end of the process.