The Power of Planning

I’m a planner. I enjoy starting with the first step. I’m also a passionate guy who can visualize the end of a project. Sometimes those traits conflict. Even though I did the right thing and started with step one for my renovation, the passionate side of me wanted to start at the end of the project.

So, let’s start at the last step — implementation

For my renovation, I walked into the place figurative hammer in hand. I was looking at building of new walls, painting, installing flooring, cabinets and countertops… the list goes on. In my excitement, I was ready to jump head-first into what equates to the final stage of building a Web site: development.

At HCK2, Web development is the equivalent of applying the product of all five planning planes. With this knowledge, we would begin to slice and code our xHTML, write our CSS, and begin implementing a CMS if that applies. Naturally, development isn’t possible until you have an actual Web design. Likewise, my renovation wasn’t possible until I had finalized a design for my home. I had to take a step back and think what this place was going to look like. Hello, Home Depot paint department.

Painting the walls (aka the “surface” plane)

Red walls or beige walls? Bordello or bordeaux? This is the point where I planned to fully employ my friend Benji to help me design the joint. I’m not a frou-frou guy, but turns out it’s fun to pick out flooring, paint colors and kitchen countertops. Luckily, if only from my Web experience, I knew better than to start bringing home granite samples just yet.

In Web design, the user experience is affected on a perceptual level by every single design decision from line width to button color to box position, and we back each design with careful research. This is the fifth of five planes, the “surface” plane. Our goal on the surface plane is to provide a combination of design and content that is concise, clear, and effectively keeps the attention of the audience. This is also typically — especially on the client side — the fun part of building a Web site, so it’s tempting to jump straight into design ideas: what colors to use, placement of photos, selection of font, etc.

Before you have a Web design, however, you need to know what pieces you are designing. Do you know yet if your home page will have a feature photo or a news area? Likewise, I didn’t even know what was going back into my kitchen after gutting it, or what walls I was going to keep in the living room. So, again, I took a step back.

(For the record, my selected wall color, and the possible new name of my place, is “Raccoon Hollow.”)

Wine rack or groovy 70’s wetbar? (aka the “skeleton” plane)

Before I could configure and decorate a room, I needed to know what pieces were going in it. Did I want room for a sectional sofa? What types of cabinets were going in my kitchen?

I started with a list of every item that I wanted included in each room. I got a little help from my father (an architect by education, and licensed general contractor for many years) and drew up some quick floor plans to demonstrate what we would be working toward. The plans included structural, wiring, plumbing and object placement needs, and would help me when I approached my friend Benji to help me design the place.

Similarly, with a Web site, before you design the site, you’ll need to know what each page contains: a paragraph of text, a photo, a callout box, common elements such as logo and navigation, and so on. This is the “skeleton” plane. We put this information into a “page description diagram” (PDD) and use that document to inform Web designers of every item a page must include without describing how those items will look.

But we’re getting ahead of ourselves again. We can’t decide on page contents because we don’t know exactly what pages are going in the Web site yet. A home page, sure, but will you have a “history” page, or a “bio” page for each team member? And how do you get to those pages from the home page?

I was in a similar situation — I had a heinous half-bath addition that was eating much of my living room space. Before planning the contents of my first floor, I needed to decide whether that half bath was going away or staying.

Do I really need a panic room? (aka the “structure” plane)

No, I didn’t need a panic room or the terrible half bath. So I needed to destroy some walls.

I took a close look at my existing home to see what I was working with. Is there power already where I want it, or do I need to run new? Which walls will I need to remove and which ones will I keep? Are there plumbing lines to be moved? At this point I also started preliminary demolition to help answer these questions and determine what would and wouldn’t be possible. For example, I wanted to cut a wall next to my stairs out only to find a half dozen copper water lines and a load-bearing column. It turns out that the copper lines were able to be moved but the column had to stay. It was helpful to know this early, before we started designing the place.

For Web site construction, the “structure” plane is where we determine what pages a site contains and where they live in relation to each other. This information takes the form of a site map — a diagram that shows how information will be organized on the site. In addition , for interactive elements such as forms or searches, we create flow diagrams illustrating the path users travel with each click. Site maps and flow diagrams are constructed with the goal of minimizing clicks and bringing the most important information on the site to the surface.

Oh, but wait. How do I know what pages I want without knowing what the site will do? Is there a search? Is there a secure login where users can manage accounts?

In my home, before I started destroying and rebuilding walls, I’d better figure out what I want my place to “do.” Do I want it to deliver super-fast Internet? Do I need it set up for a fantastic sound system? Do I want to be able to turn the stairs into a water slide?

No, I don’t want to turn the stairs into a water slide (aka the “scope” plane)

In the scope plane for a Web site, we determine a specific set of site feature that will fulfill the user needs and site objectives. If it was determined that users need to see the latest news right away, the site might satisfy that need through a dynamic news feature on the home page. Specifying the functions that fulfill objectives and needs helps determine budget and timeline.

This is where I would determine that I need ethernet cables in every room, home theater wiring run in the living room and many other specific things about the renovation. This is also the point where I assembled my own budget and timeline for the project. It was a rude awakening on both accounts, but since I’m taking the time to plan the project properly, I know that I will finish the project very close to both estimates.

However, notice I mentioned we are fulfilling objectives and needs here… objectives and needs that have not yet been determined. How did I know I needed data and power drops in every room? How do we know if a user needs late-breaking news right away on a site?

I want a sweet pad (aka the “strategy” plane)

Finally, we’re at step one.

When we speak of a strategy for a Web site, we refer specifically to the needs of those who use the site and the objectives of those who own it. These goals are backed by research into target audiences and competitors, and are purposely stated in broad terms, such as “our users need fast access to company news.”

In my case, the primary users I identified are myself and any visitors in my home. Where to put the electrical and data outlets in each room is too specific at this point, but the fact that I want connectivity throughout the house, a more spacious first floor, and a more modern look are broad strategy statements that helped me determine that I needed (respectively) data and power drops, to remove a half bathroom, and to replace all the flooring. I, of course, consulted with close friends and people I anticipate being in my home for more information to construct a complete list of objectives.

So far, the renovation is going swimmingly and I think it’s a true demonstration of the power of planning. Dividing the planning process into these five planes gives us measured, specific steps that ensure there are no surprises late in the game. Each plane provides a solid foundation for the ones that follow.

Whether it’s a Web site or a home renovation, if it is well planned out, the development phase will go smoothly, quickly and finish on budget. And yes, you are all invited to the housewarming party.