Keep Austin Singing

24 July 2015

Abstract

Keep Austin Singing is an app built with Ruby on Rails meant to match users with a karaoke venue based on their likes.

Planning

This project required several tables with intricate relationships. The biggest problem I needed to solve was dealing with my song catalogue. Different venues have different song providers, while some venues share the same song provider. In order to differentiate songs correctly and allow users to favorite songs at different venues from different providers, I had to create a table joining songs, venues, and providers.

In addition, I also used a second join table to keep track of the categories at different venues. My UML can be found below:

"UML"

Wireframing

With a good UML in hand, I moved on to the wireframing phase. I had a clear vision of what I wanted the experience to be like: an inviting lead-in image with a simple call-to-action below asking users to select the categories they’re looking for in a karaoke venue.

"Wireframe"

Look and feel

My first step in any design exploration is to find some inspiration. I was particularly inspired by the Jukely landing page, as well as the FunFunFun Fest site.

"Inspiration"

Based on my competitive analysis, I came up with the following style tile with inviting imagery, vibrant colors, and bold typography to evoke a fun, night-life design. I stuck to the Roboto font family for two reasons: Roboto is free to use through Google Fonts, and I generally like to stay within one family to minimize font loading times and increase performance.

"Style Tiles"

Implementation

The site was completely built by me using Ruby on Rails, HTML5, Sass, Bourbon and Neat. I used Git for version control and deployed on Heroku. All files are stored on Amazon S3.

Main features include:

Lessons learned

This was my capstone project for The Iron Yard Rails Engineering program. We had two weeks to complete the project. This project helped me understand how to build an end-to-end application in two weeks.

Part of the grade criteria was to have a good looking site, wireframes and style tiles were not required, but I knew I wanted to develop a good visual language I could build upon, so I knew I needed to carve out enough time to focus and get the design where I wanted it to be.

This project helped me balance design and development time. I learned how to scope a project I could complete in the time I had, so I kept the functionality simple and tried to reduce feature creep to be able to deliver a complete product with a design I was proud of by my deadline.