Case study Gerrard Street music sharing

How I designed an App that allows sharing of a musical moment in real time

Image by Smartmockups.com for Gerrard Street App

Introduction

Recycling and sharing are two characteristics that are part of my life, both at home and in the workplace. I firmly believe that the duty of designers is to design a product that respects the world.

Through everyday objects we can make an impact saving the world

Gerrard Street is a company created its business based on the modular design of easily repairable headphones and without the use of glues saving 15 million kg per year in the environment.

Buyers choose Gerrard Street to make their contribution to saving the environment by purchasing a sustainable product with an excellent quality/price ratio.

The business model of Gerrard Street is based on a monthly fee and it is an innovation for the market.

Bird * R headphone by Gerrard Street

Problem Statement

From this reflection I thought how to connect such a unique product to thousands of users starting from these questions:

  • How can GS reach new customers interested in their product and increase sales?
  • How can GS keep a high retention rate of their customers?
  • How GS could create a shared experience through an individual personal product?
  • How can GS connect people to the same music, in different environments, sharing the same experience in real time?

The Goal

Creating a need for those without Bird *R headphones that wants to live the same musical experience, e.g. dancing together the same music through the Bird*R in different locations in real time.

* I am not affiliated with Gerrard Street or any of its partners and this design was done on my own volition.

Gerrard Street App

Research

Developing a collective experience through a personal product as the headphone of Gerrard Street is challenging, so I decided to proceed with both a qualitative and quantitative research .

I needed to understand if letting people share the same musical experience through the Gerrard Street App was a strong enough incentive to increase the sales.

Is, listening to a music stream in real time with friends, acquaintances, a necessity for the modern day users? Do we still need to dance together?

Project management

Being a project to be developed in just 5 days, I wanted to organise all the tasks in Trello to be sure to match the deadlines. In this way I knew exactly what I had to do, what I was doing and what I should do the following day, organising the meetings for the interviews and for the prototype tests.

Trello color blind friendly mode

Quantitative & Qualitative research

My research is based on 8 one-to-one and 5 online interviews, articles and reviews, infographics, analysis of the competitors.

Competitors level map

Once the main competitors have been defined, I have searched online reviews to understand which aspects are specific of each platform. From this I identified strengths and weaknesses that I wanted to include or not in my design.

Among the many reviews of a potential competitor I read:

"One of the main reasons for Spotify’s enduring popularity is that it remains true to its roots, offering a stable, intuitive experience with plenty of choice, while at the same time it’s constantly adding new features that are genuinely useful and have real staying power."
13–17 years old

The infographic above shows that most of the music consumed requires a smartphone or a device connected to internet.

Below percentage of developers that listen to music while working.

Image by "Passion and Music"
Generation Z loves Spotify, older generations less convinced by Norval Scott

The numbers above show that more users use music streaming apps on their smartphones and tablets than they do on PC, with mobile apps having a 66.1% reach and PC 58.5%.

This is what made me decide to design an mobile App for Android.

Audience Spotlight study shows a decrease in usage of music services during evening hours. I saw in the time slot between 20:00 and 22:00 the only available moment to offer a different musical experience. All the day indeed is already busy with other music services.

User interview

One of the research activities that I love the most is the users interview. It takes a lot of time but the satisfaction in receiving answers that can increase and validate some ideas is so great.
I was able to interview a sample of 8+ users between the ages of 30–40 and 5 over 50 and two users of 19.

The questions asked were the following:

  • May I know your age, what job do you do and if you have any hobbies? If so, when do you practice them?
  • Do you listen to music?
  • At what time of day do you listen, at what precise moments?
  • Do you listen to it alone, in company? And how?
When I feel lonely, I want to listen to music with my best friend who lives in Japan, so I can connect with her and share the same moment
  • What are you doing when you listen to music?
I want to focus or isolate from the surrounding I use headphone. In this way, I don’t disturb the people around me.
  • Who chooses the music you listen to?
  • What important things would you like to hear?
  • How do you feel when you listen to music that you did not choose? And when do you choose it?
I want to feel in my own world, maybe share with somebody that I RRReally love it, but just him and I!
  • With what do you listen to music? With which webApp, social, device
  • How do you know if the people around you are in the same mood?
I ask out loud if anyone is in the mood for something specific and usually I suggest a song/artist/gender. If everybody agrees with the choice or suggested something better I play the tune on the speakers else I use my headphones.

Empathy Map

After my interviews, I mapped the answers of the users to better understand their environment, their behaviours, and their emotions, identifying the pain and the gains of the project.

Empathy map based on the interviews

Pain

  • Losing connection from reality
  • I don’t like to listen to music chosen from others
  • I need to be focus on what I’m doing
  • I change quickly when there are too much comments
  • colors too strong’s (fluorescents or high contrasts)
  • icons too small
  • too many advertisements

Gain

  • To meet people with the same musical interests and share them my feeling in real time!
  • I can make a list of songs, create the albums and discuss the details
  • I’d like to use the mobile and youtube simultaneously
  • They are free with so much musical choice
  • I’m feeling lucky when I find the best song/group/immediately
"The young demographic doesn’t separate what happens in their virtual lives from what happens in the real world" by TechCrunch

Product Strategy

The application is included in the purchase of the headphones Bird * R but may also work for other headphones of other companies for a fee. This would allow increasing the revenue at Gerrard Street through the App and customer loyalty through this additional service.

This, also, will encourage other users to purchase headphones and join a more sustainable and shareable way of consuming music.

Could this also work for other headphone companies?
Yes, could be an online service because is free for owners of GS and premium for others.

Furthermore, the app opens a series of up-selling opportunities such as a “led light module” that communicates the possibility of listening to the same music as those with the same colour light.

Image by unsplash.com

The design App

To make the App complete and functional in all its aspects, I have always kept in mind the acronym CRUD (Create, Read, Listen, Delete). In this way I have:

  • Create a stream
  • Read / listen stream
  • Update stream (by comments)
  • Delete (end of stream)

From the collected data, it is clear that users are fond of their own online music services. The App of Gerrard Street wants to exploit these services adding an ‘extra experience, focusing on simultaneous sharing rather then being just another music player.

The sharing service offered by Gerrard Street means that the experience of listening to music can be experienced by two or more people simultaneously.

Architectural Information

After having structured the flow of the user, I represented in the AI the steps that the user can perform during the flow, associated with the spaces:

User flow and IA (Architectural Information)

Wireframe

The project runs around 3 main screens: the screen of the broadcast and listen, the screen of listeners list and the list of the music services:

Screens by Smartmockup — Wireframe by Figma

My UI process

I was able to whip up a complete UI library within minutes with Google’s Material Theme Editor based on the style guide. For unavailable components I required, I built custom parts based on existing components in the library.

Figma.com

Style Guide

Thanks to a single day of code lesson, I learned that with the “inspect” command I can find the information needed to reconstruct a precise Style Guide. Indeed, is possible to know font and the colours used in web page.

Font and colour codes — Iterations of Logo Gerrard Street

Prototype

Feedback and implementations

Choosing the right icon sometimes causes a flow to proceed with simplicity and speed.

Indeed, thanks to users feedback, I improved the chromatic aspect of the screens that make the content more readable. I changed many times the icons of “sharing”, “public” and “private” mode.
I am satisfied even if I am not convinced yet, but, as we know, the Apps are constantly evolving:

Before — After
Before — After
Before — After

Usability Testing

I have verified the proper operation of flow through three test users:

  1. I’m asking a user to connect to a streamer called Aaron Bennet (gif on the left)

2. I’m asking a user to broadcast his favourite song to a friend (Aaron Bennet) in private mode (gif on the middle)

3. I’m asking the user to comment the song with Aaron Bennet in real time listening to the song (gif on the right)

1.connect to a streamer- 2.to broadcast his favourite song- 3.to comment the song with — Gif recorded by Recordit

Feedback

  • The user was able to go directly to the list of streamers and click on the “join in”
  • The user was able to go directly to the list of friends but was unsure about the private mode represented by the eye icon
  • The user was able to go to the comment page because remind her of the WhatsApp App

Feedback is awesome! But my time to edit is finished.

I will continue with other iterations, improving the visual aspect and the flow in order to present my beautiful idea to Gerrard Street.


Takeaway and what can I do better?

Making an app in less than 5 days can be possible but only after having organised a precise plan at the beginning. Starting from the last step (test and prototype) it is possible to build the previous steps.

Also:

  • Selecting participants from different areas by Skype/Facebook/WhatsApp with 3 days in advance.
  • Improving my knowledge about the components from the Library and mine! They save time when I have to develop a quick project, especially in 3 days!
  • Improving the research about features and results of competitors.
  • Don’t be a slave of the black hat and switch to a different color more often.
Image by smartmockups

You can see the improvement of the UI in the next article “The interface design for the App of Gerrard Street


Disclaimer and condition about Gerrard Street App design

Opinionated content: This post contains my opinions and doesn’t reflect the opinions of Codaisseur Academy in Amsterdam where I am studying as UX/UI designer.

Terms of use: Any information I provided on this post is accurate and true to the best of my knowledge, but that there may be omissions, errors or mistakes.

Hold harmless clause: I gentle remind you that the info I presented on this post is for entertainment and/or informational purposes only and shouldn’t be seen as any kind of advice. If you rely on any info on this post, it’s at your own risk.

Not a professional: I am a UX/UI designer student. This article it’s for information purposes only and shouldn’t be seen as professional advice.

Reservation of rights: I reserve the right to change how I manage or run my post and that I may change the focus or content on it at any time.