Portfolio · B2B & B2C · DesignOps

Хайдаршин Марат — продуктовый дизайнер

Проектирую сложные интерфейсы для B2B и B2C.
Нахожу решения через исследования (UX-тесты, интервью) и здравый смысл. Говорю на одном языке с бизнесом (метрики, OKR) и разработкой (HTML/CSS)

Резюме / CV

Марат

Product Designer

6+ лет в дизайне Собрал этот сайт на вайбкоде

Контакты

TG: @tarameht

IG: @maratizm

Екатеринбург Remote

EXP // SIMA-LAND

2022 — 2026

E-comm с 1М+ товаров

Sima-land

Оптово-розничный e-commerce с аудиторией 3M+ MAU. Объединяет B2B-закупки для юрлиц и массовый B2C в вебе и приложении

Чем занимался

UX/UI Designer Lead Product Designer

Проектировал пользовательские сценарии всего продукта: от каталога и карточки товара до чекаута и внутренних сервисов. Создал и масштабировал дизайн-системы веба и аппа. За время работы вырос до лида: внедрил продуктовый подход, руководил командой и развивал специалистов

300+ задач

закрыто в GitLab

2 500+ задач

прошло дизайн-ревью

7 человек

в команде

Акценты на оптовых закупках

Переориентация на B2B через интерфейс

Адаптировали продукт под B2B без создания отдельного портала: упростили категории скидок до понятной прогрессивной шкалы и внедрили прозрачный расчёт выгоды прямо в карточке товара

+23%

регистрация юрлиц

+12%

конверсия в заказ

-30%

обращения в саппорт

CustDev JTBD UX-Strategy A/B Testing

Читать

Дизайн-система — не просто UI-kit

Создание дизайн-системы

Разработал архитектуру библиотеки компонентов. Синхронизировал Figma с кодом в Storybook, настроил передачу макетов в разработку через GitLab и внедрил регламент дизайн-ревью

-40%

время на верстку

ускорение сборки макетов

-25%

баги и расхождения UI

100+

компонентов создано

Design System Tokens Storybook GitLab

Читать

EXP // TRUSTME.KZ

2021 — 2022

TrustMe.kz

Экосистема цифровых B2B SaaS-продуктов: от электронного документооборота до сервиса отзывов на бизнес.
Стартап в Казахстане

Чем занимался

UX/UI Designer

Спроектировал логику TrustContract с нуля и дорабатывал интерфейсы по фидбеку первых клиентов: создал сценарии подписания договоров и реестр документов для малого и среднего бизнеса. Участвовал в развитии соседних продуктов

B2B SaaS Startup EDM

Смотреть кейс на Behance

TrustMe.kz — B2B SaaS сервис электронного документооборота

Сервис ЭДО TrustContract Кейс на англ. языке

← Назад ко всем кейсам

Переориентация на B2B через интерфейс

Sima-land — крупный e-commerce с широким ассортиментом товаров (1M+ пользователей). Несмотря на то, что больше 70% выручки приносили юрлица, интерфейс продукта выглядел как классический розничный интернет-магазин. Представитель бизнеса, который впервые попал на наш сайт или приложение, мог даже не догадываться о выгодных возможностях по оптовым закупкам. Как следствие, B2B-пользователи не понимали ценность продукта, не доходили до регистрации и первого заказа. Задача по переориентации была инициирована бизнесом, но конкретные идеи предложены мной и дизайн-командой

Спойлер о результатах

Переориентация крупного e-com с визуального позиционирования под B2C на фактическую ключевую аудиторию — B2B клиентов, которые приносили основную часть выручки

В результате изменений зафиксированы:

+23%

Рост регистраций юридических лиц

-30%

Снижение обращений к менеджерам по вопросам скидок

+12%

Рост конверсии в первый заказ среди B2B пользователей

+14%

Увеличение доли пользователей, взаимодействующих с оптовыми ценами

Моя роль

Как лид дизайн-команды, я занимался следующим:

Инициировал и помог структурировать B2B-исследование
Участвовал в аргументации изменений перед бизнесом
Формировал UX-стратегию переориентации
Декомпозировал проект на направления
Прорабатал ключевые интерфейсные решения
Руководил дизайн-командой, согласовывал изменения

Исследование B2B-сегмента

Чтобы привлечь новых бизнес-клиентов, надо понимать, за что нас ценят наши текущие клиенты. Но на момент старта проекта в компании отсутствовало структурированное понимание B2B-аудитории. Совместно с исследователем из моей команды мы провели опрос и глубинные интервью с ключевыми клиентами

Затем я структурировал полученные результаты в презентацию и представил их бизнесу, вместе с цитатами конкретных пользователей. А также выступил с предложениями, какие боли клиентов мы можем закрыть в интерфейсе

Слайд презентации: Сфера услуг — Примеры слайдов из презентации

Слайд презентации: Розничная торговля: товары для дома — Примеры слайдов из презентации

Основные инсайты — что критично B2B‑клиентам

Помощь с документооборотом

Стабильность поставок

Прозрачность системы скидок
(были проблемы 😞)

Персональный контакт с менеджером

Главный вывод: продукт уже решает задачи бизнеса, но не транслирует это через интерфейс

Выявленные проблемы

При подготовке к переориентации интерфейса мы выявили несколько ключевых проблем:

B2B ценность продукта была слабо раскрыта для новых пользователей
система оптовых скидок была сложной не только для клиентов, но даже для внутренних команд
интерфейс не разделял B2B и B2C сценарии
бизнес-клиенты часто обращались к менеджерам для уточнений

Это напрямую влияло на конверсию новых B2B клиентов, высокую нагрузку на поддержку и масштабируемость продукта

Стратегия изменений

В ходе долгих обсуждений с бизнесом мы пришли к следующему: сохраняем единый интерфейс и не создаём отдельный B2B-продукт, как это сделано у многих конкурентов-маркетплейсов. Это позволило сократить time-to-market, меньше рисков для B2C и единый продукт дешевле в поддержке. Поэтому мы выбрали эволюционный подход с постепенным усилививанием B2B-позиционирования

Отдельный B2B‑портал Отказались

Долгий запуск с нуля
(9–12 месяцев)
Разрыв базы для ИП и совместных закупок, покупающих и оптом, и в розницу
Двойные косты на поддержку двух платформ

Единая платформа Выбрали

Быстрый релиз итерациями без заморозки продукта
Динамическая адаптация UI под сегмент
(B2B, B2C, Guests)
Контроль B2C через guardrail‑метрики без просадки розницы

Я разделил проект на 3 направления, чтобы ускорить запуск и снизить риски:

Коммуникация ценности → B2B-лендинг и редизайн главной страницы
Сегментация B2B и B2C клиентов → Визуальная сегментация цен
Упрощение бизнес-логики → Переработка системы скидок

1. B2B-лендинг и редизайн главной

По данным нашей аналитики, большинство юрлиц занимаются закупками с десктоп-версии сайта: офисные работники делают заказы с ПК и ноутбуков. Поэтому первый пласт работ мы начали с вебверсии. Мы создали отдельную страницу для юрлиц, где структурировали ключевые преимущества Sima-land. Контент полностью базировался на инсайтах из интервью:

оптовые цены и как их получить
помощь с документами

персональный менеджер
международная доставка

Чтобы новые пользователи могли найти эту страницу, разместили несколько точек входа по всему сайту. После запуска мы обнаружили, что у лендинга высокая конверсия в регистрацию юрлиц (почти 18%!) среди тех, кто её нашёл. Однако, несмотря на множество точек входа, заходили на неё нечасто. Поэтому мы решили сделать редизайн главной страницы сайты, чтобы новые клиенты могли сразу увидеть наши преимущества. По моей гипотезе это могло уменьшить конверсию среди физлиц, но получилось убедить бизнес принять риски, учитывая хорошие результаты лендинга

Редизайн главной страницы

Предыдущая главная страница была больше расчитана на B2C: навигация по категориям, акционные предложения и примеры товаров стимулировали спонтанные покупки у физлиц, но не сильно влияли на юрлиц

Гипотеза: если показать B2B-ценность сразу, то вырастет конверсия в регистрацию

Старая главная: ничего про B2B направленность продукта

Новая главная сразу работает на B2B-сегмент: начиная от стартового баннера «Это про Опт» и наших уникальных преимуществ до калькулятора оптовых скидок (про скидки подробнее в пункте 3). Примеры товаров уехали ниже

АБ-тест показал отличные результаты за первый месяц

+23%

Рост регистраций юридических лиц

+12%

Рост конверсии в первый заказ среди B2B‑пользователей

Поэтому новый дизайн главной раскатили на все сегменты

2. Сегментация B2B / B2C через отображение цен

До старта задачи мы уже сегментировали авторизованных пользователей на физлиц и юрлиц внутри базы данных. Однако интерфейс для обеих групп был одинаковым, причём более направленным на B2C

Чтобы привлечь больше B2B клиентов, нам нужно было подготовить интерфейс с учётом интересов оптовых покупателей, но и постараться не отпугнуть B2C клиентов. Поэтому мы ввели отдельное цветовое кодирование для всего, что связано с оптовыми ценами. И начали акцентировать оптовые цены для пользователей юрлиц, а также для незарегистрированных пользователй (guests)

Сегментация отображения цены для B2B, Guests и B2C

Это решение позволило визуально закрепить сегментацию внутри интерфейса. Пользователи стали быстрее находить релевантную цену и усилилось восприятие продукта как платформы для бизнеса, а не розничного магазина

3. Переработка системы скидок

Это был один из самых сложных блоков проекта. Старая система имела сложную логику с разными подусловиями: клиенты часто не понимали как формируется итоговая цена, из-за чего нагрузка на менеджеров поддержки была высокой. И даже менеджеры часто путались в условиях

Старая система скидок

Оптовые скидки начинались при покупках от 10 000 ₽. Однако, больше 20 категорий товаров имели свою систему лимитов, т.к за продажи в разных сегментах отвечали разные департаменты. То есть, если у клиента был куплен товар из общей категории на 9 тысяч + товар из спецкатегории на 1 тысячу, то оптовую скидку он не получал. А если в заказе были товары из нескольких категорий?

Неудивительно, что клиенты путались при расчёте финальной стоимости и обращались в поддержку

Сложная таблица скидок с разными условиями по категориям

Новая система скидок

Я инициировал упрощение системы скидок. После длительных обсуждений с бизнесом (это отдельная история 🙃) компания представила новую прогрессивную систему скидок, которая рассчитывается глобально на весь заказ. Категории больше не влияют на расчёт, цена становится предсказуемой. Ура!

Однако, после упрощения логики важно было сделать её прозрачной в интерфейсе. Мы внедрили три уровня объяснения:

1. Контекстное объяснение в карточке товара рядом с ценой

Для B2B — прогрессбар. Он показывает текущий объём закупок и мотивирует добрать до следующего уровня скидки
Для новых пользователей — CTA с призывом к поиску более низкой цены

2. Модальное окно. В модалке показан принцип расчета и приведён пример расчёта для конкретного товара, который смотрит пользователь

3. Отдельная страница с полной логикой. Для пользователей, у которых остались вопросы, дали возможность подробно посмотреть как устроена система скидок на отдельной странице. С правилами расчёта, уровнями скидок и пошаговым примером рассчёта

Страница с полной логикой системы оптовых скидок

Пользователи начали понимать, как управлять скидкой

-30%

Снижение обращений к менеджерам по вопросам скидок

+14%

Увеличение доли пользователей, взаимодействующих с оптовыми ценами

Корнер-кейсы и подводные камни

Смешанная корзина

Товары из разных департаментов в одном заказе на 10 000 ₽ не суммировались для оптовой скидки

Решение: свели 20+ правил к единому порогу на весь заказ

Мало трафика на лендинг

B2B‑лендинг конвертил в регистрацию почти 18%, но новые юрлица шли сразу в каталог, минуя баннеры

Решение: вынесли B2B‑ценность и калькулятор прямо на главную

Риск уронить B2C

Оптовые акценты на главной и в ценах могли отпугнуть розничных покупателей

Решение: АБ‑тест
с guardrail‑метриками B2C
и разные акценты по сегментам

Результаты

После внедрения изменений мы зафиксировали позитивную динамику ключевых B2B-метрик:

+23%

Рост регистраций юридических лиц

-30%

Снижение обращений к менеджерам по вопросам скидок

+12%

Рост конверсии в первый заказ среди B2B пользователей

+14%

Увеличение доли пользователей, взаимодействующих с оптовыми ценами

Изменения также позволили снизить зависимость от ручной коммуникации менеджеров и сделать B2B-сценарии более масштабируемыми

Что я вынес из проекта

UX напрямую влияет на стратегическое позиционирование продукта

Сложная бизнес‑логика почти всегда конвертируется в UX‑проблему

Сегментация должна жить в интерфейсе, а не только в аналитике

← Назад ко всем кейсам Следующий кейс: Дизайн-система и DesignOps →

← Назад ко всем кейсам

Создание дизайн-системы Sima-land

Дизайн-система Sima-land: типографика, цвета и компоненты

Когда я присоединился к команде Sima-land, дизайн-система уже существовала, но по сути представляла собой несколько устаревший UI-kit без полноценной архитектуры. Я увидел как долго и неудобно команде работать и предложил примеры реализации, как это исправить. Лид команды оценила перспективы и выделила половину моего недельного ресурса на разработку полноценной дизайн-системы

Спойлер о результатах

-40%

Сокращение времени на вёрстку новых экранов разработкой

Ускорение механической работы дизайнеров и сборки макетов

-25%

Снижение багов и расхождений UI на проде

100+

Компонентов создано в единой архитектуре (Web и App)

Существующие проблемы

Проблемы со стороны дизайнеров

Проблемы со стороны разработки

Разработчики тоже были недовольны существующими библиотеками, поэтому предложение о создании полноценной дизайн-системы встретили с энтузиазмом

Первые шаги

Лид frontend-разработки выделил мне 1 core-разработчика Storybook.
Вместе мы выделили ключевые принципы:

Дизайн-система — это производственная инфраструктура продукта, а не просто библиотека макетов

Figma — источник истины в виде подробно описанных гайдов.
На их основе дизайнеры собирают UI-kit, а разработчики — библиотеку в Storybook

Первый шаг — пересмотр 11 брейкпоинтов. Брейкпоинты нужны разработке, чтобы учитывать изменения дизайна на разных размерах экрана. Совместный аудит легаси показал, что 3 брейкпоинта избыточны, а значит их можно сократить до 8

Первый результат

11 8

Сокращение брейкпоинтов
(-27% визуальных состояний)

Ощутимое снижение ручной перерисовки макетов дизайнерами

Архитектура системы

Архитектуру дизайн-системы решили строить по принципу атомарного дизайна:

Атомы — дизайн-токены (цвета, шрифты, стили, иконки)
Молекулы — основные UI-элементы (инпуты, контролы, кнопки итд)
Организмы — комбинации молекул (модалки, попапы итд), молекулы с бизнес-логикой

Атомы уже были реализованы, их трогать не стали. Нам предстояло пересоздать молекулы, объединив деск и моб в единую адаптивную архитектуру. И затем изобрести уровень организмов для ускорения общей работы

Дисклеймер: работа велась в 2022 году (до появления переменных Variables в Figma в 2023 году). Архитектура состояний позднее перенесена на Variables

Создание компонентов

Разберём структуру молекулы на примере инпута. Каждый компонент строился по принципу Dumb/Smart:

Dumb — для базовой структуры: автолэйаут, размеры, наполнение, отступы. Имя компонента .Input_dumb начинается с точки, чтобы он не попал в панель Assets

Smart — для логики состояний и вариативности применения. Этот компонент уже добавляется в Assets и используется в макетах

Dumb-компонент (.Input_dumb) — Dumb-компонент

Smart-компонент: сетка вариантов и состояний — Smart-компонент

Такой подход позволяет упростить масштабирование и изменение компонентов. А также экономит оперативную память в макетах Фигмы

На выходе получаем готовый к использованию компонент с гибкой системой настроек в панели свойств

пример настройки компонента под конкретный кейс

На первом этапе я лично собрал больше 40 базовых компонентов уровня молекул для веба. Новые компоненты легко адаптировались между брейкпоинтами и включали в себя все необходимые состояния. После создания каждого компонента я проводил демо команде, показывая как с ними работать

Можно привести пример ускорения работы дизайнеров:

До ≈ 11 часов

Если сборка первого брейкпоинта занимает ≈ 1 час, то подготовка всех 11 брейкпоинтов занимает ≈ 11 часов (каждый экран приходится делать вручную)

После 2,5–3 часа

Сборка первого брейкпоинта занимает ≈ 1,5 часа (на правила респонсива автолейаутов). Зато сборка всех последующих экранов занимает лишь около 1 часа суммарно (меньше 10 минут на 1 брейкпоинт)

Это освободило огромное количество времени дизайнеров, а также ускорило онбординг новых сотрудников. Став лидом команды, я занял это время внедрением продуктового подхода. Из «операторов Фигмы» дизайнеры со временем превратились в полноценные продуктовые единицы. Но это уже другая история 🙂

Результат внедрения современных компонентов

40+

Базовых молекул собрано на старте

Ускорение механической работы дизайнеров

Product UX

Ресёрч, аналитика и работа с метриками

Подготовка гайдлайнов и реализация в коде

Ни одна дизайн-система не может считаться полной без исчерпывающей документации. Являясь центральным источником достоверной информации, гайды содержат рекомендации по элементам и нюансам дизайна. К каждому компоненту я написал гайд с технической информацией. Каждая формулировка согласовывалась с разработкой, чтобы быть ёмкой и однозначной

Пример части гайда на инпут:

Гайд на инпут: Размеры и расположение, Боковые части, Подпись — Размеры, боковые части и подпись

Гайд на инпут: Поведение и Валидация — Поведение и валидация

После согласования всех нюансов в гайде, разработка реализовала компонент в коде в библиотеке Storybook. Скриншоты реализации инпута:

Также вместе с core-разработчиком были задокументированы:

Порядок внесения изменений в дизайн-систему
Процессы версионирования и деприкации компонентов

Это позволило сделать систему менее зависимой от конкретного человека

Фидбек по результатам со стороны фронтенд-разработки

-40%

Сокращение времени на вёрстку новых экранов

-25%

Меньше багов, связанных с UI‑несостыковками

Снижение количества уточняющих вопросов

Бизнес-эффект

-40%

Сокращение времени на вёрстку новых экранов разработкой

Ускорение механической работы дизайнеров и сборки макетов

-25%

Снижение багов и расхождений UI на проде

100+

Компонентов создано в единой архитектуре (Web и App)

Создание адаптивной дизайн-системы позволило:

Ускорить time-to-market

Снизить операционные издержки

Повысить стабильность UI на проде

Внедрить продуктовый подход в команде дизайнеров

После сборки 40+ базовых молекул я обучил команду проектированию дизайн-систем. Совместными усилиями мы собрали уровень организмов для веба, а затем по аналогии создали дизайн-систему для мобильного приложения: со своими нюансами и другой командой разработки. В итоге общая база выросла до 100+ компонентов в Web и App

← Назад ко всем кейсам ← Предыдущий кейс: Переориентация на B2B