About
In an effort to increase app traffic and gain new customers, Vivid Seats decided to put a referral program for the app. The main premise of the program was to let users invite friends to use the app with a promo code. If their referred friend made a purchase on the app, they would receive credits to use on a future purchase.
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.
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.
Other assets
When the UI was all built out, I handed off designs to the iOS and android teams via Zeplin and helped to do a visual QA before release. In the meantime, I helped out with many other assets involving this program including email design, informational web landing page design and some other web placements.
