Add a Feature — Project #3

Photo by Wesley Tingey on Unsplash

The fourth week of the Ironhack bootcamp just ended with the presentations of our Project #3.

The brief

During this project, I had to analyze an already existing and highly adopted app and incorporate a new feature into the existing product. We had one week to finalize the project.

The Client

My app of choice was Spotify because when I used to look at my statistics it was my most used app. Now things are different: Spotify was replaced by Figma and Zoom. It makes sense, right?

Spotify is the world’s biggest music streaming platform by number of subscribers (165 million). Users (365 million) of the service simply need to register to have access to one of the biggest-ever collections of music in history, plus podcasts, and other audio content.

Spotify second quarter 2021 financial performance report (July 28, 2021)

It operates on a freemium model. Free Spotify access comes with lower sound quality, and advertisements, and requires an internet connection. Those who pay for Spotify Premium can listen uninterrupted to high-quality recordings, and are able to download songs to any device on which they have the Spotify app.

The company was founded in 2006 in Stockholm, Sweden, by Daniel Ek and Martin Lorentzon. The two wanted to create a legal digital music platform to respond to growing challenge of online music piracy in the early 2000s. They are now the leader with 32% market share. In second position, you will find Apple Music and Amazon Music on third position.

My role

  • Feature Competitive Analysis
  • User Research / App Analysis
  • Affinity Diagram
  • Proto Persona
  • User Journey Map
  • Problem and Hypothesis Statement
  • Feature User Flow
  • Low-Fidelity Wireframes
  • Mid-Fidelity Prototype
  • Atomic design
  • High-Fidelity Prototype

The Process

I always perform the well known design thinking approach that I adapt to each project regarding to resources and available time.

Stage 1 : Empathize

Research

We were asked to do some basic research for this project in order to focus on other aspects such as our visual design skills. Nethertheless, I interviewed 7 streaming platform users and organized the gathered information in an Affinity Map.

Affinity Map

The fact is that Spotify seems to have all the desired features. Plus they are always enhancing the platform and user experience. I confirmed that by visiting their newsroom. Some features that my users mentionned during the interviews were recently launched like a live audio platform (Spotify Greenroom) or a playback experience with Facebook.

When doing my competitive analysis, I found out that one of the biggest strengths of Spotify is their sharing and social features. Users that I interviewed were very sensitive to this aspect. It appears that the COVID pandemic situation has increased the need of sharing who we are with people we love. They confirmed to me that sharing is important for them especially when they have spent time creating playlists for friends. At that point, I realized that I had my persona.

I decided to help the Playlist Maker. At least, every month he does a new playlist with his recent findings and share it with his friends by sms or WhatsApp. It’s a lot of work, reading reviews, listening good songs and bad ones, choosing the right order of appearance for each song. My (proto) persona would love to have some quantitave feedback directly in Spotify, just like you have in other social platforms.

Proto persona / Archetype : The Playlist Maker

Cyril, 36 years old is a Tax Lawyer, living in Paris. He is a music influencer for a large number of friends. He doesn’t want to create a blog or a You Tube channel but he wants to share its latest indie music findings with a engaged community. He has many playlists on Spotify with his preferred artists and new findings. Each month he does a new playlist for his friends that he shares on a WhatsApp group. He wants to share it with a larger community within the Sportify app without having to share a link or share on Facebook for example.

Stage 2 : Define the problem

Once you’ve empathized with your users, you can move on to the second stage of the Design Thinking process and define the problem your users need you to solve.

A problem statement (or Point of View — POV Statement) identifies the gap between the current state (i.e. the problem) and the desired state (i.e. the goal) of a process or product.

Then I wrote an hypothesis statement following the hypothesis framework.

With my problem statement in hand I can move on to the ideation phase, where I’ll turn my problem statement into “how might we” questions and generate as many potential solutions as possible.

Stage 3 : Ideate

In the ideation phase I created a user flow chart. The happy path consisted in adding the possibility to share to a group and to get statistics.

I drafted those two ideas in the low-fidelity wireframes.

During the first tests, it appeared that it would be useful to add a page in the happy path showing all the playlists and a button to go directly to the dashboard.

Stage 4: Prototype

Mid-Fidelity Prototype

In this week’s project we learned bout Atomic Design, a system which involves breaking down a website or web application into its basic components so that they can be reused throughout the site.

The term and methodology were coined by Brad Frost, a web designer, speaker, and writer. He’s the author of Atomic Design.

If you are not familiar with atomic design, here is the example we worked on in class.

Atomic Design, introduces a methodology for creating scalable systems and reusable components, instead of the limited “pages” metaphor inherited from the early days of the web. It is also a methodology for creating design systems. There are five distinct levels in atomic design:

Atomic Design for Streamloan

If a site is created according to the Atomic Design principles from the get-go, all the atoms and molecules that are created before the site is built can serve as a basic style guide.

When looking at the work I did for the project this is how it looks like. I think it will be very useful to adopt this methodology in my next projects.

Finally, I did a high-fidelity prototype.

I was happy to find a Figma plugin (Spottie) in order to insert album and track covers from Spotify into my designs.

High-Fidelity Prototype

The user just finished a super nice playlist. He clicks on the sharing icon and has know the possibility to click on a button “My Community”.

He can now choose which communities (that he created in the first place) will be notified with his new playlist.

When he arrives in his playlist library, he can click on a icon that is present for each one of his playlists and go to his brand new dashboard.

Playlist dashboard

In conclusion, I found out that people love Spotify and use it a lot in their daily lives. They haven’t got many pain points regarding the existing features.

Spotify is in advance compared to its competitors regarding sharing and social features which is appreciated from users because in these troubled times when we are forced to be at a distance, virtual sharing becomes even more important. Receiving feedback on what you have created appears to be a legitimate need.

Useful Links :

Spotify Reports Second Quarter 2021 Earnings press release

Product Owner and UX/UI designer apprentice.