ROKNTIX – Concert Ticketing App
Rokntix Ticketing App is an application for people to easily follow their favorite
smaller bands, buy a digital ticket, and use their phone to get into the venue.
ROKNTIX Ticketing App
UX | UI Design and Design Research
User research, Wireframing, Prototyping, Usability testing
Overview
The ask was to design a mobile ticket application. My interaction with these applications isn’t expansive, mostly finding the event, looking at dates, and purchasing the ticket.
I realized I needed to research more about ticketing applications and what types of applications were out there. I also needed to learn more about how people use ticketing applications and what works and doesn’t work for them. I needed to get more
information. I needed to follow a design thinking path to get more informed data.
“ I hate having to wait through opening acts. It would be great to know when the band is
actually going on stage. It would be convenient to just walk in as they are walking on stage.”
User Research
I started the process by first interviewing people who follow bands and go to shows pretty frequently. I focused on men and women between the ages of 18 - 55 who follow smaller local and national bands. I also talked with people in bands for their input on ticketing applications. The interviews were done on zoom. It helped me put together some early insights about what users wanted and also what
they had issues with.
Interviews
Pain Points
Waiting in line
Users expressed annoyance at waiting in line. It would be easier
to have a digital ticket that can
be scanned to keep people
moving into the venue.
Know when the bands on stage
Users expressed the annoyance
of having to wait through the opening acts to see their band. They wish they could be alerted
to when the main band was actually going on stage.
No paper tickets or will call
Users didn’t want to deal with paper tickets, will call or do door ticketing. They would love to have digital tickets that can be scanned as you walk through the door.
Group tickets, sent to each person
Users expressed their want to buy tickets for a group and easily send them to each member of the group.
Persona
After the interviews, I compiled the responses to the 15 questions that I asked each interviewee. I grouped the similarities across
each answer and then created my goals and frustrations list. I averaged the age of the interviewees and created an amalgamation
of this group’s answers to create a persona. It would help me better understand the user by having a tangible representation
of the info that I collected from the interviews.
Erica Benford
“I’m extremely busy between my career and being a mom. Going to see my favorite band live is my personal treat to myself. I want to
buy my ticket online from the band and just walk into the venue and
enjoy the show”
Age: 36
Education: Communications
Degree
Hometown: San Francisco
Family: Married, One Child
Occupation: Consultant
Bio
Erica is a busy professional and mom who still likes to make time to go out to support her favorite band when they are playing. She would rather support them directly instead of a large corporate ticket company. When she goes out she likes to be comfortable. She doesn’t like to
be stuck at a show for many hours waiting for her band to come on. She would love to know when the band is about to play. She would also like to have options for seating since venues sometimes don’t prioritize seating even though there is seating available. She also wants to be able to walk into the venue quickly by having her digital ticket scanned. She hates lines.
Goals
Support favorite band
Buy tickets straight from the band
Know when my band is actually playing
Walk into any venue with my ticket on
my phone without dealing with will call
Frustrations
One thing that is annoying is that many shows are just all standing room only with no options for balcony seats or VIP seating even though there available”
“Don’t know what your tickets are actually paying for. You don’t know who all are
on the bill.”“One thing that is annoying is that some venues don’t have a way to scan your phone in line so you have to go to will call to get it scanned. Then you have to go back in line
to get into the venue. I just want to get in quickly see the band and leave.”
Problem Statement
Erica Benford is a busy business consultant and mom with limited free time. She needs a reliable way to buy tickets online and get into the show without dealing with ticket lines.. She hates to wait in line to buy tickets or in the will-call line to get pre-ordered tickets. She is frustrated when she gets to a show and is stuck watching opener acts instead of coming in when her band actually is going on stage. Her time is important.
I worked on focusing on how end-user would go through their interaction with this application. I was able
to uncover more insights and new pain points that could be addressed through my research.
User Journey Map
To get a better idea about different ticket applications out in the market I did a competitive analysis of some mid-level and smaller applications you can find on mobile app stores. After compiling data about the applications into a competitive audit report I was able to get a better understanding of what is out in the market.
Of the applications that I researched, I saw that the basic function of finding your band, finding a date, and buying a ticket was pretty much the same. The core function of buying the ticket was pretty standard. They all had different ways of interacting with the music fans. One application focused on finding calendar dates to bands that are part of your playlist on Spotify®. Another application focused on any event and wasn’t focused solely on bands and music. A few focused on the fan side but also had powerful tools for the band and venue side. Letting smaller bands have more control of ticket sales and revenue tracking.
Competitive Analysis
Ideation | Wireframes
Based on the research I started sketching out page ideas on how to implement
the goals that were developed from the user research. I also compiled functions
across the competitor’s websites to give me more insight into how I would
move forward with creating the application.
Paper wireframes
As I worked out the sketches I kept at the forefront the end users’ busy schedules and how precious time was to them.
So I looked for ways to keep the function of the app focused on efficiency. One idea was to show all upcoming concerts in the area for a specific band. It would also, highlight the most
current show in relation to the current date.
Once the basic ideas of how the pages were sketched out I then build them digitally. I kept in mind the end-user’s need for efficiency and ease of use. Especially since my research showed that time was precious to these busy users.
Digital wireframes
Band page
Having intuitive navigation was always the goal. I changed my initial thoughts of top navigation to a bottom navigation layout since it’s closer to the user’s thumb. I also focused on simple iconography
for quick links to important functions. ie: search, tickets, tracking, and accessibility.
Quick links
Simple navigation
Digital ticket
A digital ticket can be scanned at
the venue for easy access show.
No need for a will call.
QR code scanned with another phone or POS system
Venue info, directions and map
Sign-in
Sign-in to application
Homepage
See bands and
upcoming shows
Ticket venue page
Concert venue info and ticket purchase
Ticket purchase
Select tickets, general admission info
Tracking
Search for bands
and favorites
Prototypes
Once the digital pages were created
I linked them up to build out the basic navigation of the end-users using
the application. Focused on:
Sign into the app.
Go to the homepage.
Find a band.
Click through the venue bio.
Click through the band bio.
Buy Tickets.
Confirmation page.
Get a digital ticket.
Low-fidelity prototype
Usability study
I did two rounds of usability studies.
I wanted to see how the end user
was able to navigate through the application. The main question was
“Were they able to follow the steps
of finding a band, buying a ticket,
and receiving a digital ticket?”
Through the studies, I found some
pain points to address as I moved
forward with the project.
Round 1 findings
1
Need search option
Labeled icons for easier readability
2
Easier use of profile
3
Round 2 findings
1
Less pages for sign up form
Cart is confusing
2
Take out confusing
next show info button
3
I fixed the pain points that were brought to my attention during the usability studies. I also cleaned up other issues that I noticed in the low-fidelity prototypes. Once I addressed those changes I went back and built out mockups of the app adding copy, iconography, and other pages that I needed for the application flow.
Mockups - B/W
After building out the mockup in black and
white I then started building out the color version. Introducing the main color, copy font, icon font,
and imagery of concerts.
Mockups - Color
Next step I started prototyping the color mockup of the application.
High-Fidelity prototype - 1
I linked all the pages from the sign-in to the digital ticket. I then ran another usability study. There were a few pain points that
surfaced after the study. There were a couple of adjustments to the design to help with efficiency and clarity for the end-user.
Usability Study | High-Fidelity prototype
Before usability study
The ticket process was streamlined.
Band info was moved to the band page.
The upcoming concert dates were too cluttered. I got rid of the venue marquees.
It was easier to track by just showing the date, time, and location. The Next Concert section was added to the top of the page. The search section and the hamburger menu were taken out since all
navigation is in the footer.
After usability study
I simplified the layout on the checkout page. It confused users having the checkout process on one page. The solution was to separate the process into a checkout list with its own section. It was easier to read with the information specified in each section. Also, the shipping method was taken out since physical tickets are not being printed or mailed. The tickets are digital on the phone. The cart icon was taken out since the quantity is part of the checkout process.
Before usability study
After usability study
After the usability study, I was able to fix some of the
pain points and adjust design features for an easier
flow through the application.
High-Fidelity prototype
Stronger contrast with colors for easier readability
Have link to an accessibility page for more customization for end-user outside the function on the mobile phones OS.
Icons have labels for easier readability
Accessibility considerations
ROKNTIX High-fidelity prototype
Click to watch the prototype function
Takeaways
“It was a straightforward experience. I felt like I knew where I was in the process at each point” Usability participant
This was a fun project working through the process of design thinking. The application still has some tweaks that need to be worked on. Having focused on a few specific pain points, I know other functions could be added to create a more comprehensive experience for the end user. I'm pleased with the work I did and know there are more exciting projects to come.