Today we are debuting a new series we are calling Anatomy of an App. In this column, we plan to highlight sites that we love and interview the makers, hackers, and designers of these sites about their process. The goal is to help people more easily make the connection between a site’s functionality and the technology that was used to create that functionality.
Got any apps you would love to learn more about? Send us an email at firstname.lastname@example.org. Or drop us a note in the comments.
Ever had the urge to learn how to play the guitar? Want to be able to strum along while you’re belting out the lyrics to Bobby McGee around the campfire this summer? Then you need to check out the app Instinct.
So how does it work? First, you select an avatar (I chose one that looked like a slightly-less-kick-ass version of Lisbeth Sander). Each day, you’re given a set list, or, set of tasks to complete. These range from simple, like an intro to frets, to more complicated, like learning full songs.
Don’t have a guitar? No problem. The app allows you to use a real guitar and your computer’s built-in mic, or a virtual guitar that you manipulate with your mouse!
What we really love about Instinct is the obvious passion that Blake Jennelle and Brian Stoner have for their product. You can see this in the smallest of details on the site, as well as through the painstakingly rigorous approach that they’ve taken to developing the product.
So, grab a guitar and get Instinct!
What technology did you use to build Instinct and why?
We do use many libraries on the frontend, including:
jQuery: For consistent access to the DOM across browsers
Underscore.js: For functional programming methods that work consistently across browsers
Backbone.js: For separating the business logic in our models from the user interaction logic in our views, as well as for client-side routing (a.k.a. changing the page/url without doing a refresh)
Modernizr.js: For feature detection across browsers
Sylvester.js: For the vector math that animates the guitarist’s arms
Our database is CouchDB. Unlike relational databases that have columns and rows, CouchDB just stores everything in a big JSON objects. In the early stages of building a new product, flexibility is important. CouchDB lets us change our data model quickly without needing to worry about the rigid table structures of a relational database, and that’s been valuable to us.
What are the biggest technical challenges that you face in building the site?
Oh man, there have been a bunch. Pitch detection was our first big challenge. And it’s going to remain a challenge for a long time. Browser and microphone compatibility has been another challenge – headache really! Instinct might work great on most computers but then others will have major problems, and that’s not okay.
Some other hard stuff: The 3D hand that shows the user where to put their fingers. Audio playback. High speed animation. The guitar lesson editor. The data structures that store lessons, music, user scores, etc. And a bunch of others too.
Honestly it hasn’t been easy!
It looks like you’ve spent a lot of time considering the user experience, as well as the overall design of the site. How do you think that good design can contribute to your goals for the site?
Design is HUGELY important. Design determines what a user feels when they use your product. And what they feel is what brings them back again, inspires them to share it with their friends and hopefully, over time, fall in love with it. Design is where your soul as a creator comes through.
Tech is like a stage and the design/user experience is the show. Without the technology, you can’t perform. But without the design/user experience, the performance isn’t worth having.
It’s obviously possible to build a successful business on top of bad design, I’m sure you can think of examples. But it’s getting harder and harder. Users are starting to have more self-esteem in their relationship with technology and are less willing to put up with it.
Plus it’s such terrible karma to frustrate people and waste their time. The web gives you enormous scale. So every time you slack off on design, you can literally waste days, weeks, years of other people’s lives, when you add it all together and that’s not okay!!