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 sample library.
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 to launch the new Arcade 2.0 with the help of a lead product designer.
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. That's what made Output Arcade so successful since it broke the mold.
While we were seeing healthy engagement from the existing Arcade product, but found that our customers had various pain points and annoyances. How would we make something successful even better.
Research
I partnered closely with our growth PM and data analyst to audit the funnel from initial landing, trial period, in-product experience, paid conversion. Using data from our analytics to discover drop off points.
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
Discoverability
Arcades growing sample library wasn’t being discovered.
Lackluster Search
Global search and filtering were lacking, making it difficult for users to find sample they needed.
Confusing Navigation
Users were confused by UX navigation and had a hard time accessing their own library and what was available to download on Output.
Key Insights
Discoverability
Arcades growing sample library wasn’t being discovered.
Lackluster Search
Global search and filtering were lacking, making it difficult for users to find sample they needed.
Confusing Navigation
Users were overwhelmed by UX navigation and did not know what was in their own library and what was available to download on Output.
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 help users quickly discover and explore new music samples that aligns with their taste, especially as we release new lines each week?
How might we help users quickly discover and explore new music samples that aligns with their taste, especially as we release new lines each week?
Project Goals
Revisit Main Navigation
Look for opportunities to simply the navigation and consolidate where possible. Reduce the number of labels through better visual elements and UX.
Improve Discoverability
Seeking to improve discoverability of newly released lines and promoted packs, We needed a new way of surfacing new lines within the homefeed.
Global Search
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.
Arcade 2.0
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.
Clearer Navigation
In Arcade 1.0, navigation was scattered and inconsistent. The top segmented control switched between Play and Browse, while a sidebar—only visible within Browse—created confusion around what content was user-owned versus what was provided by Output. To help clarify, we were forced to label everything, which led to visual clutter.
1. Establishing Clear UX Structure
We reimagined the experience around three core sections: Play, Browse, and Your Stuff. This structure allowed us to streamline the interface, eliminate ambiguity, and make space for a global search bar to live persistently at the top.
2. Removing the Sidebar
With a stronger UX hierarchy and simplified iconography, we no longer needed persistent text labels. This let us remove the sidebar and reclaim valuable space for surfacing new content. For accessibility, we retained label visibility on hover.
3. Combining Playback and Kit Viewer
Previously, browsing kits and playing them lived in separate views. We unified them into one seamless experience by embedding the player directly into the kit view. The result: quicker interaction, a cleaner layout, and hotkeys that auto-map for faster creativity.
New Home Feed
To help users find content faster and more intuitively, we introduced a dynamic, algorithm-driven home feed. It surfaces relevant kits, loops, and lines based on recent activity and genre preferences—so a hip-hop producer, for example, would immediately see hip-hop-centric content on launch.
1. Consolidated Content, Better Visibility
Previously, the Feed and Lines lived on separate pages, causing a fragmented experience. We combined these into a single Browse view and updated the line thumbnails with a wider aspect ratio, giving each pack more visual presence and making it easier to scan.
2. Smarter Entry Points
The old experience forced users to dive into a line before they could even preview a sample. We redesigned the top of the feed to offer multiple jump-off points—Lines, Instruments, Genres, Moods, and more—so users can start exploring in whatever way feels most natural.
3. Flexible Featured Carousel
In the original design, kits were listed strictly by release date. Content managers had no control. We introduced a programmable carousel that lets them feature timely or relevant releases with custom copy, visuals, and editorial control.
4. Weekly Kit Mix
We added a curated, auto-updating Weekly Kit Mix to re-engage lapsed users and encourage exploration. It adds a lightweight social element while surfacing trending content in a fresh and digestible format.
Global Search & Smarter Filters
In Arcade 1.0, search functionality was severely limited due to technical constraints. Users could only search within the Lines tab, and even then, it was based on exact matches. Tags were loosely implemented and not standardized, which led to a disjointed browsing experience—especially as our library of samples and kits rapidly expanded.
1. Global Search, Available Everywhere
We introduced a unified global search that works across the entire library—from kits and lines to individual samples. Users can now search from any screen, including within their personal libraries and Output’s full catalog. It’s fast, powerful, and always accessible.
2. Smarter, Structured Tags
We reworked our tagging system into distinct categories—Instruments, Genre, Mood, Line, BPM & Key—to help users filter and explore with more precision. This required a massive internal effort from our content team, but the payoff was immediate: content became easier to manage, discover, and scale.
3. Flexible Results, Designed for Workflow
In the new experience, users no longer have to dive into kits just to find and drag samples. Now, search results return individual kits or samples, allowing producers to interact with content directly. This dramatically sped up creative workflows and made browsing more intentional.
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. By attaching and naming components to variables, the developer no longer had any confusion on what to name the component. Developers now also had a point of reference in figma as the single source of truth
Metrics & Success
The impact was really encouraging.
- 28% increase in trial-to-paid conversions
- Search usage jumped by 45%
- Support tickets about “how to find sounds” dropped noticeably
- First-week retention also improved by about 15%, which told us that users were getting to that “aha” moment faster.
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.