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

1. Вводная задача от заказчика, проблематика, цели

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

Дизайн

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

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

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

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

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

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

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

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

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

3. Результаты сотрудничества

Удобный яркий сайт, в меру сдержанный, в меру дерзкий.