Anexinet recently completed a project for MP45 Records called Songboard. MP45 Records is a startup in the music industry that places songs in movies, television commercials, and other mediums without any exclusive contracts or forcing artists to give up the right to their own music. This is different from the rest of the music industry, and I was excited for the opportunity to bring their concept to life.
The Process
Our team met with the CTO of MP45 Records to understand the problem they're trying to solve and propose a solution. In Songboard, artists can create an account and upload music. That music is then shopped around to MP45's contacts for licensing opportunities. We wanted to make sure the process to upload songs and listen to music would be easy for users and the visual design of the site focused on the artists themselves. We did 1-week development sprints meeting with the CTO every week to review progress and answer questions.
User Experience
Our main UX goal was to make the process of uploading music as easy as possible. Our approach to visual design goal was to get as much chrome out of the way as possible and allow each of the artists' pages to be about them. We started out with a few low-fidelity wireframes to convey our ideas to the client and generate discussion.
 |
| Low-fidelity wireframe for the artist details page. |
Wanting most of the design to come alive on the site though the submissions of the artists made applying aesthetics easy for us. We used a grid for the pages for songs and artists and made the artist profile picture prominent on their details page.
 |
| The released site focused the visual design on each artist. Yes, MP45 Records is working with one of the songwriters for Carly Rae Jepsen. |
We also learned that we expect many users to access the site on their mobile or tablet devices. We expected the uploading of music would mostly occur though the desktop, since the users would be professionally recording and editing songs before uploading and that is done in a desktop environment. However, the sampling of music could come from any device. We chose to incorporate a responsive design into the application based off of Twitter Bootstrap. We used as many native Bootstrap classes as we could and developed our own theme given the final aesthetics.
 |
| The released site when viewed on desktop, tablet, and mobile devices. |
Technological Development
We learned early in our meetings that an important use case would be for users to listen to music while they browse the site. This helped us make the decision to develop the site as a single page application. We chose to use the Web API of .NET MVC 5 to host REST web services with the front-end layer of the application driven by HTML5, CSS3, and JavaScript. We used KnockoutJS for data binding and a host of smaller JavaScript libraries like AmplifyJS, SammyJS, and Toastr, to supplement the overall MVVM architecture.
The remaining tiers of the application were developed in C# with a middle layer for business logic and a data access layer using Entity Framework 6. MP45 has some more ideas up their sleeves, so together we modeled the database to support more features than we expected to launch with. This gives MP45 the chance to respond quickly with features after launch since they invested in the back-end design up front. We only needed to implement in the service layer with what was needed to support the front-end.
Hosting
In addition to our design and development services, Anexinet also has full hosting services as well for our clients. MP45 chose to use our hosting services for Songboard so we put together a package that met their needs. We have several web servers with a load balancer and one backend database server. We integrated Google Analytics into the site to collect usage data and we're monitoring the site along with our client and have the option to scale servers to meet demand.
Launch
 |
| Landing page of the released application.
|
MP45 Records was pleased with the delivered product and our process in addressing the needs of their users. Check out the site at http://www.songboard.com and we hope you enjoy the finished product as well.Labels: CSS3, HTML5, JavaScript, KnockoutJS, Responsive Design, Single Page Application, SPA, User Experience, UX