Before the interface of the application, website or store is created, the first clear graphic visions of the project are necessary.
The most optimal form of work on UI in the first stages are UX mock-ups. They integrate a set of ideas into one coherent, closed vision that can be discussed. Thanks to the division of mock-ups into two types (low-fi – sketches, hi-fi – precise mock-ups), precision and detail are not needed from the very beginning to run the project effectively. Just take the perspective of a bird’s eye view.
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.
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.
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.
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.
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:
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:
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.
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.
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.
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.
