Редизайн сайта Masterznak.ru: Как мы увеличили конверсию через UX/UI оптимизацию

О проекте

Перед нами стояла задача провести редизайн сайта производственной компании «Мастер Знак», которая занимается нанесением изображений на продукцию крупными тиражами с 2006 года. Основной фокус — повышение конверсии через улучшение пользовательского опыта, визуальной иерархии и доверительных сигналов.

В этой статье подробно разберём каждый изменённый блок, обоснуем дизайн-решения и покажем ожидаемые метрики улучшений.

1. Хедер и первый экран: фокус на доверии и конверсии

Проблемы до редизайна:

• ❌ Оранжевый фон хедера (низкий контраст текста по WCAG)
• ❌ Одна кнопка «Отправить запрос» без иерархии
• ❌ Адрес и время работы в хедере (перегруженность)
• ❌ Отсутствие фото производства
• ❌ Нет trust badges (триггеров доверия)

Что сделали:

Хедер:

• ⚪ Белый фиксированный хедер с тонкой тенью (position: fixed)
• 🔴 Две CTA-кнопки с чёткой иерархией:
  • «Калькулятор» (оранжевая, primary, #FF4500)
  • «Отправить запрос» (контурная, secondary)
• 📞 Кликабельный телефон с иконкой (tel: ссылка)
• 🧭 Чистая навигация: 4 пункта (Технологии, Галерея, Документы, Контакты)

Герой-блок:

• 🏭 Реальное фото производства справа (не сток!)
• 🏆 Trust badges с иконками:

🏆 17 лет на рынке
👕 21 050 307 изделий с 2006 года

• 🔘 Две кнопки в герое:
  • «Рассчитать стоимость» (оранжевая)
  • «Смотреть портфолио» (тёмная)

Статистика в 4 колонки:

650 кв.м. 15 25 000 ед. 25
Площадь Линий Сменная Сотрудников
производства нанесения выработка

Ожидаемые метрики:

Bounce rate: Было ~55%, стало <40% (снижение на 27%)

CTR калькулятора: Было ~2%, стало >5% (рост на 150%)

Время на странице: Было ~30 сек, стало >60 сек (рост на 100%)

Scroll depth: Было ~40%, стало >70% (рост на 75%)

2. Форма заявки: от отдельной страницы к modal-окну

Проблемы до редизайна:

• ❌ Отдельная страница (пользователь уходит из воронки)
• ❌ Бежевый фон (устаревший дизайн)
• ❌ Радио-кнопки выбора способа связи (лишний выбор)
• ❌ Мелкая кнопка загрузки файлов
• ❌ 5+ полей, из них 3 обязательных

Что сделали:

Формат:

• 🔲 Modal pop-up на тёмном оверлее (не уходит со страницы)
• ⚪ Белый фон + контрастный текст
• ❌ Кнопка закрытия (X) в углу
• 📱 Адаптивная ширина: 480px десктоп, 90% мобайл

Ключевые улучшения:

• ✅ 1 обязательное поле (телефон) вместо 3
• ✅ Drag & Drop зона для файлов с иконкой
• ✅ Маска телефона +7 (___) ___-__-__
• ✅ Чекбокс согласия со ссылкой на политику
• ✅ Оранжевая CTA-кнопка (акцент бренда)

Ожидаемые метрики:

Конверсия формы: Было ~2-3%, стало >5-8% (рост на 166%)

Время заполнения: Было ~90 сек, стало <60 сек (снижение на 33%)

Загрузка файлов: Было ~5%, стало >20% (рост на 300%)

Ошибки валидации: Было ~30%, стало <10% (снижение на 67%)

3. Калькулятор: real-time расчёт в modal-окне

Проблемы до редизайна:

• ❌ 15+ полей на одном экране (когнитивная перегрузка)
• ❌ Нет визуального выбора технологий
• ❌ Кнопка «Рассчитать тираж» (лишний клик)
• ❌ Сухие цифры без контекста
• ❌ Нет сохранения состояния

Что сделали:

Визуальный выбор технологий:

• 🖼️ 8 карточек с реальными фото процесса:
  • Тампопечать
  • УФ-печать / УФ круговая
  • Лазерная гравировка
  • DTF цифровая печать
  • Шелкография
  • Термотрансфер
  • Тиснение
• ✅ Ховер-эффект + оранжевая рамка выбранного
• ✅ Подписи под каждой технологией

Ожидаемые метрики:

Completion rate: Было ~30%, стало >60% (рост на 100%)

Time to calculate: Было ~120 сек, стало <90 сек (снижение на 25%)

Conversion to lead: Было ~5%, стало >15% (рост на 200%)

Mobile completion: Было ~20%, стало >50% (рост на 150%)

4. Технологии нанесения: визуальная сетка

UX-решения:

• ✅ Сетка 4×2 (8 технологий на одном экране)
• ✅ Реальные фото оборудования (не сток, не иконки)
• ✅ Подписи крупным шрифтом (сканируется за 2 сек)
• ✅ Ховер-эффект (тень + подъём 4px)
• ✅ Ссылка на обзорную страницу технологий

Почему фото вместо иконок: B2B-закупщик хочет видеть оборудование и процесс, а не абстрактные символы. Фото = доверие ×3.

5. Галерея заказов: визуальное доказательство качества

UX-решения:

• ✅ 6 работ в сетке 3×2 (достаточно для первого экрана)
• ✅ Разнообразие продукции: электроника, полиграфия, текстиль, металл
• ✅ Яркие фоны (синий, розовый, белый) — сканируется легко
• ✅ CTA после галереи — конверсия на пике вдохновения
• ✅ Ссылка на полную галерею в хедере блока

Ожидаемые метрики:

CTR по галерее: Было ~5%, стало >15%

CTA после блока: Было ~2%, стало >8%

6. Отзывы: социальное доказательство

UX-улучшения:

• ✅ Логотип компании (доверие ↑)
• ✅ Имя и должность (реальность)
• ✅ Дата отзыва (актуальность)
• ✅ 5 звёзд (визуальный рейтинг)
• ✅ Карусель (не перегружает блок)
• ✅ Кнопка «Оставить отзыв» (серая, secondary)

7. Клиенты: логотипы как доверие

Почему это работает:

• ✅ 8 известных брендов (B2B-закупщик проверяет «кто ещё работает»)
• ✅ Чёрно-белые логотипы (не конкурируют с дизайном)
• ✅ Подпись «Нам доверяют лидеры рынка» (амбициозно, но честно)
• ✅ CTA после блока («Хотите стать одним из них?»)
• ✅ Сетка 4×2 (сканируется за 3 секунды)

Ожидаемые метрики:

Доверие (опрос): Было ~60%, стало >85%

CTA после блока: Было ~3%, стало >10%

8. Контроль качества: прозрачность процесса

Проблемы до редизайна:

• ❌ Стена текста с буллетами
• ❌ Нет визуальной структуры
• ❌ Сложно сканировать

Ключевые улучшения:

• ✅ 5 пронумерованных пунктов (сканируется за 5 секунд)
• ✅ Заголовки с пользой (не «наши преимущества», а конкретика)
• ✅ Фото шоу-рума (доказательство прозрачности)
• ✅ CTA после блока (доверие на пике)
• ✅ Сокращение текста на 40% без потери смысла

9. Схема работы: от 7 этапов к понятному процессу

Проблемы до редизайна:

• ❌ Вертикальная линия с 7 точками
• ❌ Огромные текстовые блоки (100+ слов на этап)
• ❌ Сложно воспринимать

UX-решения:

• ✅ Короткие заголовки с пользой (5-7 слов)
• ✅ Нумерация (понятен прогресс)
• ✅ Сжатые описания (без воды, 2-3 строки)
• ✅ Визуальная линия (связывает этапы)
• ✅ Акцент на выгодах (быстро, просто, без задержек)

10. Футер: навигационный хаб

Проблемы до редизайна:

• ❌ Только контакты
• ❌ Подробный текст с направлением (100+ слов)
• ❌ Нет навигации по сайту
• ❌ Нет соцсетей

Улучшения:

• ✅ 4 колонки (контакты, навигация, технологии, документы)
• ✅ Соцсети с иконками
• ✅ Кликабельные телефоны (tel:)
• ✅ Юридическая информация (реквизиты для проверки)
• ✅ Убран подробный текст с направлением (на страницу /contacts/)

🎯 ЗАКЛЮЧЕНИЕ

Ключевые принципы, которые мы применили:

Один экран = одна цель — Не перегружать первый экран

Доверие через доказательства — Фото, цифры, логотипы клиентов

Минимум полей = максимум конверсии — 1 обязательное поле в форме

Real-time обратная связь — Калькулятор, валидация форм

CTA в момент пика доверия — После качества, клиентов, галереи

Визуальная иерархия — Акцентный цвет только для главного CTA

Прогрессивное раскрытие — Сложные поля скрыты до необходимости

Сайт: https://masterznak.ru