The conceptual mockup

Allegedly, a picture is worth a thousand words. It’s true, but you know what is worth a million words (sure, besides a thousand pictures)? The ability to enter the picture, to play with its content.

Even before I started coaching teams to work in an Agile manner, I had a thing. You may call it curiosity. I would call it obsession. Like some alchemists before me, I was searching for a Philosopher’s Stone. I didn’t want gold – Bitcoin might have been trendier – but the ability to turn an idea, no matter how foggy it was, in an immediately implementable product. Yeah, when you put it like that, the gold version starts looking achievable by comparison.

I haven’t found it yet, but along the way I understood that while buttons, actions, animations are important, the actual content trumps them every time. In order to create a link, you need to have a “click here” piece of text:

Coach: What information will be displayed on this page?

Product Owner: The annual profit and loss structure. And when you click on a category –

Coach: Besides the profit and loss structure, what else?

Product Owner: Hmmm, the aggregated figures for the last three years would be nice too. And when you select one of the previous years, then it expands and –

Coach: And what else besides the aggregated figures?

Product Owner: That’s an interesting question. Now that you’ve asked, I think that […] would be a nice addition too. It will definitely enhance the added business value of this product!

In fewer words:

while(what_else() != “”) keep_asking_what_else();

There are a lot of specialized mock-up tools on the market, I know, but for the early stages of a product, I prefer using Microsoft Word. It works with hyperlinks and this is all I need for the moment.

The process of building a conceptual mockup is simple. First, I write the page name and I make it Heading 1. Then, I write a short description about whatever it’s going be there. It doesn’t need to be a brilliant piece of literature. Poor grammar and bad spelling are welcome. Most of the time this material will be discarded as you advance to the next level: a low-fidelity visual mockup. When what_else() returns false, I start linking together the information I have uncovered. This is the moment when making the page titles Heading 1 pays off. You can easily reference them:

The name of the game for this phase is: “As fast as possible!”. Don’t insert tables, even if you see them in your mind. Just list the columns, adding meaningful explanations as you go. If you can grab a screenshot instead of entering some text, do it without thinking twice. Remember? As fast as possible!

As a personal experience, for a medium-complexity product, I usually finish the conceptual mockup in less than an hour.

You can find the complete conceptual mockup of this site here: docx and pdf.

 •  0 comments  •  flag
Share on Twitter
Published on June 21, 2021 12:18
No comments have been added yet.


Dan Rădoiu's Blog

Dan Rădoiu
Dan Rădoiu isn't a Goodreads Author (yet), but they do have a blog, so here are some recent posts imported from their feed.
Follow Dan Rădoiu's blog with rss.