How to document program design so the outcome looks professional?

I have designed a simple website on paper. Now I want to produce a professional-looking document for my customer to approve.

I’ve tried Visio, but it seems horribly overcomplicated and unsuitable for my purpose.

I could describe what I’ve written in words in a Word document but that’d be much harder to read and understand.

I looked at Balsamiq but that seems to be for mocking up individual screens and not for what happens between or behind screens.

How do you present a design to your customer?

[Tried to embed an image but it won’t let me. Instead, here’s a link: https://www.dropbox.com/s/65lt705btkjutpz/IMG_20130808_165825.jpg

Have you actually signed the client to a deal already? Are you now in the next phase, just looking to get them to approve the details? Or does this document you’re looking to create amount to a proposal?

Do you have Photoshop mock-ups of the UI? Do you have a mood board? Or do you mainly have those workflow & use cases figured out? That paper looks like the latter.

If you’re still at the proposal stage, you probably shouldn’t include too much detail. Otherwise all you’re doing is handing a free detailed design document they can then turn around and shop on oDesk to the lowest bidder.

For a simple proposal, you could turn to a service like Bidsketch.

After you get a proposal approved is when you need to show functional spec to the client, which can be started by taking the bullet points from the proposal and turning them into a feature list. If SmallSpec were ready to go I’d set you up with a trial account and tell you to have at it. Alas…

Tell us more about where you are in the process and what it is you’re actually looking to present to the client/prospect, and we can give you appropriate advice.

Good question. Customer has paid for planning work and has verbally agreed.

Now we want to agree exactly what the user will see and what will happen when they do stuff.

Oh and SmallSpec sounds promising. I have registered.

Good question. Customer has paid for planning work and has verbally
agreed.

Red flag #1: verbal agreements are worth the paper they’re printed on.

That said, if they’ve paid for planning work I guess the natural deliverable for that would be a plan of some sort. So let’s address that. It sounds like you’re still in danger of being shopped with your own document, but…hazards of the job.

Now we want to agree exactly what the user will see and what will
happen when they do stuff.

That, my friend, is called a functional spec. Now you’re in my wheelhouse. :smiley:

Still need to know this:

Do you have Photoshop mock-ups of the UI? Do you have a mood board? Or
do you mainly have those workflow & use cases figured out?

At a bare minimum, I’d recommend the following:

  1. Bang out some simple wireframes using any tool that lets you draw rectangles. Hell, you could even pull this off using MS Paint (although I don’t recommend it!). At this point, simple rectangles bereft of any design-y elements are the way to go (you want the customer focused on how it works, not what font you’re using). If Visio is too much to deal with, try something like Gliffy, which is online, excellent, and free.

  2. Slap 1 wireframe on each page and include some notes as to how that page of the site will work.

  3. If you have use cases or user stories, be sure to include them in step #2 along with your notes.

  4. If you don’t have use cases or user stories, write some!

  5. Maybe slap a whole flowchart (like the one you hand-wrote) early on in the document, to provide contest for what follows.

Google “Painless Functional Specifications” and download the document Spolsky came up with for whattimeisit.com, or maybe even the Project Aardvark spec (although that might be a bit much for what you’re doing).

Note that this is a bare-minimum approach, if I knew more about your circumstances I’d suggest something a bit more fleshed-out.

Blimey. Gliffy looks amazing. Seems like I can do exactly what I want. Thank you.

Also, hard to work out if it’s totally free. They don’t mention price anywhere.

Look down at the bottom of the page - it says you get 5 diagrams for free. The next level up is $5/month for 200 diagrams. That’s not bad.

Again, if 5 diagrams isn’t enough, you could get away with anything that lets you create rectangles, if you’re fastidious enough.

Thanks. Seems good value.

Other tools like Gliffy include Draw.io , Lucidchart and for wireframes Mockingbird

Note that according to http://www.gliffy.com/products/online/pricing/, your 5 free Gliffy diagrams are public.

Thank you - important to know.

Thanks for information about gliffy

Tools like Koolchart and Google free chart are very much helpful.