Creating a digital café experience
The original Xpress Touch machine made it possible for users to customize their coffee beverage, but there were holes in the user flow. The design was dated, the UI was cluttered, and the experience lacked the holistic quality that sets a product apart from its competitors.
The team’s goal was to elevate the experience of creating a custom coffee order to be on par with doing so in a boutique café. From the cappuccino color palette to UI that made customizing coffee as seamless as pouring it from a carafe, every element of the machine was thoughtfully addressed.
Bringing boutique to anywhere people drink coffee
Xpress Touch serves a wide variety of users in gas stations, college campuses, and office buildings. It was just as important to address the experience of someone with a simple order of a black coffee as it was to address the needs of someone looking for a break from their workday akin to stopping at a neighborhood café.
Our goal was to communicate that the ingredients and preparation process are exceptionally high-quality. Fresh designers spent time in actual coffee shops observing customers, examining furnishing and product finishes, and documenting touch interfaces. The color, material, and finish of the new Xpress Touch was based on actual coffee hues identified in shops.
Visual design techniques bring the UI to life, with bokeh effects and wood grain textures giving the illusion of bulb lights strung above a coffee bar. Custom line icons communicate a barista’s attention to detail, and interactivity and motion lend to increased engagement and usability.
A distracting color, material, and finish
The original orange and brown palette provided high contrast, but drew attention away from the coffee customization UI. “Concordia” was labeled clearly, but elegant logos can communicate brand identity just as effectively.
A unified, understated style
The redesign creates chemistry between different parts of the machine. A pewter casing reduces the machine’s visual mass, and gold undertones strategically highlight key points of interaction, including where a user should place his or her cup. The minimalist logo ensures the machine can be implemented seamlessly into any branded environment.
An imagery heavy user interface
In UX, empathy for the end user is essential. Truck drivers, students, and office workers all have varying familiarities with the world of custom coffee. Previously, the UI was solely icon-based, leaving users to guess what they were ordering.
The UI was an effective place to use actual imagery, pulled by Fresh designers from overhead photos of coffee beverages. Whether or not a user is versed in the world of coffee, they can look at the pictures and see that a Macchiato is topped with milk, an Americano is similar to black coffee, and a Chai Latte is sprinkled with spice. Clicking the icon provides more information.
With additional animation and motion, users see how the ingredients they select modify the drink and gain an understanding of how each one changes the flavor.