Output Arcade 2.0
Music Software
Output Arcade 2.0 Music Software
Output Arcade 2.0 Music Software
Arcade 2.0 is an innovative music software that functions as a sample playground with built-in access to a comprehensive subscription ecosystem. It provides an intuitive and fully functional web-based browser experience used by over 100,000 music producers monthly, including top producers of Beyoncé, Jay-Z, Kanye West, and Justin Timberlake.
I played a pivotal role in taking wireframes to high-fidelity visual comps, in depth prototyping, & establishing a design library.
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
Music production software historically roots itself in tactile, physical music instruments. The shift to digital has often resulted in experiences that poorly translate these analog methods into effective digital user experiences. While the original Arcade launch was met with positive reception due to its ease of use, there were opportunities to enhance discoverability, streamline the creative workflow, and modernize the technical framework.
Research & Project Goals
Identify opportunities to simplify and improve the user experience for music producers, focusing on content discoverability and workflow efficiency.
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.
Key Insights
1. Users wanted a better way to stay informed about new sound packs (referred to as “Lines”).
2. The search functionality needed improvements to cater to the diverse tagging and filtering needs of producers.
3. The existing software architecture was outdated, hindering iterative updates and user experience improvements.
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.
Opportunity
How might we improve discoverability of new lines that are being released weekly?
Stay Up-2-Date with New Lines
Seeking to improve discoverability of newly released lines and promoted packs, We needed a new way of surfacing new lines within the homefeed.
Smart Search & Filters
Create a smarter global search that takes into account all the different lines, genres, instruments, and descriptive tags. With additive tags and filters that allow you to interchange and pare down the options.
Transition to React.js
We will also take this opportunity to transition the existing software based on legacy framework that made iterative updates impossible.
Ideation & Concept Development
User Flows
Mapped out the pathways for users to discover new content, search for specific sounds, and transition seamlessly between editing and sampling modes.
Brainstorming & Wireframes
Sketched initial concepts that explored how users could better discover new content and navigate through a more intuitive search interface.
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.
Key Features & Solutions
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.
The Revamped Feed
Introduced a new algorithm-based feed that suggested relevant content tailored to the user’s recent usage and preferences. For example, a hip-hop producer would receive suggestions for hip-hop loops and packs.
Smart Search & Filters
Developed a global search feature that enabled users to filter and search using tags like genres, instruments, and moods (e.g., “sad piano” or “jazz drums”).
•Added an “Everything” view with advanced filters for pro users to navigate directly to specific sounds.
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 Organization
Organized sound packs by themes and instruments, allowing users to quickly find new content. Integrated an offline mode for users to download entire packs for immediate access.
Sound Editor Mode
Enhanced the sample editor to allow users to edit, clip, and combine loops easily. Enabled drag-and-drop functionality for users to incorporate their own audio files for a customizable experience.
Prototyping
Transitioned to using Figma for its collaborative capabilities, creating high-fidelity prototypes that developers could reference & send out to our beta testers for quick feedback.
Implementation in React.js
The transition to React.js facilitated quicker updates and created a shared design-development language, ensuring consistency from design mockups to the final product. Attaching and naming components to variables
Metrics & Success
Search usage increased significantly post-launch, as users found it easier to locate specific sound loops and packs. Decrease in costumer support tickets asking us how to use the product.
The streamlined design and consistent styling enhanced the development process, reducing discrepancies between design and code.
Final Thoughts
Results: The navigation overhaul and new feature implementations resulted in a more cohesive and user-friendly experience. Users praised the ability to find specific, niche loops quickly and appreciated the tailored content suggestions.
Lessons Learned: Although filters can sometimes introduce friction, in the context of specialized music production software, they added value by empowering users with more control over their search and discovery process.
Impact of the Design System: The adoption of a new design system reinforced consistency, improved collaboration, and enabled faster iterations.
See the Demo via Youtube.