Каталог
Основной вызов проекта заключался в организации гигантского и разнородного ассортимента товаров зоокомплекса. Мы
разработали иерархическую многоуровневую структуру каталога, которая интуитивно понятна пользователю и отражает
специфику бизнеса. Навигация построена по принципу «от общего к частному»: от выбора типа питомца к конкретным
категориям товаров – корма, игрушки, аксессуары, средства ухода и ветаптека.
Для управления этим объемом информации была создана мощная атрибутивная система фильтрации. Её ключевая особенность –
динамическое изменение параметров в зависимости от выбранной категории товаров. В каждом разделе пользователь видит
только релевантные характеристики: в кормах для собак это бренд, размер породы и возраст питомца, в наполнителях для
кошек – тип гранул и наличие аромата, в ветаптеке – назначение препарата и вид животного.
Такой контекстный подход делает навигацию невероятно гибкой и эффективной. Пользователь не перегружен десятками
ненужных параметров и за несколько кликов может найти именно тот товар, который соответствует всем его критериям,
даже в каталоге с тысячами позиций. Этот продуманный механизм кардинально улучшил пользовательский опыт, сократил
время на поиск товара и напрямую повлиял на рост конверсии в покупку.
Страница бренда
Реализован уникальный подход к навигации по брендам, превратив стандартный фильтр в полноценную Brand
Experience-зону. Когда пользователь выбирает конкретный бренд в каталоге, он попадает не просто на страницу с
товарами, а на специально разработанную промо-страницу бренда.
Верхнюю часть такой страницы занимает фирменный баннер с логотипом производителя и кратким описанием бренда.
Здесь мы размещаем ключевую информацию о философии компании, ее истории, особенностях производства и главных
преимуществах продукции. Это позволяет сразу погрузить покупателя в ценности бренда и сформировать доверие перед
просмотром товаров.
Под описанием расположен полный каталог товаров выбранного бренда, доступных в зоокомплексе. Товары сохраняют все
возможности фильтрации и сортировки, что позволяет еще глубже сегментировать ассортимент внутри бренда по типам
товаров, размерам упаковки или другим параметрам.
Такое решение не только упрощает навигацию, но и укрепляет имидж брендов-партнеров и самого зоокомплекса как
эксперта в своей области, что особенно важно для премиальных производителей и ветаптечных брендов.
Карточка товара
Каждая карточка товара была спроектирована как информационный хаб, обеспечивающий максимальную прозрачность и
помогающий пользователю принять осознанное решение о покупке. Центральным элементом страницы стал механизм выбора
варианта товара — например, объема упаковки корма. При переключении между вариантами динамически обновляется не
только цена, но и актуальная информация о наличии в магазинах сети.
Мы интегрировали систему онлайн-отображения остатков, чтобы покупатель сразу видел, в каких именно магазинах зоокомплекса
доступен товар и в каком количестве. Это создает ощущение уверенности и исключает лишние звонки в call-центр.
Подробная информация структурирована по вкладкам: лаконичное маркетинговое описание подчеркивает benefits товара, а в
технических характеристиках представлена вся необходимая информация для сравнения и выбора. Блок отзывов позволяет
оценить опыт других покупателей.
В завершение, алгоритм подбора похожих товаров на основе категории, бренда и характеристик предлагает релевантные
альтернативы, что увеличивает средний чек и помогает пользователю найти оптимальный вариант.
Просмотр изображений
Разработана интерактивная система просмотра изображений, которая позволяет клиентам детально изучить товар перед
покупкой. Функция динамического приближения (zoom) активируется при наведении курсора на основное изображение
товара – пользователь может рассмотреть мельчайшие детали упаковки, состав продукта, текстуры и особенности
конструкции без необходимости увеличения целой страницы.
Для полного погружения в визуальный контент реализована расширенная галерея с возможностью полноэкранного просмотра.
В этом режиме покупатель может листать все доступные изображения товара, включая фото с разных ракурсов, варианты
упаковки и снимки использования в реальных условиях. Все элементы управления адаптированы для мобильных устройств –
жесты сведения и разведения пальцев для масштабирования, а также смахивание обеспечивают естественное взаимодействие
с галереей на любом устройстве.
Эта функция особенно важна для онлайн-продаж, так как компенсирует отсутствие физического контакта с товаром и
повышает доверие к покупке, снижая количество возвратов.
Корзина
Корзина реализована с функцией автоматического распределения товаров по группам в зависимости от их наличия на
складе. Товары разделяются на категории «Готов к оформлению» и «Нет в наличии». Для позиций, которые стали
недоступны после добавления в корзину, сохраняется место в списке с соответствующей отметкой об отсутствии.
Интерфейс корзины включает детализированный расчет заказа: отображается общая стоимость, суммарный вес товаров и
количество бонусных баллов к начислению. Это позволяет пользователю видеть актуальную информацию о заказе перед
переходом к оформлению.
Оформление заказа
Оформление заказа организовано по максимально упрощенному сценарию, не требующему обязательной регистрации на
сайте. Пользователь имеет возможность совершить покупку как гость, указав только необходимую для выполнения
заказа информацию.
На первом этапе оформления запрашивается адрес электронной почты для отправки электронного чека и подтверждения
заказа. Далее пользователь выбирает предпочтительный способ доставки: самовывоз из розничных магазинов
зоокомплекса с указанием удобной точки или курьерская доставка с вводом полного адреса.
Особое внимание уделено системе применения скидок. Покупатель может активировать одну из доступных опций: бонусная
карта для списания накопленных баллов, применить промокод для получения скидки на заказ или
использовать подарочный сертификат. Применение скидки моментально пересчитывает итоговую сумму заказа.
Весь процесс оформления занимает минимальное количество шагов и наглядно показывает прогресс, что снижает
вероятность отказа от завершения покупки.
Выбор способа доставки
Для удобства покупателей реализована комплексная система доставки с тремя вариантами получения заказа.
Процесс выбора осуществляется через интерактивное меню с интеграцией картографического сервиса.
Самовывоз: на карте отображаются все розничные точки зоокомплекса «Три Бобра» с актуальными
адресами и режимом работы. Пользователь может выбрать наиболее удобный магазин для самовывоза прямо на карте.
ПВЗ СДЭК: система отображает карту с сетью пунктов выдачи СДЭК. Пользователь может выбрать подходящий ПВЗ с
учетом расположения, рейтинга и условий работы точки.
Курьерская доставка: для этого варианта доступна функция автоматического определения местоположения. Система
предлагает ввести адрес доставки с возможностью сохранения в адресной книге для последующих заказов.
Все варианты доставки сопровождаются информацией о сроках и стоимости, что позволяет пользователю сделать
осознанный выбор. Интерфейс обеспечивает простой и понятный процесс выбора способа получения заказа.
Личный кабинет пользователя
Процесс входа в личный кабинет организован через единую страницу аутентификации по номеру телефона.
Пользователь вводит свой номер телефона, после чего система автоматически проверяет его наличие в базе данных и
определяет необходимый сценарий — регистрацию нового аккаунта или авторизацию существующего пользователя.
Для подтверждения подлинности номера реализована система верификации через автоматический звонок. На указанный
номер телефона осуществляется звонок, а пользователь вводит последние 4 цифры номера, с которого поступил вызов.
Это обеспечивает безопасность и исключает необходимость запоминать пароли.
После успешной аутентификации пользователь получает полный доступ к личному кабинету с историей заказов, бонусным
счетом и персональными скидками, создавая бесшовный опыт взаимодействия со всеми сервисами зоокомплекса.
Главная страница кабинета
Главная страница личного кабинета предоставляет пользователю сводную информацию о его активности и статусе в системе.
Верхняя часть страницы содержит ключевые показатели активности: количество заказов, оставленных отзывов и
обращений в службу поддержки. Это позволяет пользователю быстро оценить свою вовлеченность с первого взгляда.
Центральная зона предназначена для персональной информации. Здесь отображается аватар пользователя,
подтвержденные контактные данные – электронная почта и номер телефона, а также бонусная карта с текущим
балансом баллов. Эта информация представлена в компактном и наглядном формате.
Система автоматически выделяет незавершенные операции. При наличии неоплаченных заказов в центральной части
появляется соответствующий блок с возможностью мгновенного перехода к оплате.
Навигация организована через левую боковую панель с полным набором разделов для управления аккаунтом.
Пользователь имеет доступ к личной информации, истории заказов, адресам доставки, оставленным отзывам,
детализации бонусной карты, настройкам безопасности и обращениям в службу поддержки. Такая структура обеспечивает
логичную группировку функций и интуитивный доступ ко всем возможностям личного кабинета.
Управление бонусной картой
Страница бонусной карты представляет собой интерактивный интерфейс для управления программой лояльности.
Визуально демонстрируется двустороннее изображение карты: лицевая сторона с дизайном и обратная сторона с QR-кодом.
В разделе отображается текущий баланс бонусных баллов, установленный лимит использования баллов за один заказ, а
также полный номер карты для справки. Особое внимание уделено детализированной истории операций, где отображается
хронология начислений и списаний баллов с указанием даты, суммы и основания операции.
Пользователю доступны дополнительные сервисы: возможность подачи заявки на выпуск пластиковой версии карты и
прямой переход в службу поддержки для решения вопросов, связанных с бонусной программой. Интерфейс обеспечивает
полную прозрачность работы программы лояльности и удобное управление бонусным счетом.
Чат с поддержкой
Реализован современный живой чат для оперативного взаимодействия с клиентами. При открытии чата пользователя
приветствует автоматизированный бот, который предлагает варианты частых вопросов и помогает сориентироваться в
возможностях службы поддержки. Бот работает по принципу первичного фильтра, собирая основную информацию о запросе.
В момент подключения живого оператора к диалогу бот автоматически отключается, обеспечивая плавный переход к
персонализированному общению. Это позволяет избежать дублирования вопросов и сокращает время на решение проблемы.
Чат поддерживает передачу файлов, историю обращений и уведомления о статусе оператора. Пользователь может
продолжить диалог после закрытия чата, так как вся история сообщений сохраняется в личном кабинете.
Landing для программы лояльности
Специально для программы лояльности был создан информационный лендинг, который подробно рассказывает о преимуществах
и условиях бонусной системы. Страница представляет уникальную концепцию программы, разработанную с нуля: от
названия «Три Бобра Card» до специальной бонусной валюты — «бобров» (1 бобёр = 1 рубль).
Особое внимание уделено эксклюзивному дизайну самой бонусной карты, выполненной в фирменном оранжевом цвете
зоокомплекса с уникальным графическим оформлением. На лендинге представлены: правила начисления бонусов, условия
использования карты, преимущества для постоянных клиентов и FAQ с ответами на частые вопросы.
Карта автоматически активируется при регистрации в личном кабинете, предоставляя мгновенный доступ к бонусной
программе. Пользователи могут сразу начать накапливать и тратить «бобры» при совершении покупок. Лендинг также
предоставляет информацию о возможности получения пластиковой версии карты и контакты поддержки по вопросам программы
лояльности.