UX/UI design
UX/UI design defines how people interact with a website, app, or digital service: where they find the right feature, how they register, place an order, fill out a form, and understand the results of their actions. A well-designed interface reduces unnecessary steps, makes navigation predictable, and helps users complete their tasks more quickly.
What is UX/UI design and what problems does it solve?
At Seo-Gen, we design interfaces for corporate websites, online stores, SaaS, web applications, customer accounts, marketplaces, and other digital products. Our work includes user experience, structure, prototyping, UI design, responsive versions, and preparing mockups for developers.
The result is an approved set of materials for product implementation: information architecture, user scenarios, interactive prototype, interface design, element states, UI kit, or design system. Developers receive a clear foundation, and the client sees how the product will work before full-fledged programming begins.
UX/UI design encompasses the logic of human interaction with a digital product and the visual design of the interface. While the user sees pages, forms, buttons, and cards, each screen contains a sequence of actions, information priorities, system constraints, and scenarios that must be considered before development.
The work begins with the question of what problem the user needs to solve and what actions will lead them to the desired result. After this, the structure is designed, the user journey is defined, prototypes are created, and only then is the visual design developed. This process reduces the number of questionable decisions that would otherwise surface only after front-end coding.
What is UX design?
UX, or user experience, describes a person's interaction with a product, from the first visit to the completion of the desired action. A UX designer studies the audience, website structure, user flow, navigation, forms, screen sequence, and situations in which a person might get lost or abandon the interface.
The project may include UX research, target audience analysis, customer journey mapping, user flow, information architecture, wireframing, and usability testing. The specific set of methods depends on the scale of the product and the available data. For a small corporate website, the process is usually simpler than for a SaaS with multiple user roles and dozens of related scenarios.
UX development begins before the visual rendering of screens. At this stage, we determine what data the user should see, what actions are available in a given state, and where they will be taken after each choice. This framework helps identify logical errors before they make their way into mockups and code.
What is UI design?
UI, or user interface, is responsible for the visual system of screens and the clear presentation of controls. The designer develops the grid, typography, visual hierarchy, buttons, cards, input fields, menus, notifications, icons, states, and other interface components.
The design must support the flow established during the UX design phase. If the primary action is lost among secondary elements, the form is difficult to read on a smartphone, or identical buttons behave differently, the user has to spend more time understanding the interface.
UI design also takes responsive design and accessibility into account. Element sizes, contrast, margins, block order, and component behavior are tested across different screen sizes. The final mockups should provide the developer with enough information to ensure the interface works equally predictably across desktop, tablet, and mobile devices.
What is the difference between UX and UI?
UX is responsible for the logic of the user's journey, the sequence of actions, and the ease of achieving goals. UI is responsible for how this logic is visually represented: which elements the user sees, what stands out, how states are designed, and how the interface communicates the outcome of an action.
It's impossible to completely separate these areas, as decisions constantly influence each other. For example, UX determines the need for a filter in the catalog, while UI determines its location, appearance, and behavior on a mobile device. An error at any level can complicate the product's use.
UX/UI development typically follows a sequential process: first, tasks and scenarios are analyzed, then a structure and prototype are created, after which the team moves on to the visual system. For complex products, special attention is paid to testing, the design system, and implementation verification after the mockups are handed over to developers.
What is included in UI/UX design development?
The scope of work depends on the type of product, its current state, and the number of user scenarios. A new service typically requires going all the way from research to the delivery of a full set of mockups. During a redesign, some stages may rely on existing analytics and already working solutions.
UI/UX development begins with understanding the task, not with choosing colors or designing the first screen. First, the team defines the structure, roles, and constraints. Once the logic is agreed upon, the visual layer, responsive states, and components are worked out for subsequent development.
UX audit and research
A UX audit helps identify specific issues with the existing interface and prioritize them. Key pages, navigation, forms, registration, ordering, search, filtering, and other actions directly related to user tasks are analyzed.
Data sources can include web analytics, interaction maps, customer requests, interviews, and observation of users going through scenarios. The choice of data depends on the available information. For a new product, audience research, competitor analysis, and hypothesis testing through a prototype are more often used instead of behavioral data.
Research should end with concrete conclusions for design. A list of observations without links to future decisions is of little help to the team. Therefore, problems are translated into requirements for structure, scenarios, and interface elements.
Target audience analysis
Audience analysis is necessary to understand who will use the product and what tasks they perform within the interface. In a B2B service, a manager, executive, and accountant may work with the same data, but see different functions and perform different actions.
The team identifies key user groups, their goals, usage context, and potential limitations. Real-world tasks are key, not abstract persona descriptions. If the product is frequently used on a smartphone while on the go, this influences the prioritization of features and the design of the mobile interface.
The analysis results are used to build the user flow and information architecture. At this stage, it becomes clearer which sections are truly necessary, which actions should be placed together, and what content the user requires to make a decision.
Analysis of an existing product
A working product already contains data on audience behavior, so it's important to use it before redesigning. We check visited pages, navigation sequences, problematic forms, search queries within the site, and areas where users frequently abandon the flow.
At the same time, an expert review of the interface is conducted. The designer examines navigation, visual hierarchy, responsiveness, component consistency, and post-action states. Particular attention is paid to scenarios related to inquiries, payment, registration, and the product's core functionality.
Following the analysis, a problem and priority map is created. Critical errors are fixed before minor discrepancies, as they have a greater impact on the user experience and can affect multiple screens simultaneously.
Designing user scenarios
A user flow describes the path from a starting point to a specific outcome. For example, an online store visitor must find a product, check its specifications, select an option, add it to the cart, enter the necessary information, and complete the checkout process without any confusing transitions.
When designing, consider alternative paths. A product might be out of stock, the user might make a form error, lose the connection, or return to a previous step. It's best to identify these situations in advance, as they require separate interface states.
Scenarios become the basis for screen structure and subsequent prototyping. They help the entire team discuss the product through user actions, rather than through individual page images.
User Flow
A user flow shows the sequence of screens, actions, and branches within a specific scenario. The diagram helps identify unnecessary steps, cyclical transitions, and places where the user must make decisions without sufficient information.
For a simple website, a user flow may span several main routes. In a complex system, a set of diagrams is created for different roles and tasks. For example, an administrator creates an entity, an employee edits the data, and the client sees only the final result.
The diagram is used before prototyping and adjusted after testing. If the user flow can be shortened without losing essential actions, it's best to change the solution before detailed interface development.
Information architecture
Information architecture defines how sections, pages, and data are interconnected. For a website, it impacts menus, catalogs, categories, cards, and internal navigation. For a web application, entities, user roles, and access levels are also considered.
The structure must align with user-friendly logic. A company's internal structure isn't always suitable for a website menu, as customers may search for services completely differently. Therefore, the architecture is tested against real user tasks and audience terminology.
For SEO, information architecture also impacts page accessibility and internal linking. Important sections should have a clear location within the structure, and navigation between related content should remain accessible to search engines.
Wireframes and prototyping
A wireframe shows the structure of a screen without detailed visual design. It defines the main blocks, content flow, forms, navigation, and controls. This format helps discuss logic without being distracted by color, images, and decorative details.
Prototyping is especially useful for complex scenarios. A clickable model allows you to navigate the user's journey and identify areas where the next action isn't clear. Mistakes can be fixed before dozens of final screens are produced.
Once the structure is agreed upon, the team moves on to the UI. If the prototype changes regularly after detailed visual rendering, some of the work will have to be redone, so it's a good idea to test key scenarios in advance.
Low-fidelity prototype
A low-fidelity prototype is assembled from simple blocks and demonstrates the layout of key elements. Its purpose is to quickly validate screen structure, content priorities, and action sequences without wasting time on final design.
This prototype is easy to modify during discussions. You can rearrange a block, combine steps, change a form, or test a different navigation option. For a complex service, this helps the client, designer, and developers agree on the architecture.
Once the main decisions are approved, the prototype becomes the basis for the next stage. Individual parts can be refined during UI design if the visual hierarchy indicates a need for structural changes.
Interactive prototype
An interactive prototype links screens and allows users to navigate key scenarios almost exactly as they would in a working product. Users click buttons, open forms, navigate back, and experience the flow of navigation without any code.
This format is convenient for demonstrating complex logic and UX testing. People can demonstrate where they expected a different feature or why they didn't understand the next step. Observations are recorded and used to adjust the scenario.
A prototype doesn't have to reproduce every technical detail. Its depth is tailored to the task at hand: for one project, linking a few key screens may be sufficient, while for another, testing a large portion of the user journey is required.
UI interface design
Once the structure is agreed upon, detailed work on the visual component begins. The UI designer creates the grid, typography, palette, element sizes, visual hierarchy, and component design rules. These decisions should support the structure and help the user distinguish between what's important and what's not.
At this stage, real content is taken into account. Headings, long product names, form errors, tables, and other data affect the layout. An interface built solely on short test strings may fall apart when populated with real information.
UI/UX design involves checking for repeatability. Similar actions should look and work consistently across different pages, so the user doesn't have to relearn the interface for each section.
Responsive design
Responsive design is developed taking into account the available space and familiar usage patterns of each device. On a smartphone, navigation, element placement, tap target sizes, and sometimes the order of blocks change. Simply scaling down the desktop layout proportionally is not enough.
Tables, filters, forms, and complex dashboards receive special attention. They require a dedicated solution for narrow screens, as many elements cannot be seamlessly ported to a mobile interface.
Mockups should show developers how key components behave at different widths. This reduces the number of decisions that need to be made during frontend development.
States of elements
Every interactive component should have clear states. For a button, these could be default, hover, active, focus, disabled, and loading. A form also requires error, successful submission, and valid states.
In complex products, the number of options increases. The table may be empty, data may be loading, user access may be restricted, and the operation may fail. These situations impact the interface just as much as the primary operating state.
If states aren't defined in the design, the developer is forced to independently decide what to display to the user. Therefore, the UI/UX developer and designer must have a shared understanding of the component's logic before implementation begins.
Creating a design system
A design system captures recurring interface elements and the rules for their use. It can include typography, spacing, grids, UI Kit, buttons, forms, cards, tables, modal windows, and other product components.
The system is especially useful for regular service development. The designer assembles new screens from agreed-upon solutions, while developers utilize already implemented components. This reduces random variations and makes the interface more predictable.
A design system evolves along with the product. New scenarios may require additional components or states, so the library must be maintained and synchronized with the actual implementation.
UX testing
UX testing verifies how clear a user flow is to the people for whom the product is being developed. Participants are given a specific task, and the team observes how they complete it, where they stop, and which elements they interpret differently than the team intended.
The method is selected based on the project stage. An early prototype, a finished interface, or an existing product can be tested. Interviews, behavioral analytics, and other sources are also used if they help validate a specific hypothesis.
Test results translate into changes to the mockup or scenario. The mere fact of conducting research is useless if the issues identified aren't prioritized and don't translate into clear tasks for the team.
Preparing the design for development
Mockup delivery includes more information than just a set of final screens. The developer needs components, dimensions, margins, states, responsive versions, element behaviors, and assets. For complex scenarios, relationships between screens and data display conditions are also specified.
Figma should be organized so the team can quickly find the latest version. Outdated versions, random copies, and inconsistent components create implementation errors, especially when multiple specialists are working on the product simultaneously.
During handover, we consider the project's technological limitations. UI/UX development becomes more predictable when the design is agreed upon with the frontend and backend before implementation, and controversial technical decisions aren't left until the last stage.
As an SEO specialist, I look beyond just how neat the interface looks. For SEO, it's crucial that the design doesn't interfere with search engines' ability to see content, follow internal links, and understand the page structure. Therefore, it's best to consider navigation, text blocks, mobile versions, and technical limitations during the prototyping stage rather than fixing them after development.
How does UX/UI development work?
The process varies depending on the project's size, but the sequence of key decisions typically remains the same. First, the task is defined and the context is explored, after which the team designs the structure, creates a prototype, refines the UI, and hands over the agreed-upon materials to the developers.
For the client, this process makes the work more transparent. At each stage, the specific result can be verified and changes made before moving on. This reduces the likelihood of having to completely redo completed screens due to an error in the basic user flow.
Process flow diagram:
Research → Architecture → User Flow → Wireframes → Prototype → UI Design → Responsive Versions → Testing → Handover to Developers → Design QA.
Briefing and problem statement
At the start, the team determines what product needs to be created or modified, who uses it, and what actions are considered key. For an existing website, the current structure, CMS limitations, analytics, and a list of known issues are additionally examined.
Business goals, user roles, functionality, timelines, and technical dependencies are discussed. If information is missing, questions are noted separately and clarified during the research process. This is better than building an interface on assumptions that then impact dozens of screens.
The result of this stage is a clear project framework. The team knows which scenarios are included in the work, what materials the client provides, and which solutions require additional verification.
Research and UX analysis
During the research phase, data is collected that influences the future structure. The audience, competitors, existing product, user requests, and analytics, if available, are studied. For a new service, more attention is paid to the market, user needs, and limitations of the future product.
Information is grouped by issues and scenarios. Instead of producing a large report for the sake of reporting, the team generates conclusions that can be used in design. For example, difficulty finding the desired service may lead to changes in navigation and category structure.
The UX consultation may conclude at this stage if the client requires an audit and recommendations without a complete redesign. In this case, the results are compiled in an agreed-upon format and shared with the team that will implement the changes.
Architecture and User Flow
Following the research, the product structure is designed. Key sections, relationships, user roles, and action sequences for key scenarios are defined. Page logic is developed for the website, and entities and access rights are additionally considered for the web application.
User flows help validate transitions before creating detailed mockups. The team sees where the user must make decisions, what data they need, and what happens after each action. For complex projects, multiple diagrams are built for different roles.
At this stage, it's helpful to involve developers. Technical limitations, API features, or data structures can impact the scenario, so it's best to consider them before moving on to visual design.
Wireframes and prototype
Based on the approved scenarios, screen wireframes are created. Here, the information composition, block order, and control layout are checked. The designer doesn't yet spend time on detailed graphics, as the primary task is to verify the structure.
Key screens are linked into an interactive prototype. The client can walk through the registration process, placing an order, creating an appointment, or other important operations and evaluate the logic of the future product.
Once approved, the main decisions are finalized. Minor adjustments are possible later, but it's best to address major architectural issues before beginning detailed UI design.
UI concept
A UI concept sets the visual direction of a product. The designer selects typography, grid system, color approach, card design, forms, navigation, and other key components. These decisions take into account the company's brand identity if the company already has a brand book.
It's convenient to test the concept on several typical screens. A single main screen doesn't demonstrate how the system will work with tables, forms, or complex content, so pages with different structures are selected for evaluation.
Once approved, the visual approach is transferred to the remaining screens. Basic solutions are gradually organized into components to ensure a consistent design throughout the product.
Design of all screens
At this stage, final mockups of pages, sections, and states within the agreed-upon scope are created. Real or near-real data is used, as the text length, number of cards, and table structure directly impact the interface.
Responsive versions are designed separately. Complex elements are redesigned for smartphones and tablets, and the sequence of actions is modified for mobile scenarios if necessary.
At this stage, UI/UX development is regularly checked against the approved prototype. If a change to the flow is necessary, the solution is tested across the entire connected chain to ensure that a change to one screen doesn't create inconsistencies on another.
Testing and adjustments
Completed scenarios are reviewed before being transferred to development. The team goes through key user journeys, analyzing forms, navigation, states, and responsive versions. User testing is also conducted for some projects.
Adjustments are prioritized by importance. An error that prevents the user from completing a target action requires more attention than a minor visual discrepancy. This prioritization helps prevent functional issues from being confused with subjective preferences.
After changes are made, the mockups are re-checked. The final set must be internally consistent to ensure that identical components and actions do not appear differently on adjacent pages.
Handover to developers
Developers receive up-to-date mockups, components, responsive versions, states, and necessary explanations. If the project is complex, the designer conducts a separate handoff and discusses scenarios that cannot be fully understood from a static screen.
At this stage, UI/UX design development connects with technical implementation. The team discusses component behavior, edge cases, data constraints, and questions that arose after detailed review of the mockups.
Communication with the designer remains constant throughout implementation. If the developer discovers a technical limitation, the solution is systematically adjusted and reflected in the design to ensure Figma remains consistent with the working product.
Design QA
Design QA is performed after the interface has been implemented by developers. We check for compliance with mockups, responsiveness, dimensions, margins, typography, element states, and behavior. Particular attention is paid to forms, navigation, and pages with complex structures.
The testing is performed in the working interface, as some issues cannot be seen in Figma. Content may wrap to new lines, components behave differently with real data, and some errors only appear during interaction.
Comments are recorded as specific tasks for developers. After corrections, critical areas are re-examined to ensure the final implementation complies with the approved product logic.
What we actually did
Dental clinic · Kyiv and Chernihiv
+44% clicks from search
A domain with no history and a site on a website builder. We built the semantic core for the services and both cities, reworked the landing pages and built the link profile from zero. In four months: 34.8k clicks, impressions 1.32 → 1.76M, DR 0 → 41.
E-commerce · international
+96% clicks in two months
A catalog of digital 3D models. We clustered the semantics, rebuilt the hub pages and fixed duplicates and indexing errors. Google users 247 → 532, CTR 2.4% → 4%.
Medical center · Ukraine
+68.75% visibility in the first month
Narrow visibility and a small semantic core at the start. Semantics, landing page structure, metadata and internal linking, then gradual link building.
How long does it take to develop UX/UI design?
The timeframe depends on the product's scale and the depth of design work. A small landing page and a customer account with multiple roles require varying amounts of research, scenarios, screens, and approvals, so a single timeline isn't used for all projects.
The speed of feedback also affects the duration. If interim decisions are agreed upon sequentially, the team can move on to the next stage without constantly returning to completed mockups.
For evaluation, the project is divided into stages: research, architecture, prototyping, UI, responsive versions, and handover to developers. The client sees the workflow and understands what materials need to be completed before the next stage.
What determines the cost of UX/UI design?
The project cost depends on the actual scope of work. Two websites with the same number of pages may require different amounts of time if one uses simple information blocks, while the other contains complex forms, dashboards, and multiple user roles.
The evaluation is influenced by the number of unique screens, the complexity of the scenarios, the need for research, the amount of prototyping, the number of responsive states, and the design system requirements. For a redesign, the current state of the product and the amount of materials that need to be retained or reworked are additionally assessed.
Before estimating, we study the task and determine the scope of work. This approach provides a more useful estimate than a fixed price per screen, since one screen might contain a simple text block, while another might contain a complex table with dozens of states.
Why order UX/UI design from Seo-Gen?
We design the interface along with the future development logic, SEO, and content structure. This is especially important for commercial websites, catalogs, and web applications, where visual decisions affect page templates, CMS data, and internal linking.
The team considers responsiveness, component states, SSR capabilities, and technical limitations in advance. Mockups are tested not only within Figma but also after implementation in the browser, when real data and component behavior are available.
When a project is developed using our CMS, the interface is built around repeatable components and site data. This simplifies support and future development, as new pages use a common design system and consistent templates.
Answers to your questions
What is UX/UI design?
UX/UI design combines the design of the user experience and visual interface of a digital product. UX defines the structure, user path, scenarios, and interaction logic, while UI is responsible for the visual representation of these solutions on specific screens.
The work may include research, architecture, prototyping, testing, responsive design, and component preparation. The scope of work varies depending on the product: for a corporate website, the process is typically shorter than for a web application with a large number of features.
How is UX different from UI?
UX describes the logic of user interaction with a product: the sequence of actions, navigation, structure, scenarios, and achieving a specific goal. UI defines the visual hierarchy, typography, colors, forms, buttons, and other interface elements.
These two areas are interconnected at the screen level. UX can determine the need for a specific action, while UI helps the user see and understand it. Therefore, the final solution is usually tested simultaneously for both logic and visual behavior.
What is included in UX/UI design development?
Development may include UX audit, user research, competitor analysis, user flow, information architecture, wireframes, interactive prototype, UI design, responsive versions, design system, testing, and preparing mockups for developers.
Not every project requires a full set. If a specific scenario requires improvement, some stages can be shortened. For a new complex product, on the contrary, a detailed design helps validate key decisions before programming begins.
Is it possible to order only a UX consultation?
Yes, if the task is limited to analyzing the existing interface or testing a specific scenario. UX consulting can be useful before a redesign, launching a new feature, or refining a form, dashboard, catalog, or checkout.
Upon completion, the client receives an agreed set of materials: comments, priorities, recommendations, diagrams, or prototypes. The format is determined in advance so that the results can be used when assigning tasks to designers and developers.
Do you need UX/UI design before website development?
For a small, standard website, the design scope may be minimal, but it's still advisable to define the structure, responsiveness, and key user actions upfront. For a complex product, a full-fledged prototype significantly simplifies the discussion of future logic.
When development begins without an agreed structure, some decisions have to be made directly in the code. Subsequent scenario changes can affect multiple screens and technical components, so it's more convenient to resolve key issues before coding.
What program is used to create UX/UI design?
Figma is usually the primary tool for interfaces. It's suitable for working with components, prototypes, responsive layouts, and sharing parameters with developers. FigJam can be used for diagrams and collaborative discussions.
Additional tools are selected for a specific task: analytics, heatmaps, testing, documentation, or task management. Interface quality is determined by the design methodology and solution validation, not by the number of programs used.
How much does UX/UI design cost?
The price depends on the number of unique screens, the complexity of user scenarios, the number of roles, the need for research, prototyping, and responsive states. The need to create a design system or work with an existing one is also taken into account.
Therefore, the cost is calculated after examining the task. For a preliminary estimate, it's sufficient to describe the product type, functionality, number of main sections, and the current design status, if it's a redesign.
How long does UX/UI development take?
The duration depends on the project scope, the number of scenarios, and the speed of approvals. A simple landing page requires significantly less design time than a SaaS with roles, tables, settings, and a large number of system states.
The work is divided into stages, so the timeframe can be estimated more accurately after studying the product structure. First, the required scope of research and prototyping is determined, then the preparation of the UI, responsive versions, and development materials is calculated.
Is it possible to develop UX/UI for an existing website?
Yes. A functioning website often provides more initial data for design, because it allows you to study analytics, real user scenarios, customer requests, and existing system limitations.
It's advisable to begin a redesign with an audit. This helps preserve solutions that are already working well and focus changes on problem areas. Completely replacing all elements without analyzing current user behavior is not always necessary.
UX/UI design helps define the structure of a digital product in advance, validate user scenarios, and prepare the interface for development. For a website, this means a clear architecture and responsive pages, and for a complex web application, it means well-developed roles, states, prototypes, and a system of components.
UI/UX development is most effective when the designer, SEO specialist, and technical team work within a common product structure. This process reduces the number of decisions that need to be reworked after development begins.
Tell us what website, service, or interface needs to be developed or improved. We'll examine the task, determine the required UX/UI work, and prepare a project estimate.
We reply within one business day. No newsletters, no “just a reminder” calls.
He will look at the site himself instead of passing it to a manager.
More on: UX/UI design
When does a business need UX/UI design development?
UX/UI design is useful when launching a new product, redesigning an existing website, or developing an interface that has accumulated numerous unrelated solutions. The need for work usually becomes apparent when users don't understand the next step, employees constantly explain the service manually, or every new change requires reworking existing screens.
The cause may lie in navigation, architecture, forms, the mobile version, or the lack of a common system of components. Before starting work, it's important to identify the problem and its scope. Sometimes a full-fledged UI/UX design is required, while in other cases, a UX audit and targeted changes are sufficient.
Launching a new website or digital product
When developing a new product, UX/UI helps agree on the structure and functionality before coding begins. The team identifies key user roles, tasks, sections, and navigation, then creates a prototype of key pages. The client can test the future logic even before the interface is ready.
This approach is especially useful for products with complex functionality. If development begins without an agreed flow, structural changes will affect the frontend, backend, data, and associated screens. Prototyping shifts most of these decisions to an earlier stage, where changes are technically easier.
For a typical website, the level of detail may be less. However, even there, it's worth defining the menu structure, content placement, forms, CTAs, and mobile scenarios in advance to ensure the website design isn't pieced together from individual screens without a coherent overall logic.
Redesign of an existing website
A redesign is necessary when the current interface interferes with users' basic actions or no longer aligns with the business structure. Signs include complex navigation, overloaded forms, a weak mobile version, inconsistent components, and a large number of pages created without a unified system.
It's advisable to begin the work with an analysis of the existing product. Analytics data, user behavior records, support requests, and actual content help understand which solutions need to be changed and which are already working properly. A complete interface overhaul without such analysis could eliminate familiar and useful scenarios.
A UX audit allows you to prioritize a list of issues. Afterward, you can gradually update specific sections or design a new interface entirely. The format depends on the site's state, the scope of functionality, and business objectives.
Developing a complex web application
Web applications require more detailed design because a single screen often has dozens of states. Users may have different permissions, create and edit data, receive errors, and interact with filters, tables, documents, and related entities.
For SaaS, CRM, ERP, financial account areas, and dashboards, roles, user flows, system states, and dependencies between functions are designed. Empty states, errors, data loading, and access restrictions are considered separately. If these are missed in the mockups, decisions will have to be made during programming.
UI/UX development in such projects requires constant communication between the designer and the technical team. The interface must take into account the actual capabilities of the API, the data structure, and the limitations of frontend development. The earlier these issues are agreed upon, the fewer discrepancies arise between Figma and the final product.
Scaling an existing product
As a product evolves, the number of screens, components, and states grows. Without a unified system, similar actions gradually take on different designs, and developers create multiple versions of the same button, form, or card. Interface maintenance becomes more difficult with each new release.
A design system captures recurring components, rules, dimensions, typography, and states. It's especially necessary for products that evolve regularly. A new screen can be assembled from previously agreed-upon elements without having to redesign the core interface.
Scaling also requires testing old solutions. A component that works for three pages may prove inconvenient once dozens of scenarios appear. Therefore, a design system evolves with the product and takes into account developers' usage practices.
UX Consulting: When is a Complete Redesign Not Necessary?
Not every project requires a complete interface overhaul. If the site already performs its intended purpose but certain scenarios raise questions, a consultation and audit can be a good starting point. This approach helps determine the root of the problem and the extent of the changes truly needed.
A UX consultation is appropriate before refining a form, dashboard, checkout, catalog, mobile version, or other specific area. The specialist examines the flow, interface, and available data, then formulates recommendations based on priority.
What do we analyze during a UX consultation?
Depending on the task, navigation, page structure, forms, product cards, filters, registration, customer account, order placement, and other user scenarios are tested. The logic of actions and the number of steps to the result are analyzed.
If analytics data is available, it complements expert assessment. For example, a high exit rate at a certain stage of the form helps identify areas for more detailed testing, but the metric itself does not explain the underlying behavior.
A consultation may include discussing mockups with the client's team. This is useful before developing a new feature, when you need to test the scenario before coding begins and reduce the risk of costly changes after release.
What does the client receive after the consultation?
The outcome depends on the pre-agreed format. The client may receive a list of identified issues, their priority, recommendations, user flow diagrams, sample solutions, or prototypes of individual screens.
For the technical team, it's best to formulate recommendations so they can be turned into tasks. The phrase "improve form" doesn't tell the developer exactly what needs to be changed. A specific note identifies the problem, the expected behavior, and the associated states.
After the consultation, the client decides which changes to implement first. If necessary, the work can continue with full-fledged UX/UI design and mockup preparation.
What products do we design?
The methodology depends on the type of digital product. Corporate websites, online stores, and SaaS vary in the number of user roles, depth of scenarios, and interface state requirements. Therefore, a single work structure is not used for all projects.
Before starting design, we define the key objectives of a specific product. This helps us determine the appropriate research depth, number of prototypes, and design system composition without unnecessary steps.
Corporate websites
A clear service structure, navigation, trust blocks, and a convenient contact path are essential for a corporate website. Users should quickly understand the company's specialization, find the right direction, and receive sufficient information for the next step.
UX design also takes SEO into account. Landing pages must remain accessible within the logical site architecture, and internal links must not be replaced with interface solutions that search engines cannot fully process.
The UI supports the content hierarchy and the company's brand identity. At the same time, visual solutions should not impair the readability of long commercial pages or complicate mobile navigation.
Online stores
In an online store, the main scenarios are product search, catalog navigation, filtering, product card, cart, and checkout. Every unnecessary or confusing step increases the likelihood that the user will abandon the checkout process.
Particular attention is paid to filters, product options, availability, shipping costs, payment methods, and error messages. These elements should work consistently across desktop and mobile devices.
The catalog's SEO is also taken into account during design. Categories, filters, internal links, and content zones must comply with technical indexing requirements to prevent the interface from creating additional duplicates and sections that are blocked from crawlers.
SaaS and web applications
SaaS typically involves a large amount of state, data, and recurring operations. Users create objects, edit them, filter lists, invite colleagues, change settings, and receive system notifications.
UX design begins with roles and scenarios. For each function, access, action sequence, and outcome are defined. Particular attention is paid to empty states, errors, confirmations of dangerous operations, and recovery from failed actions.
The UI is built on a component system that evolves with the product. This approach facilitates the addition of new features and reduces visual inconsistencies between modules.
Customer accounts
In a customer account, users manage their data, documents, orders, payments, and services. Clear navigation, secure transactions, and a transparent display of the current status are especially important here.
It's best to break complex actions into logical steps. The user should understand what has already been completed, what data is still required, and what will happen after confirmation.
When designing, we consider different account states. A new user, an active client, and someone with limited access may see different features, so these variations are defined in advance.
Mobile interfaces
Mobile interfaces require separate scenario testing. Limited screen width, finger control, and use on the go all impact element sizes and feature placement.
Long forms, complex tables, and multi-level filters need to be adapted for mobile interaction. Sometimes, the right solution is to change the order of steps rather than shrink existing elements.
For web products, responsive design and real layout breakpoints are taken into account. For mobile apps, familiar platform patterns and system navigation features are additionally utilized.
Marketplaces and service platforms
Marketplaces bring together several user types and the transactions that connect them. The buyer searches for offers and places orders, the seller manages the products, and the administrator oversees processes and disputes.
Design begins with separating roles and permissions. A single object can have different representations for each party, and status changes should be reflected in all related interfaces.
User flows and a design system are particularly useful for such products. Without them, the number of states quickly grows, and identical operations behave differently in different sections.
What is the difference between a UX/UI designer and a UI/UX developer?
A UX/UI designer researches user tasks, develops scenarios, creates prototypes, and builds the interface's visual system. The results are mockups and product behavior guidelines, which are then used by the technical team.
A frontend developer transforms these solutions into a working interface. They write code, connect data, and implement responsiveness, interactivity, and states. In a real project, the designer and developer should regularly discuss contentious issues, as some decisions depend on the technical architecture.
The search query "UI/UX developer" is often used as a general name for a specialist who works with interfaces. Similarly, "UX/UI developer" is also used, although the professional responsibilities of a designer and programmer differ. At Seo-Gen, these stages are integrated into a single process so that design takes subsequent implementation into account.
What tools are used in UI/UX development?
Figma remains the primary working tool for mockups and prototypes. It allows you to assemble components, design systems, responsive screens, and interactive scenarios, while developers have access to dimensions, styles, and other interface parameters.
FigJam can be used for diagramming and collaboration. Behavior analytics are studied through web analytics systems and heatmaps, and team tasks are recorded in a suitable task tracker. The specific set of services depends on the project and the client's infrastructure.
Tools don't replace design. A quality result depends on a well-defined problem, user data, architecture, and scenario testing. The same interface can be carefully designed in Figma and still contain logical errors.
What does a business get as a result of UX/UI design?
The deliverables are defined before work begins, so the client understands what materials will be prepared. For a small website, the scope may be limited to the structure, mockups, and responsive versions, while a complex product will additionally require user scenarios, an interactive prototype, and a design system.
Typically, the final kit includes materials that help agree on the product and hand it over to the technical team without guesswork. The more complex the functionality, the more detail goes into documenting states and behavioral rules.
| Result | What does the team get? |
|---|---|
| Information architecture | The structure of sections, screens and links between them |
| User Flow | Sequence of actions for key user scenarios |
| Wireframes | Page framework and arrangement of main functional blocks |
| Interactive prototype | Ability to walk through key scenarios before programming |
| UI mockups | Final visual design of screens and components |
| Responsive versions | Desktop, tablet, and mobile solutions |
| UI Kit or design system | Library of components, styles and states |
| Handoff | Prepared materials and explanations for developers |
| Design QA | Checking the implemented interface after development |
The exact set is determined by the project. If the product already has a design system, it can be used and developed instead of creating a new library from scratch.
How does UX/UI affect conversion and SEO?
A clear interface reduces the number of situations in which users can't see the next step or perform the desired action. Navigation, forms, cards, filters, and content order directly contribute to the user journey and influence the website's usability.
UX/UI also intersects with technical SEO. A poor interface design can hide important internal links, hinder content access, increase the amount of client-side JavaScript, or degrade Core Web Vitals. Therefore, it's important to review the design before it becomes part of the frontend code.
For projects with organic traffic, the site architecture, content layout, links, and accessibility of indexed pages are checked separately. SSR, correct HTML structure, and loading speed are discussed with developers before implementing complex visual solutions.
How do we connect UX/UI design and development?
At Seo-Gen, design is developed with the technical implementation in mind. The team understands in advance which elements will become components, what data comes from the CMS, and which parts of the page should remain accessible in server-side HTML.
This process is especially important for projects where SEO, CMS, and the interface are closely interrelated. For example, changing the catalog structure affects navigation, URLs, internal links, and page templates. The design solution is tested with these dependencies in mind.
UX/UI development continues after the Figma handover. Developers implement the interface, and the designer tests the result in the browser. If technical limitations arise, the solution is adjusted in the mockups and components, rather than remaining as local edits in the code.