Layer Studio

Record Melodies and Harmonies with ease

Introducing the ultimate mobile vocal layering app for IOS, Android, smartwatches, and tablets! Whether you're a professional musician looking to demo ideas on the go or a beginner having fun with layering harmonies, this app makes it easy for you to create clean, layered vocal tracks no matter where you are. With intuitive controls and a user-friendly interface, you'll be layering vocals like a pro in no time. 


Click here if you would like to see the prototype and try it out for yourself!

Overview

Background:

As a singer-songwriter myself, I'm always thinking of melodies and harmonies or adlibs to those melodies. Whenever I come up with an idea, I have to quickly record it so that I don't forget it, whether or not the idea has accompanying lyrics. However, once recorded, if I have an idea for harmonies, I have to record separate audio files or use more advanced recording software on my computer so that I can work on it later. 

Role:


The Problem:

The problem is, sometimes a user won't always have time to configure the advanced programs so they end up using a simple recorder to try and record the harmony without the lead melody since simple programs such as voice memos and samsung voice recorder don't allow you to layer vocals at all

Timeline:

March 2022 - April 2022

Goal:

Design a multi-platform app that allows users to quickly and easily layer vocals no matter where they are and then export files to their favourite Digital Audio Workstation (DAW).

Research

User Research:

For this project, I conducted interviews, both in person and online and created personas based on the results. I also conducted Usability studies and used the insights gathered to iterate and improve on designs.

As a musician myself I had a vague idea of the type of website I would look for but going into this project I put that aside so I could put the user first and really understand what they’re looking for. It was eye-opening because they mentioned points that I didn’t even think of and could instantly see how it could help.

Personas

Savannah

Savannah is a busy lawyer and singing enthusiast. She wants to be able to easily record multiple layers of her voice so that she can have fun harmonizing and duetting as she doesn't have anyone to sing with

Kylan

Kylan is a singer-songwriter who works as a  professional musician. He wants to be able to record and layer his ideas easily anywhere he is because he doesn't always have access to his recording software

User Journey Map

Mapping out Savannah's User journey helped me identify which areas needed more refining to help give a beginner user a smoother experience. By focusing on a beginner experience I can also improve the experience for experienced musicians, giving them a fluid way to get what they want done easily.

Pain Points

Blocks

“It's annoying when apps have barriers in the way of the process”

This will help me design an experience that meets the needs of both the user and the app without taking away from the user flow

Ease

“By the time I learn how to use the available apps u will run out of free time”

This will allow me to design an app that is both easy to use for beginners and also find a way to teach the basic during use

Navigation

“I get frustrated when I can't find what I need and what I don't need gets pushed”

This will help me design a dedicated app that is focused and deliberate in what it is offering

Low-Fidelity Designs

Paper

Crazy 8s Exercise

Mobile Wireframes

I used the Crazy 8s method to design the mobile main page, I drew out each page quickly and then when I finished, I filled in quick little details to specify what button was where and then used stars to point out which aspects worked best for the user.

Tablet and watch variations

When it came to designing for other devices such as smartwatches and tablets, I kept in mind the designs I created for the mobile wireframes so that I could ensure that I kept a consistent design across devices. I then sketched out a few iterations keeping the user in mind while I drew and then picked the version that I felt tackled the user's pain points best.

Digital

With these digital wireframes, I took the parts from the paper wireframes that I felt would give users the best experience and flow. Clear actions to move from task to task and a big overview of all their projects. I also included a menu page so users can easily navigate to other parts of the app.

Screen Size Variations

I wanted to find a way to include everything from the desktop size into the various screen sizes so I kept it simple to keep a consistent look, feel and navigational flow.

Tablet

Smart Watch Main Page

Smart Watch Menu Page

Prototype

With the Low-Fidelity prototype,  I provided users with a look at the main user flow for this site.  I tested the user flow of adding a track, recording, using the list button to view all recordings and using the menu button to start a new project

Click here to test out the prototype for yourself!

Usability Study 1

Parameters:

Study Type:

Unmoderated usability study

Participants:

6 Participants - 3 woman, 3 men

Location:

Remote: United States, United Kingdom

Length

10-15 minutes

Findings

1

Users felt like the control buttons were too close together. They would sometime accidentally click on the wrong one.

2

On the list page, users mentioned that the projects look too clumped together.

3:

Users felt like the overall view didn't look right, felt the bottom space was too empty and that a nav bar would suit some of the menu options better such as the list button.

Iterating on Designs

I then took the findings from the study and iterated on designs to keep the users points front and center.

High-Fidelity Designs

I then took the design iterations and created high-fidelity mockups. Filling in colours, font, and button icons.

Prototype (My favorite part!!)

After creating high-fidelity mockups, I created another prototype with more interactivity, so that I could perform another usability study and see if users were able to perform the main user flow now that visual elements have been included.

I then performed a 2nd usability study and used the findings to iterate on designs. I also added a splash to show as the app loads in 

Click here if you would like to see the prototype and try it out for yourself!

Iteration

I added the ability to use advanced features such as a tuner to help singers stay on key. You can also use it to tune instruments such as guitars

Screen Variation Mockups

Mobile app in Landscape

Smart Watch app

Tablet app

Accessibility & Inclusion Considerations

When designing the app, I wanted to ensure that users of various abilities and backgrounds abilities would be able to use it without issue. 

Conclusion & Takeaways

Lessons Learned

I had so much fun designing this app. Since I came from the viewpoint of an experienced musician, it was really helpful to see how to break it down to see how I can make this app inclusive for users that don't have my experience as I'm not the only example of someone who would benefit from this app. It was really important to make a point of keeping users and research front & centre to prevent my needs from seeping into designs.

Two quotes from user feedback

“I really like the look and feel of this app, from the jump it's easy to see what you have to do."


“I like the simplicity with the additional option to use advanced features. It feels like the designs have a balance between catering to beginners that are just having fun to experienced musicians who are recording ideas for work.”

Thank you for checking out my case study for
Layer Studio

To check out other projects, click the button below!