Sofar Sounds is a platform that enables users to search for gigs and concerts both locally and globally. Through a comprehensive redesign, the project addressed several limitations of the original platform, resulting in a more streamlined and effective concert search experience.
Involvement
Led the redesign alongside a teammate.
Simplified and optimised the search flow for users through extensive research and iterative design.
Timeline
5 weeks
Achievements
Delivered a more streamlined user experience, which is aimed to improve conversion rates and increase bookings for the company by 20%.
The previous search experience had limited functionality and flexibility, leading to user drop-offs and decreased bookings. Search results lacked a clear hierarchy and a map view to indicate concert locations. Recognising Sofar Sounds' goal to boost bookings, this was identified as a prime opportunity to enhance the search experience.
A thorough review of Sofar Sounds' existing search functionality was conducted to pinpoint pain points and areas for improvement. Using Figjam for the usability review facilitated seamless collaboration. Key observations included:
Inability to search by date and time, limiting users to city-based searches. This restriction could lead to user drop-offs, negatively affecting conversion rates and business performance.
Absence of filter options, leading to similar issues as mentioned above.
Typography hierarchy problems, such as the lack of bold font variants to establish a clear hierarchy. This could result in users spending more time scanning the page due to unclear information hierarchy, increasing time-on-task and drop-offs, ultimately impacting the business negatively.
Successful elements, such as illustrations and colour schemes, were identified that elicited positive user reactions, guiding decisions on which features to retain or enhance in the solution.
Competitor benchmarking is a vital step in user research, providing insights into commonalities and differences between the product and others. This analysis helped identify trends and user interactions with competing products. Notable features observed in competitors included:
Well-designed search bars, with one incorporating four fields for enhanced search efficiency.
Consistent layouts on results pages, aiding users in remembering the layout more effectively.
Maps on results pages to indicate event locations.
User interviews via Zoom were conducted to gather direct insights. These interviews validated feature decisions and prioritisation choices.
An interview script focused on the most relevant questions for the case study was developed. Several Sofar Sounds users from various departments were engaged to understand how they search for gigs and concerts and their feedback on the current flow/experience. The user interviews on Zoom were then transcribed in Dovetail, and the platform was used to conduct tagging and affinity mapping. Main pain points identified included:
Inability to search by artists.
Lack of a visual map displaying concerts/gigs in their vicinity.
Inability to search by price.
Mapping out user flows allowed for visualising the paths users take to achieve their goals. The current user flow was analysed, potential interface improvements were identified, and an enhanced user flow was created that enables users to reach their goals more quickly and efficiently.
With the improved user flow finalised, prototyping of screens in low-fidelity began. Starting with low-fidelity designs is crucial, as it allows for easier sketching and editing compared to high-fidelity stages. Two versions for the home page and four for the search results page were sketched.
For the home page, version A was opted for, primarily due to Jakob’s Law, which suggests that users prefer sites to function similarly to others they are familiar with. The search experience in version A closely resembles that of AirBnB, which was believed to reduce friction for users.
For the search results page, version D was selected, as it includes a visual map of concerts/gigs in the user's area and allows for real-time adjustments to search parameters. Version C, which employed a label/tag filtering approach, was rejected as it could lead to excessive clicks and lower conversion rates. Once the wireframes were finalised, a transition to high-fidelity screens and a prototype was made.
A component library was developed using Atomic Design principles in Figma, featuring four states per component (Default, Hover Focus, Inactive, Disabled). This approach ensures consistency across all platforms and pages by focusing on reusable components, creating a cohesive user experience.
The design system incorporates the original brand colours with complementary greys, WCAG-compliant text colours, and the Inter typeface for optimal readability.
A 12-grid system for the web, a 4-grid for mobile, and 4px spacing units were implemented to maintain consistent layouts.
With low-fidelity wireframes complete, a high-fidelity prototype was created. The aim with the high-fidelity prototype was to achieve pixel-perfect accuracy, facilitating an easier handoff to developers for coding.
This project provided invaluable experience in end-to-end product redesign. Close collaboration with a teammate from the outset was essential, and a shared positive mindset propelled the project forward.
Beyond design, insights into how product usability directly influences business metrics were gained. Here are three key takeaways from this project:
Collecting and analysing user data is crucial for creating an accessible and usable product.
Providing filters and search parameters enables users to find what they are looking for more effectively.
Incorporating visual components, such as maps, greatly assists users in making decisions regarding location and convenience.
Moving forward, usability testing will be conducted, and all user data will be collected. The focus will be on identifying the major pain points that users encountered while using the app. The aim is to implement changes and brainstorm ideas based on the significant issues identified during this round of user testing.
Next, high-fidelity prototypes will be re-evaluated by revisiting the ideation process and arranging further user testing. This will involve asking more in-depth follow-up questions. This cycle will continue until the design demonstrates improved usability and increased conversion rates.