Soundtrap

This is the final case that we did during my education in UI and UX design at Berghs together with Soundtrap. Soundtrap is a part of Spotify AB and an online music platform where musicians from the whole world can come together and create music. The original brief was to investigate an idea that they had with a place within the platform where users would add and share content from a whole range of different sources. But the insights we got doing user research took us in a different direction. Our focus shifted from creating one feature to look at the community as a whole and conceptualize how we could encourage users to collaborate and interact more with each other to increase the tool's experience and value.

SCHOOL PROJECT
Berghs / Client Soundtrap

TIMELINE
2 weeks

ROLE
UX / UI Design

Benchmarking_1177x1200_1

Benchmarking and research
We started the project by doing a heuristic analysis of the existing site, with the purpose of finding out which parts of the interface that created the most pains and gains. We also looked at other online music services to get more knowledge of the business and the potential users.

Benchmarking and research
We started the project with doing a heuristic analysis of the existing site, with the purpose of finding out which parts of the interface that created the most pains and gains. We also looked at other online music services to get more knowledge of the business and potential users.

Benchmarking and research
We started the project by doing a heuristic analysis of the existing site, with the purpose of finding out which parts of the interface that created the most pains and gains. We also looked at other online music services to get more knowledge of the business and potential users.

Validation and testing of the existing site
In connection with our analysis work, we did user tests of the site to find out if there were any obstacles the users had navigating and their overall experience. 

Validation and testing
In connection with our analysis work, we also did navigation tests on users to see how they experienced the site today. The findings that we did was that the majority of users found it hard to navigate on the site. We also found that the community itself had some shortcomings and great development opportunities.

exsisting–site_1177x1200
Surveys_part1_1177x1200

User surveys

To narrow down the target group for more qualitative interviews, we started by sending out a questionnaire. We ended up with twelve questions, both with multiple options and some demanding, more detailed answers that we used to create our first hypotheses.

 

User surveys
We organized a workshop where we brainstormed ideas for questions that we wanted to ask the users. We sent out a questionnaire with about twelve different questions, both multiple options, but also questions demanding more elaborate answers. We collected the information, which was quite broad, and took to sketching and created a provisional hypothesis.

Qualitative interviews
After analyzing the first batch of surveys we created another one. Focusing on the community and collaboration, We wanted to find out what the user's goal was, how they collaborate, and how we could make that experience better for them. 

We also held qualitative interviews with musicians and tested some rough sketches on the interface. As a result, we got really valuable insights that we used in our idea generation workshop

Qualitative interviews
After analyzing the first batch of surveys I created another one. Focusing on the community and collaboration I tried to find out what the users would benefit from and what they would like to share among each other. 

I also held qualitative interviews with musicians and tested some rough sketches on the interface. As a result, I got really valuable feedback and ideas for features to develop.

Surveys_part2_1177x1200
Hypotes_1177x1200

Insights
The users really liked the concept of collaborating with other musicians online. However, we noticed that only a few really took the step of connecting with other users within the community.

These insights took us in a different direction from the original scope. Our focus shifted from creating one feature to look at the community as a whole and conceptualize how we could encourage users to interact more with each other and make it easier for them to do so.

Hypothesis (revised)
We saw that the users really liked the design of the music studio and the idea of collaborating with other musicians. However, we noticed that only a few really took the step of connecting with other users and that many functions that were desired to do so didn't exist today. 

Based on our research we re-evaluated our hypothesis seeing the need to develop the community, re-design the site and adding more features to encourage users to interact more with each other.

Hypothesis
With the findings from the interviews and the second batch of surveys, we created the hypothesis below that we thought could help increase the collaboration within the tool and started to develop some low-fi wireframes. (not the ones to the right)

  • Users want to access more information on peoples profile pages and to showcase themselves in a better way
  • They want an indication if another user is interested in collaborations or not
  • Statistics, comments, and ratings increase usage
  • They wish for more direct communication with other musicians
  • They wish for more focus on highlighting and showcasing their own and others music for inspiration and feedback
  • Many users are interested in seeing other people create
  • They think that one of the perks of being part of a music community and to collaborate with other musicians is that they can learn from each other
  • Users want to share inspiration, tracks, lyrics, and recordings with people they collab with 
  • Pitching on other users tracks is a recurring idea to improve the quality of collaborations

Wireframing
After the interviews and the second batch of surveys, I started to create wireframes based on the findings below. 

  • Users want to access more information on peoples profile pages and to showcase themselves in a better way.
  • They want an indication if another user is interested in collaborations or not. 
  • Statistics, comments, and ratings increase usage.
  • They wish for more direct communication with other users.
  • More focus on highlighting music.
  • They want to take part in other peoples music for inspiration and share their own for feedback.
  • Many users are interested in seeing how other people work. They think that one of the perks of being part of a music community and to collaborate with other musicians is that they can learn from each other. 
  • Users want to share inspiration, tracks, lyrics, and recordings with people they collab with.
  • Pitching on other users tracks is a recurring idea to improve the quality of collaborations.
Wireframes_1177x2400_1
Navigation_1177x1200_2

User testing
After the first wireframes were done we tested them on five different users, repeating the same navigation tests that we did on the existing site. We also let them choose between different names for the new features, trying to find out which ones that explained the purpose best. 

We then used the feedback to make adjustments in our design.

User testing

After the first wireframes were done I tested them on five different users, repeating the same navigation tests that we did on the existing site. I also let them choose between different names for the new features, trying to find out which ones that explained the purpose best. 

I collected the feedback that I received, made some changes and created the first prototype. 

Prototype
In order for it to be a realistic project that could be incorporated into the existing site and service, We used Soundtraps guidelines for the Look 'n' Feel on the interface. 

Please follow this link https://invis.io/65PMFZEFYZ7 for a clickable prototype of the final result (The media player are supposed to stick on the footer).

Prototype
In order for it to be a realistic project that could be incorporated into the existing site and service, I used Soundtraps guidelines for the Look 'n' Feel on the interface. 

Please follow this link https://bit.ly/2BVAI0a for a clickable prototype of the final result (The media player are supposed to stick on the footer).


Prototype_1920x540x2_2

The results
These are some of the features that we conceptualized for evaluation and testing using prototypes.

  • A media player to save and collect files and sounds
  • Creative boards for saving and sharing inspiration
  • A feature that allows users to write lyrics in the same document
  • Chat groups and forums for more direct contact
  • Live streaming and tutorials, both from users and Soundtrap
  • The possibility to let other users pitch ideas on a track
  • A new icon that indicates if a user is interested in collaborations
  • Statistics and recent activity are highlighted on the private profile page
  • The public profile page includes more information about users
  • Users can create and save playlists from other users and Soundtrap
  • A more advanced search function to find other musicians

New features

  • A media player to save and collect files and sounds.
  • Creative boards for saving and sharing inspiration.
  • A feature that allows users to write lyrics in the same document.
  • Chat groups and forums for more direct contact.
  • Live streaming and tutorials, both from users and Soundtrap.
  • The possibility to let other users pitch ideas on a track.
  • A new icon that indicates if a user is interested in collaborations.
  • Statistics and recent activity are highlighted on the private profile page.
  • The public profile page includes more information about users.
  • Users can create and save playlists from other users and Soundtrap.
  • A more advanced search function to find other musicians.
Chord_1200x1177_5
Mediaplayer_1177x1200_1

How the trap works
One of the features we tested and developed was a media player made for saving clips from tracks, recording sounds, and uploading files to the creative boards. 

The player is found the mobile app, on the site and is also available as a menu icon on the desktop bar for quick access. When you click on the icon the media player appears as a pop-up box. To save a clip from a track the user puts two marks in the timeline to cut out the part they want to save.

When listening on a track uploaded by another musician on Soundtrap the user has the ability to comment on the track and write a message directly to the user through the media player.

How the trap works
One of the features I tested and developed with the brief in mind was a media player made for saving clips from tracks, recording sounds and uploading files to the creative boards. 

The player is found the mobile app, on the site and is also available as a menu icon on the desktop bar for quick access. When you click on the icon the media player appears as a pop-up box. To save a clip from a track the user puts two marks in the timeline to cut out the part they want to save.

When listening on a track uploaded by another musician on Soundtrap the user have the ability to comment on the track and write a message directly to the user through the media player.

Creative boards
The files and recordings that are added through the media player can either be saved on the user's device or to the Creative boards within Soundtrap. The boards can be set to public, shared with collabs or set as private. They also have a feature where the user can co-write lyrics in the same document, similar to google drive.

For quick access while creating music the user can access the boards directly from the studio.

Creative boards
The files and recordings that are added through the media player can either be saved on the user's device or to the Creative boards within Soundtrap. The boards can be set to public, shared with collabs or set as private. They also have a feature where the user can co-write lyrics in the same document, similar to google drive.

For quick access while creating music the user can access the boards directly from the studio.

Creativeboards_1177x1200

SOCIAL MEDIA
Behance – Instagram – LinkedIn

COPYRIGHT
© 2020 Maria Thulin