Shazam

The Brief

Design a fresh and engaging perspective for Shazam and bring it to over 100 million Android users worldwide.

Name any song in seconds. Shazam's central proposition since 1999 has given it a key place on music lovers' phones. Shazam wanted to go beyond that and give users, not just a tool to identify songs, but an experience that lets users find out more and connect with the movies and TV they love, and the ads that inspire them.

As design lead at Shazam I began a rehaul of the UX and UI design for Android. The main challenge was defining a new approach for Shazam, moving beyond a simple utility app that identified music for users, and into an app that would be used for both music, TV and advertising as a reference and entertainment app.

Sketching Ideas

I wanted to create a responsive design and start designing for tablet first and then focus it down to mobile. And by creating a smart and coherent design approach accross both form factors, designs could be easily brought to code with less effort than building two separate apps.

I began an exploration phase, gathering requirements from product management and investigating lots of other media and music apps on tablet and phone.

Something I was keen to ensure was that if this was a tablet experience, it had to make use of the large screen real estate available on a tablet. One of the big constraints I quickly ran into was our lack of access to large album art or library photos on artists. With image size constraints of 500x500px I had to rethink the tablet content and UI proposition.

Sketches

Because of the tiny image size limits, I began looking at grids of album art and TV, movie and advertising library content images. I wanted to bring out a more intriguing and exciting grid that would span accross a large tablet screen, and inspire users to engage.

Navigating around the app was a key focus of mine. I wanted it to be clean, consistent and fun. I explored the use of pagination between levels of app layers, turning it into a lifestyle magazine type experience that invited users to flick through.

Sketches

Developing A Structure

After the exploration phase, to break the work down I put together a UML flow diagram that helped identify the parts of the app that would need designing. This was great not just for me, but helped development and QA realise the full structure of the app.

Wireframe

I produced several wireframes to narrow down the concepts I'd sketched and further explore them in detail. As I did so, it helped to see all the different moving parts of the design by linking up the UML flow and wireframes into a large visual UML diagram.

Wireframe

Visual Exploration

I began designing the home tab as a large grid to find all your latest tags and as a springboard to find out more about featured artists. I was keen to make use of typography to set off the album art imagery, and put in information about the artists alongside the standard song and artist name. I found this worked well and created a stylish effect when on the odd occasion a song didn't have album art in our library.

From here, you could explore further options from a dial menu.

I wanted to ensure that advertising, far from being an irrelevant space invading strip at the bottom, was a key part of the Shazam experience. To do this, I designed it to be inline with users' tags, suggesting new songs, movies or ads that fitted a user's individual tastes based on their tags.

To make use of the wide screen Android tablet form factor, I put the tool bar to the side. However, this left a floating Shazam button that began to hide content, so more thinking needed to be done.

Wireframe

Exploring Tagging

When a user tags a song on Shazam, 'add-ons'or icons appear that accompany it, intended to encourage users to discover more about the song.

Rather than tell people about add ons using icons, I wanted to show users what the add ons could give them by using images in a grid to encourage them to explore. For example, in this method, the lyrics add on would show the beginning of the song lyrics in a tile. It would also show image links to related competions and articles associated with the song, movie or ad they'd just tagged, creating a vibrant ecosystem around the tag.

The pagination navigation would continue when an add-on was invoked. I used Mad Men as an example, where the user selected a 'get the look' add-on to read an article about 1960s fashion and where to buy.

This would create a whole new opportunity for content creators and editors to engage with audiences, it would allow Shazam to become more of a lifestyle app carving out a bigger space in people's lives, and a place for users to flick through and discover more about their favourite collection of music, movies and ads.

A further idea I designed was the addition of a 'listening' sound visualisation wave in the background that moved as the user browsed their tag. I wanted this to give the impression that the app was alive and continuously connected.

Wireframe

Final Design

The final design was simpler than the add-on concept, but was sophisticated in achieving a responsive flow layout that started from an engaging and simple grid layout that reflowed well down to different screen sizes including mobile. Starting from the main home grid layout, it was designed to reflow around a tag screen that popped into view from the right. On invoking an add-on from the tag screen, the add on pushed all the other content to the left, again reflowing the grid.

The first screen is the grid as seen as standard on a 10inch Android tablet.

The second screen shows a tag invoked on a 10inch tablet, the home content reflows to use a grid as seen as standard on a 7inch tablet.

The final tablet screen shows an add-on invoked from a tag, again on a 10inch tablet, the home content reflows to use a grid as seen as standard on a mobile. This final screen shows effectively three mobile screens side by side.

Wireframe

'Shazam gets huge update to v4.0 with a killer new UI'
Android Police


'Shazam for Android updated to version 4.0 brings slick new UI'
Droid Life


'There’s more than enough here to justify grabbing the update through Google Play'
Engadget


'If you’re looking for a good-looking app that provides a simple way to identify songs on the go, then Shazam is it.'
CNET


'Awesome I always use shazam but just did the update. I absolutely love it nice look to it love the way the tags look def a Great upgrade!'
Amanda Philips, Google Play Store Reviewer


'AWESOME APP! Wow. This new updated is awesome. So user friendly and the new interface rocks. A must have app!'
Jamirht Aramendia, Google Play Store Reviewer