BTS Concert Ticketing App
Project Overview
The project
One of the most popular artists in the world now has an app where their fans can buy verified concert tickets, sign up for customizable notifications, and more.
The problem
More and more, it’s getting harder for fans to purchase verified tickets at face value. Third-party sellers enable scalping and fan-to-fan resells at exorbitant prices. They also take part of the profits that could otherwise be taken by the artist’s company to cover expenses, pay artist and staff, and more.
The goal
Design an app that 1) cuts out the 3rd-party sellers to keep profits in-house and 2) allows fans to buy directly from the artist’s company without having to face scalping.
My Role
Lead UX designer and researcher
Responsibilities
User research, wireframes, & prototypes
User Research
Summary
I created a survey to understand the user groups I’m designing for and their needs. A primary user group I identified was BTS fans (ARMY) who are frustrated with currently available ticketing options.
The results of the survey confirmed assumptions that users are frustrated by scalpers and scammers, but research also revealed a disconnect in ARMY’s and casual fans’ paint points. Namely, ARMY experience more technical difficulties when trying to buy concert tickets. Other problems include an overall negative relationship with existing services and policies.
Pain Points
Scalping tickets
Buyers do not want to pay more than the original ticket price
Technical support
Existing systems crumble when met with a high volume of buyers
Scamming
It’s easy to be fooled into buying fake tickets online
Dynamic pricing
Sellers target fans of popular artists by inflating prices based on demand
75% of users are frustrated by scalping (at the time of the survey)
Persona problem statement
Kendall is a high school teacher who needs a way to buy concert tickets at face value because they want to go with their friends to see their favorite artist at a reasonable price.
.jpg)
Persona user journey map
Mapping Kendall’s user journey revealed how helpful it would be for users to have more in-app notification options and ticket explanations.
.jpg)
Design
Paper wireframes
I wanted to create a home screen that serves as a one-stop-shop for what a fan would want to know when a tour is announced. Key elements include a “Shows Near You” section, a "Notice" pop up, and a hamburger menu that offers easy access to account and notification settings.
Digital wireframes
This page shows the user all the upcoming shows in a simple and convenient list. Users are also still able to see the shows nearest their location, now highlighted at the top.
Since the ticket sale process is most stressful, I wanted to keep the ticket selection and checkout process familiar to users. My design includes a placeholder for an interactive seat map, a list of available seats, and list filter options (including number of tickets). These features will be familiar to concert goers.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of purchasing concert tickets so that it could be used in usability studies.
Usability Study
I conducted an unmoderated usability study with 5 participants. Findings from this study helped guide designs from wireframes to mockups.
a) Users could not distinguish between “Shows Near You” and “view all” flows
b) Users want to set up their account and add favorites before a ticket sale
c) Users like to have more control over ticket viewing options via filters
Refining the Design
Mockups
The icons used in the mockup tell the user how they can select the desired filters. The filter options will be finalized later with more user research, but I thought it important to include accessibility seating upfront.
Users could not easily distinguish between “Shows Near You” and “view all,” so I separated them into different sections and made the banner image a functional button.
To alleviate some of the visual clutter, I moved the “search” feature to the top bar.
I also added a “favorites” feature as suggested by study participants.
I iterated on my high-fidelity mockups to make the color palette more accessible by removing the use of the green buttons on white background without a border and limiting its use to the final “Get your tickets!” button. A more distinct button whose color contrasts with the others will increase the conversion rate.
I also studied other designs to create a more approachable, welcoming screen.
Additional accessibility considerations
Used icons and animations to inform users of state changes, not just color.
Iterated on the color palette to comply with WCAG standards.
Included “accessibility seating” options for concert goers with motor and hearing disabilities.
High-fidelity prototype
The final high-fidelity prototype explores the customization features users want, like favoriting shows and filter options. It also solved issues of users not being able to distinguish the different viewing options on the home screen.
Takeaways
Impact
This app gives fans confidence that they’re buying verified tickets at face-value.
One quote from peer feedback:
“This app is very easy to use.”
What I learned
It’s so important to consider accessibility first in your designs, from color palette to functionality. Getting feedback from usability studies is crucial for improving the product and satisfying the target audience’s needs.
Next steps
-
Users want to set up their account before a ticket sale, so I will build out the profile and account settings design for saving payment information, saving location information, setting up notifications, viewing past purchases, and more.
-
I will conduct additional usability studies with people who have motor and auditory disabilities so we can understand how best to accommodate their seating accessibility needs.
-
Once the app is built, I will conduct performance tests to simulate how the website will perform under increased stress and traffic during a ticket sale.
Done reading?
Check out another project!