Business as usual

Recently we were working at a digital agency developing the user experience for a tablet-based app. We 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 we 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 our 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, we 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 we left the agency we 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 we like to get our hands dirty and also have more control over what we produce, so we chose to use jQuery Mobile to build a basic prototype of the web app we 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 we digress. The point here is that we produced a working prototype that demonstrated the app's basic functionality on both iOS and Android devices quicker than it took us 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 we could include that. We also could have worked in some comment capturing functionality for the client to feedback on the prototype using something like Protonotes, but we'll save that for the next job.

But all in all, we 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. Oh well...

This doesn't mean we 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.

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

Working demo

Check out the working prototype (intended for viewing on an iOS or Android-powered tablet device, but will work in most modern desktop web browsers).

Posted in: BlogDevelopmentInformation architectureiPhoneUser experience

Tags: Information architecturejQuery MobilePrototypeUser experienceWireframes