Need Ideas for WireFrames and/or Functional Specs?

Our team has been looking high and low for example of wireframes, Functional Specs, Design Specs, etc. that fit into our process here. Unfortunately I have not found many examples posted out on the World Wide Inter-Web. The best example of a "toolkit" that I can find is at the IA Institute. But still, nothing we found there tickled our fancy.

I'm sure there are other people searching for documentation ideas as well so...I am going to post our process here (Fortune 500 company with one of the "top 10" commercial websites on the web). The main focus of this post is to show you an example of Functional Specs and Wireframes/Comps that fit nice and snug together with those specs.

Here's our process in a nutshell:
1)Business people "The Suits" and the project manager get together and decide they want to redesign or make a whole new web application. They then meet and come up with Requirements. Out of this meeting comes a Scope document detail at a high level what needs to change.

2)The IAs review the scope and we have a brainstorming session about what we want to do...along with the design team.

3) The IAs work on Wires and maybe a little prototyping using Axure...and once that's going we start the FIS (Functional Information Specs) which I will show you an example of. The Specs detail absolutely everything: what happens when you click on this, when you click on that, if you have to be logged in, what errors you get for any type of action, default values for fields, etc.

4) The FIS, wires and prototype are then sent to the designers who make "comps" with the materials we gave them. We make sure the designers have an idea of what should be most prominent on the page and we basically just check in once in a while to make sure there are no usability concerns and make sure that standards are being followed.

5) Once the designers have something, they show it to us and we work back and forth on feedback.

6) Once satisfied with eveything, the designers take those comps and build the html, find the pretty little images on stock sites, build the style sheets, etc.

7) Then we have Developer Handoff. This is when we give the developers the FIS, Wireframes and HTML. We also give them comps, which are the screen shots of the HTML.

The FIS:
Made with Adobe InDesign.
These are the business rules. I tell the developers exactly what to do for everything. Figures are labeled by letter and everything from Browser title to the Footer is called out. At the end of the project this also serves as official documentation.
Text is using black text. Anything dynamic like maybe images, fields, drop-downs, etc. have [brackets] surrounding them with a corresponding definition for the developers to code to.
The QA team will also build their testing plan based on this while the developers are working their magic. The QA team pretty much makes a testing scenario for every "green" rule.

The Wire:
This is normally what I send to the designers so they have an idea of what we need. However, when the design work is done we will use the nice screen shot comps of the finished HTML to show the developers/business during handoff to them.

Right now I have no place to post this for download. If you would like the .indd file for this, please mail me. I will be more than happy to send it to you.

For the Visio wire, I used some storyboarding shapes that I got from Bryan and Jeffrey Eisenberg, authors of "Waiting for Your Cat to Bark?". The shapes are very helpful and make wires much easier. I'll be happy to send those to anyone interested.

Weekend Project

So on the side of my house I have a tiny patch of grass (weeds) that is landlocked by a fence, patio, and the side of my house. This little "nook" serves no purpose and is a pain in my ass b/c I have to weed it in the summer and it constantly stays wet b/c of a gutter downspout off the side of my house.

Before:

















After $60 and about two hours of work:









Materials Totaling $60:
- 4 bags of Decorative River Rock. Not pebbles.(Lowe's)
- 1 bag of paving base. Sand works as well.(Lowe's)
- 1 bag of topsoil
- 30 6x6 stone pavers (Lowe's)


How-To:
- Spray the grass with roundup a couple days before to kill everything. You don't want weeds
and grass to be popping up b/t the rocks all summer long.
- Use a shover or pick (sharp pick-axe works well) to pull up the grass.
- I sprayed the ground again to be sure all was dead
- Laid 4 bags of River rock. Spread with a steel rake or shovel.
- I dug the area for the stone pavers a tad bit deeper and more uniform edges
- Fill the stone paver area with the paver base. Mine was about half-inch deep.
- Lay the stones and twist into place firmly. I sometimes tapped them with the butt-end of a
shovel to make sure they were sitting tight
- The pavers naturally do not fit tightly together so I tossed about 2-3 handfuls of top-soil on
top and brushed it in with a large broom.
- Spray the top of the pavers with a bit of water so they will set better and VOILA! Done.

Next I need to do something about the gutter downspout. I'll probably buy an extension and run it to the fens so my neighbor can deal with it.

Are you Regimented?

I am a very regimented person. I'm all about being clutter-free and organized. It's not really and obsession but my quest to be a clutter-free organized neat-nick has definitely put a strain on some of my relationships with roommates over the years. (...back in the college days). My freshman year of college I had no earthly idea what I wanted to do with my impending career so I humped it across campus to the career center and laid out $45 hard-earned dollars to take a two hour "Career Aptitude" test. The top two careers they thought I would be suited for are as follows:

1) Career Military Officer

2) Air Traffic Controller

3) Radiologist


How the hell did radiologist end up on my list? The first two were not surprising, but Radiologist? I know nothing about radiology, considering I get queasy just watching an episode of ER. Maybe good radiologists are very organized and "regimented", who knows.

Back to my point, here are some of the things I do that make me destined to have a career in the military:

1) I will NOT get in my bed unless it is made up...tight.
2) I never go to bed with dishes in the sink, coasters all over the coffee table.
3) Everything has it's place. Phone and keys go in left pocket, wallet in right pocket...and if these items are not in my pocket, they are on the right side of my kitchen counter. I NEVER have to look for them...they are either in my pocket or on the kitchen counter. Why cant women be like this with their keys???
4) My radio pre-set channels in my truck are in a specific, low to high order.
5) I wake up every morning at 5am to work out. I feel like a worthless son of a bitch if I ever sleep in. The sky is falling.
6) I eat the same things every day, for every meal. For example, at breakfast I always eat an egg sandwich with two eggs and a bowl of cheerios. This is part of my diet and workout regiment though.
7) I am an incessant list maker. I never go out w/o a list and a plan of what I'm going to do.
8) Taking a different route to work is an adventure to me.
9) Vanilla, always.

After looking over this, I think I'm just "Boring" and predictable....not regimented. You agree?