Nocturne — the easiest way to manage your music recommendations

Some of my best music finds have been on casual recommendation from others, but I find myself losing tracks that are solid gold amongst reams of Facebook or WhatsApp conversations.

Therefore, Nocturne. It lets you:

  1. Keep all your favourite tracks from Youtube, Soundcloud, Spotify that you’ve posted to social networking platforms in one place.
  2. Share tracks easily with friends, and shows you if you’ve recommended a track to someone, either within the app, or on WhatsApp or Messenger, so you don’t send them the same track twice.
  3. Build a musical identity and keep updated on what your friends are listening to.

Philosophy

Music as a shareable object is different from that of images or text in that it requires more than fleeting engagement to be consumed — for example, you can go through someone’s entire Instagram profile in a few minutes tops, and keep regularly updated on everything that they post by checking your feed. You won’t tap on every post, but skimming gives you a good idea of whether or not they’re worth your time and follow.

Sending a friend a music recommendation is a personal process. More often than not, you’d like someone whose taste you trust to tell you that a track is worth your time, that it’s something they think you would like. Nocturne makes sharing easier while also letting you passively build a collection of music that you thought was so good you couldn’t keep it to yourself.

Who is Nocturne For?

Nocturne is intended for people who aren’t in the business of music, but are avid listeners who enjoy expanding their music tastes and finding out what their friends or celebrities are listening to.

Process

Moodboard

I’m very attached to my ancient Microsoft Zune HD and heavily drew inspiration from it for this project. The lime-y green highlight colour seemed nice contrast.

Sketch + Initial Ideas

The first thing I did was sketch out the flow of the app and some of the screens. Since the flows are interconnected, with different views having different actionable items, this made things a little complex.

Initially I thought that every time a user recommended a track, a post would be created that would allow the user to comment and use tags. This meant that created duplicates of the same track, each with their own set of comment. This strayed too far from the objective I’d set. Recommendations were made much simpler by not using the post-based flow and making it an action instead.

Profile

Your profile displays your basic information, photo, Collection and Likes. Tapping on a track in someone’s Collection or Likes starts a playlist that can be navigated from the Player.

(From right to left) Profile — Collection, On Scrolling, and Profile — Likes

Player

Tapping a notification that you’ve received a recommendation takes you to the Player which is overlaid on your friend’s profile, much like clicking on a link that you’ve been sent on a messaging app. You can then Like it or add it to your Collection.

Interactions on Tracks

I tried to make each track’s functions as robust as possible without cluttering it.

  • Tapping on song title/artist opens up track info.
  • Tapping on the album art opens the mini player and plays the song. Double tapping it opens the Player directly
  • Tapping the Mini Player opens the Player
  • Tap and hold opens the option to remove the track from your Collection.

Activity

Activity allows you to see what the people you follow have posted, liked, or recommended to you, as well as the actions you have taken. Following someone means that you get notified whenever they add a new track to their collection.

Search

One important feature of the app is the search flow. Since there are a few music platforms to choose from, you can narrow your search down to a particular channel if you choose. Searching for a term in People will give you results in users of the Nocturne

Searching for a track in Music will search for your term on Youtube, Soundcloud, Spotify or Pandora and display results.

Recommend

When you recommend a track to a friend, you can choose to send it to them not just on Nocturne, but on common messaging platforms like WhatsApp or Messenger, and indicate that you have done so, such that you never recommend the same track to someone twice by accident.

Recommend from Music Platform

Another easy way to add things to Nocturne is to do it directly from the music platform, whereby it gets added to your Collection. Sharing a Soundcloud link with a friend on WhatsApp or Messenger for example, adds it to your Collection and marks that you’ve shared it with that friend.

Sharing a link on Messenger, Sharing a link directly from Soundcloud, Profile- Track Added to Collection Notification

When you get a recommendation you think you’d like to listen to again, you can save it to your profile by tapping Like, and get a playlist for whenever your Collection gets boring.

Constraints regarding sharing from Music Platforms

Searching on Youtube limits results to those videos in the category Music, and uses the thumbnails as album art. Due to copyright restrictions, users on Nocturne cannot download music from any source through the app. Tapping on the platform icon in the Player will take them to the source on their mobile browser, from where they can download or Offline (in the case of Youtube) music and music videos.

Potential music platforms that can be searched include, but are not limited to, Youtube, Soundcloud, Pandora, Spotify and Apple Music.

Login and Integration with Social Networking/Messaging Platforms

You can choose to login via Facebook or Google, or with Nocturne login details.

Logging in via Facebook will grant Nocturne access to Messenger but only to the extent that it can pick up links you have copied and pasted from Soundcloud, Pandora etc. if you so choose. WhatsApp configuration is done separately.

Name and Icon

A nocturne is a piece of music written to be performed at night. The name pays homage to my Zune (named Selenium) and went well with the dark theme I selected, although the idea of a moon-centric logo had ben there since the beginning. The sound waves in the logo are a visualisation of me saying the word Nocturne.

Acknowledgements

Pixate prototyping software which continues to be amazing

Zune software and Zune HD by Microsoft

Designbolts for their vector mockup

Noun Project for their wonderful icons

Unsplash.com for their amazing photos

Disclaimer: I own none of the album art and music represented in this project. All copyrights belong to their respective owners. I am not affiliated in any way with any of the artists I have mentioned in this project.

If you’ve made it this far, thank you so much for reading! If you have anything to say about my second article here on Medium, please feel free to leave a comment below. If you like what you saw, please hit Recommend!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.