Mobile UX & UI Design
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 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.
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.
LOG IN / SIGN UP FLOW
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.
• Most customers received their drink within 3 minutes or less.
• I found the mobile app to be simple, but lacking visual styling
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.
• 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)
This style guide adheres to the company's branding guidelines.
White: symbolizes cleanliness and safety. It's used in the ordering/checkout screens to add simplicity to a complex process.
Blue: signifies trust and loyalty. It's used as a background in the login/sign up screens to make users feel welcomed.
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.
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.