Shazam For Artists

March 2017 - May 2018

Overview

Shazam is the place where the world discovers music and where artists can engage with fans long before other social networks. Our goal for every artist has always been to help them create lasting and meaningful relationships with their fans. A sub-brand called 'Shazam For Artists’ was created for labels & artists to engage with their fans, get unique insights, and help them grow.

Role
Design Lead
Team
2 Product Managers
4 Engineers
Tools
Sketch, Illustrator, Photoshop, Zeplin, Invision, Marvel, Flinto, G Suite
visit website

The Challenge

Two of the biggest challenges were the artist verification process and artist dashboard. Our previous verification flow was sub-optimal and required a lengthy process in order to get artists verified on Shazam. This slow & manual process left us with a backlog of verification requests that was growing faster that it could be actioned by the music team. Also, the previous state of the dashboard needed a facelift. This dashboard had been designed and implemented by various teams over the years and it looked like a Frankenstein product. To be fair, it was nobody’s fault, but it definitely needed some love.

Something else that had not been done before was to make these platforms responsive to allow a small percentage of our users to access it from a tablet or mobile device. I know what you're thinking, it's 2018 Jonathan, how can your platform not be responsive? Well, that was the same reaction I had when I found out. But, to be fair, it was a small percentage of our user base and it had not been a priority in the product roadmap.

For all these reasons, it became apparent that these tools needed a facelift and be made mobile friendly.

The Goal

There were a couple of things we wanted to accomplish. First, we would create a standalone sub-brand called 'Shazam For Artists,' intended to unify both the dashboard and verification process under the same name. We would then create a landing page that served as a channel to drive awareness around existing and upcoming products/services. It would also serve as an entry point for artists to apply for verification in a few clicks through a new self-verification portal. Second, we wanted to improve the whole UX by redesigning the current artist dashboard and introducing new features that would allow artists/labels get deeper information around their tracks' performance without disrupting the current user base. Lastly, we wanted to make all these products mobile friendly.

revamped Shazam.com

The Process

We kicked off things by meeting over G-hangouts with everyone involved to understand the problem, establish business goals and KPIs, determine steak holders, understand technical constraints and set a project timeline.
Once we understood the goal and user needs, I worked with the research team and product lead to get a better understanding of who were the current users of this product. We knew from our research that the user base ranged from artist managers, label managers to artists both big and small. Labels who manage lots of artists used the product often benefiting from the data and tools provided. Working with the Product lead, we created a couple of user journeys to understand the challenges and pain points they were currently experiencing.

Based on user feedback gotten from talking to artist managers and artist themselves, we aimed to minimize the friction in the verification process by making making an efficient self-serve tool. We wanted to give users the ability to view more insightful data that narrowed song activity more accurately and also make the whole product mobile friendly.

To get a better understanding of the market, I did a competitive analysis to collect information on companies that offered similar services, such as Spotify, SoundCloud, Apple Music and Pandora, just to name a few. I then created a mood board on InVision to collect UI screens from Dribbble, Behance and other websites to get some inspiration. On a couple of occasions I got a chance visit the London office to spend some time white-boarding some ideas with the product managers and video chat with the engineering team in Turkey which has a 12hr difference with California.

I also began the ideation process by sketching rough ideas on my notebook and later designed low-fidelity wireframes for both the verification flow and SFA landing page in Sketch. This iterative process took a few weeks, discussing every part of the experience with the team along the way.

Here are some initial sketches of the landing page and marketing materials.

Once I had a couple of potential solutions, I used InVision/Marvel to create a couple of prototypes. I then shared them with the team and other colleagues who weren’t working on the project to get initial feedback.

We then took those refined prototypes and user tested them with a couple of labels and get their initial feedback. This helped surface a couple of UX problems on key parts of the verification flow, which allowed me to make adjustments before going further with design.

I also worked on the branding and visual language side of the project. By using bold typography and vibrant color combinations mixed with artist imagery, I tried to create a consistent visual brand identity.

These were the 6 featured artists on the Shazam For Artist landing page.

I used that same bold tone of voice across all marketing materials such as: sales presentations, email marketing and social media.

This deck was made for the marketing team to share with clients.
These filters are part of a new introduced feature inside the artist dashboard, which allows artists/labels to upload their photo and promote themselves in their social media channels.

As the verification flow was getting implemented, I would spend part of the day QA'ing and working with the development team to make sure there were no setbacks. I then started working on the artist dashboard focusing the majority of the time on the mobile version. We decided to limit some of the features on this version to try and get it live as soon as possible.

revamped Shazam.com
Main screens from the mobile version of the dashboard.

For the next few weeks, the verification flow launched to Beta and was sent to a small percentage of the user base to get feedback on it. We also began implementing some changes on the desktop version of the dashboard as well as some inital work on the mobile version. Finally, we launched the landing page.

Here is part of the component library I made and shared with the developers.
revamped Shazam.com
Here's a screenshot of my Sketch file to get some perspective on the amount of screens I had to design for the verification flow. It included desktop, tablet and mobile sizes.

Solution

We successfully launched the new and mobile friendly landing page, self-serve verification flow and dashboard. Within the first 2 weeks, the Music Team had on-boarded thousands of new artists. To put into perspective, with the old system it had previously taken 18 months to get over 3K artists and with the new tool, it took a month to get to 6K artists. We are currently over 16K verified artists and it’s still growing. We also introduced new features to the new dashboard that allowed artists to get deeper track insights, a followers’ infographics module and even a tool with social templates to promote that they just got verified and share it in their social media channels.

Shazam For Artists

The Next Steps

We've received all around great feedback for the design of Shazam For Artists landing page, verification flow and data dashboard. Based on user feedback, the next step is to continue iterating and optimize it with features that will allow artists to know more about their followers, see where they are trending and get unique data insights.