Редизайн форм

Редизайн на InSales по макетам Figma. Переработка форм, корзины, оформления заказа, карточек товаров. Логика промокодов, заказ в 1 клик, адаптивная верстка.

Краткая информация

  • Платформа InSales
  • Дизайн Figma макеты
  • Задачи UX улучшение
Карточки товаров Редизайн корзины Форма консультации

Задача

Переработать формы, корзину и карточки товаров по макетам Figma. Упростить оформление заказа, улучшить логику промокодов и заказа в 1 клик.

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

Формы

  • Переработан внешний вид форм консультации, обратного звонка, покупки в 1 клик
  • Подгрузка фото, цены и названия товара из доп. поля
  • Форма "Купить в 1 клик" из корзины добавляет все товары с поддержкой скролла
  • Улучшена подсветка ошибок (красная рамка, автопрокрутка к полю)

Корзина

  • Новый дизайн по макетам с отдельной кнопкой промокода
  • "Заказ в 1 клик" формирует заказ по содержимому корзины с учетом промокода
  • Ограничения: промокод недоступен при рассрочке (выводится алерт)

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

  • Форма разделена на три блока: Контакты, Доставка, Оплата
  • Пересчет стоимости с промокодом в разных валютах (тенге, белорусские рубли)
  • Скрыты лишние элементы (подвал, меню, поиск)

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

  • Новый внешний вид (кнопки, иконки, расположение элементов)
  • На десктопе: 4 колонки → 3 колонки
  • Логика кнопки "Подробнее": занимает всю ширину, если нет стрелки
  • Векторные иконки вместо растровых

Промокоды и рассрочка

При оформлении в рассрочку промокод автоматически отключается. Покупатель видит алерт: "Промокод недоступен при рассрочке". Это предотвращает конфликты в логике скидок.

Результат

  • Новый визуальный стиль по макетам Figma
  • Улучшен UX оформления заказа
  • Гибкая логика промокодов и рассрочки
  • Оптимизированные карточки товаров (3 колонки на десктопе)
  • Адаптированы под масштабирование

Технологии

InSales Figma Редизайн UX Формы Корзина Промокоды E-commerce