hedgehoglab

At hedgehoglab we pride ourselves on the user-centered approach we use in designing our software, with our core product fixx seeing a number of iterations over the past few months, primarily in terms of UI design but more importantly in information architecture surrounding the views and the simplicity of use.

The process that we currently use consists of first deriving use cases of how the user will perform each operation in the system (in the form of user stories), then on to quick mock ups of real application screens in the form of wireframes (using a standard layout and component library) and finally short iterations of focused review by the entire team. We repeat this process until every use case of the system is addressed from a user perspective.

The problem with such agile reviews and lightning changes of the UI and wireframes is that it leaves some poor soul, namely me, to reflect these changes in the wireframes ready for another review. A time consuming job without the right tools believe me!

After hearing many good things from other Information Architects, we originally tried Visio for a while in the hope that this would allow for quicker iterations, but I found Visio lacking in visual appeal and there was always a bottle neck in duplicating effort by translating most Visio wireframes into visual designs after every iteration. In short, Visio sucked at providing quick turn around in terms of having realistic application screens designed.

The second option was opting for mockups in XHTML, thinking we’d save time further down the line when we could just tag some CSS, refine the XHTML and lo and behold, have a completed view. This, however, proved more effort than estimated with the intermediate & final CSS changes and mark-up tweaks ultimately ending in a mash-up of good and bad code, something we ended up throwing away and opting for a re-write. We also found that XHTML wireframes did not allow the flexibility or speed of change we required to make the wireframes as visually complete as possible.

So, what is it that has me ranting about wireframes and turnaround?…

Fireworks, the web developers’ friend!

Although not comparable to the likes of Photoshop and Illustrator (tools my designer chums swear by), Fireworks lends itself well to the needs of most web developers when it comes to slicing and dicing the visuals ready for a quick conversion into finished XHTML and CSS. It also allows us to create wireframes that are visually rich and are as close to the completed product as we would like. This also eliminates the step of producing plain wireframes in Visio first and then designing them out in a graphics package.

Working with Fireworks the past few days has seen about 10 iterations of the fixx UI go from a 5 hour job to no time at all. Each change was painless and immediate (and visually correct for everyone to review). Fireworks does a good job of keeping your pages and layers organised meaning exporting them into a reviewable image format was effortless and because Fireworks is out for both windows and mac (sorry Ubuntu fan boys, no Linux yet), we can all chip in when we need to and work on the UI of the system.

The end result? The fastest and most visually stunning wireframes & mock-ups I’ve produced in a long time with the advantage of ready-made visuals! All they need now are a little bit of eye candy thrown in, in the form of icons and content and we are away!

If you want to see sneak previews of the fixx UI we have put together keep an eye out for my next post where i will be discussing some of the changes we have made to the UI with plenty of screenshot goodness. Oh! And did I forget to mention that fixx will be entering internal beta soon at the lab?

blog comments powered by Disqus