Cafe X Thumb.png

Cafe x: Mobile UX & UI Design



Mobile UX & UI Design

Cafe X Mockup.png

My Role:  UX Designer  |  Timeline:  2 months  |  Project: Self-initiated/Personal

Team: 1 UX Designer  |  Tools Used: Sketch, Flinto, Photoshop

Methods: User Research, Usability Testing, Comparative Analysis, Sketching, Wireframing, Prototyping



Cafe X is the first automated coffee shop to revolutionize the traditional café experience. They offer fresh local coffee sourced from Equator and Intelligentsia Coffee here. Customers can order coffee on a store ipad or on their phones. Orders get sent to the robot who will proceed to make and serve the coffee. Drinks are typically made in 3 minutes or less.

The Challenge

I tasked myself to redesign the Cafe X app to promote a more immersive checkout and on-boarding experience.

For this challenge, I pushed myself to learn interaction design with Flinto, a prototyping app specializing in gesture animations and screen transitions. My expectations for this project was to add delight and fabricate a more intuitive experience for customers through this mobile redesign.


The final product was a high fidelity prototype that combined the successful elements of a collection of apps in the food and drink genre to create a more engaging and intuitive experience for Cafe X.







I started my research by immersing myself in the entire Cafe X experience. As a first time customer, I ordered my coffee on the ipad and waited to receive my notification when my drink was ready. Afterwards I signed up to receive my promotional credit and explored the mobile app.


•  Ordering drinks via iPad was simple and fast.
•  The POS system was intuitive and easy to use.
•  Customers who received their drinks did not linger, but proceeded to carry on with their day.


Problem Space

I wanted to test the mobile app with other customers and discover areas for improvement. Throughout this process I used the LEMERS method which tests for Learnability, Ease of Use, Memorability, Error handling, and Satisfaction.

Based on the data from usability testing, the app scored lowest in learnability and satisfaction. 


Customer Insights:

•  Prior to using the app, expectations were unclear as to what services would be provided.
•  Adding payment and app sharing features weren't intuitive enough.
•  Ordering coffee was simple, but customer's couldn't find the option to change beans.
•  Design styling didn't coordinate with the POS system


Competitive / Comparative Analysis

Next, I compared and evaluated several apps that would inspired the mobile redesign. Here are a few of the apps and features I borrowed from:

Robinhood  (onboarding walkthrough)

Blue Bottle  (visual design)

Lyft & Uber  (app sharing / promotional content)

Starbucks & BeyondMenu  (ordering / checkout process)

Screen Shot 2017-08-21 at 11.57.26 PM.png