‍

‍

For this student project, we worked with real clients. My team was assigned to Waaves—a musical collaboration website which uses a screen share and a high-quality audio extension to allow musicians to collaborate remotely. They needed us to work our UX magic and increase their user retention.

‍

‍

How Waaves Works

The screen-share enables musicians on each end to see one another's digital audio workspaces. (DAWs are expensive and complicated software programs for building songs, layer by layer. They are incompatible with one another—a major obstacle to collaboration.) Waaves was intended to be a quick fix. As remotely collaborating musicians listen to each other's work, they can offer feedback via chat or request to start a video.

‍

‍

Also, the screen-share's high-quality audio web browser extension allows musicians on each end to record audio through the browser and directly into their unique DAWs.

‍

‍

‍

‍

Our Research

We did the following:

1. Researched current digital music production process
2. Competitive analysis
3. Survey - EDM, Hip Hop, and Production Facebook groups and Reddit pages
4. Interviewed people from social networks, as well as survey respondents
5. Conducted user testing on Waaves beta site

We interviewed 12 producers and musicians across genres, including EDM, hip hop, techno, indie, and rock. We conducted the majority of our interviews over the phone.

We had a total of 72 survey respondents. Out of those respondents, the majority were Waave's target audience: musicians, producers, and audio engineers of Hip Hop and EDM who use DAWs to create music, and who collaborate remotely.

Of the surveyors who were open to an interview, we reached out to gain a deeper understanding of their process and the pain points of their experiences. From our 30-minute to hour-long interviews, we discovered the following pain points:

‍

‍

Ultimately, musicians have difficulty communicating while collaborating remotely. Whether it is the lack of face-to-face contact or the inefficient methods for sharing work like sending and loading music files.

The concept of Waaves seemed to address some of these pain points. Musicians could collaborate inside of a virtual collaboration room, where they could speak with one another, share their work, and exchange feedback.

But we knew there was a disconnect. So we had the interviewees go into the Waaves website and try it out.
Of the issues arising, we heard comments like:

1. “Cool idea but currently unusable.” – IVAN
2. “Uploading files takes a lot of time.” – KELVIN
3. “Before I signed up I didn't get the difference between this and Soundcloud.”  – FREDDIE
4. “Einstein in the background– that’s weird.” – MARK

‍

‍

‍

Competitor Analysis

Furthermore, we analyzed competitors of Waaves to get a better idea of what Waaves was up against. We discovered the following:

‍

‍

Among Waaves' competitors, we found they implemented a variety of tactics to satisfy their users. Among these things, some competitors allowed musicians to record, some implemented their social network, and others created their own DAW.

‍

‍

Key Takeaways

The most important things we learned from our research were that:

1. Remote collaboration is frustrating due to time constraints and communication issues
2. People are not able to understand the product and capabilities through Waaves branding/website
3. Waaves beta does not have a streamlined user flow, causing people to disengage with the product
4. Collaboration is driven by the human instinct to create and connect with other people
5. People try to replicate the organic human interaction and processes of sharing tastes, ideas, and skills with things like video chat, music sharing platforms, and online forums

Now that we had a sufficient amount of research and some key takeaways, we decided to start design ideation. Due to the technicality of the product, we were incapable of knowing what features would be feasible, so we invited our client to a design studio.

‍

‍

Design Studio

‍

‍

The session was fruitful. We ended with over 30 concepts and a stronger understanding of what our clients wanted and could accomplish. Afterward, we needed to prioritize the concepts and decide on the most valuable product (MVP).

‍

‍

1. Using a numerical rating system, we distilled concepts into an MVP that included social network aspects.
2. Our overall design pivoted due to feasibility issues and the client's request. Now we focused exclusively on the onboarding and collaboration process.

‍

‍

Design Principles

1. Promote collaborative interaction and enable sharing of information, skills, and resources.
2. Reduce the barriers and stress associated with remote collaboration and mimic the conditions needed for users to experience genuine human interaction.
3. Help users communicate with fellow collaborators more effectively.
4. Reduce learnability and usability issues with Waaves platform.

‍

‍

My Sketches

‍

Dashboard and Profile

‍

Collaboration, Invite, & Archive

‍

Onboarding

‍

‍

Prototype I

Our first prototype began as more paper sketches. We analyzed my sketches and deliberated until we found the most fitting designs.

‍

Next, we digitized our wireframes and entered them into a prototype engine.

‍

Immediately, we reached out to our interviewees who had agreed to participate in test runs of the prototype. We also reached out to volunteers provided by our client. Through a screen-share, we had participants follow a link and use the prototype as they would a real website as we asked them questions, such as:

1. "What would you do if you wanted to do this?"
2. "What do you think this icon is for?"
3. "What would you want differently?"

Although participants mostly understood the prototype, there were still a few kinks to work out. Some of the negative responses we received were:

1. "I don't understand what this is." — ALEX
2. "How am I supposed to record?" — ALEX
3. "The buttons over the DAW is annoying. I can't see everything." — NICK
4. "The sign in is maybe too vague." — JERIN

‍

We knew we had some things to fix, but before we went straight into reiteration, we wanted to do a little more research to inspire brainstorming. For one thing, the clients desired a brand analysis. While we knew what their competitors were offering, and an idea of what those differences meant for the users, we hadn't evaluated the brands themselves.

‍

‍

Brand Analysis

Things said about our client's brand included:

1. "This is a cutting edge product, but the design isn't edgy."
2. "Is this a website for a spa or something?"

So we looked into some of the more popular brands to get an idea of how they were marketing themselves. Splice and Ableton both had bold sans serif logos and matching font throughout their site. Their layout was clean and straightforward. They made use of each space; whatever photo of the figure shown was direct and useful.

‍

‍

‍

‍

‍

‍

Prototype II

After improving areas of user complaint and readdressing the brand, we created our second prototype. This prototype was not tested. We presented it to the client immediately after putting it together and checking it for errors. The client intends to apply our design for their Beta launch.

‍

‍

‍

‍

Prototype II Breakdown

‍

1. Our hero clarifies the product's affordability.
2. The colors are drawn from the product video and repeated throughout the site.
3. The font is simple, but the logo is bold and attention-grabbing.
4. The same goes for the coloring of the "Sign Up" link in the top right.

‍

‍

1. A summation of site features keeps the user in control.
2. Icons are repeated throughout the site for quick learnability and memorability.

‍

‍

1. A second summation screen drives in the point.

‍

‍

‍

‍

Onboarding Breakdown

Initially, there was no concise onboarding process, which caused frustration for new users. Here's what we did and why.

‍

‍

‍

‍

‍

‍

Collaboration Room Breakdown

‍

‍

‍

Delivery

We presented the client with:

1. Our research findings
2. Sketches of original and reiterated designs, along with user testing feedback
3. An explanation of our brand analysis
4. A video of the prototype
5. Annotated wireframes
6. Suggestions for Post-beta additions

‍

‍

Post-beta Additions

The MVP for the Post-beta stage included a social network. Although the client was reasonably disinterested in doing this for their Beta, research showed that musicians desired a social network to aid their collaborations.

We had shown the client some frames for our ideas mid-way through the project, and because of their preference, kept it for Post-beta suggestions.

‍

‍

Final Thoughts

The client was thrilled with our delivery. They plan to take our designs into action. I am excited to see them move forward and gain a highly retentive user base.

Please visit the website at https://www.waaves.io/.