Удобный каталог с фильтрами по свойствам пряжи, интеграция с 1С и CRM, рост онлайн‑продаж на 40 % за 5 месяцев
Расскажем как мы создали интернет‑магазин для поставщика итальянской стоковой пряжи: проработали сложную структуру ассортимента, настроили автоматизацию учета и продаж, вывели ресурс в топ поисковых систем по ключевым запросам ниши.
Мы проанализировали сайт изнутри и поняли, что на нем установлен очень старый движок. Невозможно просто поменять дизайн, нужно делать новый сайт.
Предстояло перенести страницы товаров на новый сайт и сделать seo перенос. Всего предстояло перенести 20 000 позиций товаров. При этом навигация должна быть максимально простой, ведь основная аудитория возрастная.
Также важно было учесть особые пожелания клиента. Они касались весового товара, проблемы объединения заказов, настройки отключения продаж одной кнопкой.
Разработаем для вас интернет-магазин с широким ассортиментом пряжи и современным дизайном! Сделаем сайт с умным каталогом: клиенты смогут быстро находить пряжу по техническим параметрам и сразу видеть остатки.
Цель проекта
Задачи проекта
-
Сделать умный каталог с фильтрами (состав, метраж, цвет, тип пряжи, и т. д.)
-
Сделать быстрый и удобный процесс заказа товаров на сайте
-
Интегрировать платежную систему (paymaster) и систему доставки
-
Сделать простой и удобный личный кабинет
-
Позволить легко совершать повторные покупки
Ход проекта
Этап 1. Маркетинг
- провели интервью с клиентом
-
проанализировали маркетинговые и рекламные материалы
-
составили карту пользовательских сценариев (например, «рукодельница ищет пряжу для нового изделия», «оптовый покупатель хочет заказать пряжу для своего магазина»)
-
выявили ключевое преимущество — прямые контракты с итальянскими фабриками и стабильные остатки
- частные мастерицы и любители рукоделия
- мастерские и небольшие ателье
- оптовые покупатели — розничные магазины рукоделия
- образовательные учреждения и организаторы мастер‑классов
Создали несколько «аватаров клиента»
Конкуренты
- изучили более 10 сайтов конкурентов и то, как они привлекают внимание к своим продуктам
-
выявили их слабые места — неудобные фильтры, слабая визуализация свойств пряжи
-
составили список из 27 идей
- исследование ЦА
-
исследование компании
-
заложили основу для сайта, который закроет страхи клиентов и подчеркнет преимущества оригинальной итальянской пряжи
Этап 2. Проектирование
На основе аналитики спроектировали структуру интернет-магазина и ключевые функции, чтобы клиенту было удобно выбирать товары, а бизнесу — получать заказы без лишних потерь на пути пользователя.
Основные разделы:- Главная страница.
-
Каталог товаров: фильтры, сортировка.
-
Страница категории товара (например, «пряжа с шелком»).
-
Страница поиска по категориям с удобными фильтрами по типу пряжи.
-
Карточка весового товара с удобным выбором веса в граммах.
-
Карточка штучного товара с описанием.
-
Корзина, в которой можно ввести код купона для получения скидки.
-
Избранное — товары, которые пользователь добавил при просмотре каталога.
-
Личный кабинет: данные клиента, история заказов, текущие заказы.
-
О магазине.
-
Контакты: адрес, телефон и email компании, карта с указанием местоположения.
- фильтрация товаров по свойствам
-
оформление заказа с удобной формой для введения адреса доставки и выбором подходящей службы доставки (СДЭК, Почта России)
-
интеграция системы оплаты
-
интеграция системы доставки
- прототипы страниц
-
документ ТЗ
-
заложена логика интернет-магазина, которая упрощает путь клиента от выбора товара до оформления заказа
Этап 3. Дизайн
Разработали лаконичный и функциональный дизайн, который помогает быстро ориентироваться в ассортименте, сравнивать товары и переходить к заказу без лишних действий.
Что мы сделали:- разработали дизайн с обязательным учетом результатов маркетингового этапа
-
создали адаптивные макеты для планшета и смартфона;
-
проработали UX‑элементы: фильтры товаров, корзину
-
подобрали фотоконтент (профессиональные снимки продукции, процессов ухода)
-
согласовали визуальную концепцию: корпоративные цвета, шрифты, стиль подачи технической информации
- дизайн-макеты всех страниц
- визуальная подача стала коммерчески понятной для клиента и удобной для выбора товаров
Этап 4. Верстка
Что сделали:- сверстали макеты с использованием HTML, CSS и JavaScript;
- оптимизировали скорость загрузки (сжатие изображений, кеширование, отложенная загрузка контента);
- обеспечили адаптивность для различных браузеров и устройств;
- добавили анимацию там, где это уместно.
- готовые HTML страницы сайта
- сайт стал быстрым, стабильным и удобным для пользователей на разных устройствах
Этап 5. Разработка (back-end)
Разработали интернет-магазин на платформе 1С-Битрикс (лицензия «Бизнес»), развернули платформу и настроили базу данных.На этом этапе собрали техническую основу интернет-магазина и связали сайт с ключевыми бизнес-процессами компании. В результате заказчик получил не просто набор страниц, а рабочую систему для онлайн-продаж.
Кроме того, в процессе разработки мы учли несколько важных для заказчика нюансов.
На сайте представлено 2 вида товара: весовой и штучный. Та пряжа, которую интернет-магазин предлагает по весу подвержена влиянию влажности на складах. К примеру, моток весом 1килограмм может терять в весе около 50 грамм.
Для того, чтобы не возникало проблем при продаже такого товара, было решено настроить премодерацию заказов. Менеджер компании Вязьшоп получает предзаказ на сайте, проверяет вес товара и только после этого вносит в систему точные данные. Происходит перерасчет суммы и формируется ссылка для оплаты.
Также дополнительно мы настроили еще одну важную для клиента функцию по выключению продаж на сайте одной кнопкой. Ее магазин использует во время отпуска руководства. На сайте появляется уведомление об уходе магазина в отпуск с указанием сроков.
В админ-панели мы создали систему объединения онлайн-заказов. Она учитывает данные по определенному алгоритму и формирует один большой заказ из нескольких. Администратору удобно обрабатывать заказы, а клиенты быстрее получают товары и экономят на доставке.
Результат:
- альфа-версия сайта
- настроены важные дополнительные функции сайта
Этап 6. Тестирование и запуск
Что мы сделали:- проверили работоспособность всех функций (корзина, оплата, формы заявок)
- протестировали адаптивность на разных устройствах
- устранили баги и оптимизировали производительность
- перенесли сайт на основной сервер и подключили домен
- готовый сайт
- проект вышел на рабочую стадию и был подготовлен к полноценной эксплуатации и продажам
Этап 7. Обучение
Для удобной работы команды заказчика мы:- подготовили видеоинструкции по управлению контентом
- провели онлайн-консультацию для сотрудников
- показали, как работать с товарами, ценами и материалами на сайте
- передали документацию по администрированию
- подготовленная документация
- готовая инструкция
- менеджер заказчика получил навыки самостоятельного управления сайтом
- после запуска заказчик получил не только готовый сайт, но и понятный инструмент, которым команда может управлять самостоятельно
Ключевые функции и интеграции проекта
Готовый проект
Через 3 месяца ресурс вошёл в топ‑10 Яндекса по запросам «итальянская пряжа» и «пряжа на бобинах». Через 5 месяцев добился роста онлайн‑продаж на 40 % относительно периода до запуска.