Brief
Vivid Seats aims to boost app traffic and expand its customer base through the implementation of a strategic referral program. The initiative enables existing users to invite friends to the app using personalized promo codes. When a referred friend completes a purchase, the original user earns credits applicable to future transactions. This approach is designed to leverage the existing user network to drive organic growth, increase app engagement, and incentivize both new and repeat purchases.
I was the lead designer on this project. I worked with product to define requirements, with design for iterative feedback and with engineering to build the final product in the app. I handled all the UX, UI, interaction, branding and illustrations for this program.
The Designs
Beyond the in-app experience, I also designed related communications for email and web including an informational landing page on the website. (See live landing page here.)
The Process
Research
Competitive Analysis
I started with competitive research of referral programs in other companies and apps. I looked at our competitors such as Stubhub, Seatgeek and Gametime and also companies such as Lyft, Uber, Airbnb, Spothero, Grubhub and Birchbox. I went through flows of inviting friends and using invite codes for purchases in their apps to be able to observe their experiences.
From the research, I compiled a list of takeaways - good and bad points to both flows - and recommendations of best practices that we should use in our design:
• Advertising for program in main feed / Link to program in main or account navigation
• Referral landing page should show share link and/or a personalized promo code
• Most popular: email, sms, facebook
• Permission to access contact list increases ease of sharing and gives us creative control over branding outbound referrals
• Nice to haves: Linking to credits earned/available, showing referral history, showing send history/progress of pending referrals, credits loaded onto account and available in checkout to use without saving/typing a promo code
User Research
I surveyed a handful of people to find out how they use referral programs and what features they enjoy. I came away with a few general takeaways:
- Most people feel positively towards these types of programs
- Most people preferred to share referral codes via text or email.
- People felt referrals were more trustworthy when they came from friends instead of the company.
Business Constraints
- Users must purchase before being eligible to refer friends
- Users must be logged in to refer friends
- Referral can only be done in app. Credits can only be redeemed in app.
- Max rules for new user promo, amount of referral credits you can earn, amount of referral credits you can have at one time
- $ amounts can change
Ideation
Wireframes
With the research in mind, I determined what elements we needed for outbound and inbound user flows and started slotting those on 1-3 potential page views to determine best layouts.
Journey Mapping
Once wireframes had gone through a review process and were more finalized, I mapped out 3 user journeys for
1. Outbound: sending referrals
2. Reward: viewing and spending earned credit
3. Inbound: receiving a referral and spending promo
I also looked at touch point on the app, web and email to link to the referral center or advertise the program. These were done in a low fidelity state.
Visual/UI Exploration
Looked through several different visual directions for this program and tried applying the styles to different pages across the flow. Showing some examples below.
Prototype / Finalized UI
After several iterations and review flows, I finalized the UI and built out all the screens from the wires with that visual direction. I then created a prototype using invision that could show the flows laid out above. We used this prototype for both stakeholder approval and some light user testing.
