Vinyl Group (Formally Jaxsta Music)

In Page Search

Reimagining search for usability and ease of use on Jaxsta profiles
Leading image showing the Jaxsta In-Page Search UI on Desktop and Mobile on a coloured background

About the Company

Jaxsta Music is a comprehensive music credit database, working as a way for musicians to present and have their credits showcased on a world stage for all the music that they have released.

Think IMDB for music.

What makes Jaxsta different from its competitors is that the data is all officially sourced, meaning that the credits are supplied by data partners including major labels like Universal Music Group, Sony Music, Warner Music as well as smaller independent labels.

My Role In Production
Software Used
  • User Research
  • UI Design
  • Competitor Research
  • Wireframes
  • Visual Design
  • Sketch
  • Illustrator
  • Invision

The Problem

Whilst Jaxsta was serving the music industry quite well in terms of credits, amassing 100,000 recordings ingested into the system every day.

"There isn't a robust way to navigate through a profile's credits"

The sentiment from users at the beginning of the project

This meant that when you would navigate to a profile page (Beyoncé for example) you could for artist and release names (i.e going on The Weeknd’s Profile and searching for After Hours or Ariana Grande - for their collaboration on ‘Save Your Tears’) From prior interviews with our users on the subject of navigation, as well as our Google Analytics data, it was evident that we needed to provide the user with a more robust filtering system to navigate for different kinds of releases on profiles.

A successful design would help solve this by proving an easy to navigate interface for the user to look for specific types of releases, filter by roles someone had on a release (For example: What did Bruno Mars produce from his discography releases?)

A desktop screenshot showing the profile page layout on Jaxsta before in-page search

An example of a profile page with the old search user interface

The Design Process

Defining the Problem

With this project, I started with some competitor research which involved utilising our internal repository of data to see if this issue had been solved before and what patterns were used. Whilst not many competitors seemed to allow advanced filtering, I looked at sites with more robust filtering options. These included The Iconic and Google’s filtering for food-related business searches

This research was also collated with past user research data as well as some information from our Customer Service department helped in making our User Stories, made in collaboration with our Business Analyst.

With a more solid foundation, I worked with our back-end and front end development teams to determine filters would appear for users based on role groups, release groups, and types that would be sent from our internal API (Application Programming Interface).

Ideation
Sketches from a Crazy Eights exercise sketching up different button layout designs for Jaxsta In-Page SearchLabel style ideas for credits tiles to label them as 'Profile', 'Song', 'Work', and 'Release' for Jaxsta In Page Search

Sketches from a Crazy Eights exercise sketching up different button layout designs

Label style ideas for credits tiles to label them as 'Profile', 'Song', 'Work', and 'Release'

As I was having these initial discussions with our development teams, I began sketching out some initial wireframes for the search filters. We decided on using a range on clickable buttons and which would bleed outside the screen, letting the user swipe to see the rest. This helped the users digest the data onscreen without clouding their screen with all the buttons at once on mobile.

Concept sketches of the updated credit tiles for Jaxsta

Concept sketches of the updated credit tiles

Prototyping and Testing

Another decision we had made was choosing labels to be added to the tiles to identify whether they were a ‘Release’, ‘Song’, ‘Work’, and ‘Profile’. This was a particularly helpful enhancement for our search dropdown and page where various types of results are displayed together.

We did a round of internal user testing with prototypes on Invision to verify what fields needed cleanup and if anything was confusing. We took the users through the screens, asking them about the intended purpose of the screen and if the buttons pressed had worked correctly. We ended up changing tooltips to ensure they retained clarity with our Head of Original Content.

The designs were handed off to the front end development team for the build alongside the back end team who built the API's needed to return the results for the new search functionality.

The Outcome

Overall this feature was received quite positively by our users and has helped many music professionals find credits on their profiles that they didn't know existed, leading to more royalties sent out for their work.

As a result, we say a 15% increase in user engagement on our artist and performer profile pages, showing they had stayed on pages for longer, validated by our product analytics software.

The final design of the Jaxsta In-Page Search feature on the profile page shown on Desktop and mobile

See More Projects

IR (Integrated Research)

Alert Management

Streamlining integrations between platforms to reduce of redundant data entry for users.
Read Case Study
Career Connect

Time Tracker

Linear helps streamline software projects, sprints, tasks, and bug tracking. Here’s how to get started.
Read Case Study