Refer a Friend Redesign

[DESKTOP] Unauthenticated User

TIMELINE

  • June 2023 - July 2023

[DESKTOP] Authenticated User

MY ROLL

  • UX Design Intern at TwinSpires

  • Solo Project

SOFTWARE USED

  • Adobe XD

  • InVision

SUMMARY

TwinSpires is an online wagering platform owned by Churchill Downs. TwinSpires works primarily within the space of horse racing, offering a variety of formats within the sport to bet on. One service TwinSpires offers to its account holders is the ability to Refer a Friend, as shown to the right. When a user has a TwinSpires account, they can invite others to create an account using a unique referral code. Once the user creates a new account using this code, both users receive $10 to bet within the TwinSpires platform.

Refer a Friend is accessible across multiple devices from desktop to mobile and an iOS and Android app. Thus, it should be compatible with these devices and platforms, and accommodate dark/light mode.

PROBLEM

  1. Users struggle to find the Refer a Friend page across TwinSpires platforms.

  2. Inefficient process due to repetitive steps and poor layout.

  3. Lacking incentive and marketability.

SOLUTION

  1. Update the navigation menu title from “Free Bets” to “Refer a Friend”.

  2. Move important information and sharing buttons up on the page. In addition, minimize the steps/clicks a user takes to complete the task.

  3. Display information to incentivize users to use the Refer a Friend feature such as how much money they have made. Add a ranking/rewards system to encourage users to bring in more users. Make the Refer a Friend reward amount adjustable based on the VIP status of users, time of year, and events.

Required:

  • Needs to include functionality to share a unique link that’s tied to an existing Player

  • Needs to include Social sharing for both Facebook and Twitter

  • Needs to include the Terms and Conditions

  • Needs to follow current TwinSpires branding

  • Account for unauthenticated and authenticated states

  • Error and success messaging

  • Empathetic to Accessibility - AA Rating

  • Light/Dark mode

ACCEPTANCE CRITERIA

Nice to haves:

  • Improved marketing language

  • FAQ link

  • How it Works / 1-2-3 steps 

  • If Authenticated, show how many successful RAF with total amount earned (You’ve referred 20 friends and earned $200 in free bets for you and them!)

PERSONA STATEMENTS

  1. As a TwinSpires player, I want to easily find and share my unique referral code, so I may earn a free bet.

  2. As a friend of a TwinSpires player, I want to get a free bet and open a TwinSpires, so I may fund my new TwinSpires account.

  3. As a marketer, I want a referral page that is easy for players to use so that we can acquire more players and handle.

COMPETITOR ANALYSIS

Competitors of TwinSpires are those in the horse betting space, however, other betting companies (ie. sports betting) are useful to assess as well. The following list is considered TwinSpires’ primary competitors. In order to gain a better understanding of how competitors are using their Refer a Friend method, I went to each company’s website and assessed of how easy the navigation was, what was offered in their Refer a Friend program, and the formatting.

    • Easy to find through site navigation (Promotions / Refer Friends & Get Bonus)

    • Has automatic pop up window to prompt users to sign in

    • “Get $25 Bonus for every friend you refer!”

    • Has text, facebook, twitter, and email sharing options

    • Shows Terms and Conditions

    How it works:

    • Invite your friends (Make sure they sign up with your invite link)

    • They make a deposit (Any deposit will do, as long as it’s $10 or more)

    • You both get a bonus (You get a $25 bonus within 7 days & your friend gets the sign up offer)

    • Sign up offer: “Get up to $200 Back in Wagering Credit if your first single-horse win bet loses”

    • Refer a friend promotions change annually (at minimum)

    • Difficult to find information on via site navigation -> found through googling “FanDuel refer a friend” -> found this page but not sure how to get here through website navigation

    • Promotion differs from Faceoff, Fantasy, Sportsbook, and general referrals

      • Faceoff - You and a friend get $15 when they verify their account and deposit $15 or more.

      • Fantasy - You and a friend get $15 when they play at least $10 in paid contests and verify their account within 30 days of registration.

      • Sportsbook - You and a friend get $50 in Bonus Bets within 72 hours of them verifying their account and placing a real money wager of $10+.

      • General - You and a friend get $10 when they play at least $10 in paid contests and verify their account within 30 days of registration.n text goes here

    • Difficult to find through website navigation -> found through googling “Xpressbet refer a friend” -> found this page but not sure how to get here through website navigation

    • Explains step by step the refer a friend process

    • Must enroll in XB Friends before you can refer friends

    • Receive $50 Bonus each time someone you referred signs up and bets $100 within 30 days of signing up.

    • Difficult to find information on through website navigation, only found promo information for new members -> concluding there is no program to refer a friend

    • Does not offer a reward for referring a friend.

      • Does offer a new member promo code CROWN23 for an instant $10 bet. In addition if the new user bets $500 within 30 days of sign up they receive up to a $100 bonus.

    • Shows Terms and Conditions.

    • Difficult to find through website navigation -> found through googling “DRF Bets refer a friend” -> found this page but not sure how to get here through website navigation

    • Shows three steps on how to refer a friend

      • Log into account, select “Refer-a-Friend” in My Account, and send friends the unique code.

    • Each friend that you refer, signs up, and wagers $100 in their first 30 days gets a cash bonus for themselves and you get a $50 cash bonus.

    • You can also earn a 1-year anniversary bonus on your friends

    • Difficult to find information on through website navigation, only found promo information for new members -> concluding there is no program to refer a friend

    • New membership program states that with the use of promo code MATCH200, new members get up to a $200 deposit match.

Key Takeaways:

  • Make sure the Refer a Friend program is easy to find for users through multiple means of website navigation (ex: menu and search)

  • Display/Link to FAQs 

  • Typically show instructions 

  • Have multiple methods of sharing

QUALITATIVE DATA

Qualitative data gathered from various surveys and feedback outreach was assessed to understand user concerns and wants. This data showed consistent concerns regarding users’ inability to find the Refer a Friend program, information, and how it is used.

ACTIVITY DIAGRAMS

TEXT

USER EFFORT ESTIMATIONS

Goal: Navigate to the RAF page, sign in (if unauthenticated), and share a referral link. 

Original Design:

  • Unauthenticated User = 5 - 9 total clicks

    • 4 - 5 clicks to sign in

    • 1 - 4 clicks to share link 

  • Authenticated User = 1 - 4 total clicks

    • 1 - 4 clicks to share link

Final Design (Version 4):

  • Unauthenticated User (starts logged out on RAF page) = 5 - 6 total clicks

    • 4 clicks to sign in

    • 1 - 2 clicks to share link

  • Authenticated User (starts signed in on RAF page) = 1 - 2 total clicks

    • 1 - 2 clicks to share link

DESIGN ITERATIONS

Version 1 - Unauthenticated & Authenticated

Problems & Solutions: This initial version of the page is okay, it looks better than the original and all the important information and buttons are above the fold. In addition, working is clearer and there are helpful success/error codes. However, there are simply too many clicks for the user. In addition, in reviewing this design with the manager, a referral code is not doable, only a referral link. Also, some parts of the mobile design are not possible. Overall, this design was an improvement on the original but I played it safe following the look and layout of the original design. My manager said it was okay to be more creative. This initial design was my first time using Adobe XD so it was really beneficial and helped me understand what I wanted to do. I added the visualization of how many people a user has successfully referred and how much money they’ve made from this. Just to help incentivise the user to keep sharing.

Version 2 - Unauthenticated & Authenticated

Problems and Solutions: After meeting with my team, they helped me revise this version of the Refer a Friend page. They suggested I get rid of excess words and titles. In addition, they had me rearrange the “How to” and the button so it attracts the eye better. This design does improve on the previous version. I had a goal to gamify the process more so I added a ranking and rewards system to incentivise the user. I also need to improve the icons so they match the color scheme and look of the website more (3D to 2D).

Version 3 - Unauthenticated & Authenticated

After meeting with the Senior Director of Marketing, he liked the redesign, but wished more could be done on the backend to make the referral process easier. His suggestions went back to my original design of a referral code, instead of the current link. Will be meeting with ____ to figure out what is possible with TwinSpires current system and schedule.

FINAL DESIGN

This is my final design and what I presented to high-ranking stakeholders and other departments in TwinSpires. It got great feedback and everyone was eager to implement this design. Further discussions with marketing are to take place in order to finalize the ranking and rewards system.

Desktop, mobile, iOS (dark/light mode), and Android (dark/light mode) prototypes were created and viewable in more depth below.

FINAL DESIGN - Version 4 [DESKTOP] - Unauthenticated & Authenticated

FINAL DESIGN - Version 4 [MOBILE RESPONSIVE] - Unauthenticated & Authenticated

FINAL DESIGN LINKS

  • Responsive Mobile Web

    • [RESPONSIVE] RAF - Unauthenticated

    • [RESPONSIVE] RAF - Authenticated

  • Android

    • [ANDROID] RAF Light Mode - Unauthenticated

    • [ANDROID] RAF Dark Mode - Unauthenticated

    • [ANDROID] RAF Light Mode - Authenticated

    • [ANDROID] RAF Dark Mode - Authenticated

  • Desktop

    • [DESKTOP] RAF - Unauthenticated

    • [DESKTOP] RAF - Authenticated

  • iOS

    • [iOS] RAF Light Mode - Unauthenticated

    • [iOS] RAF Dark Mode - Unauthenticated

    • [iOS] RAF Light Mode - Authenticated

    • [iOS] RAF Dark Mode - Authenticated

LESSONS LEARNED

TEXT