User Experience

Mock-up is a key step for interface design

Mockups
Alain Perrier
Written by Alain Perrier

What does modelling a mock-up mean?

Before starting this article about mock-up, let’s define the concept. A mock-up is a representation, which doesn’t respect the original size of an object, but which is faithful in proportion. It can be a building, a device, a set, or an interface. In various web project, thinking about the structure is a priority. You have to order the information in order to simplify the navigation for the final user.

There is a step before that, which is based on target and market definition, users testing, benchmark and other studies. Modelling an interface take part of the innovation process: first, we have to deeply understand people for whom we design our services. Then, we have to test ideas, concepts, and proposition one by one with users. Actually, we want to build a user centric approach from beginning to end of our project.

Of course, modelling is not about reinventing new things. The interface has to be intuitive and good practice has to be respected, especially zoning (i.e. menu, searching tool…). It takes part of the reflexions step for designing. Modelling is a good way to communicate the concept to teams and get feedback.

Quick and simple, this method presents multiple advantages, with the possibility to set user testing and integrate feedback before launching the real concept. Modelling is a tool for UX approach to ensure continuous improvement.

Some steps to respect: analyse, brainstorm, paper mock-up and finally, digital mock-up.

  1. Observe what is working well

Benchmarking other similar concepts before launching is an important step. This searching step allows to identify good practices (or not). The point is to get inspiration through others, and analyse what is already existing and possible.

For example, if you have to model a purchase funnel, you won’t reinvent everything because users have to be reassured. You don’t want to scare people, you need them to complete the buying process to increase your conversion rate.

  1. Don’t ignore people

Once you have noticed all good and bad ideas from your study, you need to involve people. Through a brainstorming with your team, you can complete and challenge the ideas.

Don’t forget the UX principle that I presented in my last article. As I said “You need to gather different point of views, and it should be the result of multiple design steps”

There are diverse methods to animate a good creativity session, with different exercises such as ice breaking.

  1. Clearly define the content and the goal

Once you have understood all this data, with benchmark and brainstorming, we need to define a kind of roadmap. Yes, because before launching a project, we need to define:

  • The content of the application
  • The context
  • Functionality and technical aspects

Once you have answered all these questions, you can detail a navigation scenario, such as:

  1. I sign in
  2. I complete the information
  3. I discover the products
  4. I add the products on my basket
  5. I pay

This navigation scenario will facilitate the beginning of the real conception. Your first draft of the interface!

  1. Take your pen and scribe!

Let’s go! You can finally begin the interface modelling. But be careful, you should not be in a hurry.

Take a pen, a paper, and if you can, some friends to get feedback. Again, more you cross-reference information and ideas, more you get the chance to create a gorgeous interface. For me, this time is really important, it helps me taking a step back. You can focus on the essential, and not spending too much time on details. And, believe me, when everything is on paper, it seems to be clear and I feel released!

  1. Yes, we can model on a computer!

Yes, if you have to present the project to a potential investor, or a future client, a flyer is not really professional. Now that everything is clear in your mind, you can begin to model your interface on the computer!

Mock-up for Chez Robert's project

There is some software specialised in mock-up and I will present you quickly some of them. Here is my selection:

  • Balsamiq : local software, very good for your first prototype
  • Mockingbot : online software, good for connexion between to make a complete scenario
  • Mockplus : local software, still in development but very simple to use
  • Marvel App : online software, easy to use, and adapted for importing wireframe
  • Axure : local software, very complex, mostly used by expert but very powerful
u8x7co8

About the author

Alain Perrier

Alain Perrier

Alain PERRIER is a student in Digital Business Strategy at Grenoble Business School and is currently working at La Banque Populaire des Alpes in digital transformation