Soundtrap

Soundtrap

SCHOOL PROJECT
Soundtrap, End-of-study-project:
Berghs School of Communication, Digital Design - Upgrade


ROLE 
UX / UI Design


TEAMMATES
UX Design – Hans Söderström, Sandra Domeji, Lene Jonson


PROTOTYPE
https://invis.io/65PMFZEFYZ7
(The media player are supposed to stick on the footer).

All images in this project are used for sketching only.
Copyright belongs to the photographer.

SCHOOL PROJECT
Soundtrap, End-of-study-project:
Berghs School of Communication, Digital Design - Upgrade


ROLE 
UX / UI Design


TEAMMATES
UX Design – Hans Söderström, Sandra Domeji, Lene Jonson


PROTOTYPE
https://invis.io/65PMFZEFYZ7

All images in this project are used for sketching only.
Copyright belongs to the photographer.

CLIENT 
SoundtrapEnd-of-study-project:
Berghs School of Communication,
Digital Design - Upgrade

ROLE 
UX / UI Design


TEAMMATES
UX Design – Hans Söderström, Sandra Domeji, Lene Jonson

PROTOTYPE
https://invis.io/65PMFZEFYZ7

Soundtrap is an online music platform where musicians from the whole world can come together and create music together. Soundtrap is a part of Spotify AB.

In the original brief that we got from Soundtrap our task was to think of something similar to Pinterest, but for collecting sounds and music. A place within Soundtrap where the user should be allowed to add content from a whole range of different sources. For example, record sounds from their environment, taking a short clip from a song on Spotify, Soundcloud or YouTube, and more. The purpose was to encourage users to interact more as well as strengthen Soundtrap's position as the obvious choice for musicians to collaborate online.

 

Soundtrap is a online music platform where musicians from the whole world can come together and create music together. Soundtrap is a part of Spotify AB.

In the orginal brief that we got from Soundtrap our task was to think of something similar to Pinterest, but for collecting sounds and music. A place within Soundtrap where the user should be allowed to add content from a whole range of different sources. For example, record sounds from their environment, taking a short clip from a song on Spotify, Soundcloud or YouTube, and more. The purpose was to encourage users to interact more as well as strengthen Soundtrap's position as the obvious choice for musicians to collaborate online.

 

Soundtrap is a online music platform where musicians from the whole world can come together and create music together. Soundtrap is a part of Spotify AB.

In the orginal brief that we got from Soundtrap our task was to think of something similar to Pinterest, but for collecting sounds and music. A place within Soundtrap where the user should be allowed to add content from a whole range of different sources. For example, record sounds from their environment, taking a short clip from a song on Spotify, Soundcloud or YouTube, and more. The purpose was to encourage users to interact more as well as strengthen Soundtrap's position as the obvious choice for musicians to collaborate online.

 

Soundtrap is a online music platform where musicians from the whole world can come together and create music together. Soundtrap is a part of Spotify AB.

In the orginal brief that we got from Soundtrap our task was to think of something similar to Pinterest, but for collecting sounds and music. A place within Soundtrap where the user should be allowed to add content from a whole range of different sources. For example, record sounds from their environment, taking a short clip from a song on Spotify, Soundcloud or YouTube, and more. The purpose was to encourage users to interact more as well as strengthen Soundtrap's position as the obvious choice for musicians to collaborate online.

 

The Process

The Process

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 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 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.

Validation and testing of the existing site
In connection with our analysis work, we 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.

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
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 with multiple options and some demanding more elaborate answers. 

We collected the information, which was quite broad, started sketching and created a provisional hypothesis.

User surveys
We organised 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 option, but also questions demanding more elaborate answers. We collected the information, which was quite broad, and took to to sketching and created a provisional hypothesis.

Qualitative interviews
After analyzing the first batch of surveys I created another one. Focusing on the community and collaboration, I wanted 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.

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 qualatative 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

Hypothesis (revised)
We now knew that the users really liked the design of the music studio and 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. And that several 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 (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.

Wireframing
After the interviews and the second batch of surverys, 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 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 surverys I started to create wireframes based on the findings below. 

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

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. 

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

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

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://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

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.

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.
  • Livestreaming and tutorials, both from users and Soundtrap.
  • The possibility to let other users pitch ideas on a track.
  • A new icon that indicate if a user are interested in collaborations.
  • Staticts and resent activity are highlited on the private profile page.
  • The public profile page includes more information about the 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 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.

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 are 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 listeningen on a track uploaded by another musician on Soundtrap the user have the ability to comment on the track and write a message direcly 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 users device or to the Creative boards whitin Soundtrap. The boards can be set to public, shared with collabs or set as private. They also have a feature were user can co-write lyrics in the same document, similiar to google drive.

For quick acess while creating music the user can acess the boards direcly from the studio.

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

For quick acess while creating music the user can acess the boards direcly from the studio.

Creativeboards_1177x1200

More projects

SoundtrapUI/UX Design

Volvo FamilyUI/UX Design

StockusUI/UX Design

Coop, AlmanackaArt Direction

PaolosArt Direction

4 för 80Art Direction