![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/71706e04-6346-4517-a9d2-49d756aac06d_rw_1920.png?h=13da4a28d758bdfcd3beb6b601c8dc94)
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
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/fd18549d-32c2-4ecd-8ca7-2a079bc36375_rw_3840.png?h=af60043a653fe7f05b574cb505526365)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/f9dc86a8-562b-467c-860a-715aa9730b2a_rw_3840.png?h=f8fcb52511ee60a4f72378c22ae42f01)
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.
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/abc36371-a1be-4592-9262-f350dff1d037_rw_3840.png?h=dd95ded111c5806a4235369aab9d78c9)
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.
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/ec706aac-44de-4119-80e7-398e3d5d68d0_rw_1920.png?h=585d8af3b62c2940b3646ff7e22a9f0e)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/973f9c8a-acb5-4063-aec5-45abf262da35_rw_1920.png?h=84f5eab4520e6ec6dbce5deaf2e7fb96)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/048839c7-5663-4408-b246-9956a71406de_rw_1920.png?h=51e90aea5753dc5d99710d1641bdd938)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/8ba28136-a744-4153-ad6e-d90a00696819_rw_1920.png?h=258104c4692dea51fdce3827f713aacc)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/eb5aaa97-15b7-4dcd-8ccf-bc8b52b0120e_rw_1920.png?h=e91f2c0991b6e32440b257c0e7b0a271)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/e03f40db-1a66-4e51-b4ac-531df3a9122d_rw_1920.png?h=6b70c03f6efc7d6c452f77bf0abbd9fa)
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.
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/7df0ee82-8d34-4b91-ac84-28f561feac92_rw_3840.png?h=e50dcdae1f436ab08fd0fa4eee19396c)
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.
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/fe2c01d9-116a-4292-8f19-81e6a2da70c0_rw_1920.png?h=0adf574aabb8a2fbdd7e2462dbf5a736)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/da91f67f-0752-444d-825e-9be98716a229_rw_1920.png?h=134b8782efdb4febf482e3bed77943e8)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/d31afdfe-7950-4aa1-9f76-25a973c9aac1_rw_1920.png?h=13bca8b7a26f93d296a589b8fbf243ac)
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.
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/786f082f-b8a3-45a3-b31d-29eecc956b56_rw_1920.jpg?h=a5c6ece38965efe17d097dca3fe1835a)
![](https://cdn.myportfolio.com/3495403cc9a146a99f4e15c74ebc6b9c/72044a5c-fa38-40a9-8052-f04b3fd46ac6_rw_3840.png?h=f7c4674045a953d92a9a9c5396355159)