Coffee Powered Mockups

Basic Wireframing Routine

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone

Mockups are easy to do, and everyone understands them. This doesn’t mean that you’ll be fine no matter what you do. I, for one, have made many costly oversights in the years since adopting this approach. Thus, this guide was created to help prevent you from making the same mistakes in your own projects.

What I recommend is that you use a basic proven routine for your projects. However, there are several points that you need to understand first.

  Mockups can be done by anyone.

Think about it. Mockups can be as simple as paper sketches. Also, while I don’t recommend sticking to pen and paper, this approach proves that you don’t need any technical expertise to draw mockups.

Several weekends back, my nine-year-old son talked me into developing a battle-card game together. To explain his idea, he drew me an interface for the game, and he was quite adamant about what needed to be where and why.

It’s exactly the same situation with your analysts or subject matter experts. With mockups, they can simply show you what they mean, rather than telling you and relying on and assuming a mutual understanding.

  You can afford to throw mockups away anytime.

Since mockups can be done many times faster than code, you don’t need to stubbornly defend them. When there are flaws, you simply rework your mockups. It’s so fast, you can even start from scratch when needed.

Therefore, the logical strategy becomes using every shakedown opportunity you can. Instead of shrinking from objections, you actively encourage them until you make your “prototype” watertight.

  With mockups, your customers can’t avoid getting engaged.

Involving a customer early saves tons of trouble, everyone knows this. Having that goal is all well and good, but it’s far from easy to accomplish.

Instead of spending days writing documents that no one really wants to read, you can sketch a number of screens in a matter of hours and get back to your customer with something that they will immediately understand.

Also, mockups tend to make communication productive and down-to-earth. Early in a project, this can be an unbelievable blessing.

  Mockups are only a communication device.

Early on, the mockups are about the only thing that everyone can understand. However, just using the mockups is, by itself, no guarantee of success. What you actually do with your mockups is more important.

Why Mockups

Here is the basic procedure of how you should go about it:

  1. Sketch several related screens; scenarios are a good choice.
  2. Discuss and annotate the sketches. This is best done in live workshops, along with your customer.
  3. Flesh out the details over several quick iterations. Don’t try to get everything “correct” from the start.
  4. Repeat the same procedure for the next batch of screens.

Basic Mockup Routine

That being said, each step has its own traps.

Several Related Screens Make a Digestible Package

Customers have very little time to take away from their everyday tasks. For that reason, lengthy documents terrify them, as well as anything even remotely technical.

On the other hand, three or four mockups at a time won’t scare anyone and your customer will be genuinely curious about what you have come up with.

At this point, your main goal is to get your customers’ attention and cooperation.

One obstacle at the beginning is getting everyone on the same page. It helps if the mockups that you discuss are related. This provides an immediate context for your customers to dive in – no explanations necessary.

  The best way to start is with several main screens of the application that you are developing.

The best way to start is with several main screens of the application that you are developing. This way, your context is the big picture. Your customers will therefore share their opinions on the most important matters, such as when they recognize that you are not aware of some part of their business process.

Later, you will want to switch the context to get more depth.

  A good way to proceed is to focus on individual scenarios.

A good way to proceed is to focus on individual scenarios. This shows your customers how real people will eventually use the application, which will further attract their attention. It will also make their feedback productive and genuine.

Note that I use “scenario” here as a rather loose, catch-all term. They can be user stories, or use-cases, or a number of other things. It doesn’t really matter.

What does matter is to:

  • Get and keep your customers’ attention.
  • Start with a big picture, and dive into details later.

Use On-Screen Annotations

You create the mockups, discuss them with your customer and prudently write down anything important that you discover, but where do you write it down?

Right there on the screen:

  • When you have a question, put it on the mockup.
  • If there is a dilemma, write a short on-screen comment about it.
  • When a decision is made, document it on the mockup itself.
  • More research is needed? On the screen, write who will investigate the issue and report back.

As simple as it sounds, the implications are huge. When you make your annotations as a visual part of the mockup, they are hard to miss and even harder to ignore.

Mockups Should Be Quick and Iterations Short

Iterations are a powerful concept. Everyone knows that it’s hard to paint the wall perfectly in one go, but by applying two coats of paint, the task can be achieved by anyone.

However, that requires doing the same thing twice, or even several times, on software projects. Can you afford that?

With mockups, you can. They are exponentially faster than coding, as is any rework that proves necessary. That is the whole point of mockups.

  Work in short iterations. That is the whole point of mockups.

Thus, plan for this in advance:

  • Work in short iterations.
  • Agree with your customer to plan two workshops for each batch of mockups.
  • Hold several rounds of less formal discussions between those more formal workshops.

The more iterations you make, the better the results will be. Fortunately, many ideas can be discussed by phone or email: “Here is a new version of that customer-details screen. Is it better now?” These are your micro-iterations. You want to have as many of these as you need, so don’t waste time on perfecting mockups for any single micro-iteration. Instead, focus on testing your ideas quickly and getting immediate feedback.

Mockup Tips

What now:

Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInEmail this to someone


  • Sudhi

    Hello Igor,

    I was travelling for the last couple of months, so wasnt able to reply to your emails, but now that the website is up and running and i did have a look at to the granularity and the level you have explained in creating mockups is great. This is surely a starting for any BA who would like to take up the career of a UX designer or specialist,

    Probably you may also write a blogs or posts for dummies like me on User Experience and the best practices which has ever long mileage on our projects.


  • Harish

    Hello Igor,

    Very nice article.
    You’ve done a good job of highlighting the advantage of using mockup, process to be followed and tools which can be used. At the same time it’s a great point that you highlighted mockups are only a communication device.

  • Tim

    Your book is a great ‘how to’ book and clearly outlines the pitfalls many companies make. What you right seems evident and logical but in my experience it definitely isn’t. So few companies and projects work with mockups and they should definitely start seeing the added value in incorporating mockups in a functional analysis.

    Great effort.

  • Alicia

    As I picked the book up as someone who has worked with mockup for years I understand what a mockup is how valuable it could be, if done right. But currently am working on a team of 9 Business Analysts with 7 (2 accountants, 1 design, 2 business major, 1 admin assistant, and 1 Public Relation)of them right out of college and never worked with a mockup or create one. So when I saw your post I figure it would be something I would read and pass on to my seven co-workers so they know what a mockup is and how to create one. As I begin to read the book it was not a how to book but a narrative on your experience. I know there was nothing in your post that stated it was going to be a how to I was just expecting something from the point of view so it was not what I was expecting.

    I nice how to for those who end up as a BA would be nice.

    Thanks Igor

  • Emilio Vasco

    Mock ups need to be realistic down to the numbers so your customer don’t have to make pretend they can simply infer that what they see is as close as possible to what they will see when it is coded. This may depend on the customer but in my experience i’ve found this to be true.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>