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.
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.
What people say about Arcade
“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.
“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
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
© Igor Lanko
[email protected]
[email protected]
© Igor Lanko