The level of technical knowledge required to read the article: ⭐⭐⭐⭐⭐ (low)

Whether you are taking your first steps into the world of IT or it is a part of your everyday life, close cooperation between the client and the development team is the cornerstone of a successful outcome. Meanwhile, better engagement and collaboration is fostered by understanding the processes.

Although UI/UX development is often considered to be the “fun” part and the sweet treat of an IT project, it is worth familiarising yourself with the detailed design process: it can help identify and address critical questions about the desired functionality early on, before the coding has even begun, thus saving you both time and budget.

Although each project has its own unique characteristics and features, the information summarised in this article will provide some insight into the design process, its stages, and the most important keywords.

What is UI/UX design and why is it needed?

The main goal of UX/UI design is to create a successful user experience for a web solution or mobile application that is clear, logical, visually appealing and guides the user effortlessly through all the steps they need to take. Well-designed UX and UI will give the impression of a trustworthy, authentic, and high-quality digital product. It makes it easier for you to achieve your business goals.

UX (User Experience) and UI (User Interface) are the first terms to get familiar with when engaging in a web design project. UX design focuses on the user’s interaction with a system, website, or application and aims to make the solution simple, logical, and enjoyable to use. UI design is responsible for the visual part of the solution and its consistency with the brand and current trends.

The steps of a design project

The web design process can be divided into six main steps. The scope and order of the steps can vary depending on the project and its needs.

1. Defining and planning the project
2. Research and analysis
3. Technical design (wireframing)
4. Graphic/Visual Design
5. Usability testing
6. Quality control (also after the solution is complete)

Defining and planning the project

Defining and planning a project is like preparing healthy soil before starting to design. Completing these preparations will help the project to proceed successfully to its conclusion.

• Development costs - The UI/UX design development estimate is based on the client’s requirements, which may be described in the technical specification, assignment, or discussed in a meeting. This results in a design cost estimate that is agreed with the client. Example of a cost estimate.
• Development workload (scope) - Together with the estimate, the workload of the project is determined. Project activities, deliverables, and a specific timetable are defined, taking into account the costs and the work to be carried out.
• Project objectives, roles, and responsibilities - At the start of the project, the project objectives, desired end result, roles, and responsibilities are agreed upon. Various management tools such as JIRA, Confluence, and any other agreed tools are used to capture the decisions made and the tasks to be performed.

Research and analysis

The research and analysis phase is necessary to understand the business needs of the project in depth, so that the design team could propose appropriate solutions.

• User and client interviews - At the start of the project, interviews are conducted with the existing and/or potential users of the solution/service/product. Together with the client, the target audience of the solution is defined and primary and secondary usage scenarios are identified.
• • Existing (and competitor) solution research and analysis – An audit of existing solutions (if such exist), competitor research, review of good and bad industry examples.
• Analysis of Google analytics / Hotjar and other tools or data - Data analysis is carried out where available. When planning a project in advance, it is recommended to implement the analytics tools for an existing solution at least 3 months before the design phase, so that the collected data set would be large enough to draw objective conclusions.

Technical design (wireframes) and data structure

Technical design (wireframes) is an essential step in UI/UX design that involves a schematic visualisation of the data structure of a digital solution, its content blocks and their layout.

• Solution content and sitemap - A sitemap contains information about all the inner pages/screens and structure of the solution. Visually, the sitemap is represented as a “tree” diagram showing the hierarchical structure.
• Technical design sketches - During the design process, the functional interface elements and blocks that will be required in the final solution are determined, taking into account the project requirements and the client’s comments.

Technical design sketches (wireframes) can be of different levels of completion, for example:

Graphic design

Once a clear understanding is achieved for the functionality, structure, and content of the solution, the work on the visual design begins. During the graphic design (UI) process, the functionality defined in the technical design sketches is presented visually.

• Identity of the solution - During the UI design development, the client’s brand book, corporate identity, and other guidelines on the desired visual representation and final result are taken into account.
• Design (visual) sketches - Design sketches are created using selected appropriate tools – fonts, colours, icons, illustrations, animations. Taking into account the information obtained in the previous steps, the sketches will represent the final visual solution of the system. During the graphic design (UI) development, the functionality defined by the technical design sketches is presented visually by selecting appropriate tools – fonts, colours, icons, illustrations. Appropriate animation examples are being selected
• Prototype - A prototype is ... and it provides interactivity and easy switching between different views and shapes, thus giving users an experience as close as possible to the finished solution. It is important to run the design prototypes on the devices on which the solution will be used, so you can get a realistic idea of how the system would work, for example, in an adaptive (responsive) or app version.

Example:

Usability testing

The usability tests aim to analyse the user experience and opinion of the UI/UX design solution and its structure as well as to test the readability of the information and understanding of the terms used.

• Usage scenarios and tester groups - Before the usability tests, the usage scenarios (the most frequent actions within the solution), the test work tasks, and the testers are defined according to the target audience of the solution.
• Testing - Testing (individual tests, focus groups, etc.) is carried out using appropriate testing tools, and test results are recorded.
• Result analysis - Data collected during usability tests are collected and analysed. Based on the results of the data analysis, suggestions and corrections are made.

Quality control

The design needs to be further considered in the next stages of the project and in the development of the solution so that it looks good not only “on paper”.

• Collaboration with the software development team - The output from the UX/UI design is discussed with the software development team and the working files are handed over. During the development process, the design team answers questions from the developers and checks whether the result is consistent with the created design.
• Usability and design audit - About 1-2 years after the solution has been put into practice, it is advisable to conduct a usability audit and ask the users how easy is it to use the software and whether anything causes questions or difficulties. Receiving feedback in this way allows improvements to be made.

Frequently asked questions

1. Can’t a programmer put together the design himself? (my system is not visual, just tables)
2. What is required from me? (client side)
3. Are there additional costs involved in designing?
4. How long does the design take?
5. Can I program and draw the design at the same time?
6. How is employing a designer (unique design) better than using a design system or UI kit?
7. Can I bring my own designer?
8. What to consider when choosing a design team?