Early in the design & development cycle of a website or application, it can be all too easy to be seduced by the endless ideas for features and functionality. You may find yourself saying “My tool will do this, and this, and this, and this!”

Having ideas rain from the sky is great, but can become problematic when you must begin developing a concrete plan for how to proceed. Suddenly, the seemingly infinite ranks of ideas begin to fight over the very finite number of chairs in the room. As such, clarity of the tool’s purpose will go out the window. Trouble!

In recently dealing with this problem, I poured over sketches and scribbles for a good while before wrestling away a working solution. It breaks down as follows.

First, approach the tool (or application or website) from the most general level possible. Stated quite simply, what is the tool’s primary function?

Second, examine the individual components that the tool is based upon. What fundamental purpose do these components serve?

Next, break the components down even further. What are the pages that constitute each component? Simply stated, what is the purpose of each page?

Once you have the basic functions of each page in place, divide the design process into iterations. What features should be implemented at each stage of the design?

With this framework in place, the previous horde of ideas has a nice hierarchy to fall into. Features can be placed into this framework accordingly, whether the ideas are general or very specific. Furthermore, the design & development cycle can be approached from the foundation on up: advanced features can happily wait in line until their more general brethren are implemented.

Putting it all together, here we have a master diagram showing the entire process. Moving from left to right, the imagined functionality moves from general to specific. I have also created a space for future ideas & visions, which serves as the “waiting room” for ideas waiting to be stirred into the mix.