Portfolio Project 3: Live - A Concert Ticket Sales Responsive Web App Case Study

Project Overview

Key Challenges

& Restraints

Concert tickets buyers are subject to user experiences that range from frustrating to tolerable across many ticket sales services. Users often have to search other websites to get accurate seating information and frequently experience tickets sold to another customer during the checkout process.

Target Audience

Avid concert attendees who regularly buy tickets using online ticket sale services aged 18-50 based in the U.S.

Project Goal

Live is designed to enable artists to offer concert tickets directly to their fans and offer fans a rich interactive ticket buying experience that includes timed ticket holds and accurate seat views and offers a consistent experience across mobile and desktop devices.

The Product

Live is a responsive website that serves concert-goers with the best available concert tickets with interactive seating selection.

My Role

UX designer leading the Live responsive web app design

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design

Project Duration

December-June 2022

Understanding the User

I conducted 5 moderated studies with avid concert attendees who regularly buy tickets using online ticket sale services aged 18-50 based in the U.S.

Some assumptions included the participants were unsatisfied using the popular responsive web and mobile apps for buying concert tickets and that they would be motivated to use an app that would address these common pain points. During the interviews, I learned that this set of users prefers a highly interactive experience to help them purchase the best tickets as quickly as possible, and that they expect that current technology should be able to assist them.

User Pain Points

Dropped Tickets

Users are frustrated with dropped tickets during the checkout process. After taking a great deal of time to locate the best tickets, users find that their tickets have been sold and must repeat the process.

Ticket filtering not efficient

Ticket filtering functions take up a lot of space but offer few options or detail such as seat numbers. Sometimes tickets are sold within a range, not allowing for much choice in ticket purchases.

Seat views lacking

Users have to visit multiple websites outside of the ticket sale websites in order to get accurate seat views. If seat views are offered, they are not detailed enough.

Source of concert information

Users do not always see social media posts or spend time on ticket sale websites to learn about upcoming concerts. Also, pre-sale codes are often only published in emails.

Persona & Problem Statement #1

Terra is an avid concert-goer

who needs a better ticket buying experience because ticket outlets drop tickets and make the purchasing process labor-intensive.

Persona & Problem Statement #2

Henry is a frequent concertgoer

who needs a single app to research and buy concert tickets because it is time-consuming to research different websites and secure the best tickets.

Competitive Audit

An analysis of concert ticket sales competitors revealed gaps in offerings and opportunities that could be addressed with the Live app.

User Journey Map

I created an empathy map to identify Terra's pain points and possible improvement opportunities. One main theme from user research showed that users want to be able to buy the best tickets possible, as quickly as possible. This user journey map shows Terra’s emotional journey as she uses the app.

Starting the Design

Paper Wireframes

These paper wireframes explore different home page layouts with user enjoyment and usability in mind. The search bar is the most prominent feature followed by location and date functions on the home page, enabling relevant searches from the home page.

Digital Wireframes

Digital wireframes allowed me to strategize how to create a user experience centered around the seat selection function. In this user flow, the user locates a show of interest in their city, and then selects two seats in section 5.

Low Fidelity Prototype

In this user flow, the user locates a show of interest in their city (shown by default), and then selects two seats in section 5.

Usability Study: Findings

Round 1’s study findings revealed that while the user was able to select seats easily, they spent time hovering on the filtering UI.
Round 2 findings revealed the user flow could use more landmarks to guide the user through the flow, that users would like filtering by section, and that users noticed the accessibility function built in to the ticket filtering function.

Round 1 Findings

- Five out of 5 participants felt the process for finding seats was easy.

- Four out of 5 participants hovered over the number of tickets drop-down menu.

- Four out of 5 participants felt the seat details helped them to make purchasing decisions.

Round 2 Findings

- Five out of 5 participants wanted to see tickets sorted by section.

- Two out of 5 participants felt the low fidelity nature of this version is difficult to navigate due to lack of content.

- Five out of 5 participants felt accessibility was addressed via the ADA option.

Refining the Design

The usability study findings revealed that users would like filtering by section. Seats that are for sale in a selected section appear on the right side of the screen.

Accessibility Considerations

ADA-compliant (Americans with Disabilities Act of 1990 compliant) seating is a central ticket filtering option which enables users with disabilities to locate accessible seating within venues and make direct purchases of these seats.

This ticket sales app enables accessible seating tickets to be purchased at all stages of ticket sales as non-accessible seating tickets are sold.

This app provides the same information about accessible seats as provided about non-accessible seats, using the same text and visual representations. Information about location, price, view, and seat availability is provided. This is a legal concern outlined in the ADA.

High Fidelity Prototype

View Live's live prototype here.

Responsive Design

Responsive Designs

The designs were adapted across mobile, tablet, and desktop. Each design was optimized for the ways users interact with the app on each device.

Sitemap

Designing Live involved translating the design across different devices, so I developed a sitemap to keep a consistent user experience.

Live builds in accessibility compliance with ADA ticket filtering across devices.

Going Forward: Takeaways

Impact

“I like how this app gets me to the tickets I want quickly.”

What I've Learned

During this project, I learned the importance of enabling filtering at every step of the ticket/seat buying process, and adapting it across devices. For a real-life app, I would explore and test this aspect of the app rigorously.

Next Steps

Ideation & Usability Testing

- During this project, I learned the importance of enabling filtering at every step of the ticket/seat buying process, and adapting it to mobile screens. I would like to explore and test this aspect of the app rigorously.

- I want to explore the seat view option in greater depth as a way to provide an optimal user experience.

- I want to refine and test the mobile screen user experience.

Page updated

Google Sites

Report abuse