LIVE

Reducing friction in the returns journey with QR codes

What
UX, UI, Prototyping, Cross-platform Design, Email Design
When
April 2019 - September 2019
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.
The famous ASOS delivery parcel packaging
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 transition the paper form into a digital experience that was intuitive and seamless.
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.
Selecting a drop-off location when creating a return
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. Showing the barcode/QR code was the most important step, so it was emboldened to bring emphasis.
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.
Error message when the QR or barcode is not ready
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.
Cross-platform designs to reach all customers
The printerless 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.
NEXT
Refer a Friend

Made it this far?
Let's start a conversation.

Thanks for checking out my work 🙌
Say Hello
© 2021 — Peter Ford