Recyclabox screens
Task Flow

Based on a series of user interviews and focus groups I simplified the existing task flow by changing the order and merging or deleting a number of steps. Since Recyclabox kiosks are placed into supermarkets unmanned, it was crucial to design a user flow that was clear and intuitive. To minimise the number of abandoned journeys, I simplified navigation, introduced progress bars and added help screens offering additional support on the most common queries.

The kiosk has three distinct user journey paths depending on the type of item the user wants to sell – CDs and DVDs, smartphones and other electronics. All three begin at the home screen and overlap or merge at various points of the user journey, for instance registration, payment and checkout. Each journey can be linear or circular as the user can choose to return to the home screen after receiving the quote or if they wish to sell another item before checking out.

This is the task flow chart I created for this project. Red screens mark the main user journey, green are modals and blue rhombus are supporting screens.

Recyclabox task flow
Recyclabox UI: key features

The user journey begins with a ‘quick note’ answering five most commonly asked questions about the Recyclabox to help users understand how the machine works and what steps will follow. This screen is styled as a modal that the user can read and either accept to proceed or cancel and close.

Recyclabox Terms and Conditions screen

The screens asking to select from a long list of options, like the make or model of your device, feature a horizontal scroll for easier navigation. In addition, the search button in the right top corner allows to look up your device manually.

To make touch-screen navigation easier, I expanded the buttons to include an item image, label and a large active area around them. Early user tests showed that this significantly decreased the number or errors, especially amongst older users who struggled using the kiosk before.

Recyclabox Other Electronics screen

To minimise errors and abandoned journeys users can search for details such as model and make of the device manually.

To speed up the process and minimise errors the UI features three different keyboard layouts: qwerty, numerical keypad and a version with shortcut for e-mail domain names.

Recyclabox search journey

A series of multiple-choice questions was designed to determine the condition of the device being sold before issuing a quote. These include physical damage, battery life, as well as account and network restrictions. When the user answered all the questions Recyclabox calculates a quote for the device.

Recyclabox device condition journey

The registration form comes up after the user has confirmed the device and received a quote. At the moment Recyclabox offers two payment methods - bank transfer and PayPal - which will later expand to include store credit and charity donations.

Recyclabox registration screen

The process of selling CDs and DVDs is similar to a regular supermarket checkout. After scanning or manually entering a barcode, the machine offers a quote for each item. If the quote is accepted, the user deposits the CD or DVD into the machine before proceeding with the next item. This process loops until the user finishes scanning and depositing all items and proceeds to payment.

Recyclabox CD and DVD journey

The new UI has been launched in summer 2018, and the early reports showed a significant drop in errors and abandoned checkouts. On average, users rated their experience at 4.2 (up from 2.8) and sales grew by 8% in the first month.