I was browsing through my billQ project folder today to grab an interface element for another project, and I came across some old iterations of the billQ interface. I was actually surprised by how close the final design is to some of the earlier versions. I guess this can be attributed to the fact that we didn't try to solve interface issues in Photoshop, and the fact that the design and development of the application were so closely integrated. Most of the time, when the design was rendered, it was really just an execution of ideas that we already discussed and outlined on the white board or on paper (I would show examples, but honestly, I threw most away).

billQ Text Only InterfaceProof of ConceptThe first image I found was a screenshot of the stripped down proof of concept Zack had developed. This project really started out as an experiment with Rails, so this screenshot shows Zack playing with the framework and the way it handles new database entries and forms, etc. When we decided to explore the concept a little more I used it as a guide to begin wireframing.

billQ Wireframe InterfaceWireframesAs you can see, the wireframe looks similar to the final layout of the application. We made a number of changes, but they were mostly smaller interface elements regarding working with bills. In retrospect, I discovered we spent way more time discussing and changing these smaller elements than we did chaging the overall layout. Which is good, because you spend more time interacting with these smaller elements when you use the app, and they need to work smoothly.

billQ Add Bill Tabs InterfaceAdd New Bill (Tabbed)One final screenshot I want to post is a mockup of the Add New Bill interface before we decided to go with the lightbox approach (we decided to go with the lightbox for a few reasons, which I plan to talk about in a seperate post). Originally we went with a tabbed box where you could choose between a One-Time or Recurring bill. We eventually just combined these two into a single screen where the type of bill was just implied based on how you specified its frequency. If you select "Its paid once" from the drop-down, its a One-Time bill. If you select "It's paid monthly" or "It's paid yearly," its a recurring bill. Much simpler, and it decreased the amount of screens to navigate.

So this might give you a little insight into how we developed billQ. It wasn't exactly brain surgery so I don't have a million screenshots, but you should still be able to pick up on a few little details that we added or omitted. Any comments or questions are welcome. Zack should be chiming in soon from the development side of things (especially his experience with Rails), so look for that.