Jr. Jammer

Making music production accessible to everyone with Jr. Jammer.

Music is hard to make! Without a teacher (which can cost money) or a school program (which are becoming rare) it is difficult to teach yourself music, particularly music production. Recording and production programs are expensive and hard to use.  These barriers to making and recording music stop kids from experiencing the joys of music. So, how do we make it easier for kids to get into music and make sure they have a long and enjoyable relationship with it?    

Interaction design.

Logging in

The intro screen is simply animated with interactive sounds. Upon logging in, the user is given a personalized home page. They can change the color, add a photo, and see all of the songs they have made. When they play a song, they are prompted to either download it, share it, or delete it.

Lessons

In the lessons library, kids can learn from the real pros! Each video addresses a different topic that will help the kids on their way to becoming digital music producers.

Drum machine

The Drum Pad screen allows users to click the buttons with preloaded samples or simply type on their keyboard if they are using a device with a keyboard. The samples loaded are what one might find in a traditional drum machine or DAW. From here they can record their rhythms and playback what they have done.

Pop up lesson

Before jumping right in to making a beat, it is wise to see what the lesson has to offer. Each new page has an instructor that offers tips and tricks that are relevant to the current page. In this case, it is Pharell Williams offering some tips about how to lay down a drum pattern. The lesson videos can also be found in the Learn section.

Add a sample

Changing the samples on the pads is easy! By simply clicking the plus button on each pad, a small sample library appears from which the user can choose new sounds.

Drop down menu

The first instrument screen the user sees is the Drum Pad screen. There is an ever present hamburger menu in the upper left hand corner that allows users to save their projects, jump to different instrument screens, take a break from making music and watch the Learn channel, or play on of the interactive games.

Sequencer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Sampler

In the Sampler screen, users can drag around the red scrubber to find a part of the sample that they like. They then select which pad they would like the sample to go on and hit the plus button. The part of the wave-form under the scrubber is added to the pad. If the user would like to make the sample longer or shorter, they simply grab the edges of the scrubber and stretch it out or shorten it.

Recorder

By using the on board mic of their device, the user can hit record and start making noise! This is ideal for any user that already possesses musical talent with traditional instruments or just wants to sing over their track. If the user doesn't like the recording, the redo button pops up at the end of each take to allow for a quick do-over.

Multi-track

Once a track is recorded the user can add another track in a process known as multi-track recording. This allows for iteration on ideas or even collaboration with other users.

Keys

The key screen is perhaps the most traditional and familiar instrument yet. This instrument can be played with a cursor or by playing keys on  the device's keyboard. Pressing down on a key lets the user know what note they have triggered. The sound of the instrument is easily changeable by selecting a preset sound from the sound library.

Mixing

The mixing screen allows users to see all of the tracks they have recorded and adjust the volume of each. The tracks can be soloed so the user can hear each part individually.

This interactive prototype was built in Principle and was used for user testing. To test the validity of the idea, I built a very complex, functional prototype so users (kids) could fully explore and use the platform.

Logging in

The intro screen is simply animated with interactive sounds. Upon logging in, the user is given a personalized home page. They can change the color, add a photo, and see all of the songs they have made. When they play a song, they are prompted to either download it, share it, or delete it.

Lessons

In the lessons library, kids can learn from the real pros! Each video addresses a different topic that will help the kids on their way to becoming digital music producers.

Menu

The first instrument screen the user sees is the Drum Pad screen. There is an ever present hamburger menu in the upper left hand corner that allows users to save their projects, jump to different instrument screens, take a break from making music and watch the Learn channel, or play on of the interactive games.

Pop up lesson

Before jumping right in to making a beat, it is wise to see what the lesson has to offer. Each new page has an instructor that offers tips and tricks that are relevant to the current page. In this case, it is Pharell Williams offering some tips about how to lay down a drum pattern. The lesson videos can also be found in the Learn section.

drums

The Drum Pad screen allows users to click the buttons with preloaded samples or simply type on their keyboard if they are using a device with a keyboard. The samples loaded are what one might find in a traditional drum machine or DAW. From here they can record their rhythms and playback what they have done.

Add sample

Changing the samples on the pads is easy! By simply clicking the plus button on each pad, a small sample library appears from which the user can choose new sounds.

Sequencer

Sequencing is an important part of any DAW. In this screen, we have a drum sequencer that the user can build a drum pattern by sight. This is great for users that struggle with timing and rhythm and don't feel comfortable trying to play the drum pad  yet.

Keys

The key screen is perhaps the most traditional and familiar instrument yet. This instrument can be played with a cursor or by playing keys on  the device's keyboard. Pressing down on a key lets the user know what note they have triggered. The sound of the instrument is easily changeable by selecting a preset sound from the sound library.

Recording

By using the on board mic of their device, they can hit record and start making noise! This is ideal for any user that already possesses musical talent with traditional instruments or just wants to sing over their track. If the user doesn't like the recording, the redo button pops up at the end of each take to allow for a quick do-over.

Multi-track

Once a track is recorded the user can add another track in a process known as multi-track recording. This allows for iteration on ideas or even collaboration with other users.

Sampler

In the Sampler screen, users can drag around the red scrubber to find a part of the sample that they like. They then select which pad they would like the sample to go on and hit the plus button. The part of the wave-form under the scrubber is added to the pad. If the user would like to make the sample longer or shorter, they simply grab the edges of the scrubber and stretch it out or shorten it.

Mixer

The mixing screen allows users to see all of the tracks they have recorded and adjust the volume of each. The tracks can be soloed so the user can hear each part individually.

User interface.

Pre-loader

The loading screen (which can be seen above in the interactions section) is meant to not only represent the colors of the instruments but also mimic the shape and motion of a traditional audio meter.

Log in screen

I believe that the introduction to a new software is the most crucial moment. Using rounded buttons and bright colors make Jr. Jammer feel inviting and friendly.

Home page

Upon logging in, kids can see what songs they have previously made. This  profile screen is customizable; the user can change their profile picture and even decide the background color. Simplicity was the key with this screen. I didn't want the profile to be too social given the age group; most parents don't want their kids (ages 6 - 12) having too much of an online presence

My songs

Each song can be expanded and listened to. Once expanded, users can share, download, or delete the song.  Most kids have had some experience with music streaming or youtube so  they are familiar with the concept of playlists and the common actions associated with them which is why this processes is particularly unguided.

Lessons library

Everyone needs a teacher. While Jr. Jammer is meant to be unguided and easy to use, it also offers some great educational material. The lessons that are offered on each page open up a video light box with an expert on the particular instrument. the Lessons section or "learn" page is  a library of all of the lessons. 

Lesson

From the lessons screen, the users can click the video they are interested in and it will scale up and start playing.

Pop up lesson

As seen above, the lessons button is on every page. Here is an expanded version of what it looks like when clicked on. A rounded, gray light box pops up with the video inside. The design of this pop up is meant to be very simple so it doesn't confuse the user in anyway. Once the video is over, the user must simply click to X to return to their song, now armed with the knowledge given to them by a pro!

Sequencer

Sample sequencing is simple but quite a foreign concept to most kids. It is laid out like a traditional sequencer. I was particularity inspired by the FL Studio sequencer; one of the most recognizable sequencers for any producer. Because this instrument may be the most frustrating to use at first, I thought that a warm yellow would make it seem more inviting and exciting.

Sampler

The sampler may be the most famous "digital instrument" so I tried to keep it as basic as possible. it is loosely based on the layout of an Akai MPC. The user uses the red scrubber to find a part of the sample they like, engages one of the pads, and hits the add button. Trying to convey this concept in a kid friendly way was one of the most difficult design challenges of the program.

Recorder

The recording screen is the users chance to make the song totally their own by actually recording themselves into the program. When the user hits record, Jr. Jammer will use their device's on board microphone to record any incoming audio signals. If the user is unhappy with the take, the can hit the redo button or if they have an idea for a second track they can hit the add track button for multi-track recording.

Keys

The keys screen is laid out just like a typical piano but with a few aesthetic alterations. While not every kid has played a piano, most are familiar with white keys and black key; that layout was preserved in this design. The user need only click a key or type on their keyboard to see what note they are triggering. They can then change the sound by choosing on of the preset sound from the small horizontal scrolling library under the keys.

As a rule, this interface had to be incredibly simple as to not confuse kids and first time users. The interface was built in sketch and animated in principle.

Pre-loader

The loading screen (which can be seen above in the interactions section) is meant to not only represent the colors of the instruments but also mimic the shape and motion of a traditional audio meter.

Log in

I believe that the introduction to a new software is the most crucial moment. Using rounded buttons and bright colors make Jr. Jammer feel inviting and friendly.

Home

Upon logging in, kids can see what songs they have previously made. This  profile screen is customizable; the user can change their profile picture and even decide the background color. Simplicity was the key with this screen. I didn't want the profile to be too social given the age group; most parents don't want their kids (ages 6 - 12) having too much of an online presence

My songs

Each song can be expanded and listened to. Once expanded, users can share, download, or delete the song.  Most kids have had some experience with music streaming or youtube so  they are familiar with the concept of playlists and the common actions associated with them which is why this processes is particularly unguided.

Lessons library

Everyone needs a teacher. While Jr. Jammer is meant to be unguided and easy to use, it also offers some great educational material. The lessons that are offered on each page open up a video light box with an expert on the particular instrument. the Lessons section or "learn" page is  a library of all of the lessons.

Lesson

From the lessons screen, the users can click the video they are interested in and it will scale up and start playing.

Pop up lesson

As seen above, the lessons button is on every page. Here is an expanded version of what it looks like when clicked on. A rounded, gray light box pops up with the video inside. The design of this pop up is meant to be very simple so it doesn't confuse the user in anyway. Once the video is over, the user must simply click to X to return to their song, now armed with the knowledge given to them by a pro!

Sequencer

Sample sequencing is simple but quite a foreign concept to most kids. It is laid out like a traditional sequencer. I was particularity inspired by the FL Studio sequencer; one of the most recognizable sequencers for any producer. Because this instrument may be the most frustrating to use at first, I thought that a warm yellow would make it seem more inviting and exciting.

Sampler

The sampler may be the most famous "digital instrument" so I tried to keep it as basic as possible. it is loosely based on the layout of an Akai MPC. The user uses the red scrubber to find a part of the sample they like, engages one of the pads, and hits the add button. Trying to convey this concept in a kid friendly way was one of the most difficult design challenges of the program.

Recorder

The recording screen is the users chance to make the song totally their own by actually recording themselves into the program. When the user hits record, Jr. Jammer will use their device's on board microphone to record any incoming audio signals. If the user is unhappy with the take, the can hit the redo button or if they have an idea for a second track they can hit the add track button for multi-track recording.

Keys

The keys screen is laid out just like a typical piano but with a few aesthetic alterations. While not every kid has played a piano, most are familiar with white keys and black key; that layout was preserved in this design. The user need only click a key or type on their keyboard to see what note they are triggering. They can then change the sound by choosing on of the preset sound from the small horizontal scrolling library under the keys.

Wireframes.

Drums

The drum machine is a concept that kids are actually kind of familiar with. Many kids toys use a similar layout.

Sequencer

The sequencer, like the sampler, is a difficult concept to convey to a kid so making it inviting was my main goal.

Keys

The "keys" or instrument page went through a few iterations before I decided that simplicity was the key.

Sampler

The sampler may be the most foreign concept to kids. The idea of "cutting" and re-ordering audio is quite complicated.

Record

While phones and many toys have recording functionality, multi-tracking can take some getting used to.

Mixer

This simplified mixing screen consists of several volume meters that kids can use to balance their tack.

Being very familiar with recording and music production software, I had a pretty good idea of the screens needed but wasn't sure how to simplify them to make them kid friendly. In theses wireframes, I broke down my design decisions and tried to show the evolution of the wires.

Drums

The drum machine is a concept that kids are actually kind of familiar with. Many kids toys use a similar layout.

Sequencer

The sequencer, like the sampler, is a difficult concept to convey to a kid so making it inviting was my main goal.

Keys

The "keys" or instrument page went through a few iterations before I decided that simplicity was the key.

Sampler

The sampler may be the most foreign concept to kids. The idea of "cutting" and re-ordering audio is quite complicated

Record

While phones and many toys have recording functionality, multi-tracking can take some getting used to.

Mixer

This simplified mixing screen consists of several volume meters that kids can use to balance their tack.

Case Study.

To see the user research, competitive audit, and user journey, click the link below.

Case Study PDF