Как не потерять индивидуальность и подчеркнуть свои конкурентные преимущества при масштабировании ecommerce-проекта?
На примере кейса по созданию сайта интернет-магазина Bagazhnik.ua команда «Турум-бурум» показывает, как превратить сложный процесс подбора товара с массой характеристик в простой инструмент для покупки.
От багажника до детских колясок
Bagazhnik.ua – официальный дистрибьютор шведской компании Thule в Украине. Изначально компания специализировалась на багажниках для автомобилей, но вскоре ассортимент товаров компании Thule, соответственно, и компании Bagazhnik.ua стал расти: рюкзаки, детские коляски и прочие аксессуары.
Ассортимент товаров в офлайн-магазине Bagazhnik.ua
Сайт украинского дистрибьютора уже не справлялся с новой нагрузкой и представители компании обратились к нам со следующими задачами:
- масштабировать и адаптировать сайт под новые категории товаров;
- обновить стилистику сайта, чтобы она соответствовала позиционированию компании как фирмы, которая поставляет современные, высокотехнологичные и качественные товары;
- донести до пользователей, что на сайте с наименованием Bagazhnik.ua можно еще купить рюкзаки, детские коляски и прочие товары;
- подчеркнуть конкурентное преимущество – высокий уровень сервиса и квалификации сотрудников.
Проанализировав текущий сайт и поставленные перед нами задачи, мы решили действовать по RSR-подходу (англ. revolutionary site redesign, полное обновление стилистики, пересмотр функционала, улучшение пользовательского опыта на сайте. – Прим. ред.) так как интернет-магазин сильно устарел как визуально, так и технически и точечные изменения не принесли бы желаемого результата.
Погружение в особенности ниши
Покупка багажника для автомобиля – это достаточно сложный процесс, так как покупатель приобретает не просто коробку, а составной механизм с креплениями, направляющими и так далее. И для каждой марки автомобиля, комплектующие разнятся.
Поэтому представители команды «Турум-бурум» поехали в Киев, чтобы погрузиться в особенности бизнеса компании.
Но если процесс покупки и выбора багажника на текущем сайте был настроен хорошо, то процесс покупки других товаров не был продуман, что нам и предстояло сделать.
Консультант магазина Bagazhnik.ua рассказал нам все об особенностях бренда Thule, его историю, миссию, позиционирование, ценности компании и конкурентные преимущества товаров.
Мы досконально изучили, по каким параметрам покупают багажники, какие критерии выбора креплений для велосипеда, как выбрать рюкзак, чемодан и прочее.
Отдельной задачей было разобраться в продаже колясок, раскрыть их преимущества для пользователя.
Чтобы погрузиться в нишу, разобраться в продуктах, особенностях их выбора и покупки, у нас ушло 30% всего времени работы над проектом.
Мы настолько прониклись идеей бренда, что некоторые из нас даже стали его амбассадорами.
Наш руководитель отдела по работе с клиентами Александр воодушевленно рассказывает команде о достоинствах рюкзака Thule после поездки в Киев
Основным преимуществом компании мы выделили высокий уровень подготовки сотрудников. Они действительно эксперты и знают все об особенностях подбора, крепления и эксплуатации своих багажников к любым маркам машин. Именно это и требовалось транслировать на новом сайте интернет-магазина.
Создать на сайте такой инструмент, который позволит подобрать товар для пользователя, не хуже эксперта.
Создание концепции
Мы решили взять за основу посыл компании Thule, а именно то, что товары бренда сопровождают их владельцев в любой жизненной ситуации. Этот посыл передан через эмоциональные баннеры на ключевых страницах сайта: будь то семейный отдых в горах или прогулка в лесу.
Стилистику выдержали в цветовой гамме официального сайта Thule, чтобы подчеркнуть статус официального дистрибьютора.
Чтобы подчеркнуть в стилистике масштабность и монументальность бренда, мы использовали широкоформатный баннер, который не изменяется при уменьшении формата экрана.
Широкоформатный баннер в дизайне интерфейса Bagazhnik.ua
Ключевые дизайн-решения для проекта Bagazhnik.ua
Главная страница подчеркивает репутацию бренда.
Среди основных проблем главной страницы было:
- сайт был узкоформатным и выглядел устаревшим;
- основной акцент был сделан на креплениях и багажниках, не предусмотрена подача товаров других категорий;
- навигация была реализована вертикальной панелью, что было неудобно для пользователя.
Так выглядел сайт интернет-магазина Bagazhnik.ua до редизайна
В новом дизайне в первую очередь проработали шапку:
- информируем, что у компании есть офлайнмагазин;
- сразу уточняем график работы;
- говорим о возможности партнерства.
Таким мы сразу даем актуальные ответы на частые запросы пользователей.
Главная страница интернет-магазина Bagazhnik.ua в новом дизайне
Навигация реализована горизонтальным меню, где мы акцентировали внимание пользователей на:
- основных разделах с товарами: крепления и багажники; сумки, рюкзаки и чемоданы; активный отдых с детьми;
- производителе товаров.
На первом экране также выводим дополнительные точки входа и демонстрируем пользователям, что Bagazhnik.ua – это не только про аксессуары для машины, но и про рюкзаки, сумки и прочее.
На следующем экране подробнее рассказываем о Thule в Украине для тех, кто не знаком с этим брендом. И показываем экспертизу непосредственно компании Bagazhnik.ua.
Элементы главной страницы, которые помогают подчеркнуть репутацию бренда
И далее более подробно раскрываем информацию про дополнительные товары компании и подчеркиваем tone of voice сайта через эмоциональные фото. Рассказываем о специальном сервисе, обратившись в который пользователь может получить ответы квалифицированного специалиста на все свои вопросы о товарах фирмы, получить консультацию по правильному подбору багажника или любого другого товара Thule.
Дополнительные точки входа на стартовой странице
Таким образом, мы разместили на главной странице необходимые точки входа для старта процесса выбора и покупки товара.
Страницы выдачи проработаны под каждую категорию.
Для каждого из трех основных разделов меню мы проработали индивидуальную выдачу в зависимости от особенностей подбора товара.
Выдача для багажников и комплектующих к ним
Страница выдачи для багажников и комплектующих к ним
Задача заключалась в том, чтобы максимально облегчить процесс поиска подходящего багажника для пользователя.
Для этого мы реализовали специальный инструмент, который встречает потенциального покупателя на странице выдачи и выступает в роли консультанта.
В итоге использования пользователь получает только те товары, которые подходят под конкретное авто.
Процесс подбора разбили на три последовательных шага:
Выбор марки автомобиля
Выбор модели
Выбор модификации
В результате выдача сводиться к двум-трем моделям. Пользователю уже не требуются фильтры или другие дополнительные инструменты.
Выдача для сумок, рюкзаков и чемоданов
Страница выдачи для раздела «Сумки, рюкзаки и чемоданы»
Выдача по разделу «Сумки, рюкзаки и чемоданы» выглядит более традиционно. И так как эти товары близки к нише fashion, то в дизайне мы использовали паттерны, близкие этому направлению.
Панель с фильтрами разместили горизонтально в верхней части экрана. Сделали акцент на плитке товара, где представлено крупное фото и ключевые особенности, которые могут повлиять на принятие решения. Например, как называется серия, размеры, объем, вес, материал, доступный цвет.
В результате общая картина выглядит стильно и очень технологично, как и сама продукция бренда.
Страница портала и выдача для колясок
Перед тем, как попасть на выдачу колясок, пользователь видит страницу портала с детскими колясками, которая наполнена эмоциональными фотографиями, раскрывает особенности разных серий товаров, подчеркивает конкурентные преимущества продукции. И уже после того, как пользователь подготовлен, проинформирован об особенностях товара, переходим к выдаче.
Страница портала и выдачи для колясок
Карточка товара передает конкурентные преимущества
Карточки товара выполнены в едином стиле для всех трех направлений.
- Акцентируем внимание на конкурентных преимуществах компании: бесплатная доставка, официальная гарантия и расширенная гарантия от магазина. Это повышает доверие к компании и влияет на уровень лояльности пользователей.
- Крупные фотографии со всех ракурсов и в разных состояниях (например, как выглядит коляска в сложенном виде, какие у нее габариты), а также видеообзор товара.
Карточка товара интернет-магазина Bagazhnik.ua
- При помощи кастомных иконок привлекаем внимание к характеристикам, которые важны для принятия решения о покупке.
Подаем информацию в разных форматах: текст, картинка
- Информация о способах доставки и оплаты, наличии товара в магазине и где его можно забрать.
Даем максимум информации, которая важна для принятия решения:
- На карточках товара с колясками и багажниками используем инструменты cross-sale, так как здесь предусмотрено большое количество дополнительных аксессуаров и комплектующих.
Сross-sale блок на карточке товара
Если у посетителя остались какие-то вопросы или сомнения, то следующая область – второй экран – разделен на два блока.
В одном блоке собрано максимально полное описание товара, его особенностей, характеристик, инструкции по применению, видеообзор и так далее.
Во втором блоке мы разместили маленькую плитку товара, чтобы пользователь в любой момент мог перейти на следующий шаг воронки.
Предоставляем исчерпывающую информацию о товаре: видеообзор, особенности, характеристики, инструкция по применению
Несмотря на то, что карточки товара визуально практически не отличаются, мы для каждого раздела прорабатывали их отдельно. Так как это три разных направления, с разными воронками продаж и на каждой срабатывают разные триггеры, что важно было учесть при создании дизайна.
Чекаут создали максимально простым для оформления заказа
Еще раз акцентируем внимание на конкурентном преимуществе – бесплатной доставке, так как товар в своем большинстве достаточно габаритный, и это важный пункт в принятии решения о покупке.
Проработали особенности самовывоза и оплаты: в зависимости от выбора города доставки автоматически обновляется доступные способы доставки, актуальные адреса для самовывоза, а также варианты оплаты.
Например, для Киева доступен самовывоз, доставка «Новой Почтой» и курьером компании, а для Николаева доставка курьером недоступна, поэтому этот пункт пропадает, чтобы не путать пользователя.
Страница оформления заказа
Простой и понятный процесс оформления заказа – это показатель высокого уровня сервиса компании и заботы о клиенте, в результате снижается процент брошенных корзин, а количество лояльных покупателей увеличивается.
Редизайн как ступень к новому витку в развитии бизнеса
Таким образом, благодаря использованию RSR-подхода мы помогли адаптировать сайт под новые задачи бизнеса.
Это позволило компании:
- масштабироваться;
- подчеркнуть свою репутацию;
- повысить уровень сервиса;
- повысить коэффициент конверсии;
- сегментировать пользователей.
Кроме создания UX/UI сайта мы также создали frontend, чтобы как можно более бесшовно реализовать все задуманное в интерфейсе.
Сайт стал свежее, технологичнее и отвечает репутации зарубежного бренда производителя.
Telegram-канал автора статьиЭтот материал – не редакционный
Это – личное мнение его автора. Редакция может не разделять это мнение.
Сообщить об опечатке
Текст, который будет отправлен нашим редакторам: