sofar sounds
Sofar Sounds is a concert ticket booking platform that offers surprise musical performances in unique locations. This design story focuses on improving Sofar's search experience on their website.
Role
I was in a team of two UX/UI Designers. We also conducted our own UX research.
Figma, Figjam, Whimsical, Dovetail, Maze, Artboard Studio
5 weeks of user research, usability audits, ideation, rapid prototyping and testing
Sofar Sounds
Sofar Sounds is a concert ticket booking platform that offers surprise musical performances in unique locations.
I was in a team of two UX/UI Designers. We also conducted our own UX research.
5 weeks of user research, usability audits, ideation, rapid prototyping and testing
Figma, Figjam, Whimsical, Dovetail
the problem
the problem
“because of my disability, I wouldn’t want to go to an experience like this. I would like to know what I’m getting into in advance.”
“because of my disability, I wouldn’t want to go to an experience like this. I would like to know what I’m getting into in advance.”
While Sofar Sounds already has a unique product with a definite target audience on the market, the current website does not have an optimized search experience, especially when it comes to accessibility.
While Sofar Sounds already has a unique product with a definite target audience on the market, the current website does not have an optimized search experience, especially when it comes to accessibility.
auditing The current sofar site
Under-utilized and unoptimized search experience
User drop-off when there are no events available in their area.
Limited accessibility considerations
Search bar is easily overlooked
Branding, color and font choices are questionable
Lacks proper hierarchy
Under-utlized and unoptimized search experience
User drop-off when there are no events available in their area.
Limited accessibility considerations
Search bar is easily overlooked
Branding, color and font choices are questionable
Lacks proper hierarchy
auditing The current sofar site
user interviews
user interviews
Our team conducted a series of user interviews focusing on what users find important when it comes to searching and buying concert tickets. These insights informed our decisions while ideating on the solution.
Our team conducted a series of user interviews focusing on what users find important when it comes to searching and buying concert tickets.
These insights informed our decisions while ideating on the solution:
When searching for an experience, most users prioritize the distance to the event over any other factor when presented with a mystery element.
When searching for an experience, most users prioritize the distance to the event over any other factor when presented with a mystery element.
Another important factor for our users is trust. They want to know that they’re buying into a good experience.
Another important factor for our users is trust. They want to know that they’re buying into a good experience.
Our user research revealed gaps in accessibility concerns at most concert venues.
Our user research revealed gaps in accessibility concerns at most concert venues.
Synthesis
How might we tailor the search experience for the user to accommodate distance, amenities and accessibility concerns?
Through affinity mapping, our team formulated two questions that focused our ideation process:
Through affinity mapping, our team formulated two questions that focused our ideation process:
How might we improve the user’s trust in a fantastic experience with Sofar Sounds’ mystery musical element?
How might we tailor the search experience for the user to accommodate distance, amenities and accessibility concerns?
How might we improve the user’s trust in a fantastic experience with Sofar Sounds’ mystery musical element?
competitive benchmarking
competitive benchmarking
Good use of chip tags to filter concerts
Effective hero image and branding
Event categorization make sense
Busy UI, too much going on
Great location filtering
Ticket and checkout page a bit cluttered
Our team realized that most event booking websites do not take accessibility considerations into account either.
Our team realized that most event booking websites do not take accessibility considerations into account either.
Good use of chip tags to filter concerts
Effective hero image and branding
Event categorization make sense
Busy UI, too much going on
Great location filtering
Ticket and checkout page a bit cluttered
Ideation
Ideation
Keeping these two key questions in mind, we had an ideation session consisting of brainstorming, analyzing and improving the search user flow, and Crazy 8s. To help us prioritize our numerous ideas, we created a priority matrix.
The improved user flow fixes the user drop off issue by showing users the closest concerts to them, even though these concerts may not be in their city. It also highlights how important it was for us to keep accessibility issues in mind and the needs of the user for a localized concert experience.
Keeping these two key questions in mind, we had an ideation session consisting of brainstorming, analyzing and improving the search user flow, and Crazy 8s. To help us prioritize our numerous ideas, we created a priority matrix.
- Current User Flow
improved user flow
The improved user flow fixes the user drop off issue by showing users the closest concerts to them, even though these concerts may not be in their city. It also highlights how important it was for us to keep accessibility issues in mind and the needs of the user for a localized concert experience.
- Current User Flow
improved user flow
The Solution
The Solution
After our ideation session, we decided on three key features we wanted to implement:
A search experience that automatically lists concerts by distance.
A filtering option that gives users control over the search results, highlighting accessibility and filtering out certain genres that users don't want to experience.
Redesigning the landing page to make searching more prominent and the site branding more consistent.
After our ideation session, we decided on three key features we wanted to implement:
A search experience that automatically lists concerts by distance.
A filtering option that gives users control over the search results, highlighting accessibility and filtering out certain genres that users don't want to experience.
Redesigning the landing page to make searching more prominent and the site branding more consistent.
Wireframes of a landing page, including an improved hero image and a more prominent search bar.
Wireframes of a landing page, including an improved hero image and a more prominent search bar.
We played with two options for the search results page: one option including a map view and another a listed view of the concerts. We decided to go with the listed view in the end as it was the most simple solution to our problem.
We played with two options for the search results page: one option including a map view and another a listed view of the concerts. We decided to go with the listed view in the end as it was the most simple solution to our problem.
colors and styles
colors and styles
A redesign of the overall look and feel of the website was imperative to increase the user's trust in the product. Our team decided to use a candlelight-like orange to underscore the intimacy of Sofar's concerts.
A redesign of the overall look and feel of the website was imperative to increase the user's trust in the product. Our team decided to use a candlelight-like orange to underscore the intimacy of Sofar's concerts.
High fidelity prototypes
High fidelity prototypes
Now the landing page looks more lively and on-brand. The search bar is also integrated into the hero section more prominently.
Now the landing page looks more lively and on-brand. The search bar is also integrated into the hero section more prominently.
Fixing the user drop-off issue by immediately showing users cities that have cities closest to them, even though this might further to them.
Fixing the user drop-off issue by immediately showing users cities that have cities closest to them, even though this might further to them.
We prototyped a ticketing system that includes a comment section for accessibility concerns.
We prototyped a ticketing system that includes a comment section for accessibility concerns.
We added a filter feature that enhances the search experience by allowing users to take control of results and adding an option to filter for accessibility.
We added a filter feature that enhances the search experience by allowing users to take control of results and adding an option to filter for accessibility.
key takeaways
key takeaways
User testing would be needed to verify the results of the redesign of the website
We wanted to add a social element to the landing page so that the branding is even more lively and consistent.
The genre-exclusion feature could potentially be confusing for users, as the usual application for checkboxes is inclusion instead of exclusion.
User testing would be needed to verify the results of the redesign of the website
We wanted to add a social element to the landing page so that the branding is even more lively and consistent.
The genre-exclusion feature could potentially be confusing for users, as the usual application for checkboxes is inclusion instead of exclusion.