Обновлённый масштабный интернет-магазин с highload-оптимизацией для Орматек за несколько спринтов
Результат Процесс
SCRUM-подход в разработке интернет-магазинов
Сибирикс
SCRUM-подход в разработке масштабных интернет-магазинов
Обновлённый масштабный интернет-магазин с highload-оптимизацией для Орматек за несколько спринтов
У проектов на длительной техподдержке возникают одни и те же проблемы: наслоение бизнес-логики и разрастание сущностей из-за тестирования разных гипотез и непрерывного внедрения микро-изменений. А заодно — постепенно устаревающий код и дизайн, требующий глобальной переделки хотя бы раз в пять лет. Решение: глубоко анализировать юзабилити, полностью «перетряхивать» код и накатывать масштабный редизайн.
Но для сайта с миллионной посещаемостью и ежесекундным потоком заказов это сделать не так просто. Тут идеально подходит SCRUM, когда все работы выполняются поэтапно, и при этом сайт работает без перебоев. Так вот, при полном редизайне сайта Орматек — лидера мебельного рынка, который знает всё о комфорте — ни один заказ не потерялся :) За несколько спринтов мы выполнили: комплексное обновление визуала, улучшение юзабилити, рефакторинг и оптимизацию кода, а также обновление бизнес-логики.
Что проще сделать: запустить новый завод или модернизировать старый (до того же уровня, что и новый), не прерывая процесса производства и без потерь эффективности? Понятно, что второе на порядок сложнее. Нужно сшивать старые и новые процессы. Однако, как только речь заходит о редизайне сайта (которому несколько лет), 99.9% разработчиков в 99.9% случаев будут подразумевать полное переписывание кода. Строить новый завод. Даже если это экономически будет в 2−3 раза дороже. Почему? Ну, во-первых, делать с нуля — прикольнее. Во-вторых, — так меньше рисков для разработчика. А в-третьих, так можно больше заработать. В случае сайта Орматек у нас было очень много серверного кода, который работал как надо. Суровая интеграция с кастомной 1С клиента и еще десятком сервисов. А кроме того, на этой же кодовой базе у клиента уже крутилось несколько смежных проектов, но с другим дизайном. Мы решили отрефакторить серверную часть без глобальных переписываний и сделать полностью новый фронт. Вуаля!

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

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

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

  1. расширить контентную область;
  2. пересмотреть состав блоков на главной (отказаться от неиспользуемых и добавить разделы, ориентированные на новых пользователей);
  3. разгрузить интерфейс за счет отказа от неиспользуемых элементов;
  4. изменить логику работы фильтра и сортировок;
  5. ускорить работу каталога.
Изначально мы с заказчиком планировали сохранить структуру главной страницы, изменив оформление по брендбуку. Но заказчик нам доверял, и после подготовительного этапа аналитики мы предложили решения с новыми блоками, которые ему очень понравились. В целом на этапе дизайна была проделана огромная работа: и с нашей стороны, и со стороны клиента — все обсуждения шли оперативно и по делу.

Екатерина
исполнительный директор и руководитель проекта
К слову об объёме работы — одних макетов было нарисовано овер 80 штук. На картинке выше — макеты для адаптивной версии
Рефакторинг и оптимизация кода
Поскольку проект разрабатывался давно и уже 5 лет на техподдержке, ещё до старта работ по редизайну, первым спринтом мы провели рефакторинг: полностью пересмотрели код и выпилили ненужные, повторяющиеся и устаревшие куски.
На основе бесконечной аналитики мы 5 лет накидывали улучшения на сайт, и когда грянул редизайн, мы раскопали много забытого, странного и нелогичного. Что-то переписали, что-то убрали, что-то добавили. Правда, времени на это ушло раза в три больше, чем мы планировали — переделываешь одно, оно тянет за собой второе, третье, четвертое…

Александр
Разработчик
Мы полностью переделали принцип формирования JS и CSS для боевого сервера — в условиях новых требований от Google PageSpeed Insights к скорости загрузки это стало критически важной задачей. Среди других мер ускорения — включили lazy load картинок (загружаются только тогда, когда пользователь до них доходит на странице), установили NGINX (кеширующий сервер, который принимает на себя основную нагрузку у высоконагруженных проектов). А также — дописали скрипты, которые идентифицируют поисковых ботов и отключают для них метрики на сайте, плюс скрипты, которые инициируют JS только тогда, когда блок виден пользователю (вместо того, чтобы грузить JS всей страницы страницы полностью).
Главная страница
На обновленной главной странице мы учли проблемы с юзабилити и навигацией, обнаруженные на этапе аналитики, и освежили дизайн в соответствии с новым брендбуком, философией бренда и современными трендами.
Преимущества покупки на виду — сразу после промоблока, а раздел «Интерьерные решения» помогает пользователю быстро сориентироваться в ассортименте — все товары сгруппированы по типу комнаты.
Главная: было — стало
Навигация и юзабилити
Меню
Е-коммерс — очень переменчивая сфера бизнеса: здесь постоянно что-то адаптируется под потребности пользователей. Особенно — разделы меню. С ними мы уже работали в рамках техподдержки и микро-обновлений: сократили количество пунктов и объединили группы товаров по назначению (комнатам).
Так выглядело меню в 2017 году
А так — в 2018 году
Это помогло облегчить главную, но существенно перегрузило выпадающее меню — в нем появились объёмные подразделы с фото и множеством мелких категорий. На мобильной версии это было особенно неудобно.
Любое решение в е-коммерс — это всегда компромиссный вариант. Большие фото дают хорошую визуализацию, но при этом загромождают выпадающее меню. Огромные списки с множеством подкатегорий — занимают меньше места, но бесят пользователей. И так, чего ни коснись — поэтому нам пришлось искать оптимальное решение.

Александр
Аналитик
На обновленном сайте Орматек внутри выпадающего меню вместо крупных фото теперь аккуратные иконки и компактные подразделы. Благодаря этому появилось место под акционный баннер — пользователям такое нравится.
Таким было выпадающее меню в старой версии сайта
Таким оно стало после редизайна
Внутри хлебных крошек в каталоге спрятаны раскрывающиеся списки: пользователю не нужно искать, куда кликать, чтобы перейти в другую категорию товаров или выбрать в текущей категории один из подразделов.
Фильтры в каталоге
Исходя из аналитики, мы переписали логику фильтрации и сортировки, а также оптимизировали число параметров в фильтре: оставили самые важные параметры — размер, цена, пружинный блок, жесткость, наполнитель. Фильтр теперь удобнее применять: мы добавили в фильтре плашку, которая показывает количество найденных товаров по нужным параметрам — страница не обновляется после применения каждого параметра и делает каталог юзер-френдли :)
Пользоваться обновленным фильтром удобно даже на мобильных устройствах
Карточки товаров облегчили визуально, а баннеры в списке каталога переместили в контентную область (раньше те были над списком товаров) — теперь акционные предложения заказчика органично впишутся в выдачу каталога и при этом останутся заметными для пользователей. Расширилась и контентная область — список товаров может растягиваться на 6 колонок.
Каталог: было — стало
Детальная
На старом сайте под каждую категорию товара были индивидуальные карточки товара: отдельно для матрасов, наматрасников, диванов, кроватей и т. д. Они создавались постепенно под бизнес-задачи заказчика: какие-то менялись и дорабатывались в качестве эксперимента, какие-то — создавались под отдельные продукты, чтобы тестировать его продажи. В итоге — количество шаблонов разрослось, и ими стало неудобно пользоваться.
В обновленном проекте вместо них сделали два универсальных шаблона: это проще и для контент-менеджеров заказчика, и для техподдержки проекта в будущем. Кстати, в каталоге раньше на каждый раздел тоже был свой шаблон — а теперь единый для всех.
Оформление заказа
Мы полностью переписали процесс оформления заказа: теперь он делится на шаги: сначала выбор вариантов доставки, а дальше — выбор вариантов оплаты и ввод контактных данных. Шапка и футер скрыты намеренно, чтобы пользователь не отвлекался от процесса покупки.
Интеграции
Эквайринг
В проекте настроен эквайринг от Сбербанка: мы переписали официальный модуль, поскольку тот использовал старое API от старого ядра Битрикса (которое постепенно «умирает»). Также проект интегрирован со службами доставки ПЭК и DPD.
Метрики и маркеты
Также подключены традиционные метрики Яндекса и Гугла, плюс 20+ специфичных, которые учитывают самые разные действия пользователей. Проект интегрирован со всеми популярными маркетами — поэтому стоит вам один раз зайти на сайт Орматек, как вся контекстная реклама во всех каналах начнет предлагать вам его товары :)
Mindbox
Для целевых рассылок покупателям сайт интегрирован с платформой Mindbox — система забирает все данные по пользователю (просмотры товаров, заказы и прочее) и формирует индивидуальные рассылки.
CRM клиента
Для сотрудников Орматек на сайте мы создали закрытый раздел вроде личного кабинета, где каждый может видеть список дел на день и вносить данные покупателей. Интегрировали через RestAPI — данные не хранятся на сайте, а забираются из системы и сразу выводятся в CRM.
Естественно, проект интегрирован с 1С — оттуда мы импортируем товары каталога и заказы. Механика импорта была написана нами давно специально под этот проект (используем стандартный импорт, но с доработками — забираем из 1С XML-файл со списком товаров, формируем из них SKU и отдаём Битриксу). В рамках редизайна этот импорт мы не трогали. Зато с нуля написали импорт скидок.

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

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

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

Екатерина
исполнительный директор и руководитель проекта