WEB APP PRODUCT DESIGN
Human
Web-based music libary
Human is a company of composers and music producers creating entirely original soundtracks for commercials, movies, television, and recording artists. The Human team came to Neuron to design an online music library that allows clients to browse existing libraries and playlists, create and share playlists with their team, and download song previews to try out in their projects. Their thousands of songs can be searched and sorted based on keywords, genre, mood, BPM, and more.
Organizing complex keyword architecture
The more than 35,000 songs in this ever-expanding library made the information architecture especially important. After conducting user research with power users and stakeholders, we identified several ways to improve keywords and metadata organization.
Previously the keywords were only categorized by type – genres, mood, instrument, and vocals (indicated by color). Because of the sheer number of keywords and the fact that they were not subcategorized in any way, users less familiar with the tool had a difficult time using it.
The updated design makes it easier for users to find what they’re looking for by consolidating similar keywords and by grouping them into subcategories, meaning users may only have to manually scan a list of 9 or 10 keywords instead of 50 or 60.
Crafting the design system
Because our team would not be involved in the development, the new design system had to be pixel perfect. We focused on creating highly componentized, repeated elements.
We then put the Neuron touch on the design system with comprehensive annotation to communicate design intent, usage, and behavior. The file for handoff to Human’s developers accounts for how every element behaves (e.g. fixed, scales, shrinks) and what happens at each breakpoint.
Curated Playlists
The powerful searching and filtering tools are great for users who have a clear vision of the type of song they want, but for those at an exploratory stage the curated playlists offer an approachable way to get started.
Playlists are built and maintained by the music professionals at Human and are created around themes like Romance, Filmscore, or Road Trip.
Video Sync Feature:
Pairing audio with visuals
Many users work in the advertising or film industries and are seeking the perfect music to match their video. This is most often done by downloading a shortlist of songs, importing them into their video editing tool, and trying them out one at a time to see how they fit. We validated that a better experience would be to let users test out how songs match their video without leaving the music library.
The video is played directly from the user's computer, allowing video playback from the browser without requiring users to upload their potentially confidential files to a server. The UI was designed to allow users to easily test multiple tracks with their videos to find the perfect fit.
Functionality for power users
Music and advertising professionals spend hours in this tool every day, so it was imperative that we provide pro-level shortcuts to navigate the UI quickly. Users can skip from one track to the next using up and downarrow keys, jump ahead by 20-second increments using the left and right arrow keys, can play/pause using the space bar.
We observed that many power users at the discovery stage immediately jump to the middle of each track to hear its essence, and listen to only 3-5 seconds before deciding whether to shortlist it. In response to this we designed a "Start Offset" function that enables users to set a global starting point for track playback. And rather than base it on minutes and seconds, we opted to make it percentage-based so no matter the length of the track, the user can jump to the middle.
The mobile listening experience
Through user research we learned that users overwhelmingly use desktop to search for music and create playlists, but then share playlists for consideration with colleagues who typically listen on their mobile devices. Because of this, the redesigned mobile experience prioritizes listening over search.
