Prototype Process and Tools
I’ve been working on a project recently that involved mockups and prototyping for a mobile web application. I wanted to share some of the process and tools that I found useful.
Sketches
I first started out with low fidelity sketches. Paper and markers. Easy to draw, markup, and hack up.
Checkpoint: Sit down with the developers to walkthrough the concept, get their ideas and feedback, and surface any potential technical issues.
Balsamiq
I then went to my favorite mockup tool – Balsamiq. Balsamiq makes it easy to mockup applications. It has the feel of a mockup – lots of hand drawn looking elements, comic sans fonts, and yellow stickies.
Balsamiq allows you to “link” mockups together. So clicking on a hyperlink or on a button would navigate you to another mockup. You can then use Balsamiq in Presentation mod, which allows you to click on buttons/links and navigate through your application. The blue arrows in the Balsamiq mockup indicate that those elements are linked to another mockup.
I then wanted to share the mockups with the customer.
There’s a few options here:
- share screenshots of the mockups
- they could run Balsamiq themselves (if they have it)
- I could use Balsamiq in Presentation mode and do a GoToMeeting session and show them the app.
What I wanted to do was to allow the customer to click through themselves, on their time, and experience the app.
Napkee
When searching around for options, I found Napkee. Napkee allows you to export your Balsamiq mockups as HTML, and it preserves the linked navigation. So, I could simply use Napkee to export the mockups to HTML, throw them on a web server, and give the customer a URL. They could now navigate and experience the app from a more functional standpoint. Awesome.
One of the things that I don’t like here is that Napkee uses a nice looking iPhone image, as opposed to the hand-drawn looking one from Balsamiq. I can see this being useful at times, but it was almost too nice looking for my mockup scenario at this point. I’m sure I could have modified the actual image, but I wasn’t that motivated to do so at this point.
Checkpoint: with the developers to surface any potential technical issues and get their feedback.
Checkpoint: with the customer to get their feedback on the functional aspects of the application.
HTML Mockups
Next I went to an actual HTML mockup, creating my own HTML and simple CSS.
Again, I exposed this on a web server, and allowed the customer to use it. This allowed the styling of the application to be added to the mix – so now the app could be experienced for its functionality and its style. This is especially useful when presenting to business folks and executives.
This is what it looks like in Chrome using a normal stylesheet:
Since one of the targets of this web application was an iPhone, I used an open source iPhone Framework. There areplenty of them. For this project, I chose the iUI framework, as it was super easy to use and get going with, and suited my needs perfectly.
This is what it looks like in Chrome using an iPhone stylesheet:
Mobile Simulator
I use a Mobile simulator for development and for demos. For iPhone, I use MobiOne.
Here’s the app in MobiOne:
This immediately puts the app into the context of a mobile device. I wanted to be able for my customer to have this same context, without needing an emulator.
Simulated mobile device view
One of the other things I did was provide a page that provided the context of a mobile device (in this case, an iPhone). From a technical perspective, it was easy. I simply slapped an iPhone image on the page, and positioned an iframe element appropriately. This allows the customer to view it in the context of a mobile device, and present it to their business users and executives easily. They could show what it would look like, and how it would function, all from a standard web browser, without needed to worry about a mobile device emulator. (Definitely want to use Chrome or Safari here – IE just doesn’t cut it.)
Checkpoint: with the customer to get their feedback on the functional and stylistic aspects of the application. Iterate as necessary.
Style Switcher
I also added a page that allowed the stylelsheet to be switched on the fly. This allowed me (and the customer) to see what the app would look like in an iPhone, and also in other devices (Blackberry, Windows Mobile, etc.)
I used a simple jQuery Stylesheet Switcher to make this work.
Summary
This was just a little insight into some of the tools and techniques that I have in my toolbox that make it easy to work with remote customers, and make it easy for customers to help position and sell ideas within their own organizations.
