Meet Votes.io, our Rails Rumble 2012 contender

Image of Votes.io logo and mobile view
Votes.io is instant feedback. Quick polls. Fast answers.

So the Rails Rumble 2012 is a wrap, and I’m really proud of what we’ve built.

Votes.io is instant feedback: create a poll, share the short link and watch the results tick in, beautifully rendered in real-time.

Embracing constraints

Working within a 48-hour constraint enforced a focus in the team on getting things done. Most of the team members, including yours truly, have toddlers at home, further enhancing the time constraints and the focus on being über-productive.

Between diapers, family dinners and that pesky need for sleep, the task was simple: create a simple app that does one thing well.

Removing friction.

We deliberately chose to not provide any account management or poll administration. Creating a poll should be dead simple — write a question, add some choices and share the link. Done.

Made a typo? Forgot to include a choice? No problem — just create a new poll. No messing around with deleting, editing or unpublishing a poll.

Sure, there’s a lot of good reasons for tying votes to a user, and letting the creator go back and edit/update polls. It just wasn’t right for this type of poll system. Votes.io was built for immediate responses to simple questions, and as such, each poll is shortlived.

The premises of the contest was also a factor in this decision. Judges can’t be expected to invest a lot of time in each app, considering there’s roughly 300 apps competing. I fear a lot of great apps in the Rumble will suffer a lack of votes, because of this.

Designing the UI

Three different sketches of use cases for Votes.io
Use cases for Votes.io: Vote for tomorrow's lunch, get audience reactions and sending polls in emails.

Our canonical use case is a speaker who creates a poll, prior to a presentation, and includes the URL in her slide deck. Then everyone vote simultaneously at the event and watch as results update instantly.

This focus on doing one thing well shines through in the UI, especially on the homepage. The interface is obvious and needs no further introduction:

Votes.io homepage

Getting started

I initially hashed out some simple flows, to get a feel for the screens we’d need and what elements would be required to support the interactions:

Two diagrams of the user flows, needed to build the app
The flows needed for a minimally viable product

After a couple of back-and-forths with the team, we started building the app. The rest of the team took on Rails and data modelling, and I started building the UI. For such a simple app, a quick sketch and then straight to code, felt like the right approach.

A snapshot showing sketches posted to our chatroom
Quick sketch in Draft for iPad, post to Campfire for a quick discussion, then back to work. (In danish, sorry.)

We didn’t have time to design the UI from scratch, and decided to build off of Twitter Bootstrap. We’d get battle-tested components for free, eliminating potentially time-consuming issues. Bootstrap also provides a simple, pragmatic foundation for responsive design—a crucial factor for us.

Four different snapshots of our iterations to body copy
Good copy is everything.

Feature freeze

At the end of Day One, we’d achieved our goal for the day: have a working, usable app. Still rough around the edges, but feature-complete. Create a poll; get a short link; watch results update in real-time, visualized in three different charts.

We started Day Two polishing the UI, refining copy, refactoring code and squashing bugs. We didn’t quite manage to make all the visualizations really sing, so we decided to kill one of them. It’s still in there, you might be able to find it ;)

As the end of Day Two was approaching, the app felt polished and we decided to ice the cake. We anticipated a lot of mistyped shortlinks (think thumbs vs. touch keyboards), so we added a little easter egg to our 404 page. We also added some featured polls to the frontpage.

The cherry

With less than 3 hours left on the clock, I figured we could use a logo. I got busy with my Wacom stylus and Paper for iPad:

Ideas for the logo and the final version
Combining bar charts to form the letter V

And we had a logo. Admittedly, not the best logo I’ve made, but considering my caffeine level, it’s alright. I used Jason Zimdars’ handy SCSS mixin to serve it @2x-dead simple.

We went trough the app, securing all pitfalls, tagged the repo and exhaled. Signed, sealed, delivered.

This was my first time participating in the Rumble, and it’s been great fun. I had a chance to try out some new techniques and just geek out for 48 hours. Bliss.

If you’re a designer, you should definitely try joining a hackathon—it’s not just for programmers. You might even pick up some new coding skills along the way, I sure did.

Huge props to the rest of Team Votes.io: Jacob Tjørnholm (@chopmo), Laust Rud Jacobsen (@laustrud) and especially Jakob Skjerning (@mentalizer) for inviting me. Amazing what a simple retweet can lead to.

Try out our app at votes.io and if you think it’s good, please vote for us—thanks!

Discussion

blog comments powered by Disqus