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

Кейс: разработка интернет-магазина по продаже штор

Максим Жуков
Сооснователь ecommerce-агентства KISLOROD
Разработка интернет-магазина по продаже штор - KISLOROD
Компания «Томдом» — лидер по продаже готовых штор в онлайне. Сайт компании позиционируется как гипермаркет штор с максимальным количеством поставщиков.

Нам предстояло разработать дизайн для одного из брендов гипермаркета «Томдом» — Helga, и воплотить новый пользовательский опыт покупки штор в онлайне.

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

Типичные барьеры при покупке штор в онлайне

Неопытному пользователю сложно покупать шторы в онлайне. Чтобы они вписались в интерьер, нужно обладать чувством вкуса. Выбирать придется взвешенно: товар приобретается на 5-7 лет.

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

Для решения задачи мы использовали три инструмента:
  1. Парсинг и обработку данных из форм обратной связи
  2. Customer Journey Map (CJM)
  3. Конкурентный анализ

Парсинг и обработка данных из форм обратной связи

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

Но если интернет-магазин работает более пяти лет, анализ данных становится непростой задачей: накапливаются сотни тысяч символов.

В таких случаях мы автоматически вычисляем частоту вхождения тех или иных слов. Кропотливо собираем в таблицу слова, которые встречаются чаще и явно относятся к определенной проблеме. Формируем смысловые блоки, чтобы присвоить к ним популярные вопросы.

В этот раз получились следующие блоки:

  • Товар: Комплект/Штора/ Тюль
  • Цвет/Рисунок
  • Ширина/Высота/Кастомизация
  • Карниз
  • Цена
  • Доставка/Заказ
Парсинг и обработка данных из форм обратной связи - KISLOROD
Каждую проблему мы обсудили с клиентом. Зафиксировали в таблице, как будем преодолевать барьеры — с помощью сайта или через оптимизацию бизнес-процессов.

Топ-5 барьеров, с которыми сталкивается пользователь при покупке штор в онлайне:

  1. Какая ширина, высота штор мне подойдет? Как снять размеры с окна?
  2. Какой цвет выбрать, чтобы он вписался в интерьер?
  3. На мониторе один оттенок цвета, а на смартфоне — другой. Какой цвет на самом деле?
  4. Какой карниз выбрать? Как эти шторы крепятся к карнизу?
  5. Шторы отличаются ценой и качеством, как оценить это соотношение удаленно?

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

Парсинг и обработка данных из форм обратной связи

  1. Какая ширина, высота штор мне подойдет? Как снять размеры с окна?
  2. Какой цвет выбрать, чтобы он вписался в интерьер?
  3. На мониторе один оттенок цвета, а на смартфоне — другой. Какой цвет на самом деле?
  4. Какой карниз выбрать? Как эти шторы крепятся к карнизу?
  5. Шторы отличаются ценой и качеством, как оценить это соотношение удаленно?

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

Работа с Customer Journey Map

Если необходимо увеличить прибыль интернет-магазина — поставьте себя на место клиента, пройдите его путь. Чтобы создать положительный опыт пользователя, мы используем Customer Journey Map (CJM).

Методику работы с инструментом можно узнать в этой статье.
Работа с Customer Journey Map - KISLOROD

Главные идеи:

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

В онлайне мы использовали Quiz — инструмент, который решает задачу коммуникации с пользователем. Клиент отвечает на 5 важных вопросов, на основании которых создается подборка из 20 вариантов штор. Это облегчает пользователю выбор и увеличивает вероятность покупки.
2. Мы рекомендовали команде бренда ограничить ассортимент каталога — выбрать популярные среди покупателей шторы собственного производства. Это одновременно решает две задачи — упрощает выбор и делает возможным кастомизацию товара под запросы покупателя.

3. Не все шторы можно кастомизировать и по ширине, и по высоте одновременно. Мы внедрили функционал, который преобразовывает листинг товаров при действиях пользователя — например, при изменении высоты в превью товара. Благодаря этому в листинге не показываются шторы, высоту которых нельзя изменить или высота которых не соответствует необходимой по умолчанию.
В карточке товара предусмотрели кастомизатор. Пользователь указывает ключевые параметры — крепление, длину, ширину, подклад — и видит конечную стоимость выбранной шторы.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности

Конкурентный анализ

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

В этой статье описан подход к конкурентному анализу: Как провести анализ конкурентов в онлайне на примере готовых отчётов для рынка DIY, egrocery, fashion и электроники

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

В нише два серьезных барьера к совершению покупки:
  1. Отсутствие тактильного ощущения текстуры и плотности ткани;
  2. Сложность выбора цвета или оттенка из-за разной цветопередачи мониторов.

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

Значительный прирост онлайн-покупателей из регионов за последние 2 года свидетельствует о том, что сервис будет востребован. Для клиентов из Москвы предусмотрен еще и шоу-рум.
Макет страницы оформления заказа - KISLOROD

Барьеры, связанные с изображениями

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

Несколько наблюдений:

1. Во время юзабилити-тестирования часто слышим от респондентов: «Фото товара вводит меня в заблуждение, продается только юбка, а на девушке надет еще и пиджак. Я думала, что по этой цене могу купить костюм целиком».

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

2. Многие конкуренты пишут, что материал со 100% защитой от солнца. Но по стоимости шторы понятно, что это «димаут», и ткань будет пропускать солнечные лучи. Чтобы не вводить в заблуждение покупателей и не уступать конкурентам в цене, в карточке пишем «блэкаут», а в кастомизаторе предлагаем покупателю подшить подклад, как делают западные магазины.

3. Делая CJM, выявили еще один барьер: «Классные шторы, хорошо смотрятся в этом интерьере, но будут ли так же смотреться в моём?». В изображении товара важно отчетливо показать цвет и ткань, а еще как смотрятся шторы в интерьере во всю длину. При этом интерьер важно сделать нейтральным, чтобы не перетягивал на себя внимание.
Создание фотографий для интернет-магазина штор - KISLOROD
4. Единственный способ показать плотность ткани — деформировать ее. Поэтому мы добавили дополнительные фото в карточке товара, показывающие не только плотность ткани, но и качество строчек и швов.
Качественные фотографии на сайте по продаже штор - KISLOROD

Инструкции и видео-советы

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

Структура и кастомизация

Выбор штор начинается из разных точек, но они пересекаются. Основные точки старта:
  • Локация (кухня, гостиная и т.д.)
  • Размер
  • Цвет
  • Плотность ткани
  • Тип крепления

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

Это стоит сделать еще на этапе проектирования. Переделка структуры на этапе продвижения приведет к значительным затратам.

Читать статью: Почему проводить анализ поискового спроса до создания интернет-магазина, а не после — это хорошая идея?

Во время аналитики систем статистики мы зафиксировали более 50% переходов с мобильных устройств на сайт гипермаркета «Томдом». Поэтому важно было сделать интерфейс интуитивно понятным не только на десктопе, но и на мобильных устройствах.
Работа с фильтром и сортировкой листинга товара на экране смартфона должны быть максимально удобными.
Адаптивная версия интернет-магазина штор - KISLOROD
Функционал фильтрации на сайте штор - KISLOROD
Доля транзакций в b2c интернет-магазинах постоянно растёт. В большинстве случаев интерфейс проектируется для десктопа, но если ориентироваться на тренд, правильно начинать с мобильных устройств. Или как минимум держать тренд в уме, когда проектируется десктоп — дизайнер должен думать о том, как этот интерфейс будет вести себя на смартфоне.
Страницы оформления заказа на адаптивной версии сайта по продаже штор - KISLOROD

Вместо заключения

Понять, насколько точно дизайн отвечает интересам пользователя, можно только после сборки проекта и запуска первого рекламного трафика. Но благодаря инструментам, которые мы используем в предпроектном анализе, интерфейс MVP максимально приближен к потребностям покупателя. Это сокращает срок окупаемости разработки и снижает трудозатраты на последующие доработки.
Получайте полезный контент от KISLOROD в любой из мессенджеров
При переходе в одну из указанных социальных сетей, вы автоматически соглашаетесь с политикой конфиденциальности
Спасибо, что дочитали до конца.
Если информация была полезна, поделитесь статьёй. Вам не сложно, нам приятно ;)

Рекомендованные статьи