through QR code scan
of credits
e-gifting method for Singlife to customers
Scan QR Code is a feature for credit transfer, used in Singlife app. It was originally designed for Singlife staff to receive Chinese New Year (CNY) red packet credits from Singlife.
In the midst of delivering the feature, it pivoted for a greater use and a larger audience - Singlife customers. Allowing them to receive credits from marketing / promotion / servicing activities, through hard / soft copy QR code provided by Singlife.
Apart from modifying the experience from a festive intended to a generic usage, there are backend processes that impact frontend user experience as well.
Transfer of credit via scanning QR code is network dependent. There’s a possibility customers might not be able to receive credits due to weak network on their end.
How might we alleviate customers’ anxieties during moment of waiting and help them get back on track?
Long wait time before timeout happens
When the network is weak, the maximum processing time of a QR code is 30 seconds before customers can rescan again.
Exit page doesn’t equivalate to cancel credit processing
When customer is stuck at the stage where credits are processing and decides to tap on the cross icon (at the top right corner), the backend server doesn’t stop processing. It only informs the app to stop listening for a response.
No loading indicator
There’s no visibility of processing progress.
To reduce the wait time to half (15 seconds) without having any downstream impact on the backend. Also included a loading indicator to show progress and after 15 seconds, a pop up model appears to allow customer to rescan.
Initial design
Revised design
Scan QR Code was designed for internal CNY usage. Hence partial of the experience deviated as the project direction shifted.
How might we make it relevant regardless of festive occasions while retaining the delightful element?
Disjointed experiences
Copy and animation was designed specifically for CNY and doesn’t work for others.
Tight timeline
CNY themed design was ready for developer handoff, and limited time left to make further changes.
Critical thinking and lean methodology was applied to identify affected screens for redesign. While highlighting unaffected ones to allow the project to be done concurrently and deliver within the timeline.
The design was created with adaptability as priority for scalability.
