UX Designers, Here Is How to Prepare Your Mockups for Review

Design and review, it’s an iterative cycle that is supposed to go on and on, and never ends. Even though realistically it doesn’t happen, we do at least several rounds of iterations, and review sessions. So how we should be prepared for review? To me it’s clearly that this question could be break down into two sub-questions:

1. How we should prepare the stuff we want to show and have others criticize on (mockups, prototypes, etc.);
2. How we should prepare ourselves.

In this article, let’s tackle on the first question. Well, part of it: preparing the mockups for review. The question is rephrased as follow:

How should UX designers prepare the mockups for review?

To figure out how, we need to figure out what people are looking for from the mockups. From my (limited) experience, I realize that visual is definitely crucial.

People judge by visual first and foremost

Many times, when I present the draft mockups I built to my fellows, they tend to ignore my kindly reminder that “don’t focus on visual, it’s just a draft”. On the other hand, when I am presented mockups, I do the same thing: Start from the visual. So I guess it’s just human nature.

“For designers, the visceral response is about immediate perception: the pleasantness of a mellow, harmonious sound or the jarring, irritating scratch of fingernails on a rough surface. Here is where the style matters: appearances, whether sound or sight, touch or smell, drive the visceral response. This has nothing to do with how usable, effective, or understandable the product is. It is all about attraction or repulsion. Great designers use their aesthetic sensibilities to drive these visceral responses.”

Excerpt From: Norman, Don. “The Design of Everyday Things”.

So, if you are with me, you should know how important visual is. It affects people’s judgement.

The next step is to improve the visual of your mockups. But when? Should it happen when you are working on the initial design or after the review, after the design itself has been approved? I would definitely say you should do it as early as possible. Try not to have this thought in mind with working on the mockups: “they are just mockups, I will come back to visual fine-tuning once the design itself has been approved”. Why? Because besides the fact that it will bother your fellows’ pixel-perfect eyes in review sessions, it will (oftentimes) also result in a large amount of extra work, especially when you are using the non-pixel-perfect design over and over again in different portions of your app, because then you need to come back to fix everyone of them, one by one. Procrastinating on visual only does one thing: make your life harder. So how to improve the visuals of your mockups? If you could only do one thing, please at least follow the basic visual design principles.

Follow basic visual design principles

Proximity, alignment, repetition, contrast. If you are not familiar with these basic visual principles, here is the best book I could think of as a starting point is: The Non-Designer’s Design Book

Say goodbye to lorem ipsum

At least, don’t use lorem dummy text to fill out all the contents. It’s very easy to do so, but it will greatly reduce the amount of information your mockups have, reduce the power of convincing, and eventually degrade the final product. Here is why.

Contents don’t live in vacuum, they interactive with the design, constantly. It’s like human beings and the earth evolve together.

So dump the contents and design solely for the design will never work, never.

Because, from the user-centered design point of view, in most of the cases, contents are actually much more important than the visual elements. After all, users want to get whatever they want as fast as possible, usually by scanning through the contents. Of course the nicely usage of visual elements could help to highlight what the majority of users might need, imply the hierarchy behind contents, and save time and efforts for the users, but the visual elements alone usually don’t make much sense, even with some lorem ipsums.

As what Jerry Cao pointed out in this article Why designers should never use fake text, Content is king!

Make sure the numbers add up

We always say that we should review the design in a use case, which is great. But that doesn’t only mean the flow should be aligned with the use case, the details on each and every one of the screens also need to be aligned. Say if one the tab you see a badge with number 5, but on the screen you could only find 2 updates, the story you are trying to tell will fall apart. It’s not convincing anymore. So please make sure that the numbers add up. People are naturally very sensitive about numbers and believe me, if there are numbers showing on your screen that do not add up, you will spend ten times time trying to save your ass, which you could have done ahead of time, with much less effort.

To summarize

How seriously you treat your work will greatly influence how seriously the others treat your work. If you don’t review your work before presenting it to others; if you don’t fix bugs, both visual and logical ones, then no one will fix your bugs for you.

Most importantly, if you are not serious about your work, no one else would.

When that happens, review sessions could be much less meaningful. Yes, you have awesome and kind teammates that could find bugs for you, but think about this: with limited time, they could have done something much more meaningful. So you’d rather waste the precious time to have them find some easy-to-fix bugs, which could have been gone if you take it seriously and review before presenting them; or you want to save time for them to actually concentrate and tackle on some really thorny problems?