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.
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.
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 requirements and limitations in place. While working with the product manager, 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.
I then created some initial low-fidelity wireframes with the product manager and got 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 all kinds of screens.
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.
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%.
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.