shazam0.png

Shazam - Product Design

Designing a user experience for an app used globally by over 300+ million people.

 

iOS & Android

Having been the Senior Product Designer at Shazam I oversaw and contributed to a lot of design changes and implementations over a 2+ year period. 

Working in the product team at Shazam I predominantly owned the iOS side of design, however I also worked across Android and web - helping to deliver features that were consistent across all platforms. Working alongside Product managers and Developers I did everything from research, IA docs, wireframing, UX design, UI design and prototyping - all the way through to design deliverables and developer handover.

During my time here I designed multiple new sections of the app - the Discover experience, the Playlists feature and Visual Shazam to name but a few - as well as having helped redesign the core offering of the app, Shazam's magical recognition.

If you'd like to see an insight as to how the Discover feature was created feel free to read this case study where I detail every step from inception all the way through to delivery.

Below are some of the highlights of my Shazam product design work.

 

 
shazam10.png
shazam4.gif
 
Shazam for iMessage was introduced in Sept 2016 and became another great way for Shazam to integrate into iOS devices and expand our reach. Read more here

Shazam for iMessage was introduced in Sept 2016 and became another great way for Shazam to integrate into iOS devices and expand our reach.
Read more here

03 My Shazam and Track.png
 
 

 

iPad redesign

Even though the iPad is not really a large focus for Shazam it still has an active user base of ~4 million. The previous app was in need of a refresh as it was extremely stale and clunky, not to mention extremely confusing when it came to the usability and user interface.

In order to make the redesign less work and more maintainable for the iOS devs it was decided that it should function using the same codebase as the iPhone app. The main aim was to simplify the app and remove features that weren't needed on the iPad, I stripped the UI back and made sure that the usability were in line with the existing iPhone offering. Now the dev can easily push an update and it will be covered on both iPhone and iPad apps.

 
 
shazam8.png
 
 

 

Apple Watch

Shazam was one of the hero apps when the Apple Watch was released in 2015 - so much so that the app was the only one that was demoed live in the Keynote presentation. While the first release of our app on the Watch was good, it wasn't until Apple opened up the framework in the 3rd OS release in September 2016 that we could truly expand on our original app offering.

I created an updated listening animation that felt and looked smoother - now that could be coded rather than utilising heavy image assets like we had previously.

 
shazam6.png
This simplified listening animation I created was coded in the swift framework and also help cut down on app bundle size.

This simplified listening animation I created was coded in the swift framework and also help cut down on app bundle size.

 
The handoff feature allowed us to introduce transition that would notify the user when a song had been found - instead of them looking at their watch waiting for a match.

The handoff feature allowed us to introduce transition that would notify the user when a song had been found - instead of them looking at their watch waiting for a match.