© 2020 Hazel

Cubee

2017

Cubee is a phone application for ordering and customizing drinks from Cafe. It is simple user-centered design application that can minimize the user workload from making an order for coffee, by merging core functions of browsing the menu and making a custom choice into a more effective interface.

Role

 

Personal Case Study

Project Initiation, Prophase Investigation, UX Designer and Researcher, Visual Designer, Motion Designer

Tech & Tool

Sketch, Origami Studio, After Effect

Cubee
Brainstorming & Setting Goals

Order a cup of coffee on phone

in a fast, 2.5D way

 

 

In order to order a single cup of latte with a phone, the user needs to go through almost all the interfaces in a single coffee ordering application, switching between at least 9 pages and always need to back to the upper menu.

At the same time, many of the existing applications have a lot of trouble with it. When people rush on their way, it is really hard to order a cup of coffee by phone with too many steps. They have to continuously click 'Back' to adjust their choices again and again.

On the way rushing to work, need to order a quick cup of coffee.

 

Too much page switching when you need to custom.

 

The dense-looking text menu reduces the efficiency of making an order.

 

 

So I aimed to create a simple user-centered design application that can minimize the user workload from making an order for coffee, by merging core functions of browsing the menu and making a custom choice into a more effective interface.

 

 

Explore & Establishing Users

Conducting Interviews

 

Creating Persona

 

Scenario & Touchability

image from Scott Hurff's Blog

As the coffee menu is the core UI component of this app, it must be easily reachable from all hand-held posture. According to Scott Hurff's regular grip thumb zone, the mid-low section of the mobile screen is ‘natural’, however, the ‘natural’ zone changes when the grip position changes. Thus the main lesson learned here was to avoid the four corners of the screen for the main function section.

After different size and variations of the menu module test, I settled the menu at the screen center for general easy-touchability.

Prototype & Testing

Scheme A (Not adopted)

 

Before this round of prototype testing, I decided to add several core functions: chatting, location searching, distance, location sharing, and information on the coffee shop. After testing this crazy idea, the result shew that merging these much core functions is actually little more time consumed which get far from the initial design goal. 

Scheme B

 

I iterated the wireframe design by conducting informal usability testing with a paper prototype. Since one of the most initial design objectives is to 'merge' information into a more efficient interface to make it quick enough, I tried many methods and finally, I've been inspired by paper folding and unfolding behavior, thus I created a '2.5D' paper prototype with some simple origami. My participants provided many feedbacks on error-prevention methods, accessibility, and UI system.

 

 

Gesture experiment on clicking, dragging and swiping. (With framer)

 

Also, less tapping and switch back is necessary after some research have been done on interactive gestures. Dragging and Swiping is easier when users need to do something really quick, especially with one hand only.

Less page switching and the lower workload is my main goal in this project.  How can make users order a cup of coffee in the fastest way when they're rushing and holding their phone with only a single hand?

Through the '2.5D' idea, it is possible to develop one more ( or half more) dimension in the interface. More information are allowed to be merged into one single page.

Workflow & Wireframe
Interaction & Experience Validation

There's another round of user test after I made some rough micro-interaction prototype of the menu page. My participants provided many feedbacks on error-prevention methods, interaction experience, and visual, motion effects.

Redesign & High-fidelity Prototype
More Screens