Web App Prototype
Next. Music Player
An effortless playlist generator
This web app is limited to a small selection of tracks and the project serves as a demonstration of UI and development skills. Next. is a playlist generator designed to take the stress away from choosing the right song. An intentionally paired back interface presents the user with a balance of control and restraint.
Published: November 2017
The Design Process
A number of wireframes were considered each focusing on different aspects of the user experience (UX design). The three concepts were based around either; the current playing track (Focused), a lot of information and choice (Rich) or a small selection of upcoming options (Light). Pictured below are the two concepts ‘Focused’ and ‘Rich’.
Wireframe of the 'Focused' concept emphasising the current track.
'Rich' concept giving the user a great deal of choice.
Below is the chosen wireframe, ‘Light’, which was most aligned with the original vision. The ‘Light’ concept put the most emphasis on upcoming track options. Next. is designed as a tool that will disappear into the background of social settings making song selection a simple task, by displaying a selection of 4-6 songs the user has an amount of control without an overwhelming choice.
The chosen design 'Light' which places an emphasis on upcoming tracks.
The last step before development was to produce a render to work from. This process allows for experimentation with type and scale to find visual balance within the UI. Often changes are made on the fly while developing however starting with a high resolution render keeps the project focused and moving in the right direction.
A static rendering of the chosen wireframe.
The Development Process
As Next. is simply a prototype all that was required for development was HTML, CSS and jQuery. The two most complex parts of the project are the search functionality and the player itself. Search functionality is the only plugin used in the project (EasyAutocomplete by Łukasz Pawełczak) which suggests options of artists or track names. The result of the search is then compared to a list of options in HTML which contain custom attributes the jQuery uses to source audio files. The audio tag is hidden in favour of completely customised controls. Audio functionality is thanks to a helpful post by Sabeer Shaikh for Eduonix.
Workflow: Populating an audio tag with an html list and jQuery.
The fully functional prototype is available for interaction. Below are a series of images displaying the functionality of the fully scalable product. The biggest learning curve for the project was the use of jQuery to manipulate or customise native HTML elements. A simple design at the outset eventually led to a few weeks of wrangling snippets of code until they worked together to create a seamless prototype.
Landing page: "Start a playlist" search dialogue.
Player: Upcoming tracks and audio controls.
Menu: Any information that isn't essential in standby.
