Quality Assurance

5 essential tips for improving your website mockups & prototypes!

Have you ever received feedback on new website mockups or prototypes starting with “Which language is that? I don’t understand “lorem ipsum!!”?

Well, yes? Then you’ve been there. And it isn’t really a great feeling. Not because of the question itself.

In this post we are going to show you 5 tips on how to prevent yourself from receiving such feedback and how to make your website mockups even better.

1. The Definition of Prototype Fidelity

As Jerry Cao wrote in a recent article on sixrevisions.com, the key to a successful website mockup can be found in the definition of the level of fidelity that will be used in the prototyping stage.

Starting with pen and paper for working on some first scribbles and sketches is a clear win. These sketches will be pretty generic and low-fi. While increase the fidelity of those sketches, I’d recommend launching a simple sketch tool, like balsamiq or moqups. Only go pro and use tools like Photoshop (or similar software) when you’re working high fidelity sketches.

The key takeaway here is to find a great timing from sketch to low-fi, to hi-fi.

(source: jfarny.com)

Both, starting too early or too late with high fidelity mockups will waste resources (both time and material) and you’ll risk to end up with a mediocre prototype.

2. Identify problems

While working on sketches and wireframe we easily tend to think about solutions, before we tackle the “real problem”.

The customer request: “make the logo bigger” isn’t identifying any problem.

It’s a proposed solution, though you’re not given information about the problem for that solution. Asking a lot of “Why”-questions can help in such situations.

Nowadays, we are trained to think in solutions and in many situations those thinking can be quite handy. Though, it isn’t really that much helpful when we’re in the middle of the creative process drafting wireframes and mockups.

And most of these solutions come in form of change requests, like “Can we change the color from red to blue?”.

So, if you’re getting such a “solution” from your colleagues and clients, try to ask the Why-question. For example: “Can you tell me what the challenge is that you’re trying to solve with this?”.

Getting to the ground and discovering the real problems will not only result in a way better outcome, but will make your life as a designer and developer easier 🙂

3. Use realistic assets

I know, images and copy won’t be on your priority list while working on a new mockup. Though they should be. Really.

The right asset in your mockup can not only ruin your whole wireframe, but it can also bring it to the next design level, the high fidelity design.

Besides the sketching and mockup stage, you (and your colleagues & clients) should be working on the visual language of your new web app or website as well.

Of course, there’s no need to present custom images or finished illustration in those mockups.

There’s a broad range of great stock images and videos available which will help you to make your mockups more vivid and will definitely make the difference when presenting those mockups.

(source: Google Style Imagery)

4. Fail fast and fix things faster

Keeping your mockup and prototyping workflow static can be a great waste of time. In most cases it’s way more efficient to keep it lean and simple. When concluding on the first sketches and wireframes you can iterate more quickly by little baby steps and a close feedback process.

Therefore I’d recommend to:

  • Keep your prototyping workflow transparent & provide updates to your team.
  • Communicate clearly and address issues right when they happen.
  • Make sure to involve every project stakeholder.

5. Use different tools for different prototyping stages

Don’t get me wrong. In many of my previous blog posts, I’ve highlighted the importance of shared data and connected systems. However, this can be quite a challenge during the prototyping stage. In many cases it can even increase creativity when switching tools for different tasks. Personally, I found the following setup of tools and media quite useful:

  • Sketches: using real paper and whiteboards for collecting first ideas. Evernote can be a great assistant for collecting those ideas.
  • Wireframes and mockups: While working on Wireframes and mockups, balsamiq or moqups comes in super handy.
  • prototypes: bringing your mockups to real life, tools like InVision, Usersnap or CodePen help you to collaborate on your drafts and prototypes while making sure that no feedback and idea is left behind.

Now up to you.

Being a creative professional requires deep expertise on the table. So do our clients. Just that our areas of expertise are different.

Your colleagues or clients know a lot about their audience and strategic goals. So let’s create a win-win situation for both parties. And let them guide when time’s appropriate and guide them how to make the most of the prototyping phase.

What’s your setup while working on mockups and prototypes?
This article was brought to you by Usersnap – a visual bug tracking and feedback tool for every web project.

Thomas Peham

Recent Posts

16 Best Enterprise Feedback Management (EFM) Software

In today's market, product managers and CPOs can access a wide range of Enterprise Feedback…

4 days ago

15 Best Product Discovery Tools 2024

In today's product management space, finding the right tools to navigate the complexities of the…

1 month ago

Jira Issue Types: Hierarchy & Examples

In the early days of personal computing, my generation used to spend a lot of…

1 month ago

Best 16+1 Usability Testing Tools 2024

For Product Managers and Developers, selecting the right, usability testing platform and tool isn't just…

3 months ago

What is the New Feature Discovery Process & Examples

Attention, Product Managers! Imagine a whole user journey where grasping your users' needs isn't a…

3 months ago

21+3 NPS Survey Questions and Templates for 2024

Why do the most successful product managers always seem to pay attention to the power…

3 months ago