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

Изменили визуал, чекаут и юзабилити с учетом сценариев пользователей

Клиент

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

Задача

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

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

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

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

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

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

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

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

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

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

Структура проекта
Структура проекта
Один сценариев для нового пользователя
Один сценариев для нового пользователя
Экран прототипа мобильной версии
Экран прототипа мобильной версии

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

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

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

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

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

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

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

Mobile-first

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

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

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

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

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

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

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

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

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

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

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

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

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

Запуск сайта

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

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

Начать дискуссию