Helping users find concerts they love by improving their web search experience

Project Overview
The Sofar Sounds website allows users to buy tickets to local concerts. The artists remain unknown to the ticket-purchasing user, and the unique location is only revealed 36 hours before the event.
Role
Research, ideation, wireframing, hi-fidelity prototyping, usability testing

Problem Statement

When I am searching for concerts I want to make sure I will be interested in the music, will be able to attend and the venue meets my wants and needs because the exact artist(s) and venue are unknown to me at the time of purchase.

Current State

Currently, searching for concerts is limited to a single drop down menu. Users can only search for concerts by city which is sorted by cities close to the user and most visited cities.

The Solution

We concluded that it was crucial to create a search experience that allowed users to find shows that interest them are able to attend since they have limited information about the show. To address this we added a way for users to input custom details into their search, provided more information about the show without giving away the artist or venue, and made the search experience more convenient.

The Process

Discover
Define
Ideate
Design

Usability Audit

We navigated the app step-by-step as the user would to gain a better understanding of how our user interacts with the Sofar Sounds website in its current state.

View complete audit in Figma

User and Business Frustrations

Primary frustration: Currently, users are only able to find concerts by location. The single drop-down search bar does not allow users to input other factors that determine whether or not they are able to attend the show such as date and distance. Therefore, making users spend unnecessary time browsing for shows that work for them.

Secondary frustration: Users are hesitant to buy tickets to concerts when they do not know the artist or venue. This hesitancy stems from unknowing if the user's wants and/ or needs will be addressed by the event. For example, the user may be concerned about the type of music at the show, the venue's seating, parking options and other amenities.

Competitor Benchmarking

We conducted competitor benchmarking to gain a better understanding of how users are interacting with other products, see the current UX/UI standards in the industry, and identify any gaps we can fill with our product.

View full Figma file

Information Architecture

We mapped out the IA of Sofar Sounds to better understand how we could improve the hierarchy of information on their website. We strived to help users complete their goal of finding concerts as seamlessly as possible.

Research Interviews

We conducted 3 user interviews to gain a deeper understanding of user's thoughts, beliefs, attitudes, behaviours and experiences when it comes to finding concerts, going to concerts and buying tickets.

We used Dovetail to create a tagging taxonomy and organized our findings by putting them into an affinity map.

View full Figma file

How Might We....

1) How might we allow our user to find local concerts easily and purchase tickets confidently?

2) How might we motivate our user to embrace the uncertainty of the Sofar Sounds experience?

Ideation

Next, we ideated using crazy eights and used a priority matrix to organize our ideas based on effort vs. impact.

User Flows

Our user flows were created to show the pathways our user can take while navigating within the app. This helps show us the existing routes and how our additions and improvements will affect the flow. Knowing the paths we needed to mockup saved us time and energy in the prototyping phases.

Features and Functions

Filter by genre(s)
Search by filter or distance
Search by date(s)
Filter by amenities
Restructure concert cards

Wireframing

We wireframed the main screens to gain a basic understanding of their final structure and to quickly visualize the pathways between them.

UI Styles and Components

The colour sets including primary, secondary, surface, text and additional informative colours used to convey messages to the user. We kept in mind to test new colours or fonts according to WCAG guidelines. A 12 column layout grid was used throughout the design process to ensure our interface followed a consistent spacing rule, and no context was cut off for the user.

Take a look at the interactive components in Figma

Prototype

Next Steps

We conducted a round of usability testing with Maze and asked users to complete 8 tasks. When we analyzed the results the stats showed there was a high bounce rate. However, when taking a deeper look at the heat maps we found that users were actually selecting the expected areas for most tasks. We figure there may have been issues with many users testing the prototype on their mobile phone instead of using a computer, and as a result, the prototype did not work correctly. Therefore, our next step would be to conduct a second round of usability testing- ensuring participants are using their computers and record their movements so that we can have a better idea of the user experience.