Интернет-магазин для крупного поставщика канцелярских товаров, разработку которого мы вели параллельно с настройкой ERP заказчиком
Канцелярская крыса
Сибирикс

Канцелярская крыса

Не обидное прозвище, а интернет-магазин канцелярии

Канцелярская крыса

Не обидное прозвище, а интернет-магазин канцелярии
«Поехали, потом заведёмся» — история, которая редко заканчивается хорошо. Но на проекте для крупного поставщика канцелярских товаров этот сценарий оказался вынужденным: у старого сайта не было связки с 1С, что осложняло работу целому отделу. А без импорта с актуальными ценами и остатками в современном е-коммерс делать нечего. Поэтому решили работать параллельно и сообща: студия — над разработкой нового сайта, а заказчик — над настройкой 1С.
  • «Канцелярская крыса» — дальневосточная сеть магазинов канцелярии, которая вот уже 20+ лет находит для своих покупателей классные и качественные канцелярские товары со всего мира. Есть офлайн-точки и интернет-магазин, который за годы работы перестал справляться с текущей номенклатурой товаров в каталоге и требовал масштабного обновления.

Проблемы на старте и задачи проекта

1
Товары на старом сайте заполнялись вручную, специальным отделом в команде заказчика. Из-за этого была большая нагрузка на контент-менеджеров и администраторов: поскольку не было интеграции с 1С, данные о товарах и их остатках приходилось перепроверять вручную.

Новый сайт должен был актуализировать данные о товарах из 1С автоматически, а значит — значительно снизить стоимость текущего обслуживания сайта.
2
Устаревший дизайн, и отсутствие адаптивной версии для мобильных устройств. Новый проект должен был учитывать потребности и ожидания современных пользователей.
3
Неудобный интерфейс оформления заказа, из-за которого создавалась большая нагрузка на менеджеров интернет-магазина: люди предпочитали звонить напрямую, чем оформлять товары к покупке самостоятельно.

Диана
Руководитель проекта
—  На старом сайте был функционал оформления заказа, неудобный с точки зрения UX и UI. Поэтому пользователи чаще звонили менеджерам интернет-магазина напрямую или писали в онлайн-форму на сайте и на электронную почту.

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

Интеграция с 1С

Главная проблема старого проекта — отсутствие интеграции с 1С. Это значит, что все товары на сайте вносились туда вручную через админ-панель. Для этого был выделен целый отдел, который отвечал за актуализацию цен, остатков и товаров в каталоге.

Заказчик понимал, что для масштабирования бизнеса без масштабных изменений в 1С было не обойтись, поэтому планировал их заранее. Нам же предстояло связать обновленную 1С с новым сайтом так, чтобы всё прошло гладко. И это была настоящая командная работа для специалистов студии и заказчика.

Андрей
Разработчик
— Заказчик планировал обновлять 1С, поэтому мы договорились, что интеграцию с ней на стороне сайта кастомизировать не будем — вместо этого заказчик настроит 1С так, как нужно для штатного обмена. Это было не быстро — пласт работ по 1С оказался объемным. Зато теперь всё работает, как часы.

Диана
Руководитель проекта
— Заказчик давно хотел переделывать 1С и наводить в ней порядок. Разработка сайта стала лишним фактором «за». И раз уж взялись делать, то хотелось реализовать импорт сразу по красоте.

Сначала мы запросили выгрузки от заказчика «как есть» и прогнали их через стандартный импорт. Импорт с первого раза как надо не заработал, что при интеграции — норма. Мы нашли причины и перечислили их заказчику. А дальше был долгий путь отладки: заказчик по-разному настраивал выгрузку на своей стороне, а мы проверяли, решает ли это проблемы импорта.

Кирилл
Разработчик
—  На старте у заказчика не было интеграции с 1С, так что нам пришлось отлаживать систему обмена данными с нуля. Сложности добавляло то, что заказчик перенастраивал 1С в процессе разработки проекта — приходилось экспериментировать с выгрузками. Не сразу удачно: иногда оказывалось, что в выгрузках не хватает товаров с разделами, иногда свойства дублировались по 20 раз.

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

Дизайн

Пока заказчик готовил 1С к обновлению, мы занялись дизайном. Старый сайт пестрил сырной тематикой, обыгрывая название и логотип компании. Этот образ и желто-белую цветовую гамму мы взяли за основу.

Диана
Руководитель проекта
— Мы отрисовали классный, яркий и необычный канцелярский дизайн. Даже два. Первый — узнаваемый, дерзкий, как название, но достаточно сдержанный вариант. А вот со вторым решили оторваться по полной: выкрутить бегунок креативности на ≥ 50% и накреативить безбашенности, сыра и много мышей. Заказчик остановился на первой концепции, поскольку на сайт приходят не только b2c-пользователи, но и b2b.

Несмотря на сдержанность концепции, на сайте появились:

  • «сырные» подложки;
  • закругленные, слегка мультяшные, карточки товаров;
  • вместо стандартных ховеров, подчеркивающих ссылки, — слегка мультяшные ховеры, которые их обводят;
  • фоновая анимация в виде карандашных набросков.

Глеб
Дизайнер
— Лого заказчика — очень узнаваемое на Дальнем Востоке, поэтому его мы оставили без изменений. По концепции — сразу попали в точку. И конечно, не смогли пройти мимо 404-й: для неё сделали сырный 3D-объект, оживив его появление анимацией.

Адаптивная версия

«Канцелярская крыса» — тот редкий случай, когда у заказчика на старом сайте вообще не было адаптивной версии. Казалось бы, как вообще такое возможно? Оказалось, вполне — часть целевой аудитории привыкла покупать канцелярию в офлайн-магазинах сети: например родители, собирающие детей в школу, художники и те, кто ищет интересные подарки близким и коллегам. Менеджеры по снабжению оптовых клиентов чаще пользуются сайтом с ПК.

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

«Живая» корзина

Обычно корзина в е-коммерс — отдельная большая страница, куда пользователь переходит для оформления заказа из каталога. На этом проекте корзина «живее»: выезжает на боковой плашке прямо на странице каталога или детальной странице товара и наглядно показывает, хватает ли товаров для бесплатной доставки. Тем самым и средний чек потенциально увеличивается, и пользователю удобнее просматривать выбранные товары.

Андрей
Разработчик
— В корзину встроен счетчик бесплатной доставки. Сумму заказа, с которой активируется бесплатная доставка, заказчик может задать вручную в админ-панели для каждого города.

Оформление заказа

Раньше на сайте «Канцелярской крысы» в разделах «Оплата» и «Доставка» красовались длинные полотна текста с условиями. А оформление заказа чаще всего ложилось на плечи менеджеров интернет-магазина: интерфейс для пользователей был неудобным, поэтому они предпочитали сразу обращаться к менеджерам. Теперь из корзины пользователь сразу попадает на страницу оформления заказа, где он может легко оплатить товары онлайн и выбрать способ доставки:

  • самовывоз из ближайшего магазина;
  • доставка по городу — для городов, в которых есть офлайн-магазины, и для ближайших к ним населенных пунктов (списком может управлять заказчик из админ-панели);
  • доставка по России через Почту России или СДЭК.

Кирилл
Разработчик
— Для связки со СДЭКом мы использовали готовый модуль для Битрикс, а с Почтой России интегрировались по API. С виджетами доставок пришлось повозиться. Отчасти из-за того, что не всегда у нас под рукой была нужная выгрузка из 1С — просто потому что там шли свои работы на настройке.
Оплатить товары можно при получении или сразу на сайте — для онлайн-платежей мы интегрировались с ЮКассой. Юридические лица могут оплачивать товары по счету.

Личный кабинет пользователя

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

Алена
Менеджер
проекта
—  Получился очень яркий и привлекательный сайт — под стать компании и её ассортименту.

Проект можно рассматривать часами, и он не надоест: Канцелярская крыса не перестаёт удивлять и радовать пользователей (и нашу команду разработки) кастомными баннерами на главной, которые задают настроение.

Всегда приятно создавать неповторимые (и одновременно удобные в использовании!!) продукты для настоящих профессионалов своего дела!

Готовый проект