Переработка форм по Figma и UX улучшения

Задача

Магазин healthband.net работает на InSales и пришёл к нам с готовыми макетами в Figma: дизайнер уже переосмыслил формы, корзину и карточки товаров, а нам предстояло перенести это в живую вёрстку темы. Проблема была не в том, что старый интерфейс не работал — он работал, но собирался кусками. Формы консультации, обратного звонка и покупки в 1 клик выглядели по-разному, вели себя непредсказуемо на ошибках и не показывали покупателю, какой именно товар он заказывает. На карточке товара в категории кнопки прыгали по высоте, иконки были растровыми и мылились на ретине, а четыре колонки на десктопе смотрелись тесно.

Отдельный клубок был вокруг денег: промокоды, рассрочка и заказ в 1 клик пересекались в логике так, что скидка могла применяться там, где не должна. Магазин продаёт в нескольких странах, поэтому пересчёт с промокодом нужно держать корректным сразу в нескольких валютах. Задача звучала просто — привести всё к единому виду по макетам Figma и убрать шероховатости в оформлении заказа, — но за этой простотой стояла аккуратная работа с состояниями полей, валидацией и адаптивом.

Что переработали

Формы

Три формы — консультация, обратный звонок и покупка в 1 клик — свели к одному визуальному языку из макета: одинаковые отступы, состояния инпутов и поведение кнопки отправки. Главное, что мы добавили, — контекст заказа прямо в форме, чтобы покупатель видел, что именно он покупает, и подтверждал осознанно.

• Переработан внешний вид форм консультации, обратного звонка, покупки в 1 клик — единая сетка и типографика из Figma
• Подгрузка фото, цены и названия товара из дополнительного поля прямо в тело формы
• Форма «Купить в 1 клик» из корзины подтягивает все товары сразу, с поддержкой скролла внутри списка
• Улучшена подсветка ошибок: красная рамка на невалидном поле и автопрокрутка к первому такому полю, чтобы человек не искал, где он ошибся

Корзина

Корзину пересобрали по макету и вынесли промокод в отдельный, заметный блок — раньше поле терялось. При этом «заказ в 1 клик» научили работать не с одним товаром, а со всем содержимым корзины, сохраняя применённую скидку.

• Новый дизайн по макетам с отдельной кнопкой ввода промокода
• «Заказ в 1 клик» формирует заказ по всему содержимому корзины с учётом применённого промокода
• Ограничение по логике скидок: промокод недоступен при рассрочке, покупателю выводится понятный алерт

Оформление заказа

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

• Форма разделена на три блока: Контакты, Доставка, Оплата
• Корректный пересчёт стоимости с промокодом в разных валютах — тенге и белорусские рубли
• Скрыты лишние элементы страницы: подвал, меню и поиск, чтобы сфокусировать внимание на оформлении

Карточки товаров

Карточку в категории перерисовали по макету и заодно решили давнюю проблему с вёрсткой кнопок. Иконки перевели в вектор, а сетку в категории сделали просторнее.

• Новый внешний вид: кнопки, иконки и расположение элементов по макету Figma
• На десктопе сетку категории перевели с 4 колонок на 3 — товарам стало просторнее
• Логика кнопки «Подробнее»: если рядом нет стрелки, кнопка занимает всю ширину карточки, и высота элементов больше не скачет
• Векторные иконки вместо растровых — чёткие на любых экранах и легче по весу

Результат

Магазин получил формы, корзину и карточки в едином стиле из макетов Figma, с предсказуемым поведением на ошибках и корректными скидками. Оформление заказа стало короче по восприятию и чище визуально, а сетка категорий — готовой к дальнейшему расширению каталога.

• Новый визуальный стиль по макетам Figma во всех ключевых точках покупки
• Улучшен UX оформления заказа: три понятных шага и никаких отвлекающих элементов
• Гибкая логика промокодов и рассрочки без конфликтов в расчёте скидок
• Оптимизированные карточки товаров — 3 колонки на десктопе и стабильная вёрстка кнопок
• Интерфейс адаптирован под масштабирование каталога