Дизайн Satom.ru
667

Как увеличить конверсию на 45%? Сделать редизайн

В этой статье мы хотим поделиться своим опытом по редизайну маркетплейса Satom.ru.

В закладки

В 2017 году было принято решение полностью обновить внешний вид каталога. Для редизайна каталога мы использовали концепцию материал дизайна (Material Design), который основывается на принципах минимализма. Объекты сайта плоские с добавлением элементов скевоморфизма (анимации, тени, слои). При этом основные корпоративные цвета остались прежними, так как они хорошо воспринимались пользователями.

Стоит ли делать редизайн в цифрах

В нашей статье мы выделили только некоторые аспекты редизайна каталога. В целом же изменения затронули все страницы каталога и мы получили следующие результаты:

  • показатель отказов снизился на 4%;
  • глубина просмотра возросла на 5%;
  • средняя продолжительность сеанса увеличилась на 9%;
  • увеличение количества сообщений продавцам на 45%;
  • увеличение просмотров номеров телефона на 37%
  • увеличение частоты запроса обратного звонка на 7%;
  • увеличение оформления заказов через корзину на 11%.

Основных причин для масштабного редизайна было несколько:

  • Сбор и анализ больших объемов данных о поведении наших пользователей для усовершенствования UX (опыт взаимодействия пользователей) нашего портала.
  • Из-за стремительного роста мобильного трафика очевидной стала необходимость улучшения мобильной версии нашего сайта и его ориентация на mobile-friendly дизайн.
  • Исправление ошибок, которые были допущены в предыдущей версии сайта. Опыт показал, что специфика работы маркетплейсов имеет ряд отличий от обычного интернет-магазина и эти отличия должны быть учтены и в визуальном оформлении.

Команда специалистов нашего портала в течение нескольких месяцев активно работала над разработкой нового дизайна и в октябре 2017 года каталог Satom.ru полностью перешел на новый интерфейс.

Основные элементы для редизайна

Главная страница

До редизайна:

После редизайна:

Главная страница претерпела множество изменений, но остановимся на главных. Что и почему мы решили поменять :

Шапка сайта

Мы убрали лишние элементы из шапки сайта и сделали акцент на функциях интернет-магазина: сделали более заметной корзину и авторизацию, а также добавили пункт “Мои желания”. Для удобства навигации по сайту сделали плавающую шапку.

Категории товаров

Наш портал является онлайн-гипермаркетом и насчитывает более 8000 категорий товаров, чтобы не перегружать главную страницу мы убрали иконки, а также добавили возможность пролистывать список категорий для более удобной навигации между рубриками портала.

Товары сезона

Так как многие товары сезона могут находится в различных рубриках для облегчения поиска актуальных товаров был добавлен блок “Товары сезона”.

Отзывы

Добавили блок “Отзывы от покупателей” на главную страницу. Такое решение было принято для повышения доверия клиентов к нашему порталу.

Каталог товаров

До редизайна:

После редизайна:

Сортировка

Сделали отдельную строку сортировки товаров, отказавшись от ее отображения выпадающим списком. В старом интерфейсе пользователи не всегда замечали этот блок, а из-за большого количества товаров, поиск товара с самой низкой ценой или наоборот вызывал затруднения у клиентов. Также было уменьшено количество быстрых ссылок на определенные типы товаров, мы оставили только самые популярные.

Фильтры

Изменился внешний вид фильтров, добавлены разделители между фильтрами. Мы провели анализ по частоте использования фильтров и самые популярные переместили в верхнюю часть экрана, чтобы пользователям не приходилось тратить лишнее время на поиск нужных фильтров. Кроме этого фильтры теперь не закреплены вверху страницы, а передвигаются при скролле страницы, чтобы пользователю не приходилось подниматься наверх для выбора необходимых параметров.

Отображение товаров в каталоге

Добавили возможность просматривать превью фотографий товара без перехода в карточку товара, что сократило количество переходов между страницами. Мы стремимся предоставить покупателям честный выбор, поэтому был добавлен рейтинг для отображения объективной информации о компании.

Карточка товара

До редизайна:

После редизайна:

Перезвоните мне

Низкая конверсия функционала “Купить в 1 клик” навела нас на гипотезу, что клиенты не до конца понимают функциональность данной кнопки. Мы решили переименовать ее в “Перезвоните мне”. Результатом данного решения было увеличение конверсии на 12%. Но здесь мы столкнулись с другой проблемой: если клиент делает ошибку в номере телефона, то у нас нет альтернативного способа для связи с ним. Для решения этой проблемы уже в новом дизайне мы рассматриваем возможность добавления дополнительного поля “E-mail” для данной формы связи.

Описание, характеристики, отзывы

Изменилось отображение описания и характеристик товаров, они разбиты на отдельные вкладки. Таким образом, большое количество информации о товаре представлено в удобном формате, что позволило повысить качество восприятия страницы.

Блок “Безопасные покупки”

Сделали акцент на блок “Безопасные покупки”, так как наш портал является маркетплейсом, где размещают свои товары тысячи компаний, поэтому для завоевания доверия покупателей и повышения их лояльности необходимы дополнительные гарантии при совершении сделки.

Результатами редизайна мы остались довольны. Новый интерфейс - это только один из шагов по масштабному преобразованию каталога портала. Он открыл нам новые возможности для изучения поведенческих факторов и потребностей наших клиентов для дальнейшего улучшения нашего портала.

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Satom.ru", "author_type": "self", "tags": [], "comments": 14, "likes": 6, "favorites": 23, "is_advertisement": false, "subsite_label": "design", "id": 51978, "is_wide": false, "is_ugc": true, "date": "Wed, 28 Nov 2018 12:50:22 +0300" }
{ "id": 51978, "author_id": 220272, "diff_limit": 1000, "urls": {"diff":"\/comments\/51978\/get","add":"\/comments\/51978\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/51978"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "possessions": [] }

14 комментариев 14 комм.

Популярные

По порядку

Написать комментарий...
4

Интересно, что сильно выросло количество просмотров номеров телефонов, хотя и в старом и в новом дизайне кнопки расположены в первом экране, видимо, размещение ключевых конверсионных действий рядом тоже не лишено смысла. А так интересная статья, есть чему поучиться

Ответить
1

Уважаемые Satom. Можно попросить у вас продолжение статьи?

Интересует:
1. Как вы организовали безопасность сделки? Какая платежная система задействована.
2. Какой движок маркетплейса?
Самописный или готовый допиливали.

Ответить
1

я вот походил по сайту.
Получилось, по моему не плохо.
Но например. в яндекс маркете (тоже ведь агрегатор),
намного удобнее работать и "безопасность покупки" ощутимее.
Если сравнить с яндексовским "беру", то дизайн сайта устарел

Ответить
0

То есть трафик никак не менялся? Никаких изменений с продвижением в это время не было?

Ответить
1

Продвижение портала - это беспрерывный процесс, но наиболее ощутимый рост был заметен после редизайна портала.

Ответить
0

Очевидно, дизайн портала стал современным, чистым и по юзабилити вроде как всё хорошо. удобно и приятно перемещаться по сайту, интуитивно понятный интерфейс, всё лаконично и по делу. абсолютно не сложно разобраться в поиске нужно товара или как связаться с продавцами ну или как оформить заказ

Ответить
1

Сам себя не похвалишь .... Очевидно, вы зарегистрировались 3 часа назад. И о боже - в профиле ссылка на этот агрегатор, фантастика!

Ответить
0

Кажется незначительные изменения, но визуально приятнее смотрится. Правда тоже интересно какова заслуга именно редизайна в итоговом результате.

Ответить
0

Задолбали бесполезные агрегаторы тиу, регмаркетс и этот еще появился.... Одно и тоже переливается из одного агрегатора в другой.

Ответить
0

"в новом дизайне мы рассматриваем возможность добавления дополнительного поля “E-mail” для данной формы связи."

У нас есть уникумы, которые делают ошибки сразу и в email и в номере телефона :) И это не боты.

Ответить
0

Вполне можно допустить, что показатели стали лучше - новый дизайн очевидно выигрывает у старого, по фото это хорошо видно. Может редизайн и не основной фактор, повлиявший на результат, но с ним сайт явно выглядит современнее, да и интерфейс более понятный.

Ответить
0

Спасибо, что поделились детально опытом, думаю для тех компании которые сейчас решаются на редизайн, этот материал будет отличной помощью. Сайт действительно стал круче и современнее.

Ответить
0

Да, работа была проделана не слабая, а главное - вы очень постарались над тем, чтобы сайт выглядел современно и удобно в мобильной версии. Мобильный трафик уже вплотную подбирается к трафику со стационарных ПК и это очень удобно, когда я могу в столь большом каталоге буквально за пару минут, по дороге на работу, отыскать нужную мне вещь и сделать заказ.

Отдельно хочется отметить возможность заказать у продавца обратный звонок. Очень простая, но вместе с тем удобная функция.

Ответить
0

вы тоже из агрегатора? зарегистрированный 3 часа назад?

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Голосовой помощник выкупил
компанию-создателя
Подписаться на push-уведомления
{ "page_type": "default" }