SON.RU

дизайн
ux/ui
аналитика
Клиент
СОН.ру — интернет-магазин и шоурум спальной мебели и аксессуаров для комфортного сна. Работает с 2006 года, предлагает широкий ассортимент и выгодные цены, что уже оценили более 10 000 покупателей.
Кейс SON.RU - KISLOROD
Цели
Клиент изменил стратегию присутствия бренда на рынке электронной коммерции и решил запустить нишевый маркетплейс, на котором можно будет найти любые товары для сна от лучших производителей. Это влекло за собой кратное увеличение ассортимента, а значит, нужно было точечно доработать дизайн и значительно переработать структуру каталога и навигацию.
Задачи
1
Доработать меню с точки зрения масштабируемости для расширения ассортимента
2
Разработать новую структуру каталога: увеличить количество категорий и изменить логику
3
Спроектировать основные страницы и сделать Facelift главной страницы с учетом смены бизнес-модели
Предпроектный анализ
На стороне клиента уже работала сильная команда разработки. Нас пригласили как стороннего эксперта по UX и дизайну, чтобы мы привнесли свежий взгляд и провели продуктовую аналитику.

Мы изучили конкурентов, собрали количественные и качественные данные из Google Analytics и нашли ограничения в текущем интерфейсе. Также определили популярные точки входа на сайт — это стало основой нашей работы по проектированию.
Главная страница
Одной из основных точек входа является главная страница сайта, поэтому она подверглась самым большим изменениям.
Главная страница SON.RU - KISLOROD
Подбор по параметрам
На сайте уже был реализован блок подбора по параметрам, но он располагался на несколько экранов ниже. Мы изучили карту скроллов и записи сеансов и увидели, что очень мало пользователей использовали подборщик — как правило, многие просто не скроллили ниже второго экрана.

Функционал подбора по параметрам необходимо располагать как можно выше, хотя бы после первого экрана, поскольку это одна из точек входа при поиске подходящего матраса. Мы также оптимизировали сам блок подбора — сократилось количество кликов, а логика стала более очевидной.
Подбор по параметрам SON.RU - KISLOROD
Акции на главной странице
Раньше в блок с акциями можно было попасть из второстепенного меню.
Но так как сейчас речь идёт о маркетплейсе, то это значит, что его аудитория ждет от площадки возможность покупать товары брендов на особых условиях, поэтому для них важны скидки и они следят за ними.

Совместно с клиентом, мы пришли к выводу, что сайту необходим блок с акциями сразу на главной странице.
Акции на главной странице SON.RU - KISLOROD
Блок с популярными категориями
Один из самых популярных блоков на главной странице — блок с категориями товаров, потому что есть определенный сегмент пользователей, которому привычно переходить в каталог именно так.

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

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

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

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

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

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

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

Изначально статьи размещались на отдельном домене — пользователи уходили из интернет-магазина и могли не вернуться. По нашей рекомендации статьи были перенесены в раздел на основном сайте.
СОН.РУ подскажет — блок со статьями
Поиск по каталогу
Из проекта в проект мы видим, что конверсия пользователей, у которых в CJM есть взаимодействие с поиском, выше, чем у тех, кто поиском не пользовался. Поэтому важно вовлечь покупателя в поиск. И потому решение свернуть поиск в иконку кажется странным.

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

Кроме того, предусмотрели весь необходимый набор элементов в выпадающем списке при вводе поискового запроса.
Меню SON.RU - KISLOROD
Категории основного меню
Расширение ассортимента планировалось не в ширину, а в глубину. Поэтому мы вывели основные категории в главное меню, а вложенности разделили на группы, например: взрослые и детские матрасы, наматрасники.

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

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

Такое разделение необходимо в первую очередь с точки зрения UX, а также для SEO — каждая подкатегория становится точкой входа.
Категории основного меню SON.RU - KISLOROD
Меню в мобильной версии
В версии для смартфонов используется многоуровневая вложенность:
  • сначала пользователь выбирает категорию, например, «Матрасы» и проваливается в нее;
  • затем выбирает тип матраса;
  • а при клике на подкатегорию она раскрывается списком.
Такая схема меню значительно экономит время пользователя и сокращает его путь по сайту — нужно меньше кликов, чтобы добраться до нужного товара. Так в мобильной версии можно найти товар всего за пару кликов.
Меню в мобильной версии SON.RU - KISLOROD
Таб-бар
В числе базовых решений для удобства посетителей мы позаимствовали из мобильного приложения таб-бар — полосу меню внизу мобильной страницы.

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

В таб-баре также присутствует кнопка для чата с менеджером. Она нужна для вызова консультанта и помощи в выборе.
Таб-бар SON.RU - KISLOROD
Категории в каталоге
Мы обновили навигацию в категориях товаров и добавили умные фильтры. Они могут объединять несколько стандартных фильтров. Например: «Беспружинные матрасы до 10 000 руб.» объединяет фильтры «Беспружинные матрасы» и «Стоимость до 10 000 руб.».

Блок с параметрами фильтрации мы свернули в кнопку — так мы максимально расширили товарную сетку и разместили 4 превью товаров в 1 ряд. Таким образом мы улучшили процесс поиска и сравнения товаров.
Категории в каталоге SON.RU - KISLOROD
Фильтры каталога
У параметров можно заметить значок вопроса — это своеобразный онбординг для пользователей. Так мы рассказываем им про характеристики товаров, например, о типах жесткости матраса.

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

Так пользователь всегда видит и не держит в памяти, какие фильтры он уже применил — это удобно и упрощает поиск. А ненужные фильтры можно удалить или сбросить. Таким образом пользователь может гибко персонализировать список товаров и расширять или сужать ассортимент по выбранным параметрам.
Фильтры каталога SON.RU - KISLOROD
Фильтры в смартфоне
В мобильной версии система фильтров скрывается автоматически. При желании пользователь может раскрыть все фильтры и тогда они раскрываются на весь экран.

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

Важный момент, даже если свернуть все вкладки фильтров при просмотре на мобильном устройстве, то выбранные параметры в конкретных блоках все равно будут отображаться.
Фильтры в смартфоне SON.RU - KISLOROD
Такое решение обосновано сценарием поведения пользователей, когда они выбирают параметры, а потом сворачивают вкладки фильтров, чтобы перейти к следующим типам фильтрации.
Результаты работы
1
Разработан дизайн-макет для нишевого маркетплейса продажи матрасов, кроватей и принадлежностей для сна
2
Создана новая структура и логика меню с учетом роста количества категорий товаров
3
Разработан и внедрен новый визуальный стиль сайта, который досконально проработан под все виды мобильных устройств
4
Спроектированы основные коммерческие страницы и Facelift главной страницы с учетом новой бизнес-модели
5
Внедрены мощные инструменты персонализации, поиска и фильтрации товаров
6
Кратно увеличен ассортимент каталога за счет добавления новых брендов
Другие кейсы
Оставьте заявку, чтобы обсудить проект и задачи
Кирилл Мяконькин
NEW BIZ менеджер, проконсультирует
и подготовит предложение
*
*
*