Final Prototype: Created in Axure, interactive version below
Deepak Pradeep
Product Designer
Ticket Upgrade
Ticket Upgrade is a feature on the Vivid Seats marketplace for live event tickets that smartly suggests better seats than the ones users are currently viewing for a slightly higher price.
As Product Designer for Web at Vivid Seats, I led research and design for Ticket Upgrade.
Role: Product Designer
Company: Vivid Seats
Type: Responsive Web
Project Length: 2 months (Aug - Sep 2019)
Methodology: Agile
Design Team: I was the sole designer
Tools: Sketch, Axure, Zeplin, UserTesting.com, PowerPoint, Confluence, JIRA
Happy Path: Simplified view of typical and proposed flows
Problem Summary
Vivid Seats is a secondary marketplace for live event tickets, where brokers list tickets to sports, concerts, and theatre events for fans to purchase. When a ticket gets sold on the marketplace, Vivid Seats gets a cut of that sale.
The Pricing team proposed an opportunity to up-sell tickets to customers using a Ticket Upgrade feature, which could lead to higher margin earnings per sale. Product and UX decided to explore this proposal with an A/B test on our web platform.
User Groups
Sports fans
Goals
Design a seamless responsive web experience
A/B test with MLB, NBA, NHL and NFL events
Success Metrics
Improved conversion rate
Increase in Gross Order Volume (GOV)
Increase in upgrade frequency
Approach
Competitive Usability Tests
I formulated a test plan and ran remote unmoderated usability tests on our competitor's website. The primary test objectives were to see if users had interest in a ticket upgrade option, and to learn what would prompt them to upgrade.
I recruited 6 football fans from UserTesting.com for the test, and analyzed the test video recordings to uncover, document, and present insights to Product and Engineering.
Key Findings
Competitor's ticket upgrade flow was easy to understand, but users had slight confusion with the upgraded seat view
2/6 users expressed concern that they wouldn’t want an upgrade to be on the visitors side
Some users expressed interest in seeing whether the upgraded seat would be closer to concession stands or restrooms
3/6 users specifically called out the color scheme used for the Ticket Upgrade design that made it easier to navigate
Sketches: Two divergent concepts for Ticket Upgrade
Sketches
I used findings from the competitive usability tests to inform my ideation process and sketched out two divergent concepts - Bottom Sheet UI and Pill UI.
The sketches were used for reviews with the design team, and the team felt the Bottom Sheet concept, having closer proximity to the Checkout button, would capture the attention of high intent users. I was in agreement, and moved forward to refine this concept.
Wireframes
After reviewing sketches with the design team and aligning on direction, I created wireframes for the Ticket Upgrade component. I also saw opportunity to improve the organization of information on the ticket details page itself, and documented my suggestions in the wireframes.
I used these wireframes for reviews with the lead engineer and product manager to get feedback on functionality and feasibility. I learned from those discussions that I could simplify the flow by updating the bottom sheet component to have a full takeover state to show the upgraded ticket, rather than replacing the ticket details page with the upgraded ticket details. I took this insight into my final UI designs.
Mobile Wireframes
Desktop Wireframes
Visual Design Components: Color Palette, UI Component, and Icon
Visual Design
From competitive usability tests, I saw that users liked the visual coherency of ticket upgrade on our competitor, and that it also helped with navigation.
Color
I introduced a new color [#79B264] that was dedicated to Ticket Upgrade to make it distinct from the rest of the ticket purchase flow. I reviewed the color with the design team, and we were in agreement with the new addition.
UI Component
I introduced a new Bottom Sheet UI component, that had a minimized, expanded, and full takeover state. I reviewed the component with engineers for feedback, and we decided not to add it to the design system as it was a one-off use for this feature.
Icon
I created a Ticket Upgrade icon, combining icons from our existing set - ticket and upward facing arrow.
Mobile Designs
Desktop Designs
Prototype
I created a prototype in Axure using visual assets designed in Sketch (Sketch to Axure plugin) to demonstrate timing, animation, and interaction with the new ticket upgrade component, as well as the complete upgrade flow.
I used the prototype for discussions with Engineers on implementation, along with visual assets exported to Zeplin and documentation in JIRA stories. I also used to it run remote unmoderated usability tests.
Tap a quantity on the screen here to test it out.
UI Variants: Total Price (left) and Delta Price (right)
A/B Tests
Product wanted to test the efficacy of Ticket Upgrade against identified success metrics using a multivariate A/B test. There were 3 groups of variants, and a total of 16 variants (2x2x4):
User Interface
This group was used to test if displaying the price differently could have an effect in the user's decision to upgrade
Total Price: Show total price of upgraded ticket
Delta Price: Show price difference between original and upgraded ticket
Price Range
This group was used to test if users would be willing to upgrade for smaller or larger price increases
Large Increase: 10-20% increase in upgrade price
Small Increase: 5-10% increase in upgrade price
Event Types
This group was used to compare how ticket upgrade performed in 4 sports leagues - MLB, NBA, NHL, and NFL
A/B Test Results: Winning variants with highest increase in GOV over control after 2 months
Results
The A/B test ran for 2 months to reach significance on Optimizely. The results, although mixed, were mostly positive - one variant led to a +9.7% increase in GOV, whereas another led to a -2.2% decrease in GOV over control.
The winning variants, if promoted to all users, would bring in an estimated total revenue of $14m year-over-year. The Product team decided to promote winning variants to all users on the marketplace.
2
Usability tests
29
Screens designed
9.7%
GOV increase
$14m
GOV YoY increase