AccessPass
An application for music concert lovers.
Product
AccessPass; Responsive Web Design
Timeline
January 2024 - May2024
My Role
UX Designer, UI Designer, User Research, User Interviews, Wireframing, Prototyping, User Testing, Branding
Tools Used
Figma, FigJam, Maze, OptimalWorkshop, Zoom
Problem
With so many music event ticketing platforms out there, it can be difficult to know which one can have the tickets one might be looking for. And many of those same websites offer a boring or overwhelming browsing experience. Not only that, the stress of having to go through a long checkout process turn away many users from seeing the artists they love.
Goal
The goal is to create and design a responsive website that is a user’s “one-stop” for all music events. A website that is customized to a user’s music interests while also providing an experience that is efficient, secure, interactive, and fun.
Solution
I created a platform that takes a user’s music interests and uses them to curate their music concert browsing experience. And from the customization, I created a homepage that shows user’s all music events based on their interests while also being fun and interactive. And finally, I created a fast, efficient, and secure in order to circumvent the current issues plaguing existing platforms.
Researching the Users
Research Goals
Understand specific pain points music concert goers have from music applications/website.
Create a resource that is comprehensive, efficient, and enjoyable experience.
Determine what music fans value & dislike the most in a concert/festival website.
Understand the competition and understand their pros and cons.
Understand the challenges that many users face before, during, and after attempted purchase.
Competitive Analysis
To identify any areas of opportunity, I studied platforms that AccessPass would compete against. With so many options, there is a demand in the market for a product that can for music lovers, no matter how large or small the event is. Not only that, the demand for an experience that is unique, secure, and efficient is also needed. The platforms that I studied were: Ticketmaster, Insomniac Events, AXS Events, and Eventbrite.
A chart analyzing the traits, strengths, and weaknesses of Ticketmaster, Insomniac, AXS Events, and Eventbrite.
Key Takeaways
All 4 platforms, although similar, have aspects they lack in:
Ticketmaster and AXS: Wide variety of events
Insomniac Events: Has clunky UI, geared toward music goers but only for Insomniac sponsored events.
Eventbrite: Only lists small events/concerts, Only has local music events.
None of the current set of products offer a specialized and complete music event ticking experience.
User Interviews
The goal of the interviews was to get an understanding of qualities and characteristics users of event ticketing websites find attractive and unattractive. Looking at their preferences, experiences, pain points, and expectations in order to learn what an ideal ticketing website/app looks like to potential users. I was able to interview 5 participants who have attended music concerts/festivals ranging between the ages of 21-28 years old.
After the interviews, I was able to to analyze the data and come up with these key insights:
Efficient and Secure Ticket Buying Experience: Utilizing innovative and modern solutions to prevent users from experiencing ticket losses, failed failsafe solutions, and general website unresponsiveness.
User Personalization: Allowing users to customize their browsing experience by having specific music events being presented depending on thier music interests.
Fun and User-Friendly UI/Interfaces: Giving users an enjoyable and memorable experience when interacting with the platorm while preventing user fatigue.
Ticket Price Transparency: Being able to clearly view and understand all tickdt fees to give users the confienced to purchase the tickets they want to buy.
This affinity map shows the results of the five interviews that I conducted and the consolidation of the data.
Building Empathy
Conducting the research on my users gave me a better understanding of the type of users who might use a web resource like AccessPass. But in order to get a better understanding of potential AccessPass users, I focused on creating resources that would help me get a better idea of who I needed to empathize with.
User Personas
Based on the insights that I gathered from my interviews, I created two personas to described two types of users, Kristin and Wade, using AccessPass. The important thing to I had to consider was to create a product that was easy to use for all skills levels of technology and completes any task the user needs to complete efficiently.
Persona #1: Kristin, represents a user who is trying to get into the music concert scene but is faced with issues like ineffective failsafe systems that prevent the user from getting the tickets they want.
Persona #2: Wade, represents a user who is experienced going to music concerts and showing the difficulties that new and old users have.
Storyboarding
I created two storyboards to describe two potential situations users could experience and how AccessPass could be used to help solve the situations.
One of the storyboards (left) represents a user who is experienced in going to music events but isn’t able to purchase tickets due to laggy/unresponsive services and ineffective failsafe systems. To solve the issue, AccessPass is shown to utilize a fast, efficient, and secure ticket buying system that instills a sense of trust and confidence in users.
The other storyboard (right) represent a user who is new to going to music concerts but is overwhelmed with the wide spectrum of platforms they could use. After getting a recommendation from a friend, the user chooses AccessPass and is able to utilize it’s personalization feature that allows users to input their music interests to get concert recommendations for their themselves and their friend group.
Storyboard #1: Kristin is trying to buy concert tickets but is not able to due to ineffective failsafes and heavy user traffic.
Storyboard #2: Wade has never been to a concert/festival and is trying to figure out which resource to use to find them.
Point of View (POV) Statements and How Might We (HMW) Statements
After developing personas and storyboards, I developed two sets of statements In order to pinpoint a key problem to solve, I created two POV statements to help show who I am designing for and what needs to be addressed. After that, I created a two HMW statements in order to help me focus and think about potential solutions to the problems. Here I have highlighted one set of the statements.
POV Statement #1: I’d like to explore ways to help new and old users have an efficient and secure ticket buying experience to alleviate the stresses and frustrations that currently affect consumers.
HMW Statement #1: How might we create an efficient and secure ticket buying system for new and old users that alleviates the stresses and frustrations of the current one?
POV Statement #2: I’d like to explore ways to prevent overwhelming users and causing fatigue by creating fun and user-friendly interfaces while customizing their experience by catering to their interests/hobbies.
HMW Statement #2: How might we create a system that informs users with price transparency and easy to understand information?
Feature Set
After taking into consideration of the POV and HMW statements created, I decided on to focus on both since a goal of this project was to improve upon the current experience of buying music concert/festival tickets. In terms of features, I sorted ideas into categories ranging from“Must-Haves”, “Nice to Have”, “Surprising and Delightful”, and "“Can Come Later”. I conceptualized the features based on my interviews and the research that I conducted on the competition. I prioritized the features based on issues my interviewees brought up during the interview process. But, of course with any project, one cannot include all features without considering time constraints. As a result, I only included the “Must-Have” features to stay focused on the necessities and the amount of time I had for development.
The feature set that I created to list out the features I thought about during the ideation phase.
Card Sorting Research
I wanted to get an idea on how my users understood and categorized information in order to create information architecture. I recruited a total of 4 participants whose age ranged between 22 to 27 years old. Each participant took part in a remote, unsupervised Open Card Sorting test where they sorted 43 cards into categories.
A challenge that soon found out was the downside of conducting open card sorting testing. By letting participants create the categories, I did not have any control over the amount of data that I would be able to get. Even with that difficulty, I was able to find two opportunities:
1st is a fast, secure, and efficient ticket buying experience.
2nd is a fun, interactive, and adaptable UI experience.
The results of the open card sorting sessions I held with 4 participants.
Design and Prototype
After conducting the research in the empathy phase of AccessPass development, I began to develop the flows and wireframes to develop the journey that a user would take to complete the tasks that the participants would be doing during tests.
AccessPass SiteMap
I created a sitemap that describes the account creation process and the ticketing buying process starting from the homepage. Doing so assisted me in the creation of user and task flows. It also assisted me in viewing the solutions and how they function in order to complete goals and solve issues.
This image shows the journey that a user could potentially go through when they use the resource with and without an account.
This image shows the journey a user could potentially go through when creating a new account.
AccessPass User and Task Flows
Utilizing the sitemaps that I made, I created two tasks that revolved two primary tasks that users of AccessPass would be doing when using the resource. The user flows describe two situations:
The log in and account creation flow
Buying music tickets through the events page.
Through the creation of the user flows, I was able to create the tasks flows that describe the ideal journey that a user should be taking to complete their task. And the following flows for that are:
The creation of an account
Buying tickets through the events tab with a personalized account
Something that I kept in mind when designing the flows were the issues that I was trying to solve based on the data I collected from my interviews and other steps prior to this point of development. Both flows would assist greatly in the creation of the wireframes of AccessPass and go on to influence the design of the layout of the screens.
Created two user flow charts that describes the log in/account creation process and the ticketing buying process.
Created two user flow charts that describes the log in/account creation process and the ticketing buying process.
AccessPass LoFi WireFrame
To establish a rough draft of the layout of AccessPass, I created several wireframes that were based off the user and task flows I created. Not only that, the biggest consideration that I took when designing was creating an enjoyable and efficient user experience. So in order to do that, I studied the competitors in the space to understand what makes their design so successful. I also took the data I gathered from my interviews to see where each competitor lacked and could be improved upon.
These wireframes are essentially the “skeleton” of the design of the product. Through this representation, I wanted to get a bare bones idea of how the layout would look in order to fulfill the tasks users would be completing from creating a new account to buying tickets.
AccessPass MidFi WireFrame
Developing the next version of wireframes are the result of working through the specific features of AccessPass and how I would want them to work. This next phase allowed me to make changes while also gaining a clearer idea of how the product will look when preparing the transition to Hi-Fi wireframes.
Taking the wireframes from Lo-Fi to Mid-Fi allowed me to get a better idea of the experience that users would have when using AccessPass.
AccessPass Moodboard
Before I transitioned into the Hi-Fi version of the wireframes, I needed to get an idea of what AccessPass represented. I wanted to know what values users should come to expect from a product like it. Not only that, I also wanted to settle on an official name. So I looked for inspiration from different websites and from competitors in order to get what I was looking for. And by doing so, I was able to get a concrete idea of what I wanted AccessPass to be, look, and represent to users.
This moodboard shows the different aspects of inspiration that I utilized during the transition from Mid-Fi to Hi-Fi.
AccessPass UI Components
Utilizing my mood boards and the input I received from my interviews, I wanted to create a brand and product that represented values like modern, secure, efficient, and enjoyable. As a result, I chose the following components for AccessPass:
Roboto font for its clarity and modern feel.
The logo was also a result from my own preferences of minimalist design.
The icons were chosen based on their ability to quickly express their purpose or function to users.
The color palette was chosen to give users a clear and easy to understand experience.
Notable components that I used:
I chose to utilize cards to express the most amount of information possible within the design space to help users make a decision.
I chose to use the specific “+/-” ticket selector due to how easy and fast it is to use for users to choose the amount of tickets they want.
Resources like “AccessPass” require a search bar in order to allow users to search up any artist they are looking for specifically.
AccessPass High Fidelity (Hi-Fi) WireFrame
By utilizing mood boards, interviews, personas, previous wireframes, and the various flows, I created the Hi-Fi wireframe. The different iterations starting from Lo-Fi helped develop the AccessPass’ aesthetic, design, and general flow. During the development of the Hi-Fi wireframe, I prioritized the flow or “journey” a user would go through in order to complete their goal(s). I wanted the user to enjoy using the product in a efficient way while not sacrificing any feeling of trust or security.
AccessPass Usability Test Interviews & Analysis
In order to gain valuable user feedback on the effectiveness of AccessPass’ design, I conducted usability tests with a total of 7 participants (2 Men and 5 Women). The participants ranged between the ages of 20 to 29, located in California, and either students or in their specified career.
Each participant was asked to complete 2 tasks while their progress was supervised remotely through Zoom while being supervised. Each test took around 20-30 minutes and was transcribed.
I created categories based on the data I was able to collect. I was able to improve AccessPass in 4 specific areas that was pointed out by my interviewees.Collection of data categorized in 4 sections to assist in the improvement of AccessPass. The sections I took into consideration were the areas of improvement, questions the users had, and the ideas my interviewees had during testing.
As a result, I made the following changes to my product:
1. Made the artist bubbles on the homepage larger and labeled for clarity. Created larger cards in the event section.
2. Utilized Spotify as inspiration for the music personalization section.
3. Changed the Sign Up background color and updated the hyperlinks on the pages.
4. Spaced out information in the ticket checkout section.
AccessPass Iterations
All of the participants had generally positive experiences with AccessPass during the testing. But after testing, participants had some good feedback that ended up improving the product after making the following necessary changes:
Homepage Updates:
Made slight edits to the search bar for visibility.
Artist bubbles size increased for accessibility and usability.
Changed the event cards to improve information viewing.
Added buttons to event cards to inform users where to press.
Before
After
Music Personalization Updates:
Changed the background color.
Added artist bubbles for interactivity and to remove “boring” feel from initial version.
Added a search bar to allow users to search up their favorite artists.
Before
After
Sign Up Page
Changed the background color.
Changed the bottom text size.
As pointed out by multiple testers, the hyperlinks were changed and updated for simplicity.
Before
After
Ticket Checkout Page(s) Updates:
Spaced out the information on the page to improve readability.
Changed and moved text around to improve hierarchy.
Increased the size of the payment buttons for improved visibility.
Changed overall “Delivery and Payment Info” text to prevent overwhelming user.
Changed the security code input process from a checkbox to a input field.
Before
After
AccessPass Final Prototype
Based on user testing and the iterations I made based on the data collected, the final prototype shows the journey that a first time user would go through when using AccessPass and buying a music ticket right after account creation. When creating the experience, my goal was to create a journey that would be able to get the user to where they want to go and do what they want to do as efficiently as possible. From browsing for events to the checkout process, the experience had to be intuitive and fun.
The following image shows the overview of the journey a new user would take when using AccessPass.
Reflection
This project was a big moment in my journey as a UI/UX designer. Being a music lover and a frequent concert/festrival goer, this project was quite fun to create due to my own hardships with ticketing websites. Before this project, I never created my own original idea, executed it, and developed a functioning prototype of it.
I learned many lessons during development of AccessPass. But the most important, and difficult, one that I had to learn was to not allow my inexperience to pause development of a project. There were many times when I would look at my work and spend more time than I should’ve trying to perfect my designs. I would be afraid to allow my creativity to flow due to not being a creative person to begin with but I soon learned that without failing, I would not be able to become the best version of myself. During the development of AccessPass, I learned that any change can make or break a product. As a result testing, especially from an early point, is so important. The process of creating AccessPass was such an enlightening journey. From user interviews to user testing, the whole process was rewarding.
In the end, I am proud of this project due to it being the very first one that tested my skills as a designer. Given the opportunity for further development of AccessPass, I would explore the following:
I would like to conduct further research and testing in order to make further iterations on AccessPass in the general design or add features that it may be lacking.
Talking with experts in the field to see where AccessPass lacks.