The Story of ShelfLuv: midVenturesLAUNCH Hackathon Best Overall App

2 Comments

This is the story of ShelfLuv, an instant book Amazon book search I made for the midVentures Hackathon that ended up winning Best Overall App. ShelfLuv is book search application that displays new search results as you type, similar to Google Instant and Youtube Instant, but features a gorgeous bookshelf user interface.

The Beginning

I’ve had the idea of building a bookshelf user interface for a book search for a while now. I’ve been enamored with these types of interfaces ever since Delicious Library, the iPhone app Classics, Shelfari, and more recently iBooks. However there was no real reason to build one other than satisfying my own creative hunger. It was one those ideas people put in the back of their mind to get around it one day. Needless to say I’ve been mulling over the design of the app for a while now.

The Instant Craze

On September 8, 2010, Google launched Google Instant, a modification of their search engine that provides instant search results as the user types. A week later, a Stanford University student builds Youtube Instant using the Youtube API. It goes viral and he gets a job offer from Youtube co-founder Chad Hurley over Twitter. I thought to myself, wouldn’t it be cool to marry my bookshelf book search idea with Instant, hanging on the coattails of this craze. I ask my friend about my idea. He couldn’t believe I would stoop to hopping on this passing internet meme/fad.

The Obsession

Although I’ve had the idea for a while, it started to bug me more and more. I wanted to realize it. I started really thinking about the user interface and how it would work. I started to thinking about the design. I started to figure out how the instant feature would work. I also started to look for excuses to work on it in the form of hackathons. I found one in the midVenturesLAUNCH hackathon. Hackathons get me pumped and gave me a goal. I decided it was gonna compete in it.

The Name

I had no idea what I was gonna call this. I just gave it the codename amzn-instant and ran with that for a while. You can see that from my affiliate tag – amzn-instant. Not very creative. After much thought I finally came up with SpeedyShelf. I felt it reflected the instant and quick responsive nature of the product. I even bought the domain name. However, after a few days of mulling on it, I felt the name was too generic and too descriptive of a SINGLE feature of the product. A few days later I came up with some new ideas: LoveYourShelf or ShelfLove. I asked my wife which one she liked more. She said the latter – it was shorter and catchy. I agreed. Unfortunately ShelfLove was taken but ShelfLuv was available.

Planning & Preparation

Once I made up my mind that I would do the hackathon, I started the necessary preparations. Not planning for a hackathon is like going to a gunfight with a knife. Not only because of the time constraint but because of the odds stacked against a one man team. I was secretly hoping my friend Ravi would not compete because he always manages to lay waste to the competition every time he comepetes. At the same time, I welcomed the challenge of going up against him. I’ve done hackathons where there were 7 team members to a team. I’ve also done hackathons where they had worked on their idea for months. I could be severely outnumbered. I hadn’t looked at the Amazon API for a while so I revisited it. I started to figure out what the design would look like and what code libraries I would use to be able to do this in a short amount of time.

Design Thinking

I started thinking about what the features of this search app would have considering the time constraint. It’s big feature would be the gorgeous UI and the ease of use of it. I also thought about design as part of function. The books wouldn’t just look nice and pretty but the different types of editions would be visually distinct. Paperbacks would have some sort of indication – like a page curl; hardcovers would have a binder effect, and Kindle editions would have a Kindle behind them.

The Actual App

The actual app really doesn’t do much. You can type to search for books and as soon as you typed, books would start showing up. You can’t even view more books than the first page of results (limited to 10 books). You could click on a book which would take you to a detailed page. One really AWESOME feature that it had was you could sort the books by alphabetical order or sales rank. When you did that, the books would “fly” over to its correct order. It was a beautiful feature that added a really nice touch to the already beautiful app. However that was pretty much all that the app did or could do given the allotted time. In retrospect this quote probably resonated with me:

Build half a product, not a half-assed product.
- Jason Fried

Presentation & Aftermath

Sunday came along and I did the presentation. At about that point I was running on very few hours of sleep, coffee and Mountain Dew. The judges deliberated and I won. Part of the reason I focused so much on design and not feature set was because I had read that the prize for Best Design was the AR Parrot Drone. I knew that I would never actually buy one but I sure wouldn’t mind one for free. I ended up winning Best Overall App which meant that I would not be eligible for Best Design. In fact Best Design became Best Idea. I discovered a day later after I caught up on sleep that I actually won a booth at midVenturesLAUNCH and a chance to present on stage to an audience of 1500 people at the UIC Forum. Steve Huffman co-founder of Reddit and Hipmunk presents after me and I get to meet him afterwards.

I submit my app for review at Hacker News, a website for computer geeks and tech entrepreneurs and it generates lots of traffic and good feedback. Lifehacker picks up on the story as well as The Next Web. My friend Nicole who writes for The Examiner writes an article covering the midVenturesLAUNCH and also mentions ShelfLuv. I’m still riding the high. This is the ShelfLuv story so far.

Popularity: 6% [?]

How To Make an Award Winning iPhone App in 12 Hours

No Comments

This is the story of how two people who’ve never created a mobile application developed an iPhone app at the Day of Mobile Hackathon on March 6, 2010 in less than 12 hours and went on to win the Best iPhone App prize of $250 cash.

First off, what this blog post isn’t:

  • It’s not a get rich quick scheme. (Well, maybe it is, if it motivates you to crank out some apps with some new gained knowledge).
  • I’m also no trying to sell you anything. There’s not going to be some affiliate link or buy this e-book crap.
  • This is not a turnkey solution for a non-techie. If you can’t code, other than it being a good read, this article is not helpful to you. These aren’t the droids you’re looking for, move along.

If you are still reading this, awesome!

Day of Mobile is a one day developer conference focused on the mobile phone industry. Speakers range successful iPhone app developers who made gobs of money to a lawyer who talked about the legal issues that come up when creating these apps. At these types of conferences, it is not unusual to have a hackathon.

My friend Chad Paulson and I decided to partner up and compete in this hackathon. I’ve served as a judge at 2 hackathons including SocialDevCamp 2009 Chicago and Google Android Eco Challenge Hackathon in Chicago. Both hackathons turned out really well in terms of number of teams competing and apps that came out of it. Chad’s app actually won Best Overall at SocialDevCamp. He made out like a bandit. I was really pumped and inspired.

However neither of us had ever made a mobile app. I made a hello world iphone app that had a label that said hello world over a year ago. That’s about my level of experience with Objective-C. Since it was a one day hackathon, we really didn’t have much time. The conference started at 9AM on Saturday and code freeze was 2:30PM.

With that in mind we had to find a solution that would work for us. I had already done a tech evaluation of several mobile development platforms including Appcelerator Titanium, PhoneGap, Flash CS5, Mono, Rhodes and others for a client who was looking into mobile apps. These are development platforms that provide a layer of abstraction that allows one to develop a mobile app that would publish to one or more platform without having to learn said platform. In that research, I had concluded that the solution that would work for me and my team was Appcelerator Titanium because we were web developers who were comfortable with javascript and html. That’s what I ended up going with when we did this hackathon.

The mobile app that Chad and I decided to develop for the hackathon was a mobile version of my webapp, a social media monitoring tool. In keeping with the spirit of the hackathon, we decided not to start coding till Thursday (keeping development time under 24 hours). We realized later on that some of the other teams had been working on some of these apps for a week and had more people on it even. However, what we did do is install the necessary software before hand and started to figure out HOW to do the things we needed for our app. I also started designing the screens before hand so that we would hit the ground running the second we started coding.

If you think of it as an Iron Chef episode, we essentially figured out what we were going to make and had done all the prep work like chopping vegetables so that once the competition started, everybody just started doing stuff.

Friday March 5th, 10:00PM. Chad gets home from dinner with his girlfriend. We already had a skeleton project that was created when you create a new blank project in Titanium. We also already had Kitchen Sink installed. It’s a sample project provided by the Appcelerator guys that has all the sample code you would need to get started on anything except the most esoteric of projects – hence the name Kitchen Sink.

Since my web app already had a REST API that we could access, we just had to figure out how to make those calls and display them in the conventional mobile way, usually in a list. By 3:00AM, we had many of the screens showing dynamic data. By that time, I started to keep dozing off on my computer. I tried to push through but ended up going to bed around 3:30AM. Chad wanted to make more progress so he cranked at it till around 7:30AM. That was around the time I got up and I dragged my groggy self to the conference and started coding again.
When Chad got up at 10:30AM I had the final screen working.

At this point the app was basically working but it didn’t have all the bells and whistles of a usable mobile app (like back buttons between views, title bars, etc). Overall, at that point, I had put in say 7 hours of work and Chad about 9 hours. It’s a testament to the ease of use and power of Appcelerator Titanium.

We spent the remaining time till 2:30 tweaking and cleaning up the code and making sure it was a polished app that would demo really well. I also used some of that time to work on my slides for the demo presentation.

To be honest, I didn’t think we were going to win anything. After seeing all the demos from the various hackathon teams, we were very impressed. Each app was cool and compelling in its own right. I was very surprised when we ended up winning the Best iPhone App category. There were 11 teams with about 4 or more iPhone apps if I remember correctly. That was the end of the journey. By that, we were so tired that we just wanted to go home and pass out.

Popularity: 7% [?]

Minimalism in Web Design

4 Comments

As web designers we must resist the urge to keep adding. Clients often want more features and we struggle with how to do that tastefully, and in a user friendly manner. We also want to make our designs “prettier” by adding more “stuff” to it. This tidbit of advice from Coco Chanel for women resonates with me as a designer.

Do the hair. Do the makeup. Get yourself fully dressed and then, before walking out the front door, pause by the mirror and remove one item. Maybe it’s the hat. Maybe it’s the piece of jewelry you really don’t need. But the line, according to Ms. Chanel, between knockout and near miss could be found in a single overdone object.

link here

With that in mind, I’ve started to really think about the current project I am working on and what I can remove.

Popularity: 3% [?]

Concept UI: iPad Curved Keypad

3 Comments

With all the buzz going on with the release of Apple’s new iPad – a multitouch tablet computer, my friend Scott Robbin came up with a keyboard concept that he believes is an improvement from what Apple is offering. I thought it was a great idea because made the tablet work like a blackberry almost. You used your thumbs to enter the key strokes as opposed to hunting and pecking with one hand while holding the iPad with the other. It also had the advantage of not obstructing the center with your hands or the keyboard.

ipad

However I thought that Scott’s concept, as well as the original iPad soft keyboard have limitations of their own, namely that both require you to use both hands. Scott’s post sparked my own idea of a soft keyboard that would require only one hand to operate.

iPadConcept

You’ll have to forgive the actual design, but I whipped it together in a few minutes using the Shear filter in Photoshop. The point is that the curved keypad allows you to use your thumb to type while holding the iPad with the same hand. This way, you use the iPad on the train or bus if you had to hold onto the railing. Naturally if you were left handed, you could flip the keyboard to the other side.

Popularity: 31% [?]

Using a WiiMote to Control an X-Wing

2 Comments

I spent this afternoon putting together a quick demo for my Rich Internet Interfaces Beyond Mice and Keyboards talk I’m giving at the DePaul University iTea Seminar tomorrow. The example is a simple one that illustrates using a WiiMote as an interface to controlling a 3D model. This can be easily used as a game control and or more general UI control. I believe it is a more natural way to interface with 3D elements navigating in 3D space and can be generalized to let people more intuitively navigate through and interface with software such as the operating system. After a few hours of looking for the WiiMote, charging it and some coding, I’ve put together this simple demo:

I can’t claim credit for putting together code to display a 3D X-Wing. I’m not interested in that. I quickly found what I was looking for here: http://code.google.com/p/papervision3d/downloads/list – the source code repository for PaperVision – the open source 3D engine for Flash. At the very bottom there’s sample code for displaying a 3D X-Wing.

First things first, you will need the WiiFlashServer that interfaces the WiiMote with your Mac. That code and supporting documentation can be found here: http://wiiflash.bytearray.org/. There are 2 pieces to the puzzle here. The WiiFlashServer which listens to the WiiMote and sends messages to your app and the WiiFlash Actionscript API which can receive those messages.

Once you download the Actionscript API and put that in your project directory, include it in your application:

import org.wiiflash.Wiimote;
import org.wiiflash.events.*;

var wiimote:Wiimote;

Initialize the Wiimote like so:

wiimote = new Wiimote();
wiimote.addEventListener( Event.CONNECT, onWiimoteConnect );

wiimote.connect();

The only thing we really have to do now is to use the pitch, yaw and roll values of the WiiMote and use them to control the X-Wing, like so:

function handleFrames(e:Event):void
{
var rotX = 0;
var rotY = 0;
var rotZ = 0;

if (!isNaN(wiimote.roll))
rotX = wiimote.roll/Math.PI * 180;

if (!isNaN(wiimote.yaw))
rotZ = wiimote.yaw/Math.PI * 180;

if (!isNaN(wiimote.pitch))
rotY = wiimote.pitch/Math.PI * 180;

// no easing - animation too jagged
//group.rotationX = -rotY;
////group.rotationY = rotZ;
//group.rotationZ = -rotX;

// added easing to smoothen motion
group.rotationX += ( -rotY - group.rotationX) / EASING;
group.rotationZ += ( -rotX - group.rotationZ) / EASING;
}

You can see from the code there’s a section I commented out. You can use the raw WiiMote values to feed to the X-Wing directly but I found that the values can be jumpy and discreet causing the X-Wing to turn and move with a lot of jitter. I added a simple easing function to make the movements smoother.

As you can see, it’s not rocket science. With a little bit more work, we can easily add other controls like button presses to control the firing of the X-Wing.

Here’s the link to the source if you’re interested. Thanks for watching.

Popularity: 6% [?]

Older Entries