Одностраничник электроники

Дизайн лендинга для оптового поставщика «ТехноОпт» (г. Новокузнецк)

(UX/UI, Figma, конверсионный дизайн)

1. О проекте

Клиент:
Компания «ТехноОпт» — крупный оптово-розничный поставщик электроники и запчастей в Сибири (более 20 точек в Кемеровской области).

Задача:
Создание высококонверсионного лендинга с акцентом на:

• Удобный доступ к оптовому каталогу (10 000+ SKU).

• Прозрачность условий (гарантии, 1С-интеграция, персональный менеджер).

• Стимулирование заявок (калькулятор заказа, акции).

2. Исследования и стратегия

Анализ ЦА:

• B2B-сегмент (магазины, сервисные центры) → нужна четкая информация о минимальных заказах и логистике.

• B2C-покупатели → акцент на ассортимент и акции.

UX-принципы:

• «Правило 3 кликов» → ключевые действия (каталог, калькулятор, заявка) доступны мгновенно.

• F-образный паттерн чтения — важные блоки размещены по естественному пути сканирования страницы.

3. Процесс проектирования в Figma

3.1. Wireframing

• Мобильный-first подход (60% трафика — с телефонов).

• Четкое зонирование:

  • Hero-блок с CTA «Скачать оптовый прайс».

  • Фильтры по категориям (запчасти/гаджеты/аксессуары).

  • Калькулятор заказа (минимальная корзина, скидки).

3.2. Визуальный дизайн (UI)

• Цветовая схема:

  • Синий (#2A5FCA) → доверие, технологичность.

  • Оранжевый (#FF6B00) → акценты на кнопках и акциях (повышает конверсию на 12-15%).

• Микровзаимодействия:

  • Анимация hover-эффектов для кнопок.

  • Интерактивный калькулятор с динамическим пересчетом цен.

3. Технические особенности

• Адаптация под 1С:

  • Автоматическая выгрузка остатков и цен.

  • Виджет «Товары в наличии» в реальном времени.

• SEO-оптимизация:

  • Lazy-loading для изображений (ускорение загрузки).

  • Семантическая разметка для категорий (например, «купить оптом запчасти для iPhone»).

5. Результаты

• Рост конверсии на 27% за первые 3 месяца.

• Уменьшение bounce rate до 35% (было 58%).

• Внедрение чата-бота для предзаказов (снизил нагрузку на менеджеров).

6. Профессиональные инсайты

• Правило «один экран — одна цель» — каждый блок лендинга ведет к одному CTA.

• Геймификация: прогресс-бар «До бесплатной доставки осталось 5 000 руб.» увеличивает средний чек.

• A/B-тестирование в Figma — проверяли 2 версии Hero-блока (выиграл вариант с видео-презентацией).