У проектов на длительной техподдержке возникают одни и те же проблемы: наслоение бизнес-логики и разрастание сущностей из-за тестирования разных гипотез и непрерывного внедрения микро-изменений. А заодно — постепенно устаревающий код и дизайн, требующий глобальной переделки хотя бы раз в пять лет. Решение: глубоко анализировать юзабилити, полностью «перетряхивать» код и накатывать масштабный редизайн.

Но для сайта с миллионной посещаемостью и ежесекундным потоком заказов это сделать не так просто. Тут идеально подходит SCRUM, когда все работы выполняются поэтапно, и при этом сайт работает без перебоев. Так вот, при полном редизайне сайта Орматек — лидера мебельного рынка, который знает всё о комфорте — ни один заказ не потерялся :) За несколько спринтов мы выполнили: комплексное обновление визуала, улучшение юзабилити, рефакторинг и оптимизацию кода, а также обновление бизнес-логики.

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

Так, например, мы выяснили, что функционал «Где полежать?» на главной не востребован, а вот на детальной странице товара полезен. А ещё — что большинство покупателей приходит на сайт Орматек в первую очередь за матрасами, а не за спальными гарнитурами, например. Мы отработали множество сценариев поиска и фильтрации в каталоге и оптимизировали число параметров — некоторыми из них посетители сайта не пользовались.

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

Мы полностью переделали принцип формирования JS и CSS для боевого сервера — в условиях новых требований от Google PageSpeed Insights к скорости загрузки это стало критически важной задачей. Среди других мер ускорения — включили lazy load картинок (загружаются только тогда, когда пользователь до них доходит на странице), установили NGINX (кеширующий сервер, который принимает на себя основную нагрузку у высоконагруженных проектов). А также — дописали скрипты, которые идентифицируют поисковых ботов и отключают для них метрики на сайте, плюс скрипты, которые инициируют JS только тогда, когда блок виден пользователю (вместо того, чтобы грузить JS всей страницы страницы полностью).

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

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

Е-коммерс — очень переменчивая сфера бизнеса: здесь постоянно что-то адаптируется под потребности пользователей. Особенно — разделы меню. С ними мы уже работали в рамках техподдержки и микро-обновлений: сократили количество пунктов и объединили группы товаров по назначению (комнатам).

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

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

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

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

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

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

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

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

В проекте настроен эквайринг от Сбербанка: мы переписали официальный модуль, поскольку тот использовал старое API от старого ядра Битрикса (которое постепенно «умирает»). Также проект интегрирован со службами доставки ПЭК и DPD.

Также подключены традиционные метрики Яндекса и Гугла, плюс 20+ специфичных, которые учитывают самые разные действия пользователей. Проект интегрирован со всеми популярными маркетами — поэтому стоит вам один раз зайти на сайт Орматек, как вся контекстная реклама во всех каналах начнет предлагать вам его товары :)

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

Для сотрудников Орматек на сайте мы создали закрытый раздел вроде личного кабинета, где каждый может видеть список дел на день и вносить данные покупателей. Интегрировали через RestAPI — данные не хранятся на сайте, а забираются из системы и сразу выводятся в CRM.

Естественно, проект интегрирован с 1С — оттуда мы импортируем товары каталога и заказы. Механика импорта была написана нами давно специально под этот проект (используем стандартный импорт, но с доработками — забираем из 1С XML-файл со списком товаров, формируем из них SKU и отдаём Битриксу). В рамках редизайна этот импорт мы не трогали. Зато с нуля написали импорт скидок.

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

Правда, у Битрикса не оказалось адекватной документации по работе с API правил для корзины — пришлось лезть в код и смотреть, как это устроено, а после писать собственное решение. Теперь заказчику достаточно указать определенные скидки в базе 1С, сохранить их в файле JSON и загрузить в админ-панель. Раз в день в определенное время запускается скрипт, которые импортирует эти данные на сайт.

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