Production Page Redesign

The production page otherwise known as the ‘map’ page or where customers choose their tickets is the most crucial page of the Vivid Seats flow. I had worked on several refactors to this page over my years at Vivid Seats, but in May and June of 2018, myself and a lead engineer on the web development team set out to lay a new foundation for this page.

View a current example of this page for reference.

Project Goals

This new foundation would allow us to rapidly test new features and products across mobile and desktop. Previously, this was an adaptive template which served up a much smaller payload for mobile. The page was refactored to be fully component based and mobile first. The challenge was in the fact that the mobile and desktop versions of this page were quite dissimilar in information architecture. The goal was to unify both experiences while also improving several customer touchpoints and doing no harm to conversion.

Competitive Research

Researching our competitors was something we did quite regularly, but for this project, we wanted to fully understand the advantages and disadvantages of several different approaches. I developed a user test that had 10 participants go through several general activities across TicketMaster, StubHub, SeatGeek, and our website. This feedback helped to ground some of the larger information architecture changes we ultimately made to the page.

User Research

User research was of paramount importance as I had to separately test both mobile and desktop platforms to determine the customer delights and pain points. Additionally, with such a complicated page, keeping the customers focused on the areas we were changing proved an additional challenge. I began by creating a broad usability test of the page to gather data on likes and dislikes of the interface. In usertesting.com, I created a 20 question script that reached 10 qualified customers. With this information, we mapped out a matrix of mobile vs. desktop customer pain points. This gave important insights into what we knew had to stay as compared to what we had the opportunity to improve.

Wireframing

As I've mentioned, the information architecture was slightly different for the mobile and desktop views of this page. This presented a unique challenge in marrying the two together as a mobile-first responsive page. I focused on the modular components of the page, iterating through low-fidelity sketches, inviting my team to brainstorming sessions, and bouncing ideas quickly through Slack and inVision. These IA-heavy wireframes went through several rounds of revisions, presenting to our key stakeholders: the CEO and VP of Product. By comparing and marrying the mobile and desktop IA, we reached a solution that we felt confidently conveyed the critical information to users.

Design Solutions

The purpose of this project was not a complete UI overhaul, but it still held opportunities for making several QoL improvements to the page and bring components inline with our design guidelines. The largest design change came for desktop in which we added a key feature from the mobile version: the ‘ticket details’ view. This introduced an intermediary step that highlighted three key pieces of information: where their seats were located in the venue, all of the disclosures about the tickets, and a clear indication of quantity and price. It also gave us the opportunity to create language through motion. The motion of our animations helped to connect users to the page in a delightful manner.

Production Mobile Ticket Details Wireframes

Split Testing

This project required a layered approach to testing so that we could be certain that the technology had no impact on conversion. The first test simply pitted control vs. the refactored code styled to look identical to control. After that baked for a couple of weeks and we gathered enough stats to prove it was winning, we released the main test. This multivariate test introduced the fully responsive template that added ticket details to the desktop view. It also opened the door for dozens more impactful tests that would come later down the road.

User Testing Again!

As we ran the multivariate test, I interviewed a group of 20 users comparing control and the ‘ticket details’ variant. The results were overwhelmingly positive with a clear indication that users greatly preferred our new variant. I like to end many of my users tests with several questions that ask users to rank on a scale of 5 how much they liked or disliked certain features. With this data, I created a graph that makes it very easy for stakeholders to quickly digest the trends.

Split testing comps for the production page

Conclusion

The result was a page that unified the mobile and desktop experiences, allowed for rapidly creating new multivariate tests (which we later did to much success in the form of ticket scarcity, urgency, and promo offers), and improved customer confidence in their ticket selections. We reduced and simplified the front-end code substantially which made it significantly easier for future changes.

Next Case Study

Performer Page Redesign

In the Spring of 2017, I led the efforts to redesign and responsively develop one of the most impactful templates on the Vivid Seats mobile and desktop websites - the performer page. This template, shared across all performers in sports, concerts and theater was often a direct landing page for many users coming in from organic and paid search and therefore their first impression of Vivid Seats.

View a current example of this page for reference.

Project Goals

We wanted the visual design to shine through and for the user to feel connected to the performer they were searching for. The challenge was to capture the attention of the users and set expectations for where they were in the flow while improving conversion. The goal was to increase click-throughs and decrease bounce rates while presenting a clear hierarchy of information and getting the user excited.

Event Page Redesign

User Research

I began by conducting a user study in usertesting.com with 10 participants asking them to perform various actions throughout the page and provide general impressions and feedback. In addition to this qualitative feedback, I worked with the web development team to add GA event triggers to many neglected aspects of the template so that we could create a thorough map of all interactions. Lastly, I interviewed several of our senior customer service representatives to ascertain any pain points discussed through phone sales that this step in the flow may have offered.

Pain Points

With this information, I was able to map out customer pain points with my team and begin affinity mapping and high-level brainstorming. At this point in the process, I would always invite the project manager and one or 2 devs from the product team to participate in this session as it would often shed light on new aspects we had not considered. It would also help ground our choices in technological considerations.

Event Redesign Pain Points and Retrov

Design Solutions

This project involved several major stakeholders across engineering, product, and executives. After collaborating and receiving sign off on the wireframes, I worked with one of my UX designers guiding and critiquing dozens upon dozens of hi-res comps iterating through different approaches. Across several stakeholder presentations over multiple sprints, our final top three distinctive comps were then agreed upon to create a multivariate test.

Split Testing

Our test ran for two weeks and had three variants plus control. We began by slowing rolling out the template to a few sports teams at a time before eventually releasing it to all sports teams for MLB, NBA, and NHL (the current in-season sports). In addition to the multivariate test, I ran a second user study with 20 participants in a script created to avoid order bias. At the conclusion of the testing, I had quantitative and qualitative feedback to present to our stakeholders and make a firm case for releasing the winning variant live to production.

Event Page comps

Conclusion

Our final results were significant. Conversion rate increased by over 3%, bounce rates for this page went down nearly 60%, and we reduced the number of front-end templates from 91 to 8. Visually, I feel that we significantly improved the impact of the page, helped to excite the customer about their potential purchase, and brought it inline with larger design efforts we were looking to make throughout the site. In the end, we iterated a few more minor tweaks, then quickly released to all performer pages. This project was the touchstone for an upcoming UI overhaul and was a constant point of reference for design components and a champion for how the UX process works.

Performer Page Finished Redesign
Back to Top