How to Write a Spec (Specification) for Your Website, App, or Product

When it comes to your spec, there’s no such thing as too detailed, too technical, or overly clear. You cannot make your spec too good. I’m not suggesting you waste time writing your spec, but I am suggesting you go over your spec again and again until it stops changing.

Get Clear & Precise

For mobile apps and websites, I perform the following test: sit down with a blank piece of paper and without the aid of any previous work (aka 100% from memory) and draw out all the pages of your product. Do the exact same thing again 24 hours later. Once you’re done, compare these new drawings to your previous drawings.

If you can’t draw your product, then you’re not clear enough about what it is. If you are still changing your mind about features, then you haven’t made all the decisions you need to make. If you find a feature that’s missing from the new set that was in the old set, you need to ask yourself whether your users will really need that feature.

Basically, if there are any changes, you need to refine the product again. This is the number one way to save money and time that most people forget. I’ll say that again, the number one way you can save time & money on any project is to continue to refine the spec until there are no more changes.

Don’t Be Shy

And don’t be shy. Put your drawings and spec in front of your most critical friends – the ones you hate to get in arguments with because they’re so nitpicky. They have a huge strength in this setting and can offer you perspective that you can’t possibly have. If the conversation isn’t a little uncomfortable for you, then you probably need to find a more critical friend. And if you can’t defend why your users need a set of features to your friend or co-workers, how are you going to justify them to your users, who are complete strangers to you.

Put Pen To Paper

You’ll notice I haven’t said much about the format the spec should be in. That’s because it doesn’t really matter. I prefer a set of hand-drawn sketches and a list of things the user can or can’t do for each sketch. If we’re talking software, the sketches might be of screens, or specific user interface elements, or of server configurations and API calls.

Sketches would work well if you’re building a house or chair too. You don’t need to know how to draw or how to use any fancy software. Just put pencil to paper again and again. You’ll get it right if you do it enough times.

Personally, I usually try to dissuade people from using tools like InVision, Flinto, Sketch, and Zeplin – not because they’re not great tools, but because most people use them as graphic design tools instead of as spec definition tools. They forget that the graphic design – the colors, fonts, pretty buttons and icons, etc – all come after you define what users can actually do with the product.

Just like you wouldn’t pick the color and designs of your furniture if you were still deciding whether you wanted a chair or a table, don’t waste time on the detailed graphics until you’ve nailed down what your users can or can’t do with your product. See my article on design for more.

Avoid the Common Pitfalls

Don’t fall for the common objections I often hear:

– I can’t draw.
– My design is the most important part of my product so I have to get it right.
– This is close enough – I’ll figure out the details as we go along.

Greedy developers and agencies love to hear things like this. I hate to hear them – and you should too – because you’re probably about to waste a lot of time and money… and you’ll have no one to blame but yourself.

If you think you need help, you probably do. Let’s hop on the phone and get you started.