Designing for transactions: improving events

With the Met implementing a new design system, integrating a new CMS, and consolidating databases, there was an opportunity to improve upon the events experience which had not been updated in a few years.
‍
There were many inconsistencies, in terms of user flow, layout, as well as look and feel. As the UX/UI Designer for the transactions team, my goal was to unify the events checkout experience with the other payment verticals, including ticketing, memberships, and donations. There was also a need for all event pages, no matter what type, to use the same template and codebase. With thousands of events each year, this would greatly simplify the backend for our developers, and the consistency and familiarity would ease the ability to browse for events and checkout more quickly.
‍
Event redesign goals:

Several years had passed since the redesign of the Met’s website that coincided with a brand refresh, and much design debt had accumulated. The digital team was in the process of rolling out an updated global design system. I was responsible for implementing the new design system to all transactions pages, as well as creating new components, and implementing new features to optimize the experience.

We chose to design for greatest common denominator. We identified the type of event that was most common, and designed for that use case. Once we had a working design for that event, I would begin to apply the template towards other event types and look for ways in which the system would break, and adjust the template.
‍
As opposed to deploying all event pages to our new template at once, we would only convert one event to our new template. This would partially serve as our user test, and allow us to get any user feedback and work out any bugs. The first event that we designed for was the Young Members Party, a benefit event.
‍
In order to unify the checkout experience, our team worked with a core payment flow that would be implemented across all payment verticals. This simplified the way we handled all flows, but still allowed us to add more complexity based on special use cases.

After some initial sketches, I looked at several event platforms and museum sites to gather trends and evaluate what was being done well. Eventbrite is recognized as one of the leading event platforms, and was deemed the most user friendly amongst people I interviewed.

Some trends I noticed that differed from our current events page were that almost all sites had utilized some sort of side bar to organize content, images did not occupy the entire space above the fold, ticket pricing was more prominent, and the call-to-action was higher.

Although I wanted to draw from what other event pages were doing well, I also knew that it was important to make the event page feel as part of the Met's greater transactions experience, both from a coding and visual standpoint. I always considered the ability to reuse code when making design decisions.

Not only did we want to unify the events pages with the rest of the payment verticals, we also wanted to unify all events pages. Different types of events like classes, performances, and guided tours would have varying treatments, where information would appear in different sections—even the call-to-action.
‍
My main goals were to bring up the pertinent information above the fold, and also make the call-to-action more prominent. The following shows what the events page looked like before:

I explored several directions for the event page and presented them to the team with clickable prototypes in InVision. Having a design kit allowed me to rapidly iterate in high-fidelity. One version had a button that would stick to the top of the page. Another version played off the way general admission tickets were sold. The third version utilizes a pop-up overlay with ticket options, but we wanted to expose all the ticket options without having to click anywhere.

The side cart was one of the first ideas we had. The team liked this approach because we really wanted to expose all the ticket options, without requiring the user to make a selection. This layout also raised the call-to-action significantly higher and allowed us to reuse code that was used in other sidebar components. Not only was it an extremely common pattern known to users in product pages of all kinds, it emphasized the pattern that we had established with the rest of the checkout flow. The summaries and actions to proceed were all happening on the right in a side bar.

Utilizing the side bar made the page work more efficiently and the information was no longer just one long scroll. I reduced the size of the image significantly, so that the image no longer dominated the entire the page and more relevant event info could be promoted above it. Below is the final design for the events page:

The checkout pages beyond the event page were even older than the event page. These pages would vary in layout depending on the type of event. For example a performance event would have a different layout than a workshop or a talk. I was responsible for redesigning these legacy pages so that they adhered to the new design system and matched the look and feel of checkouts for the other verticals.

The redesigned checkout pages show an overall look and feel that is consistent throughout and adheres to the new design system. The side cart is persistent and sticks to the top of the page when scrolling.

Below is the new events template being applied to the different types of events. The options in the side cart would change depending on the type of event and the rest of the layout would remain the same. A musical performance could have different seating areas available. A workshop could have reduced ticket prices for members. In the case of a ticketed talk, there is an option to purchase the complete series at a discount or to purchase them individually.

I standardized all email designs for transactions as well. When I came on board all of the email communications were sent as simple text, without any HTML/CSS formatting. The new designs greatly improved the branding of the email communications, allowed for greater readability, cross-selling, ease of updating, and were also responsive. I also rewrote copy to make the instructions more clear and with a more conversational tone.

Once the checkout flow was simplified and deployed our team began to implement features and solve for different use cases. The first feature we implemented was for address verification. Address verification was important to ensure that billing info was correct and that payments could be processed. Mailing addresses were also important to prevent sending membership cards to the wrong address. Membership cards could be mailed to over 250 different countries so making sure addresses were correct would save both time and money.

The Met did not have a way to log in to the website, and an account page for members was not a major priority. However, certain events required that the guest be a member to attend so there was a need for a member gate. This gate could be repurposed for other variables as well, such as age restrictions, membership levels, student access, etc. The gate was designed so that people who were not members did not accidentally fill out the payment form only to find out that they were not eligible to attend.

The event page and checkout for the Young Members Party was successfully deployed and tested. Currently, new event pages are being rolled out with the new template. In the end I helped to design a new events checkout experience that was flexible, but fit in seemlessly with the rest of the transactions pages. Although making the pages easiest to develop meant designing with greater constraints, all aspects of the experience were improved from end to end.