![](https://cdn.cases.media/image/wide/b45027b0-a6f9-41b4-8a30-b3e0c94a8414.jpg)
Новый дизайн для Bagazhnik.ua: Как мы помогали Thule масштабироваться
На примере кейса по созданию сайта интернет-магазина Bagazhnik.ua команда Турум-бурум показывает, как превратить сложный процесс подбора товара с массой характеристик в простой инструмент для покупки.
От багажника до детских колясок
Bagazhnik.ua – официальный дистрибьютор шведской компании Thule в Украине. Изначально компания специализировалась на багажниках для автомобилей, но вскоре ассортимент товаров компании Thule, соответственно, и компании Bagazhnik.ua стал расти: рюкзаки, детские коляски и прочие аксессуары.
![](https://cdn.cases.media/image/wide/85d76223-47c2-439a-aa41-b089fee0fafc.jpg)
Сайт украинского дистрибьютора уже не справлялся с новой нагрузкой и представители компании обратились к нам со следующими задачами:
- масштабировать и адаптировать сайт под новые категории товаров;
- обновить стилистику сайта, чтобы она соответствовала позиционированию компании как фирмы, которая поставляет современные, высокотехнологичные и качественные товары;
- донести до пользователей, что на сайте с наименованием Bagazhnik.ua можно еще купить рюкзаки, детские коляски и прочие товары;
- подчеркнуть конкурентное преимущество – высокий уровень сервиса и квалификации сотрудников.
Проанализировав текущий сайт и поставленные перед нами задачи, мы решили действовать по RSR-подходу, так как интернет-магазин сильно устарел как визуально, так и технически и точечные изменения не принесли бы желаемого результата.
Погружение в особенности ниши
Покупка багажника для автомобиля – это достаточно сложный процесс, так как покупатель приобретает не просто коробку, а составной механизм с креплениями, направляющими и так далее. И для каждой марки автомобиля, комплектующие разнятся.
Поэтому представители команды «Турум-бурум» поехали в Киев, чтобы погрузиться в особенности бизнеса компании.
Но если процесс покупки и выбора багажника на текущем сайте был настроен хорошо, то процесс покупки других товаров не был продуман, что нам и предстояло сделать.
![](https://cdn.cases.media/image/wide/c1f8b7a7-aa81-4089-8282-9812624b674d.jpg)
Товаров стало больше, но клиенты об этом не знали из-за устаревшего сайта. Как мы помогли решить эту проблему
Консультант магазина Bagazhnik.ua рассказал нам все об особенностях бренда Thule, его историю, миссию, позиционирование, ценности компании и конкурентные преимущества товаров.
Мы досконально изучили, по каким параметрам покупают багажники, какие критерии выбора креплений для велосипеда, как выбрать рюкзак, чемодан и прочее.
![](https://cdn.cases.media/image/wide/5baa045d-6f07-4554-bd6c-4dadc1cff866.jpg)
Товаров стало больше, но клиенты об этом не знали из-за устаревшего сайта. Как мы помогли решить эту проблему
Отдельной задачей было разобраться в продаже колясок, раскрыть их преимущества для пользователя.
Чтобы погрузиться в нишу, разобраться в продуктах, особенностях их выбора и покупки, у нас ушло 30% всего времени работы над проектом.
Мы настолько прониклись идеей бренда, что некоторые из нас даже стали его амбассадорами.
![](https://cdn.cases.media/image/original/315bff2d-3c63-424a-92d4-736de3d76724.gif)
Основным преимуществом компании мы выделили высокий уровень подготовки сотрудников. Они действительно эксперты и знают все об особенностях подбора, крепления и эксплуатации своих багажников к любым маркам машин. Именно это и требовалось транслировать на новом сайте интернет-магазина.
Создать на сайте такой инструмент, который позволит подобрать товар для пользователя, не хуже эксперта.
Создание концепции
Мы решили взять за основу посыл компании Thule, а именно то, что товары бренда сопровождают их владельцев в любой жизненной ситуации. Этот посыл передан через эмоциональные баннеры на ключевых страницах сайта: будь то семейный отдых в горах или прогулка в лесу.
Стилистику выдержали в цветовой гамме официального сайта Thule, чтобы подчеркнуть статус официального дистрибьютора.
![](https://cdn.cases.media/image/wide/e50c5698-e81b-4f2c-8844-27429f94405a.jpg)
Товаров стало больше, но клиенты об этом не знали из-за устаревшего сайта. Как мы помогли решить эту проблему
Чтобы подчеркнуть в стилистике масштабность и монументальность бренда, мы использовали широкоформатный баннер, который не изменяется при уменьшении формата экрана.
![](https://cdn.cases.media/image/original/890ceb36-657b-4fe3-89b0-a5727efc4224.gif)
Ключевые дизайн-решения для проекта Bagazhnik.ua
Главная страница подчеркивает репутацию бренда.
Среди основных проблем главной страницы было:
- сайт был узкоформатным и выглядел устаревшим;
- основной акцент был сделан на креплениях и багажниках, не предусмотрена подача товаров других категорий;
- навигация была реализована вертикальной панелью, что было неудобно для пользователя.
![](https://cdn.cases.media/image/wide/c7060172-5e45-44e7-af74-82964ac28511.jpg)
В новом дизайне в первую очередь проработали шапку:
- информируем, что у компании есть офлайнмагазин;
- сразу уточняем график работы;
- говорим о возможности партнерства.
Таким мы сразу даем актуальные ответы на частые запросы пользователей.
Товаров стало больше, но клиенты об этом не знали из-за устаревшего сайта. Как мы помогли решить эту проблему
![](https://cdn.cases.media/image/wide/64fb82f1-a802-4d88-8065-52b8de20f510.jpg)
Навигация реализована горизонтальным меню, где мы акцентировали внимание пользователей на:
- основных разделах с товарами: крепления и багажники; сумки, рюкзаки и чемоданы; активный отдых с детьми;
- производителе товаров.
На первом экране также выводим дополнительные точки входа и демонстрируем пользователям, что Bagazhnik.ua – это не только про аксессуары для машины, но и про рюкзаки, сумки и прочее.
На следующем экране подробнее рассказываем о Thule в Украине для тех, кто не знаком с этим брендом. И показываем экспертизу непосредственно компании Bagazhnik.ua.
![](https://cdn.cases.media/image/wide/23542ffd-ca28-4c73-b125-060182510479.jpg)
И далее более подробно раскрываем информацию про дополнительные товары компании и подчеркиваем tone of voice сайта через эмоциональные фото. Рассказываем о специальном сервисе, обратившись в который пользователь может получить ответы квалифицированного специалиста на все свои вопросы о товарах фирмы, получить консультацию по правильному подбору багажника или любого другого товара Thule.
![](https://cdn.cases.media/image/wide/4c9d0d2a-ed23-43af-ac2b-dd5a0fddad3a.jpg)
Таким образом, мы разместили на главной странице необходимые точки входа для старта процесса выбора и покупки товара.
Страницы выдачи проработаны под каждую категорию.
Для каждого из трех основных разделов меню мы проработали индивидуальную выдачу в зависимости от особенностей подбора товара.
Выдача для багажников и комплектующих к ним
![](https://cdn.cases.media/image/wide/ee5af4b2-d17f-45d1-b0b9-f145bab15569.jpg)
Задача заключалась в том, чтобы максимально облегчить процесс поиска подходящего багажника для пользователя.
Для этого мы реализовали специальный инструмент, который встречает потенциального покупателя на странице выдачи и выступает в роли консультанта.
В итоге использования пользователь получает только те товары, которые подходят под конкретное авто.
Процесс подбора разбили на три последовательных шага:
Выбор марки автомобиля
![](https://cdn.cases.media/image/wide/be7674ef-a79a-4c55-a072-a87f8dd433e9.jpg)
Выбор модели
![](https://cdn.cases.media/image/wide/fada1f3c-9718-41fa-8c90-771d18344bf6.jpg)
Выбор модификации
![](https://cdn.cases.media/image/wide/5be984e9-b4d1-4baf-94fa-f80783db6de0.jpg)
В результате выдача сводиться к двум-трем моделям. Пользователю уже не требуются фильтры или другие дополнительные инструменты.
Выдача для сумок, рюкзаков и чемоданов
![](https://cdn.cases.media/image/wide/9a79022b-4762-457e-a243-141373fc9700.jpg)
Выдача по разделу «Сумки, рюкзаки и чемоданы» выглядит более традиционно. И так как эти товары близки к нише fashion, то в дизайне мы использовали паттерны, близкие этому направлению.
Панель с фильтрами разместили горизонтально в верхней части экрана. Сделали акцент на плитке товара, где представлено крупное фото и ключевые особенности, которые могут повлиять на принятие решения. Например, как называется серия, размеры, объем, вес, материал, доступный цвет.
В результате общая картина выглядит стильно и очень технологично, как и сама продукция бренда.
Страница портала и выдача для колясок
Перед тем, как попасть на выдачу колясок, пользователь видит страницу портала с детскими колясками, которая наполнена эмоциональными фотографиями, раскрывает особенности разных серий товаров, подчеркивает конкурентные преимущества продукции. И уже после того, как пользователь подготовлен, проинформирован об особенностях товара, переходим к выдаче.
![](https://cdn.cases.media/image/wide/3083ea89-afa4-4749-9652-c45691792719.jpg)
Карточка товара передает конкурентные преимущества
Карточки товара выполнены в едином стиле для всех трех направлений.
- Акцентируем внимание на конкурентных преимуществах компании: бесплатная доставка, официальная гарантия и расширенная гарантия от магазина. Это повышает доверие к компании и влияет на уровень лояльности пользователей.
- Крупные фотографии со всех ракурсов и в разных состояниях (например, как выглядит коляска в сложенном виде, какие у нее габариты), а также видеообзор товара.
![](https://cdn.cases.media/image/wide/58c68d82-65ba-442b-8b7b-972b1e369f87.jpg)
- При помощи кастомных иконок привлекаем внимание к характеристикам, которые важны для принятия решения о покупке.
![](https://cdn.cases.media/image/wide/6472c7e1-e5d2-4a10-aa5f-5f7be1c3aca5.jpg)
- Информация о способах доставки и оплаты, наличии товара в магазине и где его можно забрать.
![](https://cdn.cases.media/image/wide/64a25385-498d-4b5b-b386-b2ff97b677cd.jpg)
Даем максимум информации, которая важна для принятия решения:
- На карточках товара с колясками и багажниками используем инструменты cross-sale, так как здесь предусмотрено большое количество дополнительных аксессуаров и комплектующих.
![](https://cdn.cases.media/image/wide/aac0bd12-bb6b-4a01-8319-eb13b75dc931.jpg)
Если у посетителя остались какие-то вопросы или сомнения, то следующая область – второй экран – разделен на два блока.
В одном блоке собрано максимально полное описание товара, его особенностей, характеристик, инструкции по применению, видеообзор и так далее.
Во втором блоке мы разместили маленькую плитку товара, чтобы пользователь в любой момент мог перейти на следующий шаг воронки.
![](https://cdn.cases.media/image/wide/3cc6ac06-7b67-4481-86af-f74ae7091d02.jpg)
Несмотря на то, что карточки товара визуально практически не отличаются, мы для каждого раздела прорабатывали их отдельно. Так как это три разных направления, с разными воронками продаж и на каждой срабатывают разные триггеры, что важно было учесть при создании дизайна.
Чекаут создали максимально простым для оформления заказа
Еще раз акцентируем внимание на конкурентном преимуществе – бесплатной доставке, так как товар в своем большинстве достаточно габаритный, и это важный пункт в принятии решения о покупке.
Проработали особенности самовывоза и оплаты: в зависимости от выбора города доставки автоматически обновляется доступные способы доставки, актуальные адреса для самовывоза, а также варианты оплаты.
Например, для Киева доступен самовывоз, доставка «Новой Почтой» и курьером компании, а для Николаева доставка курьером недоступна, поэтому этот пункт пропадает, чтобы не путать пользователя.
![](https://cdn.cases.media/image/original/15fdba61-72fc-4566-8c9c-f74fce3f5ab0.gif)
Простой и понятный процесс оформления заказа – это показатель высокого уровня сервиса компании и заботы о клиенте, в результате снижается процент брошенных корзин, а количество лояльных покупателей увеличивается.
Редизайн как ступень к новому витку в развитии бизнеса
Таким образом, благодаря использованию RSR-подхода мы помогли адаптировать сайт под новые задачи бизнеса.
Это позволило компании:
- масштабироваться;
- подчеркнуть свою репутацию;
- повысить уровень сервиса;
- повысить коэффициент конверсии;
- сегментировать пользователей.
Кроме создания UX/UI сайта мы также создали frontend, чтобы как можно более бесшовно реализовать все задуманное в интерфейсе.
Сайт стал свежее, технологичнее и отвечает репутации зарубежного бренда производителя.