Sofar Sounds: Cultivating an Informed Search Experience
Sofar sounds is a business dedicated to curating intimate concerts in unique spaces. Currently, the search experience is limited to a single drop down. The goal of this study is to build an in-depth search experience for new users to feel well informed and book shows with Sofar Sounds on desktop.
Role
User Research
Product Strategy
UI Design
Interaction Design
Usability Testing
Tools
Figjam
Notion
Maze
Figma
Dovetail
Timeline
5 weeks
The Problem
Sofar sounds search experience consists of a single drop down menu which is both limiting and visually inaccessible. Sofar curates secret shows, the concept is exciting, but in order for users to trust being left in the dark they need enough information and intrigue to commit to booking their shows.
The Solution
To help improve the search experience we updated our search bar to contain three search criteria (location, dates, number of tickets), altered the display of the product to dark mode for accessibility, updated the event cards to be cleaner and streamlined across the site, and created an icon filtering experience of the search results.
Usability Review
In our Usability Review we identified “wow moments” and “pain points”. Empathizing with users allowed us to locate and reduce friction points in the search experience, so that we can improve the ease of use and accessibility to allow for more bookings to be made through Sofar Sounds.
User Interviews
We transcribed and synthesized data from 30 minute interviews using Dovetail. By gathering valuable data based on user experiences to understand their behaviors and motivations when booking concerts, we were able to ideate ways to improve those processes for them.
If I could go back, I would interview people who are already familiar with and interested in our product to collect data from that perspective and gather insights from people who are already motivated by a secret show concept.
Affinity Mapping
In our user interviews we identified their behaviors and motivations. By doing so, we discovered that users are driven by trust when it comes to booking concerts. Our interviewees typically book concerts with bands they already know, heard about from friends, or trusted musical publications. In order to motivate users to feel intrigue for a secret show, it is important the user feels they can trust the information of the product and Sofar's ability to curate a great show.
Primary Pain Point
Unclear Information - limited search bar and unclear filtering experience.
Secondary Pain Point
Inaccessibility - colors and visual displays.
Competitor Benchmarking
We moved on to competitor benchmarking to identify standards and solutions from both indirect and direct competitors that might be used to improve the existing experience. We focused on six key metrics to help draw unique comparisons and insights from competitors: strengths, weaknesses, ux, design, content, and opportunities.
Direct Competitor - Ticketmaster
Strengths: Use of Calendar to book dates and overlay when search drop down is accessed
Weaknesses: Cluttered design, too many pop-ups
Direct Competitor - Fest Ticket
Strengths: Clean minimal design
Weaknesses: Single drop down search bar, no search results page
Indirect Competitor - AirBnB
Strengths: Intuitive UX, step by step search experience with calendar and guest counters, overlay when drop down is accessed, clear clickable filter icons that are fun to use
Weaknesses: Decision overwhelm with filter icons
How Might We…
create just enough intrigue for users to book secret events through Sofar Sounds.
Ideation
Once we identified our problem - a limited search experience - we began to ideate solutions with a few different techniques.
Crazy Eights: We got our initial ideas flowing by sketching out 8 ideas for 1 minute each. This technique allowed us to come up with ideas that we could build upon and discuss together through more open discussion and less constrained brainstorming.n
Information Architecture: By mapping out the current content of the site, we identified where valuable information was missing in the search experience, and what priority that information should take in the hierarchy of the site for users.
Priority Matrix: With a Figma plugin we inputted our favorite ideas to determine the impact to effort ratio. We felt most excited about implementing the following ideas shown to have a high impact: a three sectioned search bar, improved event cards with a clean design, and filter icons.
What can we add
filter icons
dark mode display
What can we improve
three-sectioned search bar
cleaner event cards
User Flows
Current Flow: By mapping the current flow we could see what works well, the pain points, and where we could seamlessly integrate our design ideas.
Improved Flow: With this flow we visualized the functionality of our design ideas. We determined it would be intuitive for users to move through the search drop down in steps to simplify the flow. The initial search bar contains the most essential information: location, dates, and number of tickets. The user is given options within each drop down i.e. they can either select a date from the calendar component or input the date manually. After results have been pulled up, users can then narrow down their search to meet any other needs or desires they have such as, unique spots, low costs, etc.
Rapid Prototyping
Using Figjam we sketched our ideas in a low fidelity prototype. Wireframing allowed us to see how our solutions would be applied, with low effort. We used this stage to annotate the components we would be building and to envision the user flow from a visual perspective. This prepared us for designing and prototyping.
Styles & Components
By making component sets easy to access in the assets tab we could reuse, edit, and create boolean properties to toggle design elements on and off. Creating components this way enabled us to quickly create iterations of cards and search bars to increase the accessibility of the design while building our prototype.
High Fidelity Prototype
Our hi-fi prototype consists of a dark mode display, three-tiered search bar, updated event cards, and icon filters. While designing we felt challenged to create new components without over-stepping the Sofar Sounds design system set in place. The dark mode was a powerful solution to this because it captures the intimacy of the product’s purpose to create unique musical experiences, while also improving the accessibility of the brand colors.
Usability Testing
Utilizing the platform Maze I conducted unmoderated usability tests; evaluating learnability, efficiency, errors, and user satisfaction. I tested three different actions: search bar usability, filter usability, and navigating to a selected concert. Tester feedback confirmed the search flow to be straightforward and intuitive, but revealed missing interactions in the search bar component.
When utilizing the search bar criteria users discovered their selections didn't update. User were also prone to select the search button before beginning their data input. This task had a 67% mis-click rate. Next, the filter use task had an 80% success rate proving to be helpful to users. A minor error was discovered in one of the filter components - a great catch and a simple fix! Finally, users were tasked to select their concert. 100% of testers completed this task.
Key Learnings
Design clear feedback. When users are unable to receive apparent feedback from actions they will be left wondering if they were successful. Providing visuals that inform the user of success or failure prevents excessive clicking and creates a smooth path to task completion.
Users will inform you of what they need, by telling you what they don't want. In my user interviews, users had an easier time discussing bad experiences with booking concerts than good ones. We often don't remember what makes something good because it went that smoothly, but we clearly see what isn't working. When we identify friction points we can find solutions to reduce them.
Always test your products. I was experiencing technical difficulties when trying to complete my usability test, and I almost threw in the towel. However, when I solved the issue I was able to unveil so much valuable information about my prototype. Our biases will prevail if we don't allow others to give feedback on our work.
Next steps
My next steps in this case study would be to ideate solutions to create clear and enjoyable feedback when selecting criteria with the search bar component. With these improvements I would test the search bar's usability and begin the process of developer hand off. After the product has been developed this cycle of testing, ideating, and designing would continue on to make sure we keep up with user and business needs over time - there is always an improvement to be made!