SON.RU

СОН.ру — интернет-магазин и шоурум спальной мебели и аксессуаров для комфортного сна. Работает с 2006 года, предлагает широкий ассортимент и выгодные цены, что уже оценили более 10 000 покупателей.

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

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

Мы изучили конкурентов, собрали количественные и качественные данные из Google Analytics и нашли ограничения в текущем интерфейсе. Также определили популярные точки входа на сайт — это стало основой нашей работы по проектированию.

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

На сайте уже был реализован блок подбора по параметрам, но он располагался на несколько экранов ниже. Мы изучили карту скроллов и записи сеансов и увидели, что очень мало пользователей использовали подборщик — как правило, многие просто не скроллили ниже второго экрана.

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

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

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

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

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

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

Был добавлен блок «Ваша идеальная спальня» — примеры того, как выглядят товары маркетплейса в интерьере. Этот блок для пользователей, которые вдохновляются готовыми решениями в интерьере. И для тех, кому важно понять, как будет выглядеть комната, кто ценит не только утилитарность, но и эстетику.

На каждой фотографии интерьера представлены товары из ассортимента маркетплейса.

Еще один раздел, который мы вынесли на главную страницу — блок со статьями «СОН.РУ подскажет».

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

Статьи выполняют сразу несколько задач.

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

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

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

Изначально статьи размещались на отдельном домене — пользователи уходили из интернет-магазина и могли не вернуться. По нашей рекомендации статьи были перенесены в раздел на основном сайте.

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

Чтобы поисковая строка была заметной, мы предусмотрели полноценное поле поиска.

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

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

Расширение ассортимента планировалось не в ширину, а в глубину. Поэтому мы вывели основные категории в главное меню, а вложенности разделили на группы, например: взрослые и детские матрасы, наматрасники.

Каждую категорию разбили на подкатегории по типам поиска: цена, размер, жесткость, бренд, производитель и другим.

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

Такое разделение необходимо в первую очередь с точки зрения UX, а также для SEO — каждая подкатегория становится точкой входа.

В версии для смартфонов используется многоуровневая вложенность:

• сначала пользователь выбирает категорию, например, «Матрасы» и проваливается в нее;
• затем выбирает тип матраса;
• а при клике на подкатегорию она раскрывается списком.

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

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

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

В таб-баре также присутствует кнопка для чата с менеджером. Она нужна для вызова консультанта и помощи в выборе.

Мы обновили навигацию в категориях товаров и добавили умные фильтры. Они могут объединять несколько стандартных фильтров. Например: «Беспружинные матрасы до 10 000 руб.» объединяет фильтры «Беспружинные матрасы» и «Стоимость до 10 000 руб.».

Блок с параметрами фильтрации мы свернули в кнопку — так мы максимально расширили товарную сетку и разместили 4 превью товаров в 1 ряд. Таким образом мы улучшили процесс поиска и сравнения товаров.

У параметров можно заметить значок вопроса — это своеобразный онбординг для пользователей. Так мы рассказываем им про характеристики товаров, например, о типах жесткости матраса.

Вопрос с поиском нужного бренда в параметрах фильтрации решили, внедрив в соответствующий блок функционал поиска по брендам.

Также подвергся изменениям блок фильтров с выбором размеров — мы его упростили и сделали более удобным. В старой версии каждый параметр нужно было выбирать с помощью ползунка. Мы предусмотрели выпадающие списки с типовыми размерами. И отдельно вывели чекбокс «Круглый матрас» для тех, кому нужен именно такой тип матрасов.

Все выбранные категории и параметры отображаются в блоке над товарной матрицей.

Так пользователь всегда видит и не держит в памяти, какие фильтры он уже применил — это удобно и упрощает поиск. А ненужные фильтры можно удалить или сбросить. Таким образом пользователь может гибко персонализировать список товаров и расширять или сужать ассортимент по выбранным параметрам.

В мобильной версии система фильтров скрывается автоматически. При желании пользователь может раскрыть все фильтры и тогда они раскрываются на весь экран.

При этом фильтр работает определенным образом — если вы выбрали параметр, например, среднюю жесткость, то все последующие товары будут подбираться из этой категории. То есть можно выбирать разные размеры и бренды, но все матрасы будут средней жесткости.

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

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