Project Overview
The Product:
A mobile-web application for a music venue with the ability to order tickets for upcoming shows.
My Role:
-
Lead UX Designer
The Problem:
Purchasing concert tickets can be a hassle when users have full time jobs and can't always make it to the box office on time to buy show tickets. When purchasing tickets, often times users would need to print out their ticket or sort through emails to find the receipt for it.
The Goal:
The goal of this project was to create an application for users to quickly and efficiently purchase tickets for upcoming shows they want to go to, while also sharing their experience with others. The tickets they purchased will be saved in the Igloo application so they can quickly pull it up when entering the venue.
The Scope:
I was responsible for conducting interviews, creating paper and digital wireframes, low and high-fidelity prototyping, conducting usability studies, measuring accessibility, and iterating designs.
Understanding the user
User research
To best understand the needs of a users, I created a user persona, conducted 5 moderated usability studies, and created empathy maps that gave me pain points and insights on what to design. The group of users I studied were users who go to concerts regularly, but are too busy to go to the box office to purchase their tickets.
The group that I studied confirmed the ease of ordering tickets through the app, while also giving me insight on other problems they faced including, entering their credit card information, navigation in the application issues, and ease of getting confirmation on their tickets.
Pain points
Time: Working adults don't have time to make it to the venues box office to purchase their tickets during the day.
Accessibility: Most online ordering apps require you to enter your email to have the tickets sent to, instead of holding on to the tickets for them.
Payment: Applications should have a fast and easy way to pay for tickets, but broader than just "Apple Pay" and "PayPal"
Persona
Goals:
-
Gain knowledge of different genres of music
-
Maintain a persona of being a music buff
-
Scout new artists to work with
-
Can't plan for shows months in advanced because of work schedule
-
Tickets sell out before he has time to get to the box office
Aaron Babbock
Problem Statement:
Age: 29
Education: BA in music production
Hometown: New York, NY
Family: Lives with roommates
Occupation: music producer
"I love everything that has to do with music, I just wish I could buy tickets from the palm of my hand."
Aaron is a high profile music producer who needs a fast way to order tickets to concerts because he has no time to go to the box office to purchase his tickets.
Frustrations:
User journey map
The thought process behind the user journey map came from researching similar websites and combining different user journeys to create the ideal flow. I would begin the process from the home page and follow the websites established journey map to gain perspective on what can be kept and what can be changed for my website.
Action
Determine which music artists are coming to perform.
Align the show that he would like to go to with time he is free.
Navigate the music venue application.
Buy a ticket.
Go to a show.
Task List
-
Look at the schedule for the venue
-
Look at dates
-
Determine work schedule
-
Find a reasonable show time
-
Settle on a show
-
Navigate application to add show to cart
-
Sign any kind of waivers
-
Put in credit card information
-
Put in personal information
-
Receive confirmation
-
Get to show
-
Find musicians manager
-
Find musician to work with
Feeling Adjectives
-
Excited
-
Stressed
-
Busy
-
Excited
-
Determined
-
Excited
-
Time Consumed
-
Determined
-
Having fun
Improvement Opportunities
-
Filter for specific kinds of music
-
Filter for specific days
-
Accessibility of application
-
Ease of wayfinding through application
-
More options for easier ticket checkout
-
Faster checkout
-
Backstage access for those in the music industry
Starting the design
Paper wireframes
Creating paper wireframes for each page of the app ensured that I thought through the details of the users flow. These different iterations of the home screen gave me ideas that I wanted to include in the final iteration of the home screen.
Digital wireframes
From the home screen the first thing the user sees is the Upcoming Shows section
The boxes would act as buttons for the shows, so that when the user presses it, they are led to more information about the show and how to purchase tickets
Before testing, I hadn't included this "back" button , but inserting it allowed for the user to go back to the list of shows in case they wanted to purchase more tickets.
I originally added a drop down option to change the amount of tickets the user
wanted to purchase, but later on I changed the design to a +/- design to add or subtract the amount of tickets the user wanted.
Before designing a more polished mockup, I made sure my wireframes were designed based on the information I gathered from my usability studies. What I found was that users want simplicity while completing their tasks of finding a concert to attend, and purchasing a ticket, so I made sure to design on what the users intent of the app would be.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of creating a profile, browsing shows, adding them to a cart, and then checking out the tickets they want to purchase.
Usability study findings
Round 1 Findings:
Round 2 Findings:
No commitment browsing
User wants to see the price of the tickets
More options to pay
User wants to have their ticket on the app
Easier, clearer buttons
Refining the design
Mockups
Before usability study:
After usability study:
Something small that was noticed in the usability study that I had missed was a small confirmation page of the ticket being added to the cart once it was selected. This gives the user a confirmation that they have added their ticket to the cart and can find it in the cart page.
Before usability study:
After usability study:
Another minor detail I didn’t think through until the second usability study was the readability on the social page when scrolling through. I made the “add content” button a bit translucent so you can still see the wording behind it.
Pictured above are key screens in the final design of the application.
High-fidelity prototype
The final high-fidelity prototype included all necessary pages to meet the user flow expectation. It also gives the user the tickets in QR format, that way they can easily access it when checking in to the venue.
Accessibility considerations
Used icons to help make navigation easier.
Used bold color against a light colored font to allow visually impaired users to easily navigate the application.
Used images of the performing artists to help users who may only recognize their favorite performer by their face easily recognize them and purchase the correct ticket.
Going forward
Takeaways
Impact:
Using Igloo to order tickets for upcoming shows helps the user feel considered. Igloo is created from a user that also purchases tickets online and would want something fast and easy. The impact “The Igloo” (the social media, picture sharing segment of the app) has on users is being able to see what the concerts look like before going, and to help connect with other concert goers.
What I learned:
Throughout this project I learned about all the small details that go into making an application. The empathy side of making an application never occured to me before and being able to conduct studies to better understand the users needs really helped me to think critically about what needs to be considered to put in an app.
Next steps
Continue to reiterate on the design of the application to add more details that the user would benefit from
Conduct another round of usability studies to bring to surface any new or existing pain points the user may have
Conduct more user research as the application launches to see what is working, and what is not working, and to see if I need to take away anything from the application
Thank You!
