Chords mobile app

Oct 18, 2015

This app is my attempt at delivering a good user experience for an app that helps you to play and sing along to your favourite songs.

There's no sophisticated multi-level navigation – just your songs. I expect most hobby guitar players to not have a huge amount of songs anyway. A clear structure helps you to quickly identify the song you want to play.

If you happen to have a lot of songs, you can still use the search feature. But apart from showing you matchings songs from your favourites, this also searches for other matching songs through a remote API.

When you've decided for a song to play, you get an immersive, fullscreen experience. If you've ever been to a chords or tab website, you might notice that the positioning of the chords works without the need for a monospace font.

Furthermore, specific chords are always highlighted with the same colour, so if you've used the app for a bit, you might intuitively play the right chord just by subconciously noticing the respective colour.

From here you can also save the song as a favourite, or transpose the song up or down if you prefer to sing in a different pitch.

What enhances the experience is that the colour used for the play button is always computed dynamically from the shown image.

This is achieved through Color Thief – a small colour extraction library. It's not much effort to implement, but I think it really improves the experience.

I'm a big fan of guiding the user with subtle, appropriate animations. I like motion that feels natural and guides the user, instead of drawing attention to itself.

Regarding technological aspects, the UI is built with Polymer, Google's response to modern web development. Polymer leverages Web Components, a new set of standards for building apps, that is being worked on by the W3C.

If you're a guitar player who is now convinced about using this app, I sadly have to disappoint you. As the legal aspects of chords and lyrics are fairly complex and the price for using such data isn't affordable with the earnings of a small app, I've put the project on hold and decided not to publish it.

Read next

Animating with React Hooks and RxJS

Are these technologies are a good fit for gesture-based animations?

Oct 29, 2018