Shazam For Artists

March 2017 - Present

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 tool called 'Shazam Connect’ 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, Principle, Flinto
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 called 'Shazam Connect' needed a facelift. It 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. After a few years, it became apparent that both tools were getting outdated and needed a makeover.

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 (Shazam Connect) and verification process. 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 redesign the current artist dashboard and introduce new features that would allow artists/labels to get deeper information around their tracks' performance without disrupting the current user base.

revamped Shazam.com

The Process

We kicked off things by meeting over G-hangouts with everyone involved and going over the EDD and PRD. I then began the research phase by creating a mood board and sharing it with the PMs. Some contributed by adding screenshots and anything that sparked ideas. On a visit to our HQ in London, I got to spend some time whiteboarding some ideas with one of the PMs.

I then began sketching parts on my notebook and 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 to create some quick prototypes and shared it with the team and other colleagues who weren’t working on the project. I got crucial feedback on key parts of the verification flow and fresh insights to other UX problems. This allowed me to make adjustments before going further with design.

I also worked on the branding side of the project. Using Shazam's color pallete, I used bold color combinations mixed with artist imagery to get a nice contrast.

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

To keep a consistent brand, I used that same bold style across materials such as: sales presentations, social and email marketing.

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. From the beginning of this project, I wanted this dashboard to be consistent with another project I was working on called Shazam Music Insights. I took the same structure, visual language and UI elements and applied it to the artist dashboard.

For the next few weeks, the verification flow launched to Beta and was sent to a small percentage of the user base. We also started implementing some of the changes on the dashboard and finally launched the landing page last.

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 launched the new landing page and self-serve verification flow. 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 15K 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.

revamped Shazam.com

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 make the dashboard mobile friendly 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.