Working on this project as an exercise I decided to create a platform to enjoy and explore OST music — one of my passions. Starting from the sketches my UX decisions were based on empowering the user to search and discover new music and movies/series related to previous choices and featured content. The platform should also allow the gathering of personal playlists related to users' definitions.
Concept
As I was dealing with Cinema the name Kinorox proved itself to be interesting and catchy. The word Kino is the spelling of Cine for many languages such as German, Russian, Norwegian and Polish. The term Rox for its time is a neologism to Rocks.
Coming next, the Visual Identity also followed the theme Cinema. I decided to use Condensed Sans Serif typefaces and the Black-and-White palette to empower the movie covers and featured arts.
Typography
Both families available on Typekit — enjoy!
Inspired by the legal text on movie posters (always by the bottom) I've carried tests of visual impact and reading and choose 2 great typeface families of Condensed Sans Serif type: Alternate Gothic No. 1 and Bernina Sans Condensed.
Grid
Exploring horizontal, vertical and diagonal lines a grid was designed to encapsule all itens and options of the platform UIs. Four main guidelines were settled then and conducted the design decisions with harmony and consistence throughout the interfaces.
The use of the Grid to create the interfaces
UI Universe
The Home page is simple and clear. The focus is on the soundtracks and on the movies and series that these albums promote. There's the Search right at the beginning, following the users' viewing flow. Then there's a Featured section to boost premium choices and new releases. A Main Slider present the best options for you related to your previous picks and blocks by the bottom offer you a chance to explore the content of the platform.
When you decide to click on an album you get extra information about the production, commercial reviews available on main stores and of course the chosen playlist. UX is clear and the options presented are the ones that matters. All additional options are hidden to be shown when necessary. Gimme music after all!
Home with animated custom Header — Special playlists suggested
Playlist view — Music Player by the header
Visuals within Music Streaming
Picture this. You're there, listening that fantastic soundtrack. You don't know the movie yet but the sound is just captivating. While you relax what about some visual keys, stills of the movie shown on the platform to enhance the narrative?
I've designed this as an optional pick — like the old screensavers use to work on Windows Media Player and similars.
Search
As the search is such an important part of the platform it blocks all other options when activated. Text is huge and suggestions are prompted right after typing to empower the user's action.
Creating Playlists
The user can also create playlists. He or she can start from a base album or track or even create one from scratch. The option is always there, related to each and every album and track. The user can set album covers and wallpapers, type descriptions and manage similars to attract other users the given playlist.
