Разобрали и собрали заново: обновили цифровую инфраструктуру крупной сети Оптик 3Z

Оптика 3Z — сеть салонов оптики, которая уже 17 лет проверяет зрение, подбирает линзы и изготавливает очки для клиентов по всей России. У компании есть медицинские оправы, контактные линзы, солнцезащитные очки мировых брендов и собственной марки.

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

1. Самостоятельно добавить что-то на сайт — сложно и затратно по времени;

2. Менеджеры тратили ресурсы на обработку заказов вручную;

3. Интеграции сайта с другими частями системы не работали стабильно.

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

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

Задача: заново выстроить цифровую инфраструктуру — от вёрстки по готовому дизайну до связки с 1С и автоматизации внутренних процессов. 

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

Стратегия развития компании ещё формировалась, и многие сценарии уточнялись в процессе. Мы учитывали, что подход может меняться, а часть решений и документации будут дорабатываться на ходу. Оптика сейчас на этапе бурного развития и идеи опережают возможности. Поэтому мы сначала изучили бизнес и провели интервью с командой клиента, а потом предложили решения, подходящие под их процессы. Рассказываем, как это было!

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

Мы взяли на себя аналитику, структурировали требования и подготовили проект. По итогам встреч составили подробную смету, расставили приоритеты и согласовали план запуска.

Настроили понятный процесс, чтобы синхронизироваться:

1. Задачи ведём в системе управления YouGile (аналог Trello);

2. Клиент добавляет в неё новые задачи и предложения по развитию;

3. Регулярно собираем накопившиеся задачи, оцениваем и запускаем новыми этапами.

Оптика решила фундаментально подойти к переделке взаимодействия всех его цифровых систем — пересмотреть схему работы, отталкиваясь от актуальных бизнес-процессов компании. 

Вместе с клиентом поставили следующие цели:

1. Заново сверстать сайт и предложить улучшения по сценариям оформления и покупки товаров; 

2. В качестве бэкенда выбрать Битрикс. В том числе за наличие большого количества готовых, стабильно работающих решений для типовых задач;

3. Настроить интеграцию с DPD, Boxberry, Атол, Unisender и Unisender Go для маркетинговых рассылок и триггерных писем.

Часть наших решений была завязана на системы клиента, которые ещё находились в разработке — бухгалтерия, учёт и 1С . Мы не могли начать работу, пока со своей стороны изменения не внесёт команда Оптики. Поэтому договорились работать по такой схеме:

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

Если задача крупная и требует затрат времени с обеих сторон, но не критична для запуска, переносим её в отложенные и возвращаемся позже.

Мы регулярно созванивались — расставляли приоритеты, обсуждали возможные конфликты между старыми и новыми требованиями, а если нужно, сразу согласовывали мелкие задачи и брали в работу. В общем, двигались поэтапно и учитывали все изменения, которые появлялись по ходу проекта.

Огромный объём верстки по готовым макетам мы реализовали в первые этапы. Сейчас продолжаем адаптировать страницы под новые сценарии и развивать функциональность.

Вместе с клиентом запланировали этапы:

1. Подготовка,

2. Вёрстка компонентов,

3. Сборка страниц, багфиксы,

4. Небольшие правки по запросам клиента и команды бэкенда.

Мы отвечали за весь проект: от аналитики и фронтенда до интеграций. Дальше рассказываем, что именно делали.

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

Мы уже писали выше, что в дизайне сайта особо не было изменений. Клиент принял решение не менять брендинг кардинально, поэтому с нашей стороны были только микроулучшения. Например:

Добавили фоновый запрос для сторонних сервисов и лоадер

Представьте, что пользователь заходит в корзину и выбирает самовывоз. В зависимости от выбранного города система определяет, какие способы получения доступны: самовывоз из салона, доставка курьером или ПВЗ DPD / Boxberry. Пользователь может сменить город прямо в корзине — данные и опции обновляются автоматически.

Также мы добавили лоадер, который появляется, пока система делает фоновые запросы в службы доставки. Это компенсирует ожидание и показывает пользователю, что сайт работает и обрабатывает данные.

Теперь экран выглядит более живым и помогает человеку понять «щас всё загрузится». Простое решение, которое влияет на восприятие и снижает вероятность ошибки со стороны пользователя.

У крупного бизнеса всегда много потребностей и внутренних систем: учёт, касса, админка и прочее. У нашего клиента это были: 1С, собственная ERP, Битрикс24 — и всё нужно было связать с новым интернет-магазином.

Сначала мы хотели автоматически подтягивать товары из 1С

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

Перевели сайт на платформу Битрикс

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

Сейчас у клиента в разработке собственная ERP-система

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

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

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

1. Подключили API DPD и Boxberry;

2. Реализовали автоматический расчёт сроков и стоимости доставки — в зависимости от города пользователя;

3. Настроили подгрузку карты пунктов выдачи, если пользователь выбирает самовывоз.

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

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

Товары на сайте относятся к разным налоговым категориям. Например, на контактные линзы действует ставка 10%, а на готовые очки — 20%. Это важно для корректной работы онлайн-кассы и налоговой отчётности.

Что сделали:

1. Настроили классификацию товаров в CMS по ставкам НДС;

2. Подключили кассу Атол с учётом налоговых категорий;

3. Обеспечили автоматическую передачу данных в ОФД и налоговую.

Теперь чеки формируются корректно, без участия менеджеров. Сайт сам учитывает нужную ставку НДС, касса работает без сбоев, а заказ проходит весь путь автоматически

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

Было долго, а сейчас так:

Если в заказе есть запись на услугу, то информация передаётся специалисту в салон:

В результате мы: настроили доставку, подключили кассы, связали сайт с ERP-системой и автоматизировали оформление заказов. И сделали ещё много чего:

1. Собрали интерфейсы по новым дизайн-макетам: огромная база компонентов, десятки страниц и множество решений по улучшению UX/UI сайта прямо по ходу вёрстки;

2. Настроили интеграции с DPD, Boxberry, Unisender и отдельно Unisender Go для триггерных писем;

3. Сделали автоматические письма со статусами заказов через Unisender Go. Подключили его к Битриксу, чтобы клиенты получали понятные уведомления о доставке;

4. Упростили и автоматизировали доставку — теперь клиент сам выбирает способ, всё подтверждается без звонков, а статусы приходят автоматически;

5. Подстроились под процессы клиента и для общего удобства выстроили прозрачную работу в таск-трекере YouGile.