Найди и закажи за полминуты: как мы переработали сайт технического e-commerce
Заказчик
Ankron — интернет-магазин электротехники, кабельно-проводниковой и светотехнической продукции. Работают напрямую с заводами, сотрудничают с десятками брендов, держат в каталоге более 100 000 позиций.
Компания строит сеть по всей Беларуси и делает ставку на ассортимент, цены от прямого поставщика и работу с профессиональной аудиторией.
Задача
Обновить визуальную часть сайта и сверстать ключевые страницы.
Цель редизайна — сделать сайт удобным, адаптивным, быстрым. Продумать навигацию. Упростить главное меню. Сделать поиск основным инструментом. Переосмыслить карточку товара.
Аналитика
Поведение пользователей
Работу начали с анализа аудитории и данных по старому сайту.
Работу начали с анализа аудитории и данных по старому сайту.
Половина пользователей заходила с мобильных устройств. Основные источники — реклама и органика (Google и Яндекс).
Вход чаще всего происходил с главной страницы, дальше — переход в каталог и карточки товаров. Средняя глубина просмотра — 1 страница, время на сайте — около 30 секунд. Пользователь либо сразу находит нужное, либо уходит.
Проблемы интерфейса
Карты кликов и вебвизоры показали слабые места: запутанная структура, незаметный поиск, второстепенные фильтры и перегруженный каталог.
Сценарий «найти товар за 30 секунд» работал только для тех, кто уже знал, куда нажимать.
Аудитория
Портрет покупателя
Основной клиент — мужчина около 35 лет, который работает с техникой и приходит на сайт с конкретной задачей — купить.
Пользователи часто ищут товары по артикулу, активно используют поиск, внимательно изучают характеристики и детали.
Они проходят по структуре каталога, чтобы убедиться, что выбранная позиция полностью соответствует их требованиям.
Дизайн
Дизайн и структура
Проект начинался с конкретных технических требований. Нужно было проработать три ключевые страницы — главную, каталог и карточку товара — в трех разрешениях:
- 1400 пикселей — десктопная версия;
- 1000 пикселей — планшеты;
- 400 пикселей — мобильные устройства.
Фокус на выборе товара
На этапе проектирования главной страницы основной задачей было убрать лишнее и сосредоточить внимание пользователя на выборе товара.
Каталог сделали открытым: продумали порядок разделов и их количество в первом экране, чтобы ключевые категории были видны сразу, без прокрутки.
Главная страница
Минимум баннеров
Отказались от множества баннеров в пользу одного крупного слайдера — с акцентом на смысл и промо, без визуального шума.
Поиск
Акцент на поиске
Поиск сделали ключевым элементом интерфейса. Увеличили его размер, выделили пространство и задали четкую иерархию, чтобы он сразу привлекал внимание и не конкурировал с другими элементами.
Меню сделали лаконичным: только основные разделы без вложенностей. Вся работа с товарами — через каталог, второстепенные страницы вынесли в подвал.
Навигация и айдентика
Меню сделали лаконичным: только основные разделы без вложенностей. Вся работа с товарами — через каталог, второстепенные страницы вынесли в подвал.
Отдельно проработали логотип: в шапке использовали минималистичный черный вариант с желтыми акцентами, в подвале — контурную версию.
Другие изменения
Из лишнего убрали:
- Рабочие часы в форме обратной связи — пользователь их не ищет там.
- Условия работы — слишком общий блок, который дублировал текст из футера и мешал восприятию основной информации.
Зато добавили:
- Сертификаты;
- Преимущества компании;
- Представительства;
- Все бренды.
Главная стала проще, чище и точнее. Все, что мешало выбору, — ушло. Все, что помогало — осталось и стало работать лучше.
Карточка товара
Вся информация на первом экране
Карточка устроена просто и понятно. Основная информация расположилась на одном экране: название, артикул, цена, наличие, основные характеристики, сроки доставки и кнопка «в корзину».
Ниже находится блок с подробными характеристиками, раздел «С этим покупают», а также товары бренда. Это позволяет быстро перейти к похожим позициям, не покидая страницу.
Есть отдельный блок с возможностью задать вопрос по товару, а также карта с точкой самовывоза.
В карточке реализована вкладка «Промокоды». Она открывает подробности текущей акции и показывает, как получить дополнительную скидку.
Личный кабинет
Функциональный кабинет
Личный кабинет сделали максимально прямолинейным и удобным для работы.
Пользователь может отслеживать состояние счета, пополнять баланс, редактировать данные и смотреть историю заказов со всеми деталями: состав, сумма, статус и способ оплаты.
Оплата доступна прямо в кабинете, без переходов. Отдельно реализован раздел с профилем заказов и документами.
Интерфейс построен по принципу приоритета: важная информация — сверху, второстепенная — ниже.
Результат
Сайт под задачи пользователя
Каждый блок выстроен вокруг главной задачи: упростить выбор и оформление заказа.
Макеты адаптированы под все ключевые разрешения. Личный кабинет, корзина, оформление, бренды, сертификаты, новости и контакты — все на месте, все работает.
Клиент остался доволен и получил систему, с которой удобно работать каждый день.
Отзывы
Наши публикации
Обсудим задачу
Мы свяжемся с вами, чтобы задать вопросы и обсудить задачу, цену, сроки и результат.
Это бесплатно и ни к чему вас не обязывает.