Разработка и автоматизация сайта воды «Легенда Жизни»

Никита Чулюков

PM

Клиент

«Барнаульская водяная компания» занимается производством и доставкой питьевой воды. Это один из лидеров рынка Алтайского края по объемам поставки бутилированной воды.

Задача

Перед компанией стояли задачи:

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

Старый сайт работал на движке, который позволял расширить функционал, но это было дорого и недостаточно оперативно — приходилось тратить много часов разработки, чтобы вносить изменения. Например, компания часто проводит акции, запускает новые направления, и чтобы как-то их вписать в сайт, требовалось создать отдельный лендинг и дать на него ссылку с сайта. Вот парочка таких — Детское направление и Эко-направление. Такой процесс негибкий и плохо сказывается на поисковом продвижении.

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

Также ситуация с коронавирусом вырастила спрос на дистанционные покупки не только воды, но еще продуктов и товаров первой необходимости. И у БВК уже была база клиентов, готовая покупать — но старый сайт имел ограничения и не мог предоставить такую возможность.

Результат — новый сайт «Барнаульской водяной компании».

Процесс выбора и заказа воды

Мы на новом уровне реализовали процесс выбора и заказа воды — быстрее, удобнее, с любых устройств.

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

На последнем этапе он был проверен несколькими десятками тестировщиков на предмет логики и удобства пользования.

Структура проекта

Один сценариев для нового пользователя

Экран прототипа мобильной версии

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

Расширение ассортимента

Ассортимент расширили в разы: появились товары бытовой химии, хозяйственные товары, продукты питания, полуфабрикаты, замороженные продукты и даже свежая выпечка. Стало возможно все это купить онлайн и оформить доставку в несколько кликов без звонков операторов.

Дополнительно интегрировали программу лояльности с возможностью рассчитываться бонусами, а также разработали защиту от накрутки бонусов.

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

Обмен данными о заказах — часть схемы

Особенности сайта

Mobile-first

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

Двойной статус у пользователей

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

Здесь также помогли заранее проработанные сценарии пользователей и структура сайта.

Разные сценарии использования сайта — для работы и для дома

Предоплата воды

Реализовали возможность предоплаты бутылей на новом сайте. Можно оплатить бутыли, зафиксировав за собой количество и текущую цену, а заказать их доставку потом.

При этом важно было учесть, чтобы этот процесс был понятным и простым в личном кабинете, а также распространялся только на категорию воды в бутылях.

Бутыль на обмен в заказе

Если пользователь заказывает воду, и у него нет бутыли на обмен — сайт уведомляет его об этом и подсказывает в корзине, что нужно оплатить залоговую бутыль.

Блок «Нет бутыли на обмен?»

Другое: уведомления для допродажи, рекламные баннеры, анимации

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

Акции в корзине

Рекламные баннеры среди карточек товаров

Запуск сайта

Сайт Барнаульской водяной компании посещают сотни тысяч пользователей, поэтому было важно не нарушить процесс работы при запуске.

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