Как мы превратили сайт корейской косметики в конкурентоспособный интернет-магазин

Заказчик: ALOEsmart — сеть магазинов оригинальной корейской косметики для здоровья и молодости кожи, присутствие в 14 городах России (Екатеринбург, Тюмень, Сургут, Челябинск и др.).

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



1. С чем ALOEsmart пришёл в «Кибер-Невод»

К моменту обращения у клиента было два «недостроенных» варианта сайта:

1. Классический интернет-магазин на 1С-Битрикс от первой компании;
2. Другая компания перевела сайт на React, но не довела проект до ума. Веб-ресурс жутко тормозил, наблюдались постоянные баги.

В итоге бизнес оказался в ситуации, когда:

• Сайт медленно загружался и регулярно падал;
• Часть логики была поделена между фронтом и бэком, управлять сайтом из админки было почти невозможно;
• Интернет-магазин не мог стабильно продавать, а любые маркетинговые активности часто упирались в технические проблемы.

Запрос заказчика на старте формулировался так: «Сохранить CMS 1С-Битрикс, оставить текущий дизайн и доделать недостающие страницы». Однако в процессе стало очевидно, что без полноценного редизайна и переработки всего подхода к e-commerce задача не будет решена.



2. Что мешало реализации

Мы начали с полного аудита текущей заготовки. Выявили типичные для недоработанных e-commerce-проектов проблемы.

Технические проблемы

• Старое ядро Битрикс на PHP 7, без обновлений, с уязвимостями.
• API и модули написаны «в обход» стандартов БУС — много костылей, нестабильная работа.
• Некорректная верстка: на широкоформатных мониторах всё ломалось, съезжали блоки и нарушалась структура страниц.
• Часть серверной логики вынесена во фронтенд: множеством процессов нельзя было управлять из панели управления.
• Сайт не работал 2–3 раза в месяц, простой составлял минимум 1 день.
• Критически долгая загрузка страниц, особенно каталога и карточек товара.

UX и дизайн

• Макеты в Figma были без структуры: дубли элементов, несогласованная система отступов, шрифтов, кнопок.
• Слишком «крупный» визуал — перегруженные блоки, навязчивая подача.
• Не было продуманной логики для пользовательского пути: от первого визита до покупки.

Бизнес-ограничения

• Отсутствие полноценной работы с торговыми предложениями (цвет, объём, варианты одного товара).
• Слабо реализованный маркетинговый функционал.
• Недостаточный контроль над SEO-контентом для каждой страницы.

3. Цели и задачи проекта

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

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

Ключевые задачи:

1. Сохранить CMS 1С-Битрикс, но:

• обновить до 8.x;
• переписать API в соответствии с требованиями БУС, убрать костыли;
• привести модули и решения к актуальной версии.

2. Полностью переработать дизайн:

• собрать макеты в Figma в единую систему;
• обновить визуальную концепцию под актуальные поведенческие паттерны пользователей;
• спроектировать UX под e-commerce-сценарии.

3. Усилить маркетинг и продажи:

• реализовать торговые предложения;
• добавить маркетинговые блоки: акции, скидки, персональные предложения;
• дать гибкое управление SEO-контентом.

4. Обеспечить масштабируемость:

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

4. Почему без редизайна не обошлось

Изначально заказчик просил оставить дизайн, который был готов. Мы начали реализовывать недостающие макеты в рамках старой концепции и увидели, что формально ТЗ выполнить можно. Но поставленные цели не будут достигнуты, потому что поведение пользователей изменилось, визуальный язык устарел, структура не поддерживает современный e-commerce.

Мы вышли с аргументированной позицией: макеты создавались 2–3 года назад → за это время значительно изменились паттерны поведения покупателей в онлайн-торговле → мобильный сценарий стал ключевым, а старый дизайн его не поддерживал.

В итоге руководящий состав ALOEsmart согласился переработать не только недостающие страницы, но и всю концепцию дизайна.



5. Этапы разработки

1. Детализированное ТЗ: структура сайта, функциональность, интеграции, сценарии пользователя.

2. Дизайн и UX.

Что сделали:

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

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

3. Разработка фронтенда

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

4. Бэкэнд и обновление Битрикс

• Перевели Битрикс на версию 8.x.
• Привели в порядок все модули и решения.
• Перенесли часть бэка со старого сайта, часть переписали с нуля, избавляясь от узких мест по производительности и безопасности.

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



5. Тестирование, сдача, запуск

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

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

Перенос на прод прошёл спокойно, без ожидаемых падений. Через неделю работы запустили нагрузочное тестирование (утро по Екатеринбургу, вне пика активности): нашли несколько «узких мест» по производительности, оперативно устранили ошибки, повторные тесты прошли успешно.



6. Маркетинговые инструменты

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

1. Во-первых, мы реализовали полноценную представление торговых предложений. Для косметики, где один и тот же продукт часто представлен в разных объемах, цветах или сериях, это было критически важно. Теперь в карточке товара покупатели могут легко выбрать нужный вариант, видя актуальные цены, наличие в магазинах и персональные скидки в реальном времени.
2. Во-вторых, мы создали мощные инструменты для управления спросом. На сайте появились гибко настраиваемые промо-блоки, блоки спецпредложений для постоянных клиентов и различные механики скидок. Теперь маркетологи ALOEsmart могут самостоятельно, без привлечения разработчиков, запускать акции, размещать баннеры и выделять ключевые категории.
3. В-третьих, для устойчивого роста трафика мы внедрили детальное SEO- управление. Для каждой страницы — от карточки товара до категории — появилась возможность настраивать мета-теги, добавлять уникальные тексты и SEO-блоки. Это позволило целенаправленно продвигать бренды и серии косметики в поисковых системах, закладывая основу для стабильного органического потока клиентов.

7. Интеграции и сложные места

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

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

Для автоматизации ключевых бизнес-процессов была внедрена экосистема внешних сервисов. Мы подключили систему лояльности МАКСМА для работы с покупателями, несколько служб доставки (СДЭК, Почта России, Яндекс) для гибкости выбора и платёжный шлюз ЮKassa для безопасных расчётов.

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



8. Срок разработки

По договору запуск был запланирован на февраль 2026 года. Заказчик поставил амбициозную цель — выйти на рынок в ноябре 2025 года, чтобы успеть к высокому сезону. И мы все успели. Фактический запуск проекта состоялся 01.11.2025 года, примерно на 3 месяца раньше планового срока.

9. Стек технологий

Frontend: Vue.js + Nuxt.
Backend: PHP, 1C-Битрикс (управляемый сайт).

Что демонстрирует кейс ALOEsmart

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

При этом сохранение привычной для бизнеса CMS (1С-Битрикс) не мешает перейти на современный стек (Vue.js + Nuxt на фронтенде), ускорить сайт и обеспечить стабильность под нагрузкой.

Правильно выстроенный интернет-магазин — это дизайн и скорость, маркетинговая гибкость (акции, персональные предложения, торговые предложения), сильная аналитика (мониторинг ключевых метрик) и надёжные интеграции (доставка, оплата, лояльность).

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