For the Cloudstock Hackathon, we built a small application called Boomerang. It was a frantic 5 hours going from concept to completion, but we did it by playing to each of our strengths and committing to a very focused idea. The whole design phase lasted 120 minutes and this is how Jimmy and I worked in parallel.

Step 1: Sketching
For Boomerang, we knew it was important to take the time and iterate to get the kinks out the concept. Once I opened Photoshop, I knew there was no time to turn back.

It’s necessary to get your hands dirty with design. For apps, that means sketching. There are great prototyping tools, but when time is short, nothing beats a pen and paper. I focused on things I knew I could easily experiment with on paper:

  • Layouts
  • Control Positioning
  • Interactions

Once I had a general feel of how the application would look and act, I was ready to work on the layout to pass onto Jimmy.

Step 2: Deliver the Layout
When the clock started, Jimmy focused on getting the infrastructure for the app setup. While I spent 30 minutes sketching, he kicked off a Rackspace CloudServer instance, got Django running, and obtained his Twilio API key.

To get started with his development, he needed to get an understanding of how the application was supposed to work. Using all the sketches I made, I put together a more orderly version of the layout.

With this simple picture, Jimmy could start cranking on the application.

Step 3: Craft the Design
As I was sketching, I already had a sense of what the final design would look like. I even put it in my notes.

With only 90 minutes to design, I had to lock-in my colors, textures, and control styles.

For colors, I started with the dominant orange from the Cloudstock logo.

For textures, we wanted to continue the Cloudstock feel subtly, so we incorporated their flower pattern into the background.

When users added an event, I wanted it to feel more industrial-control like. So the background for that area was a textured grill.

I chose these styles for the buttons and form elements:

With the layout, colors, textures, and controls, putting together the final design was just about moving fast. I delivered this final comp with the two main states for Jimmy to work from. I also tossed into a shared Dropbox folder all the assets he needed like background images, logo, shadows, and icons.

What’s next for us?
The hackathon was detour from the bigger project we are working on called Funnel. We’ll be announcing more details and letting customers use it starting January. If you are interested in getting on our private beta, join our interest list. We promise to do more posts like this on Funnel once it launches.

If you like this post, you should it out.