KELLY CHANG .

Background

Roundabout theatre company is a non-profit organization, which cultivates and spotlights plays and musicals, supports and collaborates talented playwrights artists, and builds educations for the future. Its website provides users the access to donating and buying tickets for a variety of shows and activities. As one of the school projects of Information Architecture and Interaction Design, I collaborated with 2 teammates, trying to improve the ticket-purchasing user experience for Roundabout’s website on desktop and mobile.

Learning Users’ Needs

Interviewing and observing the ticket-purchasing experience on the site with three user groups, including elderly people, theater fans, and foreign tourists, we got two major insights—

• Simplicity is the key
  Users are likely to become easily frustrated by misleading information on a webpage. It is important to have key information standing out, so that the ease of use of the website can increase.
• People are more attracted by images and rely on them
  People more rely on pictures instead of texts or long descriptions. They just don’t want to spend time on reading texts; while a picture may contain multiple meanings and senses, people just need to pay a glimpse and know the situation.
  ‍

Restructuring the navigation

To make the navigation of the site that meets users’ mental models, we employed card sorting and tree testing methods through Optimal Workshop, an online research platform that helps to make design decisions.

36 cards were created based on elements from the Roundabout’s site. Testing the card sorts with 26 participants, we identified the most commonly-used navigation labels and grouped the cards into 6 categories based on the results of Similarity Matrix and Best Merge Method on Optimal Worksop for tree testing.

Similarity matrix

Best merge method

Six navigation categories

We created 8 tasks for tree testing with 18 participants to examine and define the new sitemap that we constructed according to the results of card sorts, we found—

• Users expect related information to be at the same location
  ‍Users searched the category “Shows & Event” rather than “Your Visit”, which shows the location of the venues when trying to locate the venue location information of a particular performance. The reason behind that behavior may be that people expect information related to the location, time, and price of the performance to be located in the same category. In this case, it would be most intuitive to retitle a navigation section that more clearly defines where to find the venue information.
  
• Content labels should clearly represent their contents
  ‍Labels like “Programs and Education for Educators,” “Become an Educator for Roundabout,” and “Contact Roundabout’s Education Department” were ambiguous for users to find information about the educational partnership. Thus, we should make those content labels more distinguishable and more effective.
  

The final-defined site map

Inspiration

Analyzing 6 direct and indirect competitors, including Atlantic Theatre Company, New Victory Theatre, New York City Theatre, La MaMa, Madison Square Garden, and Barbican, we learned what factors lead to an effective and user-friendly website—

• The hierarchy of information must be clear and intuitive to the users in order for a website to have an
  effective organization.
  
• A visually appealing website will make for a more enjoyable experience.
  
• With clear visualization, an attractive and effective homepage should be easy to locate information and keep
  content simple.
  
• Websites should be optimized for all important tasks on mobile devices.
  
• Consistency throughout the site maintains brand language and identity. Strong consistency lets the user know they’re still participating in the site.
  

The six direct and indirect competitors

Design Exploration

Focusing on ticket-purchasing experience, we figured out possible flows to buy tickets and made the flow straightforward to buy tickets for both desktop and mobile versions.

The potential user flows

Building the prototype based on the flows of purchasing a ticket for The Last Match on November 18 at 7:30pm, we also thought about what users would expect to see on desktop and mobile versions. Accordingly, we built two different versions to validate our assumptions:

• Users might need a calendar to check the schedule for events on the homepage.
  
• Users might like to choose time and seat on the same page.
  

User Testing

Conducting the user testing with 6 participants on the task “you want to see the new play The Last Match. Find the performance page via two routes and add tickets to your cart for November 18 at 7:30pm” and observing their behavior, we confirmed the assumptions that —

• It is more convenient for users to check the schedule if there is a calendar on the homepage.
  
• Choosing time and seats on separate pages can help them more focus on that purpose.
  

We also found some major usability/UX problems as follows:

• “Highlight” should only contain news and events
  Some users were confused by why the currently playing shows were located in the Highlight section. To rectify this, we changed a “Highlight” section that contains news pertaining to Roundabout to a “What’s Happening” section that contains only the most current show being played.
  
• Reducing cognitive memory-load for better user experience
  It is much easier to recognize what is shown to users rather than to recall the information from users’ memory without help. During the process of the ticket purchase for a specific show, some users forgot what schedule they just chose when choosing the seat because there was no information indicating the schedule.
  
• An order summary listing detailed information is necessary
  When users check out, it is essential to have an order summary page that contains information pertaining to the time and location of the show, seat number, and total amount to be paid. It is important to list all of this information in one place, so the user is not required to backtrack to find information.
  

Final Design

After fixing the usability problems, we sharpened the content to be as concise as possible to augment readability with strong use of images, used bold font to make the information instruction clear, added a ticket-purchasing call-to-action on the banner to provoke what users should do on the site, organized the information to be more intuitive for buying tickets on the homepage, and built different paths for ticket purchasing without backtracking and frustration.

Desktop interactive prototype

Mobile interactive prototype

Reflection

What I’ve learned from the project are understanding the basic design process and realizing what methods I should use to tackle issues. I need to have conclusions or findings on each research or analysis step to inform what I should notice when designing. Also, for this project, we currently only improved the process of buying tickets, which is part of multiple problems of the websites, and there are still other issues waiting to be solved in the future.