Challenge statement

In 3 months take a User-Centered Design approach to create a Progressive Web App using the MEAN Stack to aggregate content from a curated list of music brands (RollingStone, HotNewHipHop, 8PoundsMusic, EDM, and etc.) to save users time from digging for great music ultimately simplifying their lives and making discovering great new music effortless.

Conception, Understanding, and Defining

Month 1 focused on conception. I began with functional specs listing the desired features and revenue model of music'em. A design audit was conducted from surveying friends, family, and peers before creating a sitemap and solidifying features.

User Research

Researching user behaviors and the brands they trust to include in the app. The process weighed the brand's influence amongst demographics of male and females between the ages of 16 and 34.

UI/UX Validation Phase

Month 2 focused on usability tests. using SketchApp I developed a preliminary wireframe from my whiteboard sketches. The details of the frames took into account the functional specs feedback.

The next frames are of the signup section on mobile for users that are not logged in with the goal to inform users within 1min. on why they want music'em.

QA & Deployment

Integrating Firebase for my database and OAuth 2.0 to make signup/signin simple and secure for users. As a registered Facebook developer i'm given analytics of my user-base and in app advertisement capabilities.

Music'em uses a JavaScript web bot I created to aggregate content from the curated list of websites. Each brand has their own bot targeting specific data stored with Firebase.

AngularJS was used to bind my information from my nodejs API to the client view. Google's material design allowed me to have a consistent design that translated well across all devices, adjustments to my SASS files were to implement flexbox changes for a more modern design feel for music'em.

Result

The 3 month development cycle gave me a more thorough understanding of ES6, design principles, Angular's MVVM architecture, and http requests. Many mistakes were made but I turned them into learning experiences that would then translate into a better understanding of the product I wanted to deliver and could be proud of presenting and further develop.

The full project's codebase can be found on my github page here github.com/ptlergo/musicemapp.

To view the app itself follow the link to musicemapp.com here.