Shazam.com

November 2016

Overview

Shazam is a known and loved brand around the world with almost 10 million users visiting the website every month. Shazam.com not only supports and drives traffic to the mobile apps, but it also serves as the first brand touchpoint for many of our first time users.

Back in July 2016, the website looked very different from how it is today (see screenshot below). The homepage consisted mainly of a feed style layout, featuring curated content that simulated the app's feed at the time. This feed had been introduced before I joined and was not performing as expected.

The decision was made to take out the feed along with other features to improve the overall user experience. Together with a team of developers, a product manager and myself, we set out to revamp the website.

Role
Design Lead
Team
1 Product Manager
3 Engineers
Tools
Sketch, Illustrator, Photoshop, Zeplin, Invision, Flnto, G Suite
visit website

The Challenge

In spite of the fact that there was a lot of great content being created and featured on the feed, the 10M monthly active users were not spending enough time on the website. Three of the main issues were: First, user retention rate was low with only five percent of users returning to the site every month. Second, the site relied heavily on one user journey mainly coming from: organic search/social media and through the track pages. And third, organic search traffic had hit a plateau and was not growing. By taking away some of these features we risked some impact on SEO traffic.

Previous Shazam.com homepage with news feed and card layout.

The Goal

Our main focus was to revamp the site by replacing old features with new ones without jeopardizing the MAU and improving SEO.  The aim was to quickly launch an MVP and then focus on iterating the product.

We got started by defining the goal, requirements and technical constraints in place. While working with the product manager, we worked with the research team to analyze current user-generated data and get a better understanding on who was visiting the site. We also looked at user feedback from previous surveys that had been sent to a small percentage of our users and found out that our web charts were used heavily by radio stations and labels.

Once we got a better idea of our users and their needs, a period of competitor analysis was done to get a better understanding of what was already out there. I started the research phase by gathering as much inspiration from sites such as Dribbble, SiteUp, Pinterest, Behance, etc. Through this phase, it became apparent that the site had to be designed in a responsive grid system and a mobile-first approach, forcing me to simplify and not overthink the interface.  

revamped Shazam.com
Here are some initial wireframes of the pages with the most traffic.

I then created a site map of the website architecture and then made some initial low-fidelity wireframes with the product manager to get a better understanding of the structure of each page and layout hierarchy. Our track page and artist pages, which are the ones with the most traffic, had the most difficulties in terms of UI. Since there was a lot of content, there were a number of decisions we had to make in order to meet all of the requirements and make sure the pages looked good on every screen size.

Once we had a good looking alpha version, we tested frequently and fixed bugs. I love the developer tools in Chrome and always use them to tweak CSS and send it straight to the developers.

revamped Shazam.com
Here is the initial IA sitemap created to serve as a solid starting point for the revamp.

Solution

After loads of testing and QA-ing, the MVP was finally launched. There were some hiccups along the way including some decreasing of organic traffic in different pages, and some SEO issues. But hey, what's an MVP without any bugs?

After a couple of weeks, we started to see some positive metrics. Bounce rates decreased from 47% to 30%. Users averaged more time clicking on more pages per session than before and :30 song previews increased by 30%.

revamped Shazam.comrevamped Shazam.com
Here is the style guide I created with all of the UI components for the site.
revamped Shazam.com

The Next Steps

There's still a lot of work to be done. We were able to keep MAU stable, but it has not grown as expected. The next steps are to continue improving some of the functionality and overall UX by focusing on our track, artist and charts pages. We still have a few low-traffic pages that have not been revamped because of other priorities, but I am hopeful and optimistic that with more iterating and collaboration from every team, we'll continue to improve the overall experience for our users.