UX Designer

Cafe X Case Study

Cafe X Heading.png

Mobile UX & UI Design

 
 

THE CHALLENGE

line.png
 

I tasked myself to redesign the CAFE X app to promote a more immersive in-app experience.

For this challenge, I’m pushed myself to learn interaction design using 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 my redesign.

 

Tools Used:

 

OVERVIEW

 
 
Line 2.png
 

CAFE X is the first automated coffee shop revolutionizing the entire coffee experience. Fresh local coffee sourced from Verve and AKA Coffee is offered here. Customers can order coffee via an in-store ipad or on their phones. A robot will proceed to make and serve coffee, capable of producing drinks in 3 minutes or less.

 
 
 
 

RESEARCH & DISCOVERY

Research


I started my research through immersing myself with the entire Cafe X experience. As a first time customer, I was excited to see how well the robotic service would compare to a traditional cafe.

 

Insights:

• Using the iPad to order a drink was simple, quick, and efficient.

• The entire checkout process was seamless and intuitive enough for anyone to use.

• From the time I started my order to the time I received my drink was approximately 5 minutes.

• The cafe excels in attracting a large crowd of people. User engagement is high.

• Coffee tasted great! 

 

Problem Space

 

I then proceeded to download and evaluated the Cafe X app. Upon playing with the app, it was evident that there were significant differences between the mobile experience and the experience I had on the iPad. 

 

I used the LEMERS method which tests for Learnability, Ease of Use, Memorability, Error handling, and Satisfaction. The app scored lowest in learnability and memorability. So I wanted to confirm my results with users to see if there were any correlations.

 

Overall, I found the cafe to be enjoyable and easy to use. I was excited and eager to come back again.

 

User Interviews / Usability Testing


I conducted guerilla interviews with several Cafe X customers to understand what their overall experience was like when ordering coffee from an automated service. Then I proceeded to investigate their experiences using the iPads. 

 

Almost everyone I spoke with were first time users and had not downloaded the mobile app before. Ordering through the iPad was simple and easy to use, it was fun, they liked how you get a text message on your phone to let you know when your drink is ready, not many complaints.


For the few users who have used the mobile app, I heard a lot of mixed ideas.


More Insights:

 

The mobile app looked and felt completely different from the iPad ordering experience. Some features like adding payment, app sharing, and customizing drinks were not intuitive enough to users. This confirmed my original evaluation of the app though the LEMERS method.

For the few users who have used the mobile app, I heard a lot of mixed ideas.

 

Competitive / Comparative Analysis

 


Next, I compared and evaluate 8 different apps that offered intuitive features, strong interaction design, and streamline efficiency.

I took inspiration primarily from the Robinhood app for it’s modern design, simplicity, and efficiency design. Next, I borrowed from Lyft and Uber’s information architecture to help me organize the apps content. And lastly, I took design inspiration from Starbucks and BeyondMenu to see how other food ordering services strategized their mobile app.

 

DESIGN & IDEATION

The moment of truth...

 

The first step in designing involved a rapid design studio to formulate solution ideas. I used this to begin sketching a papered wireframe.

 
 

FINAL PRODUCT

Line 2.png
 

The final product for this challenge 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.

My wireframe design took affordances, company styleguides, and transitions into account to make working in the Flinto a quick and easy process. Focusing on brand consistency and screen transitions was extremely important for me because most smartphone users see smartphones as extensions of self, and demand high levels of realism in interactivity. Overall, I am happy with my accomplishments in this 7-day design sprint.

 

Onboarding

Log In/Sign Up

Ordering Process

Additional Screens

 

Additional Case Studies