Nonprofit

ArtsQuest


UX/UI Design & Research // Web Design


ArtsQuest is a 501(c)(3) nonprofit organization providing access to art, culture and educational programs for the diverse residents of the Lehigh Valley and others who seek access to our community.


During the evaluation of the procedure for procuring tickets for an event via the ticketing website, it was ascertained that the website in its current state is voluminous, unwieldy, perplexing, and intricate. In light of this, a complete overhaul of the website was deemed necessary, ranging from the e-commerce services to the checkout process. Following meticulous assessment and comprehensive research, as well as wire-framing and user testing, a user-friendly and responsive layout was designed. Additionally, the design was inspired by the local atmosphere and the colors of ArtsQuest, resulting in an aesthetically pleasing appearance.


Skills Include: Data Analysis, Competitive Analysis, Target User Research, Wireframing, Prototyping, User Testing

View Invision Prototype >

PROCESS FLOW


Initially, a thorough examination was conducted on ArtsQuest's ticketing website, followed by the development of a process flow that comprehensively outlined the intricate stages involved in acquiring a ticket. Subsequently, possible solutions were contemplated and documented in red for further consideration.

Feature List


Subsequently, a comprehensive feature list was generated, itemizing the functionality of the revamped website as well as any additional features that could potentially enhance user experience. Extensive brainstorming were conducted in order to identify and incorporate various components that would optimize the ticketing site and provide an enhanced user-friendly interface.



Filter by: Price // Main Site // Location // (Banana Factory, Steel Stacks) // Age // Seat by Location // Time of Day

CHECKOUT: Find a Home for Donation Button // Promotion Box Smaller, To the Side // Gift a Ticket/Experience // Promo Code Field at the End Only // Name on Tickets // Email Confirmation // Paypal Option

GENERAL: Display Sold Out Event with Gray Box or "Sold Out" // Instead of Multiple Entries have Time Selection Option // Share Event on Social Media

SEATING: Key for Diagram Prices // Better Interactive Map // Option to See Handicap Seating

SHOPPING CART: Drops Down or Pulls Out for Easy Access // Option to Edit Ticket Seats or Ticket Numbers // Easily Remove Tickets from Cart // Time Pop Up Allows You to Add More

LOG IN/SIGN UP: Option to Use Google/Facebook to Log In/Make an Account // Guest Checkout = No Log In // Easy Sign Up Option with Email and Password // Email Sent Later to Complete Profile

INFORMATION: Have Address for the Location of the Event // Description // Hover to Allow Use to See Amount of Seats Left and Ticket Price Range

Competitive Analysis


Research was conducted with the aim of identifying competitor websites and analyzing their features. It took into account various components that would be utilized on the website, as well as the consideration on how other companies tackle shopping carts and checkout processes. Below are my opinions on what features I liked that added to a positive user experience.



Bellroy
1. An account creation is not mandatory for purchase completion.
2. Given the limited number of products, the website has a simple, one-page layout, which eliminates the need to navigate through numerous pages.
3. The checkout process is seamless and effortless, ensuring optimal user experience.
4. It is effortless to review previously inputted information, and the items in the shopping cart are prominently displayed, guaranteeing ease of use and enhancing visibility.


Vera Bradley
1. The product count is configured to commence automatically at a quantity of one, thus facilitating the "Add to Bag" process.


Whitaker Center
1. A simplistic and well-organized layout
2. Narrowed event categories that optimize user experience.
3. The absence of an overwhelming need to scroll through different event types in the drop down.
4. An aesthetically pleasing and well-designed appearance.


Hard Graft
1. The ability to select and add items to the cart without the need to navigate to a separate page.
2. A drop-down shopping bag that displays all items that have been added to the cart, enhancing visibility and convenience for users.


The Fulton
1. Incorporation of visually appealing animations.
2. A clean and minimalist design
3. A straightforward calendar layout with an accompanying symbol key code.
4. An interactive diagram that provides users with a comprehensive view of seating sections and their corresponding prices and descriptions when the cursor is positioned over them.
5. Alternative options for account registration and login.

Personas


Following a comprehensive evaluation of the website's design and functionality, seven distinct personas were created, each of which represented potential users of the ArtsQuest Ticketing Site.



Roslyn
Age: 28 // Occupation: Stay Home Mom // Previously: Art Teacher

Roslyn, a dedicated homemaker, spends most of her time caring for her young daughter, who has not yet started attending school. With her keen eye for detail and a penchant for seeking out new and exciting artistic endeavors, Roslyn is always on the lookout for opportunities to engage in creative pursuits.

Action Items
1. Roslyn is interested in finding opportunities for her daughter to socialize outside of their home environment, and is particularly keen on enrolling her in multiple art camps due to her daughter's love for art.
2. Given her daughter's tendency to be constantly on the move, Roslyn is seeking a fast and efficient transaction process that will allow her to complete her purchase with minimal delay.

Lily & Ryan
Ages: 21 // Occupations: College Sophomores

Lily and Ryan, who have been in a relationship for two years, share a deep affinity for food, festivals, and music. Both hailing from the Lehigh Valley, they share a strong appreciation for the city of Bethlehem, and frequently seek out opportunities to experience the unique cultural offerings of the area together.

Action Items
1. Ryan is interested in purchasing tickets for an upcoming food experience as an anniversary gift for his partner, Lily. He intends to make this purchase as a surprise for her.
2. However, due to a lapse in memory, Ryan only remembered about their anniversary while he was riding as a passenger in a vehicle driven by a friend. As a result of his friend's poor driving skills, Ryan is experiencing difficulties typing on his phone, but is still eager to make the purchase as soon as possible.

Robert
Age: 75 // Occupation: Retired // Previously: Factory Worker

Robert is a doting grandfather who cherishes spending quality time with his grandchild. During weekdays, he takes on the responsibility of babysitting his grandchild while her parents are at work. He takes great joy in witnessing his granddaughter's happiness as she laughs and has fun.

Action Items
1. Robert, who is not accustomed to computers, struggles to operate his relatively new PC. He is barely able to turn it on and navigate the internet.
2. As a result, he easily becomes frustrated when using the computer. Despite his technical difficulties, he wishes to explore activities that he and his granddaughter can enjoy together during the day.

Jamie, Taylor, Josh, Hallie, Greg
Age Range: 24-28 // Occupations: Co-workers & Managers at a Hotel

A close-knit group of friends, who first met while working together at a local hotel, regularly engage in communal activities to alleviate stress and build stronger connections. One of their favorite pastimes involves visiting local bars and indulging in delectable cuisine.

Action Items
1.The group is intrigued by Artsquest's ticket site and want to learn more about the concerts. However, they are experiencing difficulty locating pertinent information, such as the event's location and description.
2. Greg has attended a concert through Artsquest before but has forgotten his login credentials. Despite attempting to recover his account via the "forgot password" option, he is unable to do so. This frustration prompts him to create a new account.

Jon
Age: 30 // Occupation: CEO of Company

Jon is a distinguished individual who holds the prestigious title of CEO for a Fortune 500 company. As a successful businessman and savvy investor, he has achieved millionaire status through his exceptional leadership and entrepreneurial prowess. Despite his busy schedule, Jon finds pleasure in the finer things in life, such as indulging in his passion for beer and developing a refined palate for the perfect brew.

Action Items
1. With a busy schedule, Jon waited until the last minute to plan his date for the weekend. He wants to impress his date by taking her to a comedy show, but he needs a ticket with great seat location that is available, regardless of the show.
2. As a busy CEO, Jon needs a quick and efficient way to purchase tickets while on the go, using his mobile phone.

Anna
Age: 16 // Occupation: High School Junior

Anna is considering a profession in the arts, but the resources for the art program at her school are limited, leaving her with few opportunities to expand her skills beyond drawing and painting. Despite being glued to her phone, Anna enjoys venturing out of her comfort zone and exploring novel endeavors.

Action Items
1. As Anna relies heavily on her mobile device, she desires the ability to conveniently make purchases from her phone for enhanced ease of use.
2. Anna finds it cumbersome to create separate accounts for every application and website she interacts with, and prefers a streamlined approach to accessing online services.

Mike & Jenna
Ages: 35 & 38 // Occupations: Accountant & Social Worker

Mike and Jenna are childhood friends from the same neighborhood. Although they are not married, Mike's family and Jenna's family are close. Mike has a wife and three children under the age of eight, while Jenna has a husband and two children around the same age as Mike's two oldest. Both families enjoy spending time together and love doing activities that involve their children and friends.

Action Items
1. Mike and Jenna plan to take their families to a kids' concert together. They want to ensure that their families can sit next to each other and prefer to make a single transaction but pay separately for their tickets.
2. Given that Mike needs to purchase five tickets for his family, he would like to browse the available concert options and select the most affordable one.

Final Process Flow


In order to enhance the user experience and simplify the website usage, I referred back to the initial diagram to determine the modifications required for the final process flow. Following the revisions, a new system was established to streamline the flow of events. Below is the revised diagram.

Wireframes


After conducting thorough research and gathering relevant information, I began the process of creating paper wireframes for several pages intended for both desktop and mobile versions of the website. Collaborating with my peers, I engaged in several rounds of revision to create a design that would meet the user's expectations in terms of functionality and user experience.

SCENARIOS


In order to evaluate the usability and design of my website, I developed a task script to be administered to users during testing. The script was designed to provide a structured approach to testing and evaluating the website's functionality and user experience. Through careful consideration and analysis of user feedback, I was able to identify areas of improvement and refine the design of the website to better meet the needs and expectations of its intended audience.



1. You want want to purchase a single ticket for the Blast Furnace Blues event.
2. You want to wants to browse all events and then book a ticket for the James Hunter Six concert.
3. You realized you lost your tickets. You need to reprint your ticket for your Drawing Realistically class.
4. You want to log in to their previously created account.
5. You want to find and register for an art class or camp.
6. You want to create a new account.
7. You add Drawing Realistically to your cart but then you decide you don't want it anymore
8. Mobile: You considers making a donation, type in your inforamtion, but then decide not to go through with it.
9. Mobile: You want to navigste back to the home page.
10. Mobile: You want to share an event on social media

User Testing


At the finish of the project, my design went through three sets of user testing, improving upon the last each time. By the end, I was able to gather a lot of information from our users. It is so important to user test to see how the average person will react and engage with your website. Here are the write-ups from each user testing. They are notes on what the users would click on, how they would react to certain situations from the script and their feedback on any more improvements for the redesign.



1. You want to purchase a single ticket for the Blast Furnace Blues event.
Round 1: 4/4 participants were able to complete the task successfully by typing "blast furnace blues" in the search bar. However, it was discovered that the billing button was not linked, and needed to be fixed for a better user experience.
Round 2: One participant utilized the drop-down menu to select the desired event, while another utilized the "upcoming events" feature to locate it. 2/2 people were able to successfully complete the task.
Round 3: 2/2 participants navigated my website clearly.

2. You want to wants to browse all events and then book a ticket for the James Hunter Six concert.
Round 1: 4/4 participants successfully completed the task by typing "James Hunter Six" in the search bar.
Round 2: One person used the search bar. One person used the Upcoming Events section. 2/2 participants were able to successfully complete the task.
Round 3: 2/2 participants navigated my website clearly.

3. You realized you lost your tickets. You need to reprint your ticket fo your Drawing Realiztically class.
Round 1: 2/4 participants were able to locate the ticket without any difficulty. One participant required a small hint and the other participant could not find it without being directed where to go. Both participants clicked on the correct button but did not happen to see the option in the drop down menu.
Round 2: 2/2 participants were able to successfully complete the task by clicking on the profile button.
Round 3: 2/2 participants navigated my website clearly.

4. You want to log in to their previously created account.
Round 1: 4/4 participant successfully completed the task. They went straight to the log in button
Round 2: 2/2 participants complete the task by clicking the profile button.
Round 3: 2/2 participants navigated my website clearly.

5. You want to find and register for an art class or camp.
Round 1: 4/4 particpants successfully completed the task using the category drop down.
Round 2: One participant utilized the drop-down menu, while another utilized the search bar and then clicked on the filter option.
Round 3: 2/2 participants navigated my website clearly.

6. You want to create a new account.
Round 1: 3/4 participants successfully completed the task. 2 participants searched the name, and 1 participant navigated to the 'Upcoming Events' section to find the information.
Round 2: 2/2 participants were able to successfully complete the task using the same method as the first test group."
Round 3: 2/2 participants navigated my website clearly.

7. You add Drawing Realistically to your cart but then you decide you don't want it anymore
Round 1: 3/4 successfully completed the task. Two of them searched for the event by its name, and one person went to the upcoming events page to find it.
Round 2: 2/2 participants were able to find the event successfully. One person used the drop-down menu to select "classes & camps" to find the class, and another person used the search bar to find the class. The button to find the class worked effectively for all participants.
Round 3: 2/2 participants navigated my website clearly.

8. You considers making a donation, type in your inforamtion, but then decide not to go through with it (mobile).
Round 1: 4/4 participants experienced difficulty in finding the donation button. They initially searched for the button by scrolling down the homepage, but were unsuccessful in locating it. Subsequently, they checked the hamburger nav menu where the button was placed too far down, requiring further scrolling to access. This design flaw created confusion and hindered users from finding the button efficiently.
Round 2: 2/2 participants continued to search the homepage first with the implemented changes, but were able to locate the button successfully in the navigation menu.
Round 3: 2/2 participants navigated my website clearly.

9. You want to navigate back to the home page (mobile).
Round 1: 4/4 participants successfully completed the task by navigating to an event and pressing the home button.
Round 2: 2/2 participants were able to complete this task
Round 3: 2/2 participants navigated my website clearly.

10. You want to share an event on social media (mobile).
Round 1: 4/4 participants were able to complete the task. 3/4 particpants selected the event from the home page to share, and one person hit concerts to search and choose and event. The only thing that needs fixed was that the social media icons were not linked.
Round 2: 2/2 participants successfully completed the task by selecting an event. Both selected and event from the homepage, and scrolled to the bottom of the page.
Round 3: 2/2 participants navigated my website clearly.

3 Most Serious Usibility Problems — User Testing Round 1
1. The donation button on the mobile nav was placed too far down and difficult to find. Scrolling to locate it was not an ideal user experience.
2. Some buttons were not properly linked to their intended actions.
3. Enlarging the type of clickable elements, such as the navigation menu and account dropdown, could improve user interaction.

Based on the user testing, should I create any new questions?
Question 9 would be revised to: "After reading the event description, you decide to navigate back to the homepage to find another event."