CLIENT
ROLE
The Problem
Offtop is a music-tech startup that provides file management solutions for musicians, producers, DJs, and artist managers.
The typical structure of files organization via folders has proved unhelpful to those in the music industry.
Users go through folder after folder looking for a single track, and they need a process of quickly downselecting their catalog.
The typical structure of files organization via folders has proved unhelpful to those in the music industry.
Users go through folder after folder looking for a single track, and they need a process of quickly downselecting their catalog.
Our Solution
I worked to craft a new organization structure centered around "groups". Groups functionally are tags, but placed strategically, they resemble folders.
We learned through testing that we needed to thread the needle between the user's mental expectations of folders, and the functional benefits of a tag system.
I crafted a new UI system to bring the platform to a more elevated look and feel.
We learned through testing that we needed to thread the needle between the user's mental expectations of folders, and the functional benefits of a tag system.
I crafted a new UI system to bring the platform to a more elevated look and feel.
The Outcome
The project was successful, received approval from all stakeholders, and played a pivotal role in Offtop securing additional seed funding.
The new feature and UI system are in development currently, and are expected to be live by the end of November 2023.
The new feature and UI system are in development currently, and are expected to be live by the end of November 2023.
Understanding the audience
The primary end users are producers and vocal artists. Both groups typically have hundreds of files, and both groups have the same 3 goals when looking through them:
1. Find what they need based on how they think about the piece of music
2. Send it off to a collaborator through a link
3. Add new files via dragging and dropping
1. Find what they need based on how they think about the piece of music
2. Send it off to a collaborator through a link
3. Add new files via dragging and dropping
Low Fidelity Brainstorming
We started with low-fidelity wireframes that resembled the platforms current visual system. The purpose of this phase was to brainstorm how to establish the Group feature as the primary way of finding files, while also giving the user the option to see all their tracks. We then conducted usability tests of different low-fi iterations with our users to understand what was working best.
Groups View
Tracks View
Filtering Using Groups
Home & Music Player
Store
Video Player
Lyric Notebook
.png)
-2.png)
-1.png)
3.png)
Home & Music Player
Store
Video Player
Lyric Notebook
4.png)
5.png)
2.png)
%20combined.png)
Home & Music Player
Store
Video Player
Lyric Notebook
%20OLD%201.png)
%201.png)
%20OLD%202.png)
%20OLD%20OLD.png)
Usability Sessions & Insights
We had 10 of the platform's top users test out the low fidelity concept. These sessions revealed major insights that were brought into the following iteration.
Insights
1. Even though the tagging system was seen as functionally helpful, users wanted them to feel more like folders.
2. Users want the least choices on the homepage, it has to be simplier.
3. Recently Used Groups should be separated as an ever-present category on content.
4. As a category differentiator, 9/10 users separate their music by Genres and Collaborators.
1. Even though the tagging system was seen as functionally helpful, users wanted them to feel more like folders.
2. Users want the least choices on the homepage, it has to be simplier.
3. Recently Used Groups should be separated as an ever-present category on content.
4. As a category differentiator, 9/10 users separate their music by Genres and Collaborators.
Hardware Inspiration
When developing the new UI system, I looked to music hardware for inspiration. Specifically, the use of strategic pops of color to denote importance. Given the amount of information a user would be parsing through, I chose a flat material color system that didn't overwhelm visually, but rather focused the eye.
Final Experience Design
Motion & Interactions
Even-though Offtop's platform remains a helpful workflow tool, we knew that if musicians didn't feel it was "cool", it wasn't going to be adopted. Through touches of motion infused within mundane tasks, the platform quickly differentiates itself visually from others in the market.
Menu
Toggling Library Views
Filtering Using Groups
Home & Music Player
Store
Video Player
Lyric Notebook
