Refer-a-friend programme involves an already existing user of the application sharing the application with a friend. If the friend downloads the app and makes a first purchase through that app, the existing user gets a reward as well as the friend.
I was in charge of defining the UX for how the flow of refer-a-friend would look like inside the Farfetch app, going through multiple iterations to find the best possible fit that is inline with the Farfetch guidelines. In charge of designing the UI which had to be in line with Farfetch's styleguide.
After doing a competitor analysis, I decided the best entry point for the refer-a-friend option was to integrate it inside the account section. This way, the user could have a quick access to the programme. The first step of the journey was introduced by an empty state which shortly explained the benefits of the programme.
Fine-tuning steps of the flow
One problem we were facing when displaying the empty state is how much help do users need in terms of understanding how the refer-a-friend offer works. Is it enough to display a simple empty state with just an icon and copy that mainly alerts the user it's an empty state or do we need a more in depth illustration that explains the steps of the process as shown below.
After doing user testing with a sample of users, we discovered that users easily understand what refer-a-friend means, without having to explain it to them. One of the questions in the script was if they understood what the programme consists in. All users from the sample knew immediately how refer-a-friend worked.
Dashboard & secondary pages
Dashboard went through multiple iterations as well until we found the one that displayed the most essential information. Keeping it minimal was essential as we did not want to clutter the IA with unnecessary information. The data for the stats was provided through a third-party API that offered multiple data-points suchs as clicks on invite, who clicked on the invite, the number of invites sent and successful referrals.
We decided to keep only the number of successful invites and the number of total invites sent inside the dashboard as the main incentive for the user to use the programme in the first place is to get as many successful referrals as possible. Other information provided by the third-party API was not essential for the dashboard's main goal, to reflect the progress of the invites sent.
Another point we had to keep in mind is to keep the design as mobile-friendly as possible. Thus, the design is built only with mobile-friendly components. The invites could be sent by triggering the native share from the primary button in the first step of the flow, the empty state.
Claiming the offer
After the friend receives an invite from a Farfetch user, the offer could be claimed by clicking the link and entering their email address. In collaboration with copywriters, I fleshed out the error screens for the edge cases where some users might have already claimed their offer.
Second part of userflow
The refer-a-friend option could also be accessed at the checkout stage. At this point, before a user made a purchase, in case he was referred by a friend, user could click on "Been referred by a friend?" link and search for the friend who recommended the user so they can receive a promocode.
Edge cases & promo code
For searching inside the database if the user has been referred by a friend there were edge cases as well. Error screens for those edge cases had to be designed as well as the promocode screen in case the query was successful.
Modal vs in-page component
The order confirmation page is one of the most viewed pages inside any e-commerce service. This section was a good opportunity to alert the user about the new refer-a-friend programme by inserting a component that would inform the user about the new offer. I iterated between using a component inside the page vs using a modal. After doing user testing we decided to keep the first version as pop-up modals tend to annoy the user and interfere with the overall flow of the process.