Редизайн сайта 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