Paper also available on Medium and Behance.

Context

Initially, the idea was to respond to a personal frustration. In fact, over the years, like many music lovers, I have accumulated several music platform accounts for various reasons.

That’s why I switch daily from Youtube, Soundcloud, Deezer, etc. to listen or search for new music.

In addition to wasting time, this diversity leads to other problems. In the group of dj of my school, we wanted to make shared online playlists together but we couldn’t agree on which platform.

I intended to find out if the situation was recurrent and if so, to apply the UX methodology in order to propose a coherent product.

User Experience Design Methodology

Experience design (XD) places the user at the center of the product design. Understanding who is involved, their frustrations, their context of interaction, their goals and incorporate the findings into the product design to create something that better fits their needs.

I consider that after the first development the project will follow an agile methodology knowing that it is a digital project developed by a small team. At each sprint, small UX reasearches will inform decisions and validate the path.

Start with a good design, then test and learn as you go to perfect it.

RESEARCH

1.A. Understand the situation. User research, Benchmark.

First, to know more about the situation, I created a survey on a large community of music diggers :

• What music apps do you use? Do you change often?

Quantitative information, “what ?”. Estimate the platform repartition and the behavior. In sum, is the project is needed by the community.

• Why do you switch between App?

Qualitative information, “why ?”. Understand the reasons behind the platform switch.

(survey link, private facebook group)

The results show a significant distribution between the platforms. The risk of needing several accounts is therefore high.
This is confirmed by the interviews. Users change platforms for the format of songs and according to their needs (search, listening, playlist, etc.).

Benchmark :

Tunemymusic transfer playlist from one platform to another but all platform doesn’t provide the same songs, our target user will not be satisfied. For example, Soundcloud provides DJ mixes contrary to Spotify.

On the other hand, Zapier connects differents platforms (including musical ones) with automatics actions/notifications. However, it is not an app for listening to music.

1.B. Refining the problem and the aim user. Pain points-Goals, Persona, Metrics.

To make decisions easier I create a persona.

A persona helps to remove personal opinion when you need to decide between solutions/priorities by describing your target audience.

I sum the Facebook accounts of the people who claim to change often of music platforms.

This was also the occasion to define more clearly their pain points and goals. Those will guide the project.

If some points are assumptions at this stage, it is important to note it. It will be important to verify them in the future. Indeed, the persona can progress throughout the project.

Our user is relatively young, listen to a lot of music and like to go out.

Now that we know the objectives, we need to fix how to measure them. Metrics will help us to see which version of the product is better.

DEFINE

2. Connect research to business. Refining the goals and prioritize. User stories, MVP.

I use my research findings to start describing my future product. To do so, I describe the actions of the user in the future ideal app by user stories.

To find them I brainstorm solutions based on the need of the user and my ideas. I regroup the user stories by thematic to make sense of it all. Then, I start prioritizing to address the main value proposition first.

Product features:

• Add your accounts from different music platforms in the app.
• Access to the playlist/like/repost from those accounts directly on the app.
• Create/join collection. It is a group of playlists that you can keep personal or grow with your friends.
• Create multiplatform playlists. “Ring mix playlist”.
• You can still use others music platforms and your playlists will be synchronized.
• Search a song on several platforms at the same time.
• …

EXPLORE

3.A. Brianstorm and Sketchs.

Now we are ready to propose coherent designs. But before diving deep in one proposition it’s more interesting to diverge. Some ideas will be unusable but all can be useful.

3.B. Low-fidelity Prototype.

I produced on Figma a low-fi prototype of the application based on the sketched wireframes of each screen. It will be used to try the app design remotely with users.

Users tend to be more honest with low-fidelity prototypes, it shows that you are still open to discuss the design.

TEST

4. Confront the design to reality. User testing loop.

User population, situations.

The user population is selected with specific criteria to limit the risk of avoiding one user category and understand deeper why some users failed.

Furthermore, we could have set different situations to test like applying a time constraint or not.

Scenario test.

5 scenarios were tested by each user. They regroup the main actions we can imagine with the app.

During the test, the user has to speak to express his mental activity.

The user’s expression is of great value because it is an opportunity to find out directly why there is a problem.

The tests were all successful (completion rate 100%). This is a sign that this design is a good start. Nonetheless, the users pointed out some confusion points.

Qualitative research. User interviews.

After the test, I had an interview with each user. The opportunity for him to propose solutions and for me to clarify certain points.

What would have made the app better?

Main recommendations:

• Explicit drag n drop interactions because it is uncommon on web app.
• Add on the homepage a play button to launch a mix of every collection.
• Help new users. Through pop-up, video or f.a.q.
• Change some category names.

Implementing the changes.

Here, the changes have been relatively minor and quick to integrate. Otherwise, I could have done a new version of the low-fi prototype and another user test. At this stage, it is easy to do changes.

CREATE

5.A. Create the user interface. Moodboard, Graphic charter, Mockup.

Now that I am more confident in my design, it is worth the time to develop the graphic chart.

To begin, I looked at the different UI trends on music platforms and other apps and picked elements. There is no need to reinvent the wheel and by using standards the user will feel less lost.

Graphic charter will assure the consistency of our app: Typography, Spacing, Color, UI Elements, States, Logo.

Here the user interface is minimalist/flat design. The app highlights playlist’s covers that the user can change. They give personality to the page.

All the icons were created inside Illustrator and transfer to Figma.

The colors have been chosen with the help of material.io color tool. Light blue and strong red for a fresh and energic visual.

5.B. Mid-fidelity Prototype.

The mid-fi prototype was also done in Figma and show more precisely the interaction inside the app. It is by definition more representative of the look and feel of the product.

Depending on the need I could have done a hi-fi prototype. Where you could have, for instance, really add a Soundcloud account. It is a pros and cons question. I judged that the time required to create it would be better invest in a real functional Minimum Viable Product (MVP).

COMMUNICATE

6. Market the idea. Create a first user base.

The first proper design version of the solution for the user problem is done. We can now promote it and create our first user/client base. Kickstarter, mailist, contest, advertising, …

I created a simple mailist page for the project.

We could also jump into developing the first functional version and communicate after.

DEVELOP & FINALISE

7.A. Define the implementation plan for the functional product.

To develop the solution efficiently we need an implementation plan which sets our priorities.

It is based on the first plan we did (part 2.) but we refine (grooming) the user stories of the plan in smaller and more precise actions if needed.

One user story can imply many things like a search field, a filter, a search result page, etc.

Technically, the application will mainly use the APIs of the different platforms: Spotify API, Deezer API, Soundcloud API, etc.

The design is never definitive and can always evolve in dialogue with the developers and according to the technical constraints.

7.B. Supply the product backlog. Monitor and perfect the product.

We use the new feedbacks we will receive to supply the product backlog and the UX cycle will repeat: explore, test, etc. Those can be bugs, user requests, requirements, user stories, or new features.

Main challenges I see for the moment:

• Verify the possibilities from the personalized embed codes and APIs from music platforms. I find this personalized player for Soundcloud. Dependency of the application to these embed codes and APIs is identified as a major risk.
• Develop and maintain the application cross-environment (web desktop, web mobile, in-app).
• Switching the application from a personal audio platform to a music social network. The first MVP would surely be only for personal collection.

That is all for now, thanks for reading. Do not hesitate to test the prototype and share your thoughts!

Arthur Glaizal, UX/Product Designer, Behance, Linkedin, Medium.