UX/UI Design Services for 1C-Bitrix

UX/UI Design for 1C-Bitrix Projects

The first thing we do when we receive a mockup from a "pure" designer is check how it maps onto bitrix:catalog.section and bitrix:catalog.element. In half of cases, a non-standard filter in the mockup means rewriting bitrix:catalog.smart.filter from scratch. And that's not 2 hours — it's a week. That's why we design the interface around Bitrix's component architecture from the start, rather than adapting it after the fact.

Design Specifics for Bitrix

The designer created a product card with three tabs, a custom configurator, and a characteristics accordion. Looks great. Then the developer opens the catalog.element template and realizes the data comes from infoblock properties as a flat list, and related products are pulled via CATALOG_ELEMENT_ID. Half the mockup needs to be redesigned.

Here's what we account for at the design stage:

• Component grid — the interface is built from real Bitrix components: bitrix:catalog, bitrix:sale.basket.basket, bitrix:sale.order.ajax, bitrix:system.auth.form. The designer knows what data each component provides and what parameters it has — they design what can be built without workarounds
• Visual editor — the content manager will edit content through the admin panel. Block structure, flexible sections, manageable banners — all of this is thought through before Figma
• Data from 1C — products, price types like BASE, RETAIL, warehouse stock come via CommerceML. The product card must account for the real data volume: 15 characteristics, 4 price types, stock across 3 warehouses — not the ideal three lines from the mockup
• Semantic markup — H1–H6 hierarchy, Product/Offer microdata, alt texts. All built in at the design stage, because "adding SEO later" means re-coding the templates

Research Before Opening Figma

Before designing — we dig into the data:

• Personas and scenarios — built from Yandex.Metrica data (Webvisor, heatmaps), GA4, interviews. Not abstract "male, 25–45 years old," but specific: "a procurement manager who assembles an order from Excel by article numbers in 10 minutes"
• UX audit of the current site — for redesigns: conversion funnels, session recordings, drop-off points. On one project, we discovered that 40% of users were abandoning their cart at the delivery selection step — because the sale.order.ajax component was rendering 12 delivery services without grouping. We redesigned it — conversion went up
• Competitive analysis — not "looked at pretty websites," but structural analysis: how catalog navigation is organized, how many steps to checkout, how filters work on mobile

Prototyping

A prototype tests the logic before spending budget on visuals:

• Wireframes — layouts of key pages: homepage, catalog (catalog.section), product card (catalog.element), cart (sale.basket.basket), checkout (sale.order.ajax), personal account. We define information priority
• Clickable prototypes — Figma with transitions, modals, filter behavior. The client "touches" the site before development begins
• User testing — moderated sessions with target audience representatives. Catching a navigation problem here is cheaper than after coding 40 component templates

Design System

For each project, we build a scalable system — a shared vocabulary for designers and frontend developers:

• Typography — font pairings optimized for Cyrillic and web rendering. Size scale, line height, heading hierarchy
• Colors — primary, accent, states (hover, active, disabled, error). Contrast ratio meeting WCAG 2.1 AA minimum
• Modular grid — fixed spacing, consistency from 320px to 2560px
• UI components — buttons, forms, cards, tables, notifications, icons. Each with state variants and responsive versions
• Documentation — usage guidelines so a new designer doesn't "reinvent" styles. In practice, without it, within six months the project has 4 shades of gray and 3 versions of the "Buy" button

Mobile-First: Not a Formality, but a Workflow

We design the mobile version first, then scale up:

• Touch-friendly — minimum 44x44px for interactive elements, adequate spacing. Swipe for galleries, pull-to-refresh for the catalog
• Forms — auto keyboard type (inputmode="numeric" for phone, type="email" for email), input masks via IMask, autofill via DaData. Every extra field hurts conversion — this isn't theory, it's what shows up in Metrica funnels
• Responsive images — different resizes and crops for mobile/desktop via <picture> and srcset. Art direction for banners — on mobile, we don't shrink, we show a different crop

Working in Figma

• File structure — pages: research, wireframes, UI kit, mockups by breakpoints, animations. Not a mess, but a navigable project
• Auto Layout — components on Flexbox logic, stretching correctly when content changes. The developer sees the same model in the mockup that will be in CSS
• Variables and Variants — variables for colors and spacing, components with state variants. Theme switching — toggling one collection
• Dev Mode — exact values, SVG/WebP/AVIF export, CSS inspection. The developer gets everything without "guessing by pixels"

Usability Testing

• Moderated tests — real users perform tasks: find a product, add to cart, place an order. We record where they stumble
• A/B tests — two variants on live traffic. Conversion wins, not the art director's opinion
• Heuristic audit — following Nielsen's principles: status visibility, match with expectations, consistency, error prevention
• Accessibility — contrast, keyboard navigation, alt texts, aria labels. Not optional — a requirement

Conversion-Driven Design

• Visual hierarchy — CTAs, prices, promotions highlighted through size, color, contrast. The eye goes where the business needs it — verified through eye-tracking or heatmaps
• Minimal friction — reducing steps to the target action. On one project, we removed mandatory registration at checkout — order conversion increased by 18%
• Social proof — ratings, reviews, case studies, partner logos. Integrated into the design, not stuck at the bottom of the page
• Micro-animations — product flies into the cart, form confirms submission. They guide attention and reduce anxiety when completing an action

Timeline and Deliverables

Final output: a Figma file with a design system and mockups for all pages, an interactive prototype, and component documentation. The developer opens the file — and starts coding, rather than asking "what's the spacing here?"