QueueHop Design

For a project in my UI class at Brown University, my team and I designed a prototype for an express checkout app, QueueHop.

QueueHop is an app that offers customers a new way of self-check out with the concise “scan, pay, unlock” process. This app aims to provide users with convenient and fast purchase process to reduce cart abandonment and prompt impulse buys. Furthermore, it enables the reallocation of store staff to provide better customer service instead on top of simply fulfilling cashier duties. Our mockup interface seeks to offer the essential “scan, pay, unlock” process and other pragmatic functions such as “cart”, “account”, etc.

We launched with 4 unique versions of hand drawn paper prototypes that are later modified and integrated into a single interactive prototype. We then proposed several relative hypotheses which are evaluated with an eye-tracking experiment and remote usability tests.

Paper prototypes

In order to visualize our ideas in front of users, to consider alternate designs, and to avoid premature decision making, we created four interactive paper-based sketches that are distinctive in functions and usage flows.

We then conducted a Wizard of Oz study on our paper prototypes with our fellow classmates. Based on our observations and assessments from the study, we integrated the four paper prototypes and our modifications into one final revised paper prototype.

final revised paper prototype

Interactive Prototype

We designed an initial high-fidelity prototype with Balsamiq Mockups based on our final paper prototype.

To begin with, every user is required to register an account and add a payment method. On the main page, users can begin the purchasing process by simply scanning the QR code/bar code on the desired items (simulate the scanning action by clicking the scan window in our mockup to proceed). After a successful scan, users can choose to cancel, add the product to cart or go to checkout directly. Furthermore, most pages have two buttons on the top right corner to allow direct and convenient access of the cart and the account information.

We shared our interactive prototype on an intramural forum and upon receiving feedbacks from our fellow classmates, we further polished our prototype with both aesthetics and usability improvements.

You can find the link to our final interactive prototype here.

Testing

This app intends to provide a quick alternative for checking out, therefore our goal when designing the app was to emphasize convenience and efficiency to the maximum. We hypothesize that the app should be easy to navigate and the primary tasks should be carried out without much difficulty.

eye-tracking experiment

First, we conducted an eye-tracking experiment utilizing a software called Ogama accompanied with an eye-tracking device. We obtained data on our participants’ eye movement patterns and corresponding dwell times that can be analyzed and adopted to further improve on usability and navigation.

Then, through the online usability test, we asked participants to perform and reflect upon various specific tasks. Our results showed that our participants had no difficulty completing our proposed tasks as every single task was rated 5(Very Easy) in terms of difficulty and nobody had serious confusion trying to locate or complete anything. Users explicitly stated that the icons for cart and account are intuitive and easy to locate.

online usability test

Reflection

By doing this meaningful project, we gained a better understanding of the process of creating a design from scratch. We learned the importance making initial paper prototypes and constantly refining a design through various testing methods.

Thank you for your valuable time. We would appreciate your feedbacks or comments.

Like what you read? Give Eric Kau a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.