Tools & Skills
User Experience
Need-finding
Ideation
Prototyping
Interviewing
Web Development
HTML , CSS, JavaScript
Spotify API
Firebase
Graphic Design Tools
Photoshop
Figma
Pixelmator & Pixelmator Pro
Affinity Designer
Story
“MusicMaster” is a web application inspired by, and designed for DJs and music lovers to be able to find new, rhythmically similar songs to ones they already know! Aside from being able to search and listen to new songs, the user can also create a playlist of favorited songs they can save and later find. With the help of the Spotify API, MusicMaster is able to provide a selection of playable songs to the user given a simple BPM or Song Title query.
Responsibilities
Team responsibilities included meeting up at least 6-8 times a week. During team meetings we would normally brainstorm/ideate upon updated work each of us have done throughout the week. My main role on the team was lead front-end developer. I was responsible for the look and feel of MusicMaster, the user flows and implementing important features to add dynamic ability to MusicMaster.
MusicMaster uses HTML, CSS, JavaScript, jQuery, AJAX, Firebase and the Spotify API to provide users with an easy to use interface and a wide variety of music to choose from. MusicMaster was created in conjunction with the COGS 121 (Human-Computer Interaction Programming Studio) class with my partners Allston Fojas, Mark Tupas and Cole Richmond.
Need Finding
Our first task was narrowing user groups and defining the problems they may encounter. After the first couple of team meetings we decided to target creative influencers in the music industry.
Storyboards
This simple storyboard shows a realistic use situation in which MusicMaster provides valuable features that facilitate the discovery of specific musical requirements such as BPM and/or genre.
Prototyping
Prototype tranformation #1 (Home Page):
Here we see the evolution of the index page from a simple skeleton to a fully-fleshed out version that incorporates the MuiscMaster brand colors and key text lines that help guide users to the features available.
Prototype tranformation #2 (Search By BPM Page):
The transformation of the Search by BPM page shows the gradual incorportion of the MuiscMaster brand and color scheme, as well as the "Play Song" feature and "Save Song" feature.
Data Visualization
Apart from the "Play Song" and "Save Song" features, we wanted to provide an ambitous data display that could provide useful information to users when discovering new songs.
Modal Data Features
-Tempo:
the overall estimated tempo of a track in beats per minute (BPM). For our case, we called this feature BPM since BPM is a more technical term.
-Key:
the estimated overall key of the track. From the Spotify API, integers map to pitches using standard Pitch Class notation (e.g. 0 = C, 1 = C♯/D♭, 2 = D, etc.). If no key was detected, the value is -1.
-Energy:
a measure from 0.0 to 1.0 and represents a perceptual measure of intensity and activity. Perceptual features contributing to this attribute include dynamic range, perceived loudness, timbre, onset rate, and general entropy.
-Danceability:
a measure from 0.0 to 1.0 that describes how suitable a track is for dancing based on a combination of musical elements including tempo, rhythm stability, beat strength, and overall regularity. A value of 0.0 is least danceable and 1.0 is most danceable.
Branding
MusicMaster branding incorporates energetic colors into design that help users easily distinguish points of information, while also providing aesthetically pleasing views:
Demo Video
