SoundHound Application

A novel approach in redesigning the motion graphics of a music app called SoundHound.

reviews2
Redesigned intro for SoundHound Application

The Question

Considering the identity of the SoundHound application, how might we create a clear, concise, and compelling design using motion graphic techniques.


The Solution


reviews2
reviews2
reviews2

The interfaces we are using these days are not static anymore and they adopted a more dynamic approach. Motion design tends to facilitate this transition, bringing human and software closer through motion design.



Process


Analysis

Sound Hound is an app for finding and exploring music. Its interface is very simple and minimalistic, yet the technology behind it is very sophisticated. The colour palette used for the app consists of 4 colours and their shades. The iconic “S” in the middle of the logo plays a crucial role in app identity. The screen opens with the static S icon and the name at the bottom. Then the screen closes in with a black background around the “S”. A small bar at the bottom of the screen with 3 icons that are designed for finding music, retrieving history and browsing new content. The app tries to implement touch-free interaction with users by saying “OK Hound” and the app will find what the user is looking for. This technology is already used by Hound Company in high-end cars such as Mercedes Benz, but the app still needs a lot of work.

reviews2

Areas to Improve


  • The app has a very static intro with a lot of potentials that can be unlocked with a proper and fast pace motion graphics.
  • Simple low opacity bubbles animation appears behind the logo while waiting, does not add anything to the design.
  • Tapping on the icon will make the “S” to rotate once while the whole logo will descend to the bottom of the screen, and the lower bar will exit from the bottom, this animation can be enhanced as the main page of the app.
  • The empty space between the two orange circles starts to fill in like a loading bar and the message “Listening...” will appear in white above the logo. At this time the bubbles around the logo are tripped, still very different from the overall feeling of the website.
  • The message turns to “Receiving...” as soon as the song was found. The “S” in the middle will do another rotate and the whole page will wrap up, showing the album art and details in the back page.
  • The bar and the bottom icons are very static and almost out of place considering the content and identity of the app. These flaws take so much away from the connection it can make with its audience and makes this app less satisfying with all the technology behind it.

Proposal

This app has many different places to be improved, however, I’m proposing 3 main areas in UI which I think has the most interaction and use for the user to be re-animated using a novel approach for a better user experience.

reviews2
reviews2



App Intro

The intro is very static and can use a faster pace to absorb the audience in the first moment of opening the app. I believe this is achievable through working with transforming the logo and cloning the S with its frame while using the white space around the S as the indicator for loading.

Main menu

The main menu can follow the idea of a hound looking for requested song or simply better use of the logo while searching for songs (Transformation). Use of the waves can be much better by lowering them further in screen and animate them to be more dynamic in page while using obscuration technique with the logo in front.
Also, it can follow a more minimalistic approach with the current animations with better easing and parenting of the logo to the whole page. Creating more embellished transitions and better composition overall and creating a more naturalistic feel.

History and play buttons at the bottom bar

The history icon could be improved to be more in line with history itself. It can be animated using the transformation technique or another form of the same icon. This could be achieved while the history page is filling the page. The bottom bar can also use the orange accent colour for the icons which can help with the transition and movement from one page to another. The history and play pages themselves can be used as an overlay to the main menu. At the same time, we can bring a dimensionality to the pages like they are stacking up creating a more materialistic design.



Mockups and Initial sketches


Audience

By identifying the audience, we will have a better understanding of how the app should function and how the motion design can be the medium to bring them together. Most of the users of this app are music lovers and people who are looking for new music on the go.

Goals

After doing research on the demographics of the audience using this app, it was the time to understand the goals of this app. The app serves a very dynamic purpose, supplying your music needs, finding the music you heard in a hotdog stand while on your lunch break, or just simple exploration on current trends in music.

Competition

The biggest competition to this app is Shazam app which is very popular with users. They use a very simple interface as well with a colour palette of blue and white. Small yet interesting motion graphics have been used for their transitions and the app is easy to use overall.

reviews2

The idea of hound and the circular motions where something that could be explored considering the unique identity of the app and the interesting name that it carries. The focus was initially on the “S” icon which had a lot of potential to play with and it didn’t disappoint.

reviews2


Storyboarding


App Intro

The "S" is basically made from two half circles, which resulted in different ideas and iterations, from the muzzle of a hound and its footsteps to different minimalistic transitions of a circle.

reviews2
reviews2
reviews2

There were many failed attempts as they were not aligning with the narrative of the company. Most of these ideas were totally dismissed.

reviews2
reviews2

Staying true to the circular motion as the main identity of the planned motion graphics below result was produced as the final outcome.

reviews2
reviews2


More works

Following was another animated poster I made through the same process

reviews2

Reflection

Motion graphics is the translation of zeros and ones in a computer to the fluid movements of the real world. With motion graphics similarity and familiarity to the real world, apps can create a better and closer experience for the user. I find motion design as a very intresting field and I want to be able to make subtle yet effective motions in my work to make users have more natural experiences with the apps they are using.


Next Work : Clean Energy Project