Waaves

A music collaboration platform

The rapid development of the Internet has unequivocally changed the world, and the music industry is no exception. Musicians seek meaningful collaboration partners, but have trouble finding other artists with complementary skill-sets and interests. When working in isolation, musicians struggle to complete original songs to share their product.

Client: Waaves
Services: UI, Website Design, IxD
Timeframe: 3 Weeks

Challenge

How do we provide musicians a way to find collaborators outside of their network, access to resources for learning and a way to work together in real time so that they can produce more completed songs?

The client wanted the site to visually inspire amateur musicians while allowing them to quickly search for and post new tracks for peer feedback. A key feature was the integration of a shared digital audio workstation (DAW) that allowed musicians to remotely collaborate with one another in real time. Despite this feature being the unique selling point of the product, the client planned to roll out the DAW plugin for Waaves v2.0, so my team focused our efforts on designing a community-focused platform.

At the onset of the project, I anticipated that the most challenging aspect would be developing an interface that balanced the verve of the music industry with the heavy amount of written content that’s typical of forums/message boards. It was imperative that we reduced as much of the noise on the interface as possible, producing an intuitive interface that would let the music speak for itself. My team relied heavily on user interviews and the insights from strategic desirability testing to guide us to a finished product that maintained the integrity of the wireframes while advancing the Waaves brand visually.

Approach

Research
In our first meeting with the client we sought to understand their visual tastes and preferences, as well as how closely the UX work aligned with their product vision.

We discovered that they were open to essentially any visual direction we wished to pursue, as long as it felt modern and was easy to use. According to our UX team’s research, the most prominent users were likely 15-35 year old producers and vocalists in the hip-hop and electronic genres.

Analysis was performed on nine websites to develop a more complete picture of the competitive landscape that Waaves faced. We also reviewed three social media and forum-style platforms to better familiarize ourselves with patterns that the target demographic typically interacted with. 

It was important to cast a wide net in our research in order to paint an unbiased, more complete picture of our users.

We identified Soundtrap, Splice and (the now defunct) Yik Yak as the most pertinent visual assessments. Bold colors created energy and commanded attention, but only when used sparingly. Poor control over the size and quality of user photos ran the risk of eroding trust in the brand and felt amateur. Most importantly, we saw how clutter and information density had the potential to frustrate the user and turn them away from the product.

We used these insights to develop opportunities for Waaves to distinguish itself on the market and build brand equity. It was important to use white space to break up the information and reduce visual tension, adding emphasis where necessary and clarifying relationships between content. After synthesizing our findings, we revisited the UX team’s research and our notes from the initial client meeting to help frame our design principles. Our focus was striking a balance between youthful vibrance and a sense of industry-level professionalism.

Style Explorations

The client felt that these principles aligned perfectly with their vision for Waaves, so we moved forward to divergent style explorations. I created three style tiles through the lens of our user and presented them to the 5 members of our client team. Having presented design work to small groups in the past, I anticipated the likelihood of receiving conflicting feedback and–even worse–potential groupthink. As a team, we drafted strategic follow-up questions that focused our clients’ feedback on their interpretation of our styles as they’d work for the Waaves brand, steering them away from personal preference.

All three designs were well-received by the client in their own unique ways, but unfortunately this didn’t leave me with a clear direction moving forward. I tried to extract more top-level, conceptual takeaways from their feedback to identify why they preferred certain treatments and whether or not they aligned with our research insights, design and principles and their brand values. I took elements from all three styles and proceeded to initial mockups and user testing.

Improving the user experience

Having established elements of the brand style, I examined the UX team’s wireframes for any points of confusion or ambiguity. I wanted to push the wireframes’ boundaries a bit because they didn’t utilize intuitive patterns, nor did they abide by the philosophical idea of Occam’s Razor (a simpler layout will always be better than one with layers of complexity). My initial adjustment was moving the top navigation to the left edge, creating a dashboard format that eliminated some of the nested navigation taking place. 

Restructuring the navigation created a central column that directed the user’s eye to the most important content – the tracks. The scrolling feed worked similarly to Facebook’s structure with an affixed column on the right hand side of the screen that displayed community members.

In order to maintain the consistency of the new structure, I needed to adjust the layout of the Contract and File History pages as well. I discovered that the Recent Collaborators list was in the left column of the page, however a similarly structured list of Featured Artists was placed in the right column on every other page. With no documented annotation for the switch in layout, I made the page structures uniform to maintain the user’s mental model.

I felt confident that my changes to the wireframes benefited the user by reducing friction in the site’s usability. In order to validate my assumptions, A/B testing was performed with more than 20 random people. It was revealed that simplifying the navigation and keeping a consistent layout gave the content more visual importance, effectively meeting the users’ primary need on the platform.

User Testing

We collaborated as a group to develop a strategic outline for the testing process that guided our interviews and ensured we met our user’s needs. The test outline focused on the emotional impact our designs had on users, our visual organization of content, and the guidance we gave them. It was also important to determine whether our designs aligned with Waaves’ brand direction and our design principles, so we performed desirability testing

Desirability testing informed our team as to why different design directions evoked certain emotional responses in the target audience.

In addition to the feedback-based qualitative insights it provides, it also had quantitative benefits. It measured our design directions against a specific list of adjectives we created and provided hard data to present to our client. Setting a benchmark of data also allowed us to visualize our progress as we navigated the iterative design process. We tested a couple key screens with users before diving into building out the rest of the wireframes.

My initial mockup for the homepage tested very well. Elements from all three style tiles were combined into one cohesive interface that users agreed was very community-focused. Placing content into cards organized and structured the layout, maximizing white space and allowing me to keep the general aesthetic clean. Color was used sparingly to increase its visual impact and draw users’ attention to specific interactive features.

In addition to the home feed, I tested the search results page that users would see while filtering through prospective collaborators. This page presented the biggest challenge to me throughout the project, because I knew it played an integral part in portraying the brand identity despite being extremely information heavy.

Profile pictures were left untreated to ensure that each artist felt like an individual, but were scaled down to account for the track preview sound wave graphics. The track preview button was tucked neatly into the corner, allowing the banner image to contain track information and as well as social media stats.

After this first round of testing we synthesized the feedback and presented our findings to the client. I was happy to report that my trending adjectives were creative, trustworthy, energetic, friendly, and busy.

Our testing helped me consider the users’ specific goals as well as those of the brand itself.

I determined the issues surrounding the busyness of my interface were caused by the combination of tight spacing and the overuse of the gradient. Changes were made to the layout to account for ease-of-use concerns before heading into the final sprint.

The Result

I arrived at my final product screens after reiterating based on additional rounds of user testing and client feedback.

I reduced the width of the “featured artist” column by eliminating the “View” button and tightening up the margin. The ability to collapse the side navigation was added and made the central column 166 pixels wider. This extra width focused the user’s eye to the center of the page and reduced the busyness within the track cards.

The banner on the user profile uses the gradient from the search results hover state, but its large size permits the image to remain in focus without distracting from the content on top. Keeping in mind the use case of the site and this particular page, I utilized color and fill states to prioritize CTA buttons in the header. Simple, yet bold infographics give the viewer a quick glimpse into the working history of the artist and add professional credibility to their profile.

I adjusted the spacing between the cards to create more distinguished columns, eliminating the optical illusion in the negative space. The user’s banner image was blurred to treat it more like a texture or pattern. This redirected the eye to the profile picture, which was moved into the bottom half of the card so it wouldn’t compete with the track itself. I overlaid the inactive cards with the brand’s blue hue and only used the gradient on rollover.

Users could take full control of the business aspect of their collaboration here, a common use case that challenged me to adapt and implement visual elements for a less dynamic page. The slider and tab navigation for the entire site was developed with this particular page in mind. I designed the multi-tier tab system to reduce the cognitive load during this stressful process.

The final designs tested extremely well because they allowed the users to feel visually unencumbered and free to explore the site. The combination of engaging colors with clean, open layouts placed high value on the creativity of the artist and industry-level professionalism. Users stated that they felt they were on a unique platform that respected their artistry and skill-set.

Check out the Invision prototype to see how I carried the brand style through the entire site.

Style Guide
I created a comprehensive style guide that covers every aspect of the Waaves brand for future design and development considerations. Included in the guide are explanations about core values and brand voice as well as detailed breakdowns of UI elements. In addition, I redlined multiple key screens to guarantee the consistent application of brand style regardless of who continued the design work next.

Next Steps
Due to the short 3 week timeline, I was unable to consider the onboarding process for new users. If I were to continue working on the project, I would coordinate with the client to better understand their vision for marketing Waaves and how they wanted to approach this first contact with users.

In addition, I would address the mobile version of the site. The integration of the DAW would almost certainly require a native app to be developed if the client wanted to maintain the same functionality as the desktop version. An alternative solution could be to transform the mobile version into more of a content management system without the music-making capabilities.

Insights

Building off the momentum of Voluntopia, this project challenged my design thinking and gave me valuable insight into the benefits of the iterative process. Undergoing multiple rounds of both usability and desirability testing taught me to synthesize the user tests quickly and extract actionable feedback within the framework of our brand vision and design principles. I learned how to conduct effective interviews and ask questions that provided me with actionable takeaways.

This project also highlighted the challenge of balancing a product’s functionality with its aesthetics.

I had to process the research and site architecture before I could understand how to view it from a UI perspective. Once I did, I was able leverage the functional strengths of Waaves and design a better visual product for the client and the user. This experience honed my ability to identify and capitalize on a brand’s value proposition, a design skill that I utilized on my next project as well; Savvo.