LIVE

A referral program to boost customer acquisition in the US

What
UX, UI, User Testing, Prototyping, Cross-platform Design, Marketing
When
January 2019 - October 2019
Customer acquisition at an all time low
New customer growth had slowed massively. Referral marketing can drive significant new customer acquisition, with the potential to attract a loyal and profitable customer. Create a refer a friend acquisition channel initially for the US market, creating extra value for our loyal customers (referrers) and incentivise new customers first purchases (referees).
Collaboration with a third-party referral marketing company
In 2016, an in-house ASOS referral programme was exploited in Russia, seeing customers duplicating discount codes and abusing the system. This bad experience convinced us to partner with a reputable referral marketing company called Mention Me. They had a set of pre-made user journeys that could be implemented into different areas of the ASOS experience. My job was to ensure that these experiences were skinned according to the ASOS style guide, and to ensure that the designs worked across web, iOS and Android platforms. There was cross-collaboration between myself and designers at Mention Me, with weekly calls to discuss any issues and to align on next steps.
User flows to understand the referral process
The interaction between the referrer and referee was a complex process. With this in mind, I created mobile web user journeys in Overflow to grasp the different routes and depict all the edge cases that we had to consider. The flow delved into the intricacies of the referral flow, like how the sharing link would appear on Facebook and what pre-determined text would be pasted in when composing an email. Essentially, the expansive flow depicted the complete journey from a referrer sharing a referral link, to a referee applying the code in checkout. The flow was integral for product managers and the development team.
Working with branding to source suitable imagery
The use of inviting and friendly imagery was a big part of the marketing program. Especially on desktop web, imagery was designed to take a centre stage and appeal to a prospective referrer or referee. I contacted the brand experience team requesting images that would fit this theme, making sure that the types of images evoked that sense of friendship. They gave me access to a range of studio images from the Collusion brand. These images worked well as the ASOS Collusion brand was a uni-sex clothing style, so the images portrayed male and female models posing together in a relaxed friendly manner. Preference testing was conducted to narrow down the variations of images that could be used. Images where the models were seemingly 'looking at the offer' were effective as the users eye-line would be drawn to the offer.
3 designs for refer a friend banners on iOS devices
Post-checkout refer a friend pop-up offer on mobile
Refer a friend share your name post-checkout design for desktop web
Refer a friend share by email post-checkout design for desktop web
Refer a friend share by Facebook post-checkout design for desktop web
Refer a friend dark mode pop-up offer error message for Android
Refer a friend referred by a friend banner in codes and vouchers for iOS devices
Referral code pop-up within checkout
Referral from link sign-up screens for iOS devices
Referred by a friend link in codes and vouchers for Android
Dark mode referred by a friend link in codes and vouchers for Android
Referred by a friend link in codes and vouchers for iPad and tablets
User testing the referrer and referee flow
I produced an unmoderated user testing scenario for people in the US, with nine participants testing the referrer flow and another nine testing the referee flow. The majority of users stated that the referral discount of 10% was too little. This made sense as the US is a discount-driven nation, especially with extreme discounting on Black Friday. Users were also confused as to whether they had to enter their details or their friends details when signing up to the programme. In addition, the 'share by name' feature also caused confusion, as users thought they could simply enter their friends name in the promo code box to apply a discount. This was not the case.
The post-checkout referral pop-up to start with
It was agreed that positioning the offer in the post-checkout experience would be the best option to start with. With the feedback gained from the testing phase, the copy was made airtight, and the referral offer was increased to 15% for both the referrer and the referee. I designed native pop-up sliders for both iOS and Android, as well as crafting a simple pop-up animation for web to indicate how the module will display when a user arrives on the post-checkout screen. Similar to previous projects, edge cases were taken seriously, and transient error messages were set just in case the connection to Mention Me's API was not working. The referral programme is currently live to customers in the US. The next steps would be implementing the offer in other areas, such as the ASOS home page, as well as encouraging users to share more by giving them their very own referral dashboard in their My Account section.
ASOS Refer a Friend Web Experience

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

Thanks for checking out my work 🙌