Output Arcade

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.

See the demo

34m views on YouTube.

Period

2018—2020

Company

Roles

Lead Product Design, Prototyping, Design System management, Documentation, and QA.

Problems to solve

User research has shown that some users struggled to understand some basic concepts of the existing app navigation.

Because Arcade content grows each month, navigation through it becomes more difficult: lists get bigger, so it may be harder to find things.

BONUS problem: due to the limitation of the technology, iterative feature development and styling used to take a lot of time.

Achieved

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. This is the first known design components system in the music software industry.

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.

Browse by Lines, Instrument Genre, or Mood

Loop kits have a lot of tags. Each tag belongs to a category. "Browse by" pages help structurize these categories. Now, for example, a producer needs a loops kit that has guitar sounds. Easy! Go to Browse by Instruments and select Guitar. Arcade shows all the kits with that instrument.

"Everything" view for the pro-users

Watch with sound.

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.

your-stuff-2
your-stuff-drag-2

Using own samples

Users can also play their own samples alongside Arcade content. A small improvement to the drag and drop interaction now counts how many samples are dragged.

Design system

During the redesign, the development team and I built 408 components. It is also based on BEM naming system. This allows the design and dev team to speak the same, clear language.

arcade-design-system-2

What people say about Arcade

Hit-boy

“If I would have had this when I was maybe 20, I’d probably be a billionaire right now.”

— Hit-Boy. Producer of Beyoncé, Juice WRLD, Travis Scott.

Laura-Escude

“When I feel like I'm having trouble coming up with an idea, I just turn to Arcade now. It's like an idea machine.”

— Laura Escudé. Arranger/Live Show Designer. Jay Z, Kanye West, American Idol.

Start making music!
It's easier than ever

Co-designed with

Project development team

Disclaimer

Neil Hallimen
Ryan Furuyama
Justin Ma

Spencer Salazar
Collin Schupman
Patrick Perey
Trevor Steer
Garrett Burnett
Colin Sullivan

Some pieces of work presented may not display the current state of the product. All rights to the media content presented belong to Output, Inc.

QA

Special thanks

Rachel Larralde
Jay Caston

Jay Caston, Ryan Furuyama, Garrett Burnett, and the entire development team who are kind and passionate about what they do. Without them, these designs couldn't become a reality.

2018—2020

Share

Co-designed with

Neil Hallimen
Ryan Furuyama
Justin Ma

Project development team

Spencer Salazar
Collin Schupman
Patrick Perey
Trevor Steer
Garrett Burnett
Colin Sullivan

QA

Rachel Larralde
Jay Caston

Special thanks

Jay Caston, Ryan Furuyama, Garrett Burnett, and the entire development team who is kind and passionate about what they do. Without them, these designs couldn't become a reality.

Disclaimer

Some pieces of work presented may not display the current state of the product. All rights to the media content presented belong to Output, Inc.

2018—2020

Share