DURATION

FEB 2022 - JUN 2022

TOOLS

Figma
Google Suite

SKILLS

User Research
Wireframing
Prototyping
User Testing
Design Systems

TEAM

Rachel Yap
Raymond Cao
Jamie Chou
Reece Kuramoto

My Role

I worked in a team of four under the supervision of a project mentor. Throughout the design process I participated in stand-ups, where our team could present our progress and receive feedback. 

Overview

CONTEXT

The Mondavi Center is a performing arts venue on the UC Davis campus. It has recently switched from print-at-home tickets sent via email to mobile tickets that appear on patrons’ accounts, which are then scanned at the door the night of the performance. 

THE PROBLEM

This change has presented numerous issues, ranging from technical difficulties with the tickets themselves, to confusion on the ends of patrons.

User Research

Defining our users: Our unique challenge is that we are designing for an audience that is less familiar with technology. Our audience is people that attend shows at the Mondavi Center, those of which are mainly middle-aged to elderly. These patrons are not technologically savvy and take longer to adapt to changes in technology, and are familiar with and prefer physical printed tickets.

Research goal: Gain insight into our audience’s background and identify pain points within the following categories: purchasing tickets, using the Mondavi app, and pulling up a ticket on the day of the event.

EXTERNAL RESEARCH

Competitive Analysis:

At the beginning of our research, we conducted a competitive analysis to understand both the existing Mondavi center website and app as well as competing ticketing platforms. 

Literature Review:

We looked into articles about accessibility, catering to an older demographic, transitioning to a new technology, and app and web interfaces.

As a result of this review, we were able to narrow down our focus to just the post-ticket purchasing experience. 

INTERNAL RESEARCH

User Interviews:

Our user interviews were a key contributor to finding user pain points specific the Mondavi ticketing process. We wrote up a script, set up a table, and talked directly to 10 show attendees at the Mondavi Center during the hour prior to the start of a show. 

The main takeaways we learned from user interviews is that:

• All interviewees purchased tickets on a desktop– no one had even heard about the Mondavi app.
  
• Overall resistance to using phones and the app, especially due to phone screens being too small to see.
  
• Too many disconnected routes to purchase and view tickets. The routes never merge, causing confusion at the door.
  

Mondavi Staff Interviews:

Although we primarily designed for the patrons and attendees at the Mondavi center, we also wanted to take into account how our redesign could affect the Mondavi center staff. It was helpful to get their perspectives on user pain points since they interact with issues their patrons face on the daily. 

At the conclusion of these interviews we learned that:

• Switching between multiple apps at the door in order to find their tickets is difficult for patrons.
  
• Email receipts are often confused with the ticket because of the lack of consistency between emails (i.e. Only select emails contain the ticket QR code).
• There are missing details on show-specific events and seat accessibility.
  

Settling the App vs. Website Debate: 

Ultimately we had to settle the debate between whether it was more beneficial for the Mondavi Center to 1) get rid of the app altogether and keep the post-ticketing process fully on their website, or 2) integrate the app into the post-ticketing process.

We revisited our literature review and dove deeper into this debate. We discovered that apps are:

• More interactive, personal, and allow for push notification reminders.
• There is also no internet required at the door, ensuring that patrons don’t have to rely on the on-campus internet and don’t have to wait at the door for their browser to load.
• Apps allow for one-time sign-ins, meaning that patrons no longer have to remember their account information and struggle with resetting their passwords at the door. 

Using just the website would be less of a learning curve and wouldn't require extra marketing costs to transition patrons to the app. However, we concluded that having an app long-term would save on time and money due to decreased calls to customer service and less confusion at the door. 

Ideation

"HOW MIGHT WE..." STATEMENTS

Based on our research, my team collaborated on three central "How might we..." statements to kickstart the ideation phase:

• Change aversion: How might we create a ticketing experience that helps patrons transition between physical and digital models?
• Access to event information: How might we promote the visibility and transparency of event-specific information to patrons?
• Access to tickets post-purchase: How might we bridge the gap between purchasing tickets online and accessing and presenting them on the day of an event?

JOURNEY MAPS

We created a journey map to trace and visualize the visitor experience at Mondavi from start to finish. We wanted to pinpoint what points in the process caused the most confusion, and we found that both visitors and the Mondavi staff are most overwhelmed during the admission process leading up to the event.

There are too many ways that visitors can receive and present tickets at the door. Although an array of options may cater to more individual preferences, these alternatives require Mondavi staff to frequently re-explain options to visitors which complicates the admission process.

REIMAGINED JOUNEY MAP

We restructured and consolidated to create new paths that are free of unnecessary and confusing factors. Our new journey map streamlines several overlapping flows into two clear paths:

1. The digital ticket track: Previously, visitors could access their QR codes through a variety of options. Now, visitors have two ways to access digital tickets: in their account online or through the app.
2. The physical ticket track

Prototyping & User Testing

A/B TESTING

We conducted two rounds of A/B testing throughout our prototyping process.

Calendar A/B Test:

We wanted to test if having a calendar in combination with a list of events was actually necessary as opposed to only having a list. We found that almost all users found the calendar to be more intuitive to use in locating events as opposed to only having a list and were immediately able to understand its purpose. Users often opted to use the arrows at the top of the calendar for navigation and were all able to easily complete any task we gave them involving locating an event mostly with easy.

Card vs. List View A/B Test:

During our initial interviews, we noticed that many older users frantically scrolled up and down when they could not find something on their screen. So, we conducted an experiment to test whether users preferred to scroll vertically or horizontally.

We found that most users preferred the "List View" with the vertical scroll. Users pointed out that it was easier for them to scan multiple events at once and felt that it actually had a lighter cognitive load since cards display only necessary information.

USABILITY TESTING

We conducted another round of user testing later on in the project. We set a success metric to determine if our prototype was intuitive and easy to navigate. We chose to measure the number of taps the user must use to achieve their goal. Ideally, users would find a specific event in less than two clicks, which four out of seven of our participants were able to achieve. 

High Fidelity

In our final prototype, patrons can seamlessly...

FIND EVENTS

Calendar

We followed design patterns from popular apps like Apple Calendar to minimize confusion. This calendar acts as a point of transition for patrons, with the same structure as a paper calendar but with digital interactions. 

Having a calendar take up more than half of the screen made it difficult for users to scroll through upcoming shows, so we designed a collapsed weekly view of a calendar as well.

Search

As for the search function, we wanted to maximize vertical screen space to fit in as many visible events as possible, so we opted for a search button that would bring users to a dedicated search page. For the search bar itself, we decided to keep things simple and used placeholder text to give users an idea of what they can search for, as we found in user interviews that patrons were sometimes confused by what they could use the search bar for.

PULL UP A TICKET

We saw a need to help patrons transition from physical to digital tickets. Now that patrons can’t hold onto tangible tickets, many are unsure of what to present as their ticket: the email verification? The order receipt? QR codes? This taints the visitor’s experience and distracts Mondavi staff with recurring issues.

Our Mondavi app helps users to quickly pull up their tickets. Starting from the home screen, users scan the page for the card that corresponds to their event, then click the card to access their tickets.

STAY INFORMED

One of our users’ main pain points was that they would get confused by the different event-specific details - for example, some events require masks while others don’t, and this information is often unclear and difficult to find. With this in mind, we created a simple legend that would help patrons quickly and concisely get all the information they need about the event. The three different categories of information include mask requirements, food/drink restrictions, and allowance of pets. 

BE AWARE OF ACCESSIBILITY

Because many of our patrons are elderly, they often will need additional seating accommodations. We found through our research that patrons with disabilities won’t realize that their seat is inaccessible until they get to the venue. 

Confirmation Email Redesign

User interviews demonstrated that many people were confused by the confirmation emails and on how to find their ticket QR codes. To bridge this gap, we redesigned the confirmation email with readability and Mondavi app marketing in mind. 

COMPILING CONTENT

We started out by reviewing the original confirmation email and compiling the essential information it contained. Then we did a literature review of confirmation emails from various other ticketing platforms to get a sense of design patterns within them. As you can see here, we narrowed down the essential information and organized them into sections. 

FINALIZED EMAIL

From our interviews with Mondavi staff, they emphasized that patrons at the Mondavi center valued the social aspects of face-to-face customer service. Therefore, we began the email with a friendly greeting that sets the mood for a potentially unfamiliar digital experience.

We felt that event details, especially regarding seat accessibility, were missing from confirmation emails, so we made sure to include that information.

Oftentimes patrons are adverse to change because they feel anxiety about failing at navigating a new system. We included a section about what to expect on the day of the event to help patrons prepare ahead of time. This also will increase efficiency at the door. 

The last feature highlight is our call to action. We want to transition patrons to the new Mondavi app, so we put lots of visual emphasis on the button that asks patrons to download the app to view their tickets. The secondary button at the bottom still allows access to tickets through the website.

Takeaways

I came into this project wanting to hone my research abilities. I pushed my team to take our time and dig deeper to understand our audience's needs. I think I was successful in learning more about how to conduct user interviews and A/B testing, however, I wish that we had asked for mentorship more often throughout our research phase. 

Additionally, I learned a lot about designing for accessibility. My attention to detail aided me in identifying edge cases and places where readability could be improved.