UX Designer
CafeX Thumb.png

Mobile UX & UI Design

 

CAFE X

Mobile UX & UI Design

 
 
cafex home phone tilt.jpg
 
 

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

 

Overview

Cafe X is the first automated coffee shop to revolutionize the traditional café experience. They offer fresh local coffee sourced from Verve 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.


Results

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.

 
 
 
 

ONBOARDING FLOW


LOG IN / SIGN UP FLOW


ORDERING FLOW

 

Process

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.


Insights:

•  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.
•  Most customers received their drink within 3 minutes or less.
•  I found the mobile app to be simple, but lacking visual styling

 
 
 

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

Orange: represents enthusiasm and happiness. It's used primarily with the app's buttons to engage users to click on them.

Purple: represents creativity and power. It's accented throughout the app to enhance visual dynamics.

Blue: signifies trust and loyalty. It's used as a background in the login/sign up screens to make users feel welcomed.

White: symbolizes cleanliness and safety. It's used in the ordering/checkout screens to add simplicity to a complex process.

 

 

VIEW MORE PROJECTS