Designing an accessible way for anyone
to explore making beats
Designing an accessible way for anyone to explore making beats
Designing an accessible way for anyone to explore making beats
Role
Role
Designer & Builder
Designer & Builder
Skills
Skills
AI Prototyping
Interaction Design
Web Applications
AI Prototyping
Interaction Design
Web Applications
Duration
Duration
Weekend Project
Weekend Project
Project Context
Project Context
A coworker told me that everyone seemed to pick up a new skill during the pandemic. He had tried learning to make beats. He wasn’t trying to become a professional, he just wanted to try something fun and gain a new hobby. But, it proved to be too difficult.
I came across a simple beat-making tool online by another designer and found myself playing with it for a while. It was so fun that I wanted to refine it with my own style, so anyone could explore this creative activity.
The app is built with AI (Figma Make & Claude Code) and is hosted on Vercel.
A coworker told me that everyone seemed to pick up a new skill during the pandemic. He had tried learning to make beats. He wasn’t trying to become a professional, he just wanted to try something fun and gain a new hobby. But, it proved to be too difficult.
I came across a simple beat-making tool online by another designer and found myself playing with it for a while. It was so fun that I wanted to refine it with my own style, so anyone could explore this creative activity.
The app is built with AI (Figma Make & Claude Code) and is hosted on Vercel.
Outcome
Outcome
A skeuomorphic beat maker that balances between a toy and professional tool. There are also five preset songs included for a user to press play and get inspired.
My coworker who inspired the story was able to create his first beat in minutes, praising both the style and ease of starting. If it's any indication of joy, he was bobbing his head the entire time while using it!
A skeuomorphic beat maker that balances between a toy and professional tool. There are also five preset songs included for a user to press play and get inspired.
My coworker who inspired the story was able to create his first beat in minutes, praising both the style and ease of starting. If it's any indication of joy, he was bobbing his head the entire time while using it!
For those who want to explore making music quickly and easily.
For those who want to explore making music quickly and easily.
Making beats looks like a skill reserved for the musically-gifted.
Making beats looks like a skill reserved for the musically-gifted.
Most music tools are built for someone to take time to learn in order to get the most out of its capabilities. This might be a benefit for many, but for people who aren't seeking that depth, it is daunting to even explore music creation. I wanted to create a simple experience for users to hear what they're putting together with different instruments and sounds.
Most music tools are built for someone to take time to learn in order to get the most out of its capabilities. This might be a benefit for many, but for people who aren't seeking that depth, it is daunting to even explore music creation. I wanted to create a simple experience for users to hear what they're putting together with different instruments and sounds.
A retro, tactile feel with modern, digital features.
A retro, tactile feel with modern, digital features.
I leaned into a skeuomorphic style and referenced a Teenage Engineering synthesizer: a speaker grill, knobs, an LCD readout, and chunky buttons that make pressing a step feel physical. At the same time, it benefits from being digital with buttons that change colors and drop-down menus for the presets and playing your own saved beats. The bi-lingual subtitle “multi-instrument composer” comes from the same reference.
I leaned into a skeuomorphic style and referenced a Teenage Engineering synthesizer: a speaker grill, knobs, an LCD readout, and chunky buttons that make pressing a step feel physical. At the same time, it benefits from being digital with buttons that change colors and drop-down menus for the presets and playing your own saved beats. The bi-lingual subtitle “multi-instrument composer” comes from the same reference.
Overhauling the first pass
Overhauling the first pass
I started designing in Figma Make. I mentioned in the project context that I was inspired by someone else's design. I want to clarify that I did not share images and created my design from scratch prompts. The AI's first pass came with its own ideas, which were so different from the end product. The layouts, buttons, and copy were all completely overhauled. I'm confident that not a single part was left as-is.
I started designing in Figma Make. I mentioned in the project context that I was inspired by someone else's design. I want to clarify that I did not share images and created my design from scratch prompts. The AI's first pass came with its own ideas, which were so different from the end product. The layouts, buttons, and copy were all completely overhauled. I'm confident that not a single part was left as-is.
Fixing the notes and sounds
Fixing the notes and sounds
Initial testing on my own revealed a couple of problems. Several sounds felt too similar, and the order of the notes meant nothing. I reordered the notes in a straight line from high to low, then audited every sound so each note was accurate. I then added in four sound styles for each instrument and completed the same sound auditing to enable the user with more flexibility and creativity.
Initial testing on my own revealed a couple of problems. Several sounds felt too similar, and the order of the notes meant nothing. I reordered the notes in a straight line from high to low, then audited every sound so each note was accurate. I then added in four sound styles for each instrument and completed the same sound auditing to enable the user with more flexibility and creativity.
Fun first, depth second
Fun first, depth second
The primary goal was to make the tool fun and approachable. I made careful decisions of how to add in depth, including the ability to change: tempo/BPM, loop length, volume mixer, and instrument sound styles.
I had an idea to add layers, so you can imitate having more than one particular instrument or sound style, but it started to make the tool cluttered and more complicated.
The primary goal was to make the tool fun and approachable. I made careful decisions of how to add in depth, including the ability to change: tempo/BPM, loop length, volume mixer, and instrument sound styles.
I had an idea to add layers, so you can imitate having more than one particular instrument or sound style, but it started to make the tool cluttered and more complicated.
Press play first
Press play first
Five preset songs are built in and one is always randomly selected on load. You're able to press play and hear a sample of what the tool is capable of before doing anything.
Five preset songs are built in and one is always randomly selected on load. You're able to press play and hear a sample of what the tool is capable of before doing anything.
A fully functional beat maker that I'm continuing to improve.
A fully functional beat maker that I’m continuing to improve.
I tested it with a couple of users, including my coworker who gave me the initial story. Off the bat, he praised Loopback's style and was able to jump into creating within seconds. He started testing out sounds to see what he liked and put together his first beat in minutes.
He provided some feedback about the instrument sounds which I took and used to improve the sound style variety. Most importantly, he said it was really fun and that it was way easier than the tool he had to download when he initially wanted to start playing with music.
I tested it with a couple of users, including my coworker who gave me the initial story. Off the bat, he praised Loopback's style and was able to jump into creating within seconds. He started testing out sounds to see what he liked and put together his first beat in minutes.
He provided some feedback about the instrument sounds which I took and used to improve the sound style variety. Most importantly, he said it was really fun and that it was way easier than the tool he had to download when he initially wanted to start playing with music.
What I learned
What I learned
AI for a first draft
AI for a first draft
Figma Make's first version came with its own ideas and a lot of extra copy all over the design. Getting to the version I wanted took clear direction about the look, feel, and features. It especially required me to have an eye for removing bloat by knowing what I wanted the final app to include.
Figma Make's first version came with its own ideas and a lot of extra copy all over the design. Getting to the version I wanted took clear direction about the look, feel, and features. It especially required me to have an eye for removing bloat by knowing what I wanted the final app to include.
Test meaningfully
Test meaningfully
I asked Claude to audit my sounds and it didn't find much issue when going through everything on its own. Once I continued to test myself, I found that Claude was overlooking problems if I didn't ask about them specifically, including volume levels and sound style uniqueness, which required me to tell Claude there are existing issues rather than asking if it can find them.
I asked Claude to audit my sounds and it didn't find much issue when going through everything on its own. Once I continued to test myself, I found that Claude was overlooking problems if I didn't ask about them specifically, including volume levels and sound style uniqueness, which required me to tell Claude there are existing issues rather than asking if it can find them.