Rincon-SiteGraphics_Banner.jpg

Responsive Web Case Study

THE RINCON UX CASE STUDY

The best show in town.

 

Overview

The Rincon is a local concert venue in Tucson, Arizona. The typical user is between the ages of 18 and 40. The Rincon’s objective is to be the most popular venue in Tucson for small to medium-sized shows and events.

The Problem

Users often find purchasing concert and event tickets online to be a tedious process. Users often complain of concerns regarding the security of their personal information, or of being directed to 3rd party websites to complete transactions.

The Goal

Provide users with an approachable, straight-forward process for ordering event tickets online by introducing an updated purchasing flow.

My Role

UX Designer leading the redesign of The Rincon’s responsive website and ticket purchasing flow.

My Responsibilities

Conducting UX Research, Constructing Paper Wireframes, Planning and Executing Usability Studies, Producing Digital Wireframes and Lo-Fi Prototypes, Developing Hi-Fi Prototypes

Project Duration

September – October 2021

 

User Research

Research for this project involved interviews and empathy maps to understand the users that we were designing for, and what their needs involved. A primary user group that was identified through this research included avid and casual concert goers who are college-aged students and young professionals who wish for their ticket purchasing experience to be fast and easy to follow. Surveys confirmed this user group and their needs to be accurate, but also highlighted that most parties–whether a part of the primary group or an infrequent user–find their experiences to feel insecure, and fear that their personal information could be easily accessed by hackers during checkout.

User Pain Points

Navigation

Users consistently noted the lack of versatile navigation that is often found in ticket purchasing flows. Unlike other flows, like those in retail, fewer opportunities to move forward and backward are provided to users.

Personal Security

Some users noted the amount of personal information that they were required to share in order to complete a purchase to be too intrusive. 

Order Review

Similar to shortcomings with navigation, users often expect to have a place where they can efficiently review their order before completion. 

Persona: Allison

Problem Statement: Allison is an avid concert-goer who needs an easily navigable, simple and secure transaction process because they want their personal information and money to be protected from hackers.

“Some people like to save their money for shopping, I save mine for concerts.”

Bio

Age: 26
Education: Associate Degree
Hometown: Turlock, CA
Family: 1 dog
Occupation: Dental Lab Technician

Goals

Enjoy concerts with their friends

A straight-forward, easy process for buying concert tickets

Protect themself from identity theft

Stay financially healthy

Frustrations

“I’m not a fan of adding extra information if I don’t have to.”

“The paying experience better feel secure. I want my money well-spent money to be protected.”

Allison is a 26 year old Dental Lab Tech, living in Tempe. They enjoy Tempe’s music community, and frequently attend concerts with their friends. Allison sometimes likes to be spontaneous and purchase concert tickets on short notice–sometimes the same day as the show. So they get frustrated when the ordering process is complex, lengthy or not easy to navigate. Additionally, Allison is very serious about protecting themselves from identity theft, and will avoid spam calls or questionable websites/apps. If the ordering process feels this way, Allison will find another site to use. 

User Journey Map

Goal: Securely order and review concert tickets before purchasing, with little hassle involved.

Mapping Allison’s user journey revealed the importance of an easily navigable, secure and no-hassle purchasing experience.

 

Starting the Design

Sitemap

Navigation was a noted pain point for users, especially within the purchasing flow. It was important to keep the parent items simple, while the main goal of the site (purchasing tickets) within the SHOWS branch of the site’s information architecture

 

Paper Wireframes

Iterations were produced for the main pages, before features and elements were starred and incorporated into refined wireframes. A box layout was utilized to help make them easier to arrange across screens.

 

Digital Wireframes

With the insights that user research provided, we provided multiple avenues for users to complete tasks. For example, tickets for events and shows can be purchased starting from either the Homepage or Shows page.

Wireframes

Screen Size Variations

Usability Study Findings

For this project, a single usability study was conducted focusing on the ticket purchasing flow as it appears on the desktop-size variation of the site. Below are key findings from that study.

Back Buttons

Users pointed out that while navigation was versatile, a few key screens were missing the means to move backward in the process.

Promo Codes

During the checkout process, some users noticed that there was no place to enter a promo code.

Ticket Counter

Users unanimously suggested an alternative to the interactive element used to choose the number of tickets being ordered.

Account Sign-Up

Some users shared that signing up for an account with their name was sharing too much info.

 

Refining the Design

Mockups

Back buttons were added to all pages within the ticket purchasing flow. Additionally, the NAME entry field on the Account Sign-Up/In page was removed.

A PROMO CODE entry field was added to the purchasing flow for quick implementation. The idea is that a user would enter their code and the cost would update after hitting CONTINUE.

An Add (+) and Subtract (–) button were each added to the ticket selection page, to replace the drop-down used in the initial design.

Accessibility Considerations

Copper

Primary brand colors for The Rincon include black and white, so contrast was easy to obtain when they were used. However when using copper, colors were tested for accessibility and considerations were made about its use in buttons/navigation.

Landmarks

Landmarks are used on both the desktop and mobile versions of the site to give users an understanding of their place within the purchasing flow, or even while scrolling on major screens.

Alt-Text

Alt Text has been deployed and used on each page to help users who utilize screen readers.

Refined Designs

Screen size variations

High-Fidelity Prototype

The High-Fidelity prototype followed the same purchasing flow as the updated LoFi prototype. Additionally, some elements were added or moved to help improve the user experience. You can view the High-Fidelity prototype by clicking here.

 

Going Forward

Takeaways

Impact

Our target users disclosed that they found the design to be easy and quick to navigate, and that the overall look and feel of the checkout process helped to make the site feel more secure than others that they have utilized in the past.

What was learned

We learned that not every new UX project is going to uncover a profound insight that will help to bring a new defining element or feature to a user’s experience. Sometimes, users simply like to see the products they use regularly improved and refined.

Next Steps

1. Testing

Conduct a 2nd Usability Study with new participants to test out the High-Fidelity Prototype of the Desktop version of the current website.

2. Mobile Build

Based on feedback from 2nd Usability Study, adjust Desktop version and implement into High-Fidelity Prototype for the Mobile version of the website.

3. Mobile Testing

Conduct a final Usability study only focusing on the Mobile version of the website. Collect and implement feedback based on participant input.

FILED UNDER: USER EXPERIENCE, GOOD MUSIC