Главное о кейсе
«Канцелярская крыса» — дальневосточная сеть магазинов канцелярии, которая вот уже 20+ лет находит для своих покупателей классные и качественные канцелярские товары со всего мира. Есть офлайн-точки и интернет-магазин, который за годы работы перестал справляться с текущей номенклатурой товаров в каталоге и требовал масштабного обновления.
Как проект изменил жизнь пользователей
— Товары на старом сайте заполнялись вручную, специальным отделом в команде заказчика. Из-за этого была большая нагрузка на контент-менеджеров и администраторов: поскольку не было интеграции с 1С, данные о товарах и их остатках приходилось перепроверять вручную.
Новый сайт актуализирует данные о товарах из 1С автоматически, а значит — значительно снизить стоимость текущего обслуживания сайта.
— Устаревший дизайн, и отсутствие адаптивной версии для мобильных устройств. Новый проект учитывает потребности и ожидания современных пользователей.
— Неудобный интерфейс оформления заказа, из-за которого создавалась большая нагрузка на менеджеров интернет-магазина: люди предпочитали звонить напрямую, чем оформлять товары к покупке самостоятельно. На новом сайте удобный функционал корзины, личный кабинет, интеграции со службами доставки и оплаты.
Бизнес-задача и ее решение
Интеграция с 1С
Главная проблема старого проекта — отсутствие интеграции с 1С. Это значит, что все товары на сайте вносились туда вручную через админ-панель. Для этого был выделен целый отдел, который отвечал за актуализацию цен, остатков и товаров в каталоге.
Заказчик понимал, что для масштабирования бизнеса без масштабных изменений в 1С было не обойтись, поэтому планировал их заранее. Нам же предстояло связать обновленную 1С с новым сайтом так, чтобы всё прошло гладко. И это была настоящая командная работа для специалистов студии и заказчика.
Дизайн
Старый сайт пестрил сырной тематикой, обыгрывая название и логотип компании. Этот образ и желто-белую цветовую гамму мы взяли за основу. Мы отрисовали классный, яркий и необычный канцелярский дизайн. На сайте появились «сырные» подложки, закругленные, слегка мультяшные карточки товаров, фоновая анимация в виде карандашных набросков.
Адаптивная версия
«Канцелярская крыса» — тот редкий случай, когда у заказчика на старом сайте вообще не было адаптивной версии. Но невозможно масштабировать бизнес, выходя за рамки домашнего региона, и успешно продвигать сайт в интернете, без адаптива. Маркетплейсы приучили пользователей заказывать все в интернете с телефона, да и поисковые системы считают адаптив необходимым. Поэтому мы сделали адаптивный интерфейс легким, понятным и максимально функциональным — таким, каким ожидает увидеть мобильную версию интернет-магазина пользователь, искушенный благами 21 века.
Оформление заказа
Теперь из корзины пользователь сразу попадает на страницу оформления заказа, где он может легко оплатить товары онлайн и выбрать способ доставки: самовывоз из ближайшего магазина; доставка по городу — для городов, в которых есть офлайн-магазины, и для ближайших к ним населенных пунктов (списком может управлять заказчик из админ-панели); доставка по России через Почту России или СДЭК. Для связки со СДЭКом мы использовали готовый модуль для Битрикс, а с Почтой России интегрировались по API. Для онлайн-платежей мы интегрировались с ЮКассой, юридические лица могут оплачивать товары по счету.
Личный кабинет пользователя
Личный кабинет был и на старом сайте, но пользователи редко в него заглядывали, поскольку работали чаще всего напрямую с менеджерами интернет-магазина. Новый личный кабинет мы сделали проще и понятнее визуально, оставив привычные разделы: историю заказов и личные данные, которые можно редактировать.
Крафт (мастерство), реализация, технические детали
«Живая» корзина
Обычно корзина в е-коммерс — отдельная большая страница, куда пользователь переходит для оформления заказа из каталога. На этом проекте корзина «живее»: выезжает на боковой плашке прямо на странице каталога или детальной странице товара и наглядно показывает, хватает ли товаров для бесплатной доставки. Тем самым и средний чек потенциально увеличивается, и пользователю удобнее просматривать выбранные товары.
Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком
Нам не пришлось кастомизировать интеграцию с 1С на стороне сайта, т.к. заказчик планировал ее обновлять — заодно и настроил ее так, как нужно для штатного обмена.
Скриншоты