В этой статье мы хотим поделиться своим опытом по редизайну маркетплейса Satom.ru.
В 2017 году было принято решение полностью обновить внешний вид каталога. Для редизайна каталога мы использовали концепцию материал дизайна (Material Design), который основывается на принципах минимализма. Объекты сайта плоские с добавлением элементов скевоморфизма (анимации, тени, слои). При этом основные корпоративные цвета остались прежними, так как они хорошо воспринимались пользователями.
Стоит ли делать редизайн в цифрах
В нашей статье мы выделили только некоторые аспекты редизайна каталога. В целом же изменения затронули все страницы каталога и мы получили следующие результаты:
- показатель отказов снизился на 4%;
- глубина просмотра возросла на 5%;
- средняя продолжительность сеанса увеличилась на 9%;
- увеличение количества сообщений продавцам на 45%;
- увеличение просмотров номеров телефона на 37%
- увеличение частоты запроса обратного звонка на 7%;
- увеличение оформления заказов через корзину на 11%.
Основных причин для масштабного редизайна было несколько:
- Сбор и анализ больших объемов данных о поведении наших пользователей для усовершенствования UX (опыт взаимодействия пользователей) нашего портала.
- Из-за стремительного роста мобильного трафика очевидной стала необходимость улучшения мобильной версии нашего сайта и его ориентация на mobile-friendly дизайн.
- Исправление ошибок, которые были допущены в предыдущей версии сайта. Опыт показал, что специфика работы маркетплейсов имеет ряд отличий от обычного интернет-магазина и эти отличия должны быть учтены и в визуальном оформлении.
Команда специалистов нашего портала в течение нескольких месяцев активно работала над разработкой нового дизайна и в октябре 2017 года каталог Satom.ru полностью перешел на новый интерфейс.
Основные элементы для редизайна
Главная страница
До редизайна:
После редизайна:
Главная страница претерпела множество изменений, но остановимся на главных. Что и почему мы решили поменять :
Шапка сайта
Мы убрали лишние элементы из шапки сайта и сделали акцент на функциях интернет-магазина: сделали более заметной корзину и авторизацию, а также добавили пункт “Мои желания”. Для удобства навигации по сайту сделали плавающую шапку.
Категории товаров
Наш портал является онлайн-гипермаркетом и насчитывает более 8000 категорий товаров, чтобы не перегружать главную страницу мы убрали иконки, а также добавили возможность пролистывать список категорий для более удобной навигации между рубриками портала.
Товары сезона
Так как многие товары сезона могут находится в различных рубриках для облегчения поиска актуальных товаров был добавлен блок “Товары сезона”.
Отзывы
Добавили блок “Отзывы от покупателей” на главную страницу. Такое решение было принято для повышения доверия клиентов к нашему порталу.
Каталог товаров
До редизайна:
После редизайна:
Сортировка
Сделали отдельную строку сортировки товаров, отказавшись от ее отображения выпадающим списком. В старом интерфейсе пользователи не всегда замечали этот блок, а из-за большого количества товаров, поиск товара с самой низкой ценой или наоборот вызывал затруднения у клиентов. Также было уменьшено количество быстрых ссылок на определенные типы товаров, мы оставили только самые популярные.
Фильтры
Изменился внешний вид фильтров, добавлены разделители между фильтрами. Мы провели анализ по частоте использования фильтров и самые популярные переместили в верхнюю часть экрана, чтобы пользователям не приходилось тратить лишнее время на поиск нужных фильтров. Кроме этого фильтры теперь не закреплены вверху страницы, а передвигаются при скролле страницы, чтобы пользователю не приходилось подниматься наверх для выбора необходимых параметров.
Отображение товаров в каталоге
Добавили возможность просматривать превью фотографий товара без перехода в карточку товара, что сократило количество переходов между страницами. Мы стремимся предоставить покупателям честный выбор, поэтому был добавлен рейтинг для отображения объективной информации о компании.
Карточка товара
До редизайна:
После редизайна:
Перезвоните мне
Низкая конверсия функционала “Купить в 1 клик” навела нас на гипотезу, что клиенты не до конца понимают функциональность данной кнопки. Мы решили переименовать ее в “Перезвоните мне”. Результатом данного решения было увеличение конверсии на 12%. Но здесь мы столкнулись с другой проблемой: если клиент делает ошибку в номере телефона, то у нас нет альтернативного способа для связи с ним. Для решения этой проблемы уже в новом дизайне мы рассматриваем возможность добавления дополнительного поля “E-mail” для данной формы связи.
Описание, характеристики, отзывы
Изменилось отображение описания и характеристик товаров, они разбиты на отдельные вкладки. Таким образом, большое количество информации о товаре представлено в удобном формате, что позволило повысить качество восприятия страницы.
Блок “Безопасные покупки”
Сделали акцент на блок “Безопасные покупки”, так как наш портал является маркетплейсом, где размещают свои товары тысячи компаний, поэтому для завоевания доверия покупателей и повышения их лояльности необходимы дополнительные гарантии при совершении сделки.
Результатами редизайна мы остались довольны. Новый интерфейс - это только один из шагов по масштабному преобразованию каталога портала. Он открыл нам новые возможности для изучения поведенческих факторов и потребностей наших клиентов для дальнейшего улучшения нашего портала.
Источник: https://vc.ru/design/51978-kak-uvelichit-konversiyu-na-45-sdelat-redizayn
