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