Обновили интернет-магазин женской одежды ALBANA и увеличили SEO-трафик на 42%, глубину просмотра — на 13%

Albana — российский бренд женской верхней одежды. Разрабатывает коллекции и продает их через офлайн-магазин в Москве и интернет-магазин по всей России. Бренд работает с целевой аудиторией 30+, делает ставку на качество, стиль и удобство.

Компания была сфокусирована на оптовых продажах. Создание нового удобного сайта — понятный шаг к увеличению собственных розничных продаж. Развитие розничного направления началось с масштабного ребрендинга Albana, который затронул платформу и айдентику бренда. Эта часть работы была реализована брендинговым агентством «Суперсхема».

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

С чем столкнулся клиент:

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

Что хотел клиент:

Клиенту нужен был надежный eCommerce-инструмент, который будет расти вместе с бизнесом, а не сдерживать его рост.

После запуска нового сайта бренд получил не просто «обновленный внешний вид», а комплексное улучшение пользовательского опыта и технической производительности, что напрямую отразилось на бизнес-показателях.

Основные метрики проекта

1. Улучшилось SEO и показатели вовлеченности

2. Выросла техническая производительность

Производительность измеряется в баллах: от 0 до 100. Чем больше баллов, тем быстрее открывается страница.

3. Другие важные итоги

Этап 1. Предпроектная подготовка

На этом этапе заложили фундамент проекта — то есть провели ту часть работы, которую не видно на экране, но именно от нее зависит, насколько хорошо система будет работать после релиза. Хотели не просто «нарисовать сайт», а создать удобный, эффективный бизнес-инструмент. И вот что для этого сделали.

Провели серию интервью и брифинг с командой клиента. Выяснили, как устроены бизнес-процессы, какие боли есть у сотрудников, работавших со старым сайтом. Собрали информацию о целевой аудитории: кто покупает, как принимает решение, на что обращает внимание. Уточнили, какие категории товаров будут добавляться, как устроен каталог, какие сценарии оформления заказа важны. Обсудили, как должна работать связка сайта с 1С — какие данные из нее будут поступать, как обновляться, и кто за это отвечает.

Результат: понятная карта ожиданий клиента и конкретные точки, которые важно реализовать.

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

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

Разработали CJM (Customer Journey Map — путь клиента). Прописали путь пользователя — от первого контакта с брендом до оформления заказа. Отразили в пути все точки взаимодействия: главная страница, каталог, фильтры, карточка товара, корзина, оформление, подтверждение. Указали, какие действия совершаются на каждом этапе, какие эмоции испытывает человек, где появляются барьеры.

Результат: CJM стала основой для прототипирования и UX-дизайна: мы четко понимали, что и зачем нужно упростить или изменить.

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

Результат: клиент получил понятный и подробный документ, по которому можно оценивать работу на каждом этапе — от дизайна до разработки.

Создали прототипы ключевых страниц. На основе CJM и ТЗ построили прототипы: главной, каталога, карточки товара, корзины, оформления заказа и личного кабинета. Проработали сценарии с разными вариантами поведения: заказ одного товара, нескольких товаров, смена способа доставки, возврат на предыдущий шаг. Протестировали прототипы внутри команды, доработали спорные места.

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

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

Этап 2. Разработка дизайна проекта

Когда мы утвердили архитектуру, CJM и прототипы, перешли к проработке визуального решения. Важно было не просто сделать «красиво» — нужно было создать такой интерфейс, в который захочется возвращаться: понятный, лаконичный, интуитивный.

Цели, которые мы ставили перед дизайном:

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

Десктоп и мобильную версию рисовали вместе. Мобильный трафик был ключевым, поэтому особое внимание уделили «маленьким» сценариям: свайпы, кнопки, кликабельные зоны, плавность переходов. Работали по принципу mobile-first: сперва отрисовывали, протестировали и согласовывали мобильный «опыт», затем масштабировали на десктоп.

Продумали UX-дизайн под реальный ассортимент. Сделали адаптивную карточку товара, которая одинаково хорошо работает для пуховика, аксессуара или будущих линеек (например, трикотажа). Продумали фильтры: сделали их компактными, но эффективными, с быстрым доступом к нужным характеристикам (размер, цвет, сезон). Проработали «слепые зоны» — места, где на старом сайте пользователи терялись. Теперь на всех страницах четкая иерархия элементов.

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

Сделали дизайн масштабируемым. Мы понимали: после запуска клиент планирует расширение ассортимента и функционала. Поэтому изначально закладывали в интерфейс:

Результат. Вся верстка была передана в формате Ready-to-Dev, с проработкой всех состояний: наведение, клик, ошибки, загрузка, мобильные адаптации. Макеты удобно читаются как дизайнером, так и разработчиком: минимум правок и лишней коммуникации между отделами. На клиентской стороне дизайн был согласован быстро — без критических правок.

Этап 3. Разработка и интеграции

После утверждения дизайна мы перешли к самому насыщенному по задачам этапу — разработке и подключению всех интеграций. Цель была не просто «сверстать сайт», а собрать мощный, гибкий инструмент, с которым легко работать и клиенту, и пользователю.

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

Оптимизировали изображения, шрифты и скрипты — чтобы сайт «летал» даже на мобильных с 3G. Например, на даче или в отдаленных поселках. Сразу внедрили базовые анимации и состояния: наведения, спиннеры, сообщения об ошибке, обратная связь при клике — чтобы взаимодействие с интерфейсом было живым и понятным.

Подняли бэкенд с использованием надежного Bitrix в связке с 1С. В качестве CMS по запросу клиента выбрали 1С-Битрикс, как проверенную платформу для товарного ритейла с высокой степенью кастомизации.

Настроили полноценную интеграцию с 1С:

В рамках проекта изначально планировали также интеграцию с облачной версией Битрикс24, но API B24 оказался ограничен: он не позволял передавать нужные параметры. Поэтому на этапе разработки от этой части отказались — без ущерба бизнес-целям.

Заложили потенциал для роста. Архитектура сайта спроектирована с учетом будущего расширения: при добавлении новых категорий (например, трикотажа или аксессуаров) структура автоматически масштабируется — без ручных правок. Вся логика выстроена так, чтобы все данные управлялись из 1С — это убрало дублирование и снизило риск ошибок. Фронтенд не жестко «зашит» — легко доработать корзину, добавить сертификаты, блок акций и даже подключить CRM позже.

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

Этап 4. Тестирование, отладка и запуск

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

Многоуровневое тестирование. Мы прошли все ключевые уровни:

1. Функциональное тестирование: проверили корректную работу всех сценариев — от регистрации и фильтрации до оформления заказа и отображения остатков.

2. Кроссбраузерность и адаптивность: сайт тестировался в современных версиях Chrome, Safari, Firefox, а также в мобильных браузерах. Проверяли вручную на реальных устройствах.

3. Юзабилити: прошлись по всем сценариям с точки зрения пользователя — чтобы нигде не было «ступора» или ощущения, что что-то работает не так.

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

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

Особенности запуска

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

2. Тем не менее, благодаря правильно выбранному стеку и стабильной архитектуре, никаких доработок на стороне сайта не понадобилось — мы просто ждали, когда поступят правильные данные.

3. Финальное включение в продакшн прошло без сбоев. Сайт начал работать в полном объеме в день запуска, без «серых экранов», обвалов или потерь данных.

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