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

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

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

Для решения задачи мы использовали три инструмента:

1. Парсинг и обработку данных из форм обратной связи
2. Customer Journey Map
3. Конкурентный анализ

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

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

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

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

• Товар: Комплект/Штора/ Тюль
• Цвет/Рисунок
• Ширина/Высота/Кастомизация
• Карниз
• Цена
• Доставка/Заказ

Каждую проблему мы обсудили с клиентом. Зафиксировали в таблице, как будем преодолевать барьеры — с помощью сайта или через оптимизацию бизнес-процессов.

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

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

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

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

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

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

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

В карточке товара предусмотрели кастомизатор. Пользователь указывает ключевые параметры — крепление, длину, ширину, подклад — и видит конечную стоимость выбранной шторы.

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

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

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

В нише два серьезных барьера к совершению покупки:

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

Мы выяснили как западные интернет-магазины преодолевают эти барьеры — высылают образцы ткани.

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

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

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

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

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

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

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

4. Единственный способ показать плотность ткани — деформировать ее. Поэтому мы добавили дополнительные фото в карточке товара, показывающие не только плотность ткани, но и качество строчек и швов.

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

Выбор штор начинается из разных точек, но они пересекаются. Основные точки старта:

• Локация (кухня, гостиная и т.д.)
• Размер
• Цвет
• Плотность ткани
• Тип крепления

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

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

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

Во время аналитики систем статистики мы зафиксировали более 50% переходов с мобильных устройств на сайт гипермаркета. Поэтому важно было сделать интерфейс интуитивно понятным не только на десктопе, но и на мобильных устройствах.
Работа с фильтром и сортировкой листинга товара на экране смартфона должны быть максимально удобными.

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

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