Sunday, February 22, 2009

Paper Prototyping - When Low-Tech is High-Tech

One of the projects I'm currently working on is a re-design of an existing Web Application. The original platform that was used to build the original web application is no longer being supported. So the client had no choice, they must move to more modern architecture. We have chosen Java/Tomcat/Spring/Hibernate.

Since the old application has been around for many years, we're running into some interesting design challenges that do not existing on new projects.

  • The audience for this application is small. Approximately 20 users

  • The application is used during the entire business-day. (This is sometimes referred to as a Sovereign Posture). Like a desktop application, it's running all day long.

  • There is very little turnover at this client, so all of the users are very comfortable with the current design.

  • And new users are not added very often


The easiest thing we could do is simply port the existing UI design to a new architecture. After-all, the users don't really care what is going on behind the screens. And they've learned to live with all of the quirks.

There are some uncommon conventions in the current web application which we'd like to improve in the re-designed interface:

  • The original app uses Web Frames - which is frowned upon by current web design trends

  • The back-button doesn't work reliably (the user's have become accustomed to this

  • It contains Javascript driven menus that change dynamically. So it's like magic, you never know what menu choices will appear under the menu because it depends heavily on state

  • The current design loses about 25% of the screen-width to a permanent series of web buttons.

  • In-line styling, vs. consistent usage of CSS


Developers always love to jump right in and start building screens. But instead, we used a design concept that's worked for me in the past called Paper Prototyping.

My one sentence description of Paper Prototyping is...designing web-sites using paper, markers, scissors, and post-it notes. Low-tech meets high-tech.

Benefits:

  • Saves Time and Money

  • Real Return on Investment

  • Everybody can participate in the design

  • Test interface concepts before investing time to code and HTML

  • Easy to modify

  • Change is as easy as crumpling up a piece of paper

  • A suprisingly good way to capture business requirement


It's always easier to capture business requirements when the client can see and touch the user interface. But rather than waiting weeks or months while putting together a prototype, The Paper Prototype gives us a change to show a paper "pretend" version of their web-site immediately.

What happens when you push this button?
What screen displays when I click here?
Can I have a pop-up Calendar here?
What happens if no results are found?

The 3 main developers and I got together last night, and worked through about 5 screens and the main layout in about 2 hours. Along the way we came up with some great ideas that may not have been generated if we hadn't been all looking at the same "screens".

Five Paper Prototyping Tips

Paper Prototypes: Still our Favorite


Go ahead - It's easy...