‍In the first part of our article, we covered the topics of user research and product strategy planning. In this second part we are going to deal with the UX and UI design, the second and final stage of the design process. After we understood and prioritized the business goals and the user needs, defined the real problems to be addressed, outlined the design guidelines, phrased the relevant questions about the how-to’s and worked out the product concept, we finally possess every tool to create the UX and UI design of our digital product.

Steps of UX and UI Design Process

‍

We would like to illustrate and explain the 7 important steps of the UX and UI design process below.

1. User Flow Planning

Users can interact with products in different ways and different journeys. In every case, the process starts with an entry point (a homepage or a landing page), and ends with final actions, such as registration or subscription, or with a result, like purchasing a product.

The entire conversion process consists of several steps, so the key to designing the right user journeys is to present the right information at the right time. Users are more likely to convert if we provide them with the information they need at every step.

In order to minimize drop-off rate, it is advisable to provide only as much information as the user truly needs to complete the given step of the conversion process. This way we can create an efficient and intuitive user interface.

For products that are already in use, user flowcharts are also helpful to highlight why users get stuck at a certain point and what we can do to fix the problem.

‍

2. Information Architecture Planning

Before writing a book, writers prepare a draft, just like the architects make a sketch of a building. When designing the information architecture, we organize the content in a way that users can find all the information they need with as little effort as possible.

Organizing information makes it easier to understand the features, hierarchy, navigation, and further interactions of the product. This is the most important document, which provides a bird’s-eye view of the entire digital product, and which constitutes the basic framework of our design project.

The lack of a proper information architecture makes navigation difficult and incomprehensible, so users can easily get lost in the interface and, after a bad first impression, do not give our product another chance.

Unlike the design of a building, the information architecture is constantly changing, evolving with altering user needs and new features, providing the team with an up-to-date map.

The better the whole product development team knows the information architecture, the more exactly every team member will know what is feasible in a specific moment; besides, they’ll be aware of expected amount of efforts needed to carry out a new change or feature. A well-crafted information architecture helps us save considerable amounts of time and resources.

‍

3. Wireframes

With the user journeys and information architecture in place, we can now start to sketch out the processes, screens, functionality and interface elements (e.g. buttons, menus, drop-down menus etc.) that users will interact with when using the product.

With wireframes, we focus primarily on functionality, designed behavior, hierarchy, and arrangement of elements. The use of style and color is still minimal at this stage; we usually only work with grey-toned elements in order to focus on the essentials.

Depending on how much we would like to go into details, we can draw the wireframes manually or digitally. Low-fidelity wireframes, which are still rough and draft-like, display the very basic processes of the surface—details that might be distracting can be ignored at this point.

These schematic wireframes are perfectly applicable during brainstorming, when the goal is to quickly sketch many ideas and concepts, for example of the main screens and interactions of a product, or about the path certain screens would lead the user to. As users are not bothered by details, they also provide more straightforward, honest answers as their first impression in the first user testing sessions already.

We can also create a clickable prototype at this stage to bring the product to life now, making it much easier to understand how users interact with the interface and to filter out what's intuitive for them and what isn’t.

Problems and pain points are also easily identifiable in this stage, so fixing them would not require considerable amounts of time and money, since these changes are a lot more difficult to carry out in the later stages of designing.

The more elaborate, high-fidelity wireframes can present the product surface in a more detailed way, and we can also start preparing further elements that we’ll need later during the UI design and the design system development.

For example, the textual elements affect user behavior significantly: now it’s time to replace the dummy texts with the actual text content with their context and space allowances.

Wireframes can also ease the communication with users and clients, initiate dialogue and facilitate user feedback, generate ideas for designers and help all stakeholders to have a vast knowledge of the product.

‍

4. Iterative User Testing (Wireframes and User Flow)

A great deal of development time and resources can be saved later, if we become aware early on, during user testing of the wireframes, that the process or layout is not in line with intuitive user use.

With wireframe testing we can experiment with different concepts in a relatively short time, and we’ll be able to make quick design decisions. Completing this work at this stage, before finishing the design and the implementation, we can save a huge amount of time and development costs.

Based on the user feedback and insights from the testing stage, we introduce the necessary changes in the user flow and the wireframes, after which we can have another round of user testing.

‍

5. UI Design

The ultimate goal of user interface design is to create a product that captures the users’ attention and gives an enjoyable user experience. This experience relies on the combination of usability, aesthetic looks and uniqueness.

In today’s digitally driven world, businesses understand that a superior user experience is now vital in order to build trust and brand loyalty. A carefully designed digital experience used to be merely a preference, but today it’s a must-have requirement, and in its absence users can very quickly switch to the product of a competitor.

Besides being aesthetic and easy to use, a good user interface visually gives a grasp of the brand itself, while expressing and communicating the business goals in a way that is tailored to the users.

During the UI design, we draw all the illustrative screens that we use later on for the implementation of the product. For websites, we also create responsive web design optimized for different screen sizes (mobile, tablet, desktop).

Beyond the UI elements we also need certain design guidelines to create a successful user interface: these are collected in the so-called design system. The design system includes all UI elements and each screen design for the developer team to implement the product.

‍

6. Iterative User Testing (UI design)

When the UI design is completed, we carry out user testing again, and based on the feedback collected we make the necessary changes and repeat the test again.

‍

7. Design System Delivery

The design system contains the UI building blocks (colors, shapes, typography, buttons), components (repetitive, reusable, complex elements), custom screen designs, as well as the UX and UI rules and guidelines that can be used to develop the designed screens and extend them to other sites that will be created in the future.

The design system has to be kept up to date and must reflect the changes of the product, the tools and the available technologies; only in this way will it ensure the consistency that both the designer and the developer team need to perform their work properly.

The visual and functional coherence of the product serves as a common design language, allowing the design and developer teams to communicate with each other much more quickly and efficiently, significantly reducing project costs.

‍

Conclusion

A carefully designed and superior user experience in today’s digitally driven environment is not merely a preference, but a must-have requirement that plays a significant role in building confidence and brand loyalty.

The successful user interface is aesthetic, easy to use, conveys the brand’s spirit and the business goals, and communicates in a way that is tailored to the users’ needs. We partner with our clients along every step of the way, from design to implementation.