Song Page Redesign
A rework that exceeded business expectations
Goals
The song page is what people see as a result after Shazaming a song. Common behaviour indicated that users often close the app immediately after finding the desired information, which isn't necessarily bad.
They quickly got what they came for. However, there were many cases where users disregarded everything except the song's title because they were so focused on obtaining that specific result. Shazam's algorithm worked so well, that it unintentionally limited users' exploration of additional content. This resulted in a lose-lose situation, users may not have realized the breadth of content available, and the business did not benefit from its diverse offerings.
In order to improve this, we had the business objective to increase engagement with streaming partners and advertisers to boost revenue while also doing a better job at guiding users into a richer content experience.
Last but not least, the page could have used a refresh as it has not been touched for years. As a designer, I wanted the new experience to shine.
Process
Contrary to what the big books of UX might suggest, real-life design processes are less linear and more chaotic.
Shazam’s app already had a robust visual system that had been working effectively for years. Updating and expanding it required careful attention to ensure that the brand essence remained unchanged. Testing was conducted from the US, while design operations were managed from the UK headquarters, overseen by me.
Our hypothesis was that creating a more engaging layout and better content experience keeps the right users in the app longer, eventually generating more clicks.
The process started with reviewing our current ad formats and their placements, rethinking the core song recognition journey from a user's point of view, testing our hypotheses and refining the proposed solution in iterative cycles until we succeeded. Again and again.
Shazam used to have 6 different ad formats spread out in various parts of the app. Using so many variations complicated the collaboration of sales, marketing and product teams.
Before Apple's acquisition, almost all of Shazam's revenue came from advertising and partnerships. Throughout the design of this new experience, I synced with our marketing and sales departments about the possibilities of narrowing down our ad formats. After almost a year of syncs and many testing rounds, we only kept two.
To give more space to content sections, I envisioned a horizontal layout where users could easily navigate by swiping. This was a familiar gesture to Shazamers given the swiping navigation on the main screen at the time.
The horizontal layout appeared to help us in emphasizing relevant content. Users could simply swipe between content sections, allowing them to concentrate on one content type at a time. This new experience gave us both more flexibility with ad placements and more advanced targeting options. An advertiser could now target users who are interested in specific content types such as audio, lyrics, video, albums, artists and more.
The most difficult part of the design process was to handle the many simultaneous iterations of different elements.
These important elements of the experience included the interstitial, showing metadata, synced lyrics, streaming exposure, overflow menus, ad placements, micro-interactions and more. For more detailed information about the design of variant B and C, scroll down to the results section.
The first challenger of the old control variant A was variant B with a new horizontal navigation, refined call-to-actions and rich content experience.
We tested in JP, BR, AU, IT, MX with approximately 300.000 users in each location. The test turned out to be a huge success, driving more engagement to the sections we hoped and increasing retention for new users. However, the design failed to lead users into the rich content experience as they didn't engage with swiping as much as we expected. Interestingly, people started to interact quite randomly with the artist image when landing on the song page.
The new challenger of control variant A in this test was variant C with almost all of B's new features, plus a tiny yet powerful addition, auto-swipe. We also introduced a new way of showing song metadata to leverage user clicks on the artist image.
I was keen on keeping the horizontal layout as it provided us with many benefits around content and ads. The swiping gesture felt natural to the mobile platform. But something was missing, existing users were not used to swiping on this particular page.
To solve this problem, I came up with the idea of adding an auto-swipe interaction to the page. Right after someone landed on a song page, a little swipe movement showed that there's much more. And it worked! We lost a few preview clicks compared to variant B because of the auto-swipe, but gained much more elsewhere. The new test showed that we could keep all of our major wins for the business and prevent users losing out on content. Our game became a huge win-win.
Results
The new song page design created a win-win situation for users and the business.
A smooth interstitial, smarter ad placement, better visual hierarchy, redesigned streaming hub, guiding micro-interactions, richer content experience all created a better flow for users resulting in higher overall engagement.
The most seen and used part of Shazam's app is during the initial moments of song recognition. These seconds consist of a Shazaming animation, an interstitial and the song page.
Positioning the song title and the artist name in their consistent place contributed to a smooth transition into the redesigned song page.
Shazam offered streaming, metadata, synced lyrics, video, artist information and related songs beyond a song's title.
The old version of the song page was a non-ideal compromise between business goals and user experience. All information related to lyrics, videos and the artist were buried below a fold. The most important actions to the business and users weren't emphasized enough. The horizontal layout solved many of our issues around this.
We introduced a new ad format on the main screen, the overtake. This smart format overtook the whole blue screen, changing its base color while displaying custom text and a call-to-action.
Rolling out this new ad format took off pressure from other parts of the app, allowing us to remove unwanted placements. With the newfound flexibility provided by the horizontal section-based content experience, we retained the option to turn on ads selectively across various content sections.
Read on MediumA key goal of this redesign was to increase engagement with streaming partners. We had 44 of them including partners in India and wider Asia.
Most of our revenue came from advertising, while another portion came from deals with streaming partners such as Apple, Spotify, Deezer, Amazon, Google and many others. We needed a design that highlights these partners without compromising the joy of music discovery. After iterating through 25 different hub designs and testing 4 of them, we found the winner. It worked well on background images, left breathing space for visuals and kept call-to-actions perceptable.
According to data, the second most engaging content when Shazaming a song was lyrics, which could also serve as an interactive feed for ads.
We chose Musixmatch for lyrics provision. As part of this partnership, they only supplied us with raw lyrics, prompting us to develop our own frontend for a synced lyrics experience. I designed a simple fading transition to indicate when an inactive lyrics block turns active. We limited inactive blocks to 2 lines and active ones to 3. One of the many edge cases I faced was when users scrolled synced lyrics manually. Initially, the flow returns to its synced position after 3 seconds, but it remains unsynced the second time.
Metrics
The new result page exceeded business expectations and boosted overall engagement significantly while generating more clicks both for streaming partners and advertisers.
The auto-swipe interaction introduced in the testing phase eliminated the decrease in DAU for content. Less ads, but smarter formats and placements, more clarity and focus contributed to a better retention for new users.
