Rapid HTML prototyping with jQuery Mobile

Business As Usual

Recently I was working at a digital agency developing the user experience for a tablet-based app. I went through the usual process of reading through all the planning documentation (requirements, audience insights etc.) conducted a competitive analysis and then reviewed the platform on which the app was going to be developed on (PhoneGap).

Off the back of that lot I started to work on some initial sketches (whiteboard and paper). The next step in the process (as you would expect) was to formalise the documentation into a format that could be presented and easily digested by the client (PDF). Out comes OmniGraffle plus my usual host of carefully crafted stencils etc (with a little help here and there from GraffleTopia).

After a week of working, amending and reviewing internally, I presented the wireframes to the client who was delighted with the work/direction and gave us the go-ahead to continue to the next phase.

Job done right? Well yes and no. After I left the agency I thought, mmm, could that two week process have been condensed and saved the client some time, money and provide a more relevant demonstration of our ideas? The answer was yes!

Enter jQuery Mobile

We all know there are a bunch of prototyping apps out there on the market. But I like to get my hands dirty and also have more control over what I produce, so I chose to use jQuery Mobile to build a basic prototype of the web app I had just been working on. After a day or so of tweaking HTML and CSS we had a pretty good working prototype.

In this instance the prototype wasn't OS-specific, if we were just targeting iOS we would have used iUI, but I digress. The point here is that I produced a working prototype that demonstrated the app's basic functionality on both iOS and Android devices quicker than it took me to develop the wireframes.

In this instance the prototype doesn't have all the functionality specified in the wireframes, but given a little more time I could include that. I also could have worked in some comment capturing functionality for the client to feedback on the prototype using something like Protonotes, but I'll save that for the next job.

But all in all, I produced a pretty slick, working prototype in next to no time. Had this been included in the initial project as part of the UX deliverables, it probably would have saved both the client and agency a bunch of time and money.

This doesn't mean I will be abandoning wireframes, but there is definitely value in developing prototypes in conjunction with wireframes and maybe even instead of wireframes for certain types of projects. After all, clients like to see things working, rather than read a document about how that thing works.

I'm also looking into using Twitter Bootstrap for prototyping on future projects. Watch this space.