CLIENT
The Metropolitan Museum of Art
PROJECT
Ticket kiosk redesign
ROLE
UX/UI Designer
RESPONSIBILITIES
Research, user testing, user flows, wireframes, high-fidelity designs, prototyping
Overview
In 2020, The Metropolitan Museum of Art will celebrate its 150th year anniversary. The anniversary will coincide with many updates to the Met's digital designs, including a redesign of the ticket kiosks, which were first introduced at the museum in 2015.
I served as the lead product designer for this project and was responsible for research, user flows, wireframes, prototypes, as well as the high-fidelity designs.
The Met's Great Hall, it's daily visitors and 14 ticket kiosks.
Research
At the Met, I had the luxury of observing visitors using the ticket kiosks by simply taking the elevator down to the Great Hall from our upstairs office. Before I started the kiosk redesign, I researched what was wrong with the current kiosks. Here are some of the user experience problems I saw with the current kiosk designs that I made sure to address:
- QR code scan instructions were not communicated well.
- Visitors were not sure if their ticket was scanned correctly.
- Visitors did not immediately know where the tickets were printed.
- Error messages occurred too frequently.
- Visitors did not always see notifications on the screen.
I also wanted to address many detailed UI problems that had an effect on the overall user experience of the kiosks.
- Heavy stroke design was not easy to scan.
- Lack of button states.
- Lack of secondary colors.
- Designs did not take advantage of the full screen.
- No true design system.
- Error and success states were not prominent enough.
- Keyboard layout was not ergonomic and contained unnecessary characters.
- Loaders disrupted the flow of the screens.
- No progress tracker.
Over the years the kiosk designs had been updated many times. Creating a wireflow of the current iteration allowed me to gain a birds eye view of all flows. I could identify where users were having problems, where we could implement new features, and also think about the overall visual design system.
The Met's Great Hall, it's daily visitors and 14 ticket kiosks.
Competitive and comparative analysis
Although there weren’t many museums using ticket kiosks, I was able to visit the MoMA and the Empire State building to observe visitors using ticket kiosks. I would also document any interface I happened to stumble upon in my daily life, including bank ATMs, retail kiosks, and even McDonald’s.
MoMA ticket kiosks
Empire State Building kiosk
TD Bank ATM
The video and photos of the kiosks I documented allowed me to create wireflows. I would use these wireflows to give me a frame of reference, sometimes providing inspiration for a design and other times lead me to think of a different solution. Of course all inspirations were taken with a grain of salt, as these ticket kiosks were different sizes, had different business goals, and overall had less functionality than The Met's kiosks.
Empire State Building kiosk wireflow
Moma kiosk wireflow
General admission flow
The starting point for my designs was the General Admission ticket purchase flow. This was without a doubt, the most important flow for the kiosk. Once initial designs from this flow were created, I would move on to the other flows, and reuse components to form the beginnings of a design system.
General Admission purchase wireflow
Inspiration for the look and feel of the kiosk was taken from other digital signage at The Met, as well as printed posters.
The new start screen was designed to be less stroke heavy and the admissions policy could be reduced, now that it has been implemented for well over a year.
Icons were added to the welcome page to add more context and make it easier to scan.
Utilizing the full screen allowed The Met to add two more ticket types, an important feature for the Visitor Experience team.
Detailed UI improvements
UI improvements were not only to make the kiosk more aesthetically pleasing. There was a lot of effort put into designing the UI so that there were more affordances, greater heiarchy, and clear button states. Drop shadows, translucency, and blurs made the kiosk feel more tactile and created a mental model for space and depth that was lacking in the original. Secondary colors made notifications stand out more, as well as modal screens and the bottom nav.
Notifications were made more prominent with size and secondary colors. In some cases I opted to display a completely new page so that there was no way to continue without reading the message.
The new keyboard was set in a more familiar and ergonomic layout. Unused characters were also removed from the layout to simplify the design.
The modal for the Select Country input is a good example of how the stroke heavy design cluttered the screen. The list of countries was also extremely long, so I added the ability to filter by first letter.
Loading states were designed to flow more seamlessly into the pages.
Designing for growth
The Visitor Experience team was constantly thinking of new promotions for the museum, as well as how to expand the Met's reach. It was extremely important that new offerings and special deals could be added or removed from the kiosks. Key features that were added to the new kiosk design included:
- The ability to add more ticket items.
- Smart ticket items that would update according to the time of day.
- An Add-ons section for special deals and promotions.
- Ability to add more languages.
- Add more ways to scan different ticket types, like tour vouchers, special combo passes, multiday tickets.
The new Add-ons page could easily adapt to the number of deals the Visitor Experience chose to offer.
Pick up tickets flow
After the General Admission tickets flow was in a good place, I moved on to the Pick Up Tickets flow. This section was designed for anyone who had already paid for their ticket.
Over time, the Met plans to offer more ways to redeem tickets at the kiosks.
These images depict the kiosk screens after a ticket QR code is successfully scanned.
Membership flow
The Visitor Experience team was constantly thinking of new promotions for the museum, as well as how to expand the Met's reach. It was extremely important that new offerings and special deals could be added or removed from the kiosks. Key features that were added to the new kiosk design included:
These images depict the kiosk screens after a ticket QR code is successfully scanned.
Picking up Member tickets was simplified with big radio buttons, over the previous counter component.
The new screen for collecting tickets has a big arrow indicating where tickets will be printed.
The new billing form was split into two sections to make it less overwhelming and allow the keyboard to remain without covering any input fields.
Creating a design system
Although all the pages on the current kiosks had a similar look and feel, there was no true design system. This time around, I built a library of components and created a set of rules and guidelines for future designers to work from as the kiosk evolved.
Core visual styles
Designing for accessibility
The new billing form was split into two sections to make it less overwhelming and allow the keyboard to remain without covering any input fields.
