up-arrow

Moosic.com

Moosic.com is a website that allows users to sync their accounts on various music platforms like Spotify, YouTube Music, SoundCloud, etc.and curate mixed playlists, along with offering new music with over 20+ genres and live world radio.

overview

01 Discover

While working, I often found myself juggling between Spotify and YouTube Music while trying to find that one song that suited my mood. I liked both for their algorithms and interface, but also wanted to have them in one place.
I wondered if people wished the same and there began the project.

02 Define

22-year old Sam likes to listen to soft instrumental music while working.
Since, he works on his laptop, he uses browser versions of Spotify and YouTube Music.

What Sam says

The problem

Management and utilization of user's content on different music streaming platforms can get inconvenient.

03 Develop

Based on Sam's story comes the idea of a website that allows users to sync all of their music accounts and create mixed playlists - Moosic.com.

Desired features

To sync all of user's music accounts

To curate mixed playlists from different sources

To allow users to access lyrics and videos as in their current apps

Extra features - brownie for users, strategy for service provider

Moosic.com will need to access users' music accounts to deliver its service. There may arise 2 issues here - the paranoia of privacy, and missing out on users new to music.


For the former, we need to build confidence among the users for the website - achieved by extending services which do not require an investment - here, Login. While the latter can be resolved by adding 'Explore Music' and 'World Radio'.

Colour psychology

"Colour is a power that directly influences the soul."

- Wassily Kandinsky, the pioneer of abstract art style

colorable 1
colorable 2

To not overshadow a person’s emotions, choosing a neutral colour like dark gray and text of lighter gray, complying with the WCAG 2.0 rules for good contrast, along with fluoroscent details to show action and pop. According to Brent Jackson's tool Colorable, the contrast ratio is 5.85 - AA, an industry standard.

Information architecture

information architecture

04 Design

Fonts and Colour palette

fonts and colour

Rough Wireframes

wireframes

Interactive Design & Copywriting

The name "Moosic" was followed by several more cow puns.

interaction design

Loading pages for the website containing lyrics with puns.

loading pages

05 Deliver

Landing page - 3 pages wide. Regular vertical scrolling by the user makes the page scroll horizontally

landing page pre login

Sign In overlay

Sign Up overlay

Menu (before sign in)

Menu (after sign in)

Expanded music bar

expanded music bar
expanded music bar for YT MUSIC

Dashboard

dashboard

A Mixed Playlist

Mixed Playlist Page

A synced account page

Synced account page

Playlists from the synced account

spotify playlist

Following video shows how users can form a Mixed Playlist on Moosic.com

'Explore Music' page

explore music

A welcome message for non-signed users informs about available features.

Music can also be searched via links. Just paste the URL and Play/ Add to Playlist.

explore music options

For already curated playlists on the 'Explore Music' tab, the above menu options are available for each song.

'Blacklist song' allows users to skip that song from the playlist.
For signed-in users, blacklist option will blacklist the song till they list the song again.

Radio

RADIO without login

Retrospection

Moosic.com was my first ever UX project. It was during the making of this project’s final screens when I learnt how to use Figma. Being it a self-initiated project, every little learning was an accomplishment. Right from discovering a problem to threading it into a story to delivering the solution, my understanding about UX has matured.

No design solution is perfect. The deliverables of Moosic.com just form a preliminary solution. Syncing data from various music-streaming platforms may be an inviting model. However, feasibility w.r.t business, especially, advertisements needs to be discussed.

Talking about the interface, I acknowledge that there is still enough room for improvement.

I had a great time crafting the story of Moosic.com. If you liked it too, smile :) and if possible, hit me up. Nonetheless, my mailboxes are always open to a healthy criticism.