Home About Icon LinkedIn Icon Medium
Shazam
A mock up with the native iOS Shazam app, a rock-star character in the middle and the desktop macOS Shazam app in the laptop device shell.

Responsibilities

  • Lead design and development of cross-platform features and make sure they are accurately translated using the design language of the native operating system.
  • Collaborate with developers and support implementation process.
  • Prototyping in Principle.
  • Work with the user research team on usability testing sessions.
  • Collaborate with the Product Managers on iOS and Android platforms.

Outcomes

  • Design of the feature took a couple of days.
  • It was shipped in March 2016 Press release on Mac Rumors .
  • The impact of the launch wasn't assessed at a time when I was with Shazam. However, Apple acquired Shazam on September 24, 2018 which means it saw the value in this product.
  • The illustration project was unfortunately parked.


Library of facial components

Initial idea was to create illustrations of several artists and add them to the app. One of my favourite inspirations were the works of the agency Hey Studio . Their style is minimalistic and, yet, bold and extremely recognisable.

A screenshot with the minimalistic illustrations representing celebrities and public figures performed in one style.
Example of illustrations produced by Hey Studio.


Another source of inspiration was Dribbble where my eyes were attracted by the work of Gregory Hartman for DuoLingo

A selection of vector illustrations that represent humans and animals
Example of illustrations produced by Gregory Hartman.


Long-term idea was to create a library of faces, noses, lips, eyes, eyebrows and other facial parts so that a designer without profound skill in illustration could create a character using this library. These are some examples found in Google that illustrate how this library could work. A selection of screenshots and images found online that display various shapes of eyes, noses, lips, eyebrows, styles of the facial hair and faces.
Examples of various styles of facial parts.


Individual artist portraits

My first step was to do a research on music artists to understand their style and facial structure and experiment with the illustration style as the creative market is quite competitive and there are already plenty of great styles. First six artists selected for this experiment were David Guetta, Jason Derulo, Meghan Trainor, Calvin Harris, Alicia Keys and Flo Rida. I started with sketching the portraits of David Guetta and Jason Derulo.
A mock up representing a step-by-step process of creating an illustration from scratch that starts with the research, continues to the hand-drawn sketch and, finally, moulds into the vector shapes.
Hand-drawn sketches converted to vectors.


While reviewing first initial portraits the team has decided that nose and jacket details were not essential for this project and can be dropped. Here’s the next iteration of portraits including Meghan Trainor.
An image with the illustrations of Meghan Trainor, Flo Rida and Jason Derulo
Meghan Trainor is added to the set.


Next level of discussion was around whether to have eyes and eyebrows in the style or they can be dropped too. So here are quite a few options of the style including new artists Flo Rida, Calvin Harris and Alicia Keys.
4 illustrations sets of David Guetta, Meghan Trainor, Jason Derulo, Flo Rida, Calvin Harris and Alicia Keys.
Different variations of the portraits: without eyes; without eyebrows; without eyes & eyebrows; with eyes & eyebrows .


Faces with eyebrows and eyes have a more developed personality so it was decided to include them in the style apart from when an artist wears sunglasses. Here’s how anyone can create a portrait of a person, especially an artist:
1. Find in Google as many images as you can with a person
2. Analyse what’s common, what are frequent attributes of their style.
For instance, Will. I. Am likes sunglasses and funny hats, suits and bow ties, it is fair to say that he prefers black, white and grey colours in combination with other bright colours. To create a minimalistic and recognisable portrait of Will. I. Am it is enough to have just 3 of these attributes.
A set of photos, sketches and a final illustration of the musical artist Will.I.Am
Research and execution of illustration of Will.I.Am.


Music genre illustrations

Next step of the project was to create characters which will represent music genres (pop, country, hip-hop and rock). A set of photos and final illustrations of male and female pop artist charachters holding a mobile phone with the Shazam app.
Research and execution of pop characters.


A set of photos and final illustrations of male and female country artist charachters holding a mobile phone with the Shazam app.
Research and execution of country characters. Inspiration: Blake Shelton, Miranda Lambert, Kenny Chesney.


A set of photos and final illustrations of male and female hip-hop artist charachters holding a mobile phone with the Shazam app.
Research and execution of hip-hop characters.


A set of photos and final illustrations of male and female rock artist charachters holding a mobile phone with the Shazam app.
Research and execution of rock characters. Inspiration: David Navarro.



Other use of my illustration skills were seasonal splash screens and a state on the search when no results were found. Two themed illustrations for the classic Shazam screen.
Splash screens for Halloween and Christmas.

A set of designs for the empty state representing and artist that is crying because users can't find them.
Ideas for a 'no search results found' screen.

Shazam had an integration with Spotify, and when Apple Music rolled out their subscription service, they approached Shazam to work on integration with them . For music fans the user journey is pretty awesome: They hear a song they like, Shazam it, and boom! They can add it to their playlist through the provider they like. Connection starts with the settings screen and includes just 3 steps. There is a visual indicator (a small Apple Music icon) confirming that Shazam is now connected to Apple Music. If a person is not a subscriber of Apple Music, they can start a free trial. Disconnecting Apple Music from Shazam is also pretty simple, it starts from the settings screen and takes just 2 taps. A set of mock ups that represent how users can connect Shazam to Apple Music and disconnect from the service if required.
All main flows for Shazam / Apple Music integration.




An illustration of the design team at Shazam in 2016.
Working on this project also inspired me to create a group portrait of the design team at Shazam. Can you spot me on this picture?

© Olga Flippence, 2025