Output Arcade 2.0
Music Software
Output Arcade 2.0 Music Software
Output Arcade 2.0 Music Software
Arcade is an innovative sample playground that has built-in access to an entire subscription ecosystem of sounds via a modern, fully functional web-based browser experience.Each month it's used by 100,000 music producers.
Including producers of Beyoncé, Jay-Z, Kanye West, and Justin Timberlake—among others. For this project, my role was to help establish a design library, hi-fi visual design, and prototyping.
Arcade is an innovative sample playground that has built-in access to an entire subscription ecosystem of sounds via a modern, fully functional web-based browser experience.Each month it's used by 100,000 music producers. Including producers of Beyoncé, Jay-Z, Kanye West, and Justin Timberlake—among others. For this project, my role was to help establish a design library, hi-fi visual design, and prototyping.
Arcade is an innovative sample playground that has built-in access to an entire subscription ecosystem of sounds via a modern, fully functional web-based browser experience.Each month it's used by 100,000 music producers. Including producers of Beyoncé, Jay-Z, Kanye West, and Justin Timberlake—among others. For this project, my role was to help establish a design library, hi-fi visual design, and prototyping.
The Problem
The challenge with music software is that it bases its roots in tactile, physical music instrument. With the invention of computers, a lot of the analog ways of making music have been translated into digital software. However, the current software offerings are not well translated experiences in terms of UX.
When Arcade first launched, it gained a huge cult following. It was a refreshing new product and dramatically easier to use that any other music production plugin.
Research & Project Goals
Through conducting 1:1 interviews with producers of our existing product and studio sit-ins. We discovered 3 distinct opportunities to streamline the creative process of music making and increase discoverability.
Research & Project Goals
Based on our user research methods of conducting 1:1 interviews with producers of our existing product and studio sit-ins. We discovered 3 distincted opportunities to streamline the creative process of music making and increase discoverability.
Stay Up-2-Date with New Lines
Seeking to improve discoverability of newly released lines and promoted packs, We introduced a new way of organization and feed algorithm to suggest content that is relevant to them everytime.
Smart Search & Filters
Create a smarter global search that takes into account all the different lines, genres, instruments, and descriptive tags. Additive tags and filters that allow you to interchange and pare down the options.
Transition to React.js
Existing software based on 6 year old tech that made iterative updates impossible. We creating a brand new design system from scratch and built Arcade on React.js.
The Feed
A newly revamped feed has new places to engage users. Fresh and recommended content based on recommended usage. If you play a lot of hip-hop, next week Arcade suggests you loop kits and packs (they called Lines) for hip-hop.
Everything" view for the pro-users
For those who know exactly what they want, Everything view has descriptive filters that help navigate that perfect match to what sounds in the head.
Everything" view for the pro-users
For those who know exactly what they want, Everything view has descriptive filters that help navigate that perfect match to what sounds in the head.
Line Page
Each line has multiple packs that are organized by themes, instruments. We show each new "pack" of sounds ordered by recency. All the sounds can be download for use all at once for offline mode and can quick switch between the page and the producers keyboard for instant sampling.
Sound Editor Mode
You can edit, clip, and augment the audio loop file that Output gives their users. In your samples mode, users can drag and drop their own audio files and introduce, remix, and combine custom sounds with Outputs.
High-Fidelity Prototyping via Figma
In the past, I’ve used tools such as Sketch, Origami, and Zeplin. However, our product design process was simplified with adopting Figma. We now used figma to design, prototype, test, and deliver screens
Final Thoughts
After the navigation overhaul, users started searching more often. Music loops are very specific. There are things like "sad piano" or "jazz drums". So those combinations are easier found when you have a toolset for the task. Despite the fact that filters may increase friction, in this case, this is what users found more useful.
A new design system helped incorporate consistency in styling between the mockups and the code. Design and development started speaking the same language—React.js language.
See the Demo via Youtube.