UX mock-up – what is it and how to create it?

Using mock-ups, you can test interface ideas and User Experience solutions contained therein on both sides of the product – during tests with users and negotiations with investors.

Verification of ideas at an early stage of work is very important, because the programmers are involved a step further into mock-ups, and coding is the most expensive stage of product development. Thus, UX mock-ups offer a chance for an early reduction of incorrect implementations.

What are the types of mockups?

Low Fidelity, that is, refining key elements.

The simplest type of mock-up draws attention to the size, shape and layout of strategic elements. The product owner will be able to judge whether the assumptions made are in line with his business goals.

High Fidelity, that is, a high level of accuracy

On the basis of the Lo-Fi mock-up, a Hi-Fi mock-up is created. At this stage, all mock-ups become more precise and accurate. Each component is carefully analyzed and designed as if it was to look and work as intended. The design team can discuss issues such as building a narrative with UX writing and designing user flow on navigation elements more specifically. The Hi-fi version can also be tested. Users will see everything that allows them to evaluate the product. Thanks to this, it is possible to detect and fix any errors earlier at a lower cost than at the UI stage.

How to design a User Experience mock-up?

Keeping control of the project means optimizing it from the very first steps. Professional approach to each step translates into facilitating and simplifying the next ones.

Research and concept phase – setting the project on the tracks

The goal is to shape the information architecture and divide it into subpages or screens, and at the same time to get to know users, owner’s goals and competing products.

UX research that can help include in-depth interviews, card sorting, surveys and benchmarking. Despite the lack of any preliminary sketches, it is possible to examine the target group’s attitude towards applications or websites with similar features and functionalities. Get to know the strengths and weaknesses of the solutions used on the market. As a result, the design team begins work on a new product, taking into account the solution of problems that the competition has not dealt with.

The collected information is used to create this information architecture. The design of a new product is limited to the number of subpages / screens, thanks to which it is possible to estimate the amount of time needed to design individual mock-ups.

Tools such as:

• Dyno Mapper – a simple solution to quickly generate maps in a team and easy sharing.
• Lucidchart – popular with large market players, ensures efficient team work on charts, diagrams and flowcharts.
• OmniGraffle – reserved for Apple users, offering automation features and increasing the precision of design.
• PowerMapper – for users who would like to go from the information architecture development phase to the analysis and testing of the finished website with one tool.
• Microsoft Visio – dedicated to creating flowcharts, speeds up your work thanks to a library of hundreds of thousands of shapes.
• Microsoft Excel – its great advantage is its universality, ease of use and flexibility – it will fit the information architecture of even large digital products. Creation is based on lists and grouping of information.

Analogue introduction to prototyping

The sooner the first model is created, the better. A good start of work is a piece of paper and a pen or markers that will quickly illustrate new ideas in a wider group. They will enable a quick confrontation of various systems with the opinions of decision-makers (sometimes also with the reactions of the target group) and the selection of the most promising design path.

The advantage of the analogue method is also the quick multiplication of various variants of a project or idea. Without wasting time choosing graphic tools, importing and exporting, or fighting the temptation to over-refine the design with your favourite software functions.

Only after the phase of selecting and translating the content architecture into initial graphic elements, can the design be transferred to a digital form, which will accelerate further work. Mock-ups can be created in such programs as:

• Balsamiq,
• UXPin,
• Axure,
• Sketch,
• Figma,
• Sketch.

A good tool for UX mock-ups allows you to create designs that reflect the graphic elements and the way users interact with the product. You should also pay attention to the option of generating a specification that is readable for programmers.

How to work on a Lo-Fi mock-up?

An important part of prototyping is recognising fixed interface elements and adapting this pattern to different screens. With the use of tools, it is easy to multiply screens and copy their components. Thanks to this, many versions of the project for testing can be created in a short time, which will differ in layout and level of detail.

By the way, the mock-up tools allow you to update multiple screens with each small change. Thanks to a comprehensive approach, the project is always locked within a specific framework and the length of the work can be estimated.

Hi-Fi mock-ups, i.e. a step before coding

It is worth remembering that prototyping in the Lo-Fi phase is only supposed to lead to the acceptance of the general vision of the interface and information architecture. There is a Hi-Fi phase from going into details, i.e. filling the accepted version with details and a text layer.

Keeping an eye on the boundary between these two phases of interface design reduces the risk of working on wrong assumptions.
Hi-Fi mock-ups are, in fact, refining Lo-Fi based on UX research until a version ready for coding is created. At this stage, you can organize tests with users.

Summary – why is it worth using UX mock-ups?

Thanks to Lo-fi and Hi-fi mock-ups, interface design is built around the UX from the beginning, instead of the UI. Thus, prototyping leads to cost optimization, risk reduction and acceleration of the process of reaching an idea for a product that is acceptable to the owner and users alike.

If it turned out – for example at the stage of testing with users – that certain functions were not used or the layout was incomprehensible, all the effort, time and cost of coding them would be wasted, reducing profitability even before the application is released or the website is published.

Thus, mock-ups are a form of maintaining control over the project in such a way that every move, decision, new function or resignation from another – is understood at all times by all team members, owner, investor and user. Before the first line of code is created.

An additional advantage is to facilitate the valuation of programmers‘ work. It’s easier to talk about a closed project in a graphic form than about a set of ideas that everyone will interpret differently. Discussions on mock-ups also allow us to divide the coding into stages, assign interface elements to them. If the costs do not fit within the assumed budget, you can arrange a hierarchy of tests with users and finally see which elements of the product can be abandoned.