Reducing friction in the returns journey with QR codes

What

UX, UI, Prototyping, Cross-platform Design, Email Design

When

April 2019 - October 2019

A selection of ASOS Printer-less Returns screens on Apple iOS devices

A disjointed returns experience

Customers returning items to ASOS would need to fill in a returns form detailing the specific item(s) they're returning and the reason why. As well as being prone to human error, with forms being misplaced or filled in incorrectly, there was also a considerable economic and environmental cost of printing the forms. Returns forms are included in every single ASOS parcel, equating to around 64 million paper returns forms sent out each year, meaning an unnecessary amount of paper and energy is wasted.

Graphic showing that 320,000kg of paper is equivalent to the weight of 3 blue whales, 55 elephants, or 50 T-rexes

😮 Taking returns online could save 320,000kg of paper, which is equivalent to the weight of the above. Image credit: ASOS

Bringing the returns experience online

The goal was to create a seamless online experience, instead of relying on a paper form. Enabling a customer in the UK to create an online return through My Account and receive a barcode/QR code which can be used to register their return with the delivery carrier at a chosen drop-off location. As the sole UX/UI designer on the project, my role was to translate the paper form into a digital experience that was intuitive and seamless.

Mobile phone screen mockup showing selecting an item to return and the reason for the return

Creating an online return

My approach was to simply convert the physical returns form into a digital online process. So the ticking of the box to select the returned item was recreated as a digital checkbox. As well as this, the reason code selection was designed as a dropdown selection, allowing users to cycle between different reasons, such as; 'Doesn't fit properly' and 'Incorrect item received'.

Selecting drop-off location

Based on their postcode, the user would then be able to find a suitable carrier drop-off point. Locational proximity and opening hours were displayed to allow the user to easily decide what drop-off location was most convenient for them.

Mobile phone screen mockup showing selecting a drop-off location when creating a return

Mobile iOS screen showing the ASOS My Account section

Mobile iOS screen showing the My Returns section with returns in progress

Mobile iOS screen showing the return details screens, showing drop-off carrier and other tracking details

Mobile browser screen showing loaded QR code that a user would show at the drop-off location

📦 Accessing your return details and OR code flow; navigate to My Returns, tap on the specific return in progress, view return details and QR code

Four iterations of copy for the printer-less returns journey instructions, located in the return details screen

✍️ 4 iterations of copy for the returns journey instructions; showing a reduction in the number of steps to keep it simple for users

Mobile phone mockup showing a new set of 3-step instructions when completing a return

A new set of instructions

With the return created and a barcode/QR code generated, it was important to inform the user on what they had to do next. To clearly outline the process users had to take, I created a concise set of instructions detailing the next steps. The messaging was then modified by the copy team to ensure it was in the ASOS tone of voice. Multiple iterations of these instructions were tested with users to ensure there was no confusion.

Edge case error messaging

In some cases, when submitting an online return, the barcode/QR code wouldn't be generated immediately. Therefore, I designed a transient message to highlight this to customers, encouraging them to be patient and try again soon. Even though this was an edge case, it was important to be transparent to customers when dealing with errors that were outside of our control.

Mobile phone screen mockup showing error message when the QR or barcode is not ready

Mobile phone screen mockup showing accessible iOS dynamic text to allow users to scale text

Accessible scalable text

For iOS, the return details screen supported Dynamic Type. Designs were adjusted to show how the layout and structure of the content would work with larger text. There was a focus on scaling the text to improve the readability for customers, whilst keeping the iconography the same size as these were seen as decorative to the experience, not informative. Accessibility was a core principle of this project from the beginning.

Mobile Android screen showing the ASOS My Account section

Mobile Android screen showing the My Returns section with returns in progress

Mobile Android screen showing the return details screens, showing drop-off carrier and other tracking details

Mobile Android screen showing the loaded QR code

💚 Accessing your return details and QR code on Android

Two desktop mockups showing the return details information in the My Account section of the ASOS experience

🖥️ Desktop screens showing the return details within the My Returns section of a users account

Cross-platform designs to reach all customers

The printer-less returns experience was designed across web, iOS and Android, as it was a feature that was intended to reach the broad set of customers. For each of these platforms, the specific UX and UI guidelines were adhered to. For Android for example, the designs were created to fit the dark mode theme. The designs were then rolled out across platforms, with iOS and Android released in October 2019, and then web coming a month later!

Not forgetting email communications

The in-app experience wasn't the only consideration. When the return was confirmed (and the barcode/QR code was generated) a confirmation email was automatically sent to customers. I made sure that the email contained the same set of instructions and the embedded barcode/QR code that was contained in the My Account section of the app. This meant that the customer had a secondary route to process their return, if the app or website wasn't accessible to them.