Embedded Files
Record Melodies and Harmonies with ease
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
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:
Product Designer
Visual, Interaction and Motion Designer
User Research
Prototyping
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
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
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
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
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
Low-Fidelity Designs
Paper
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
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
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
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
Iterating on Designs
I then took the findings from the study and iterated on designs to keep the users points front and center.
I moved the two control button areas apart to minimise accidental clicks
I made the project list an actual list view to spread them out a bit
I created a nav bar and moved key nav buttons there to make navigation quicker and easier, but also kept the menu so that all places are accessible
High-Fidelity Designs
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!!)
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
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.
When designing I made sure that the main colour and icons were high-contrast so that they pass the Web Content Accessibility Guidelines (WCAG) meaning that all sighted users can easily spot buttons.
I used universal buttons that are also self-explanatory so that users that may not have the strongest digital literacy can still understand the function of buttons in the main user flow
I designed the site in a way that allows for easy navigation so that users that don’t have a range of mobility or require navigation through the keyboard alone or other devices can move through the website easily. I also have plans to make it possible to operate the app and search functions through voice.
I used alt text and plan on implementing audio descriptive features
Conclusion & Takeaways
Conclusion & Takeaways
Lessons Learned
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
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!
Page updated
Google Sites
Report abuse