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

Привет! Я Серёжа Шилов, фаундер IT-аутсорс компании We Wizards. Моя команда занимается web&mobile разработкой, лучше всего делаем e-commerce решения от складов до аналитики.

Все кейсы можно посмотреть на сайте.

Мерч приурочен к юбилею строительства БАМа

50 лет назад началась самая масштабная и сложная стройка в России – Байкало-Амурская магистраль. В ней приняли участие около двух миллионов человек, а юбилей начала строительства отмечали по всей стране – от Тынды до Москвы.

Как мы взяли этот проект?

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

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

С чего все началось

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

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

Перескочили через UX, потому что можем

Без паники, только в этом случае.

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

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

… и сразу взялись за UI

Но вы же помните, что We Wizards — чисто хардкорные программисты?? Поэтому за дизайн отвечали ребята из компании p.motion. Мы давно работаем вместе, умеем взаимодействовать и полностью доверяем их вкусу.

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

Вот кусочек из дизайн-системы:

А вот как выглядит главная страница:

И каталог:

И, конечно, экран загрузки:

Сделали его в виде БАМа, а для удержания внимания пользователя добавили интересные факты о строительстве магистрали.

Пока дизайнеры рисуют, мы начинаем кодить

Вот как выглядит график работы над проектом:

Как видите, при желании и опыте параллельные прямые могут пересекаться)

Я называю это игровой формулировкой «туман войны» — пока другие исследуют «карту ecom-a», наш опыт ее уже открыл.

Примечание: совсем не в тему повествования, но игры мы тоже делаем))

Фронтенд

Сервис разработан на классическом монолитном стеке: vanilla JS в парадигме ООП.

Чтобы ускорить процесс разработки, команда начала работу с shared components на этапе дизайн-концепции. Мы легко справились с этой задачей, пока дизайнеры доделывали дизайн-макеты.

На этапе концепта у нас уже были компонентная база и сетка.

Ждать отдельного листа с UI Kit не пришлось :)

Бэкенд

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

Мы как-то писали, почему выбираем WordPress в 2024 для крупных корпораций.

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

Просто статика и объектное кеширование по классике. Ну и оптимизация по lighthouse.

Перешли к интеграциям

Их мы тоже делали параллельно с работой дизайнера. Эти этапы не влияют на бизнес-логику сайта, и сами по себе непоследовательны. Уже на тестовой среде с тестовым шаблоном WordPress мы установили и настроили 1С, сформировали товарную номенклатуру, провели тестирование обмена.

А когда подъехала итоговая версия – интеграция была уже готова.

Выбрали подходящую редакцию для 1С

Обсудили, будет ли это облачная или стационарная версия системы.

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

Далее настроили и автоматизировали систему синхронизации, и показали клиенту как правильно вносить данные. Вот как работает система:

1. После оформления заказа сайт отправляет запрос в 1С;

2. Там формируется заявка на существующего или нового контрагента;

3. Товары отгружаются со складов, а остатки списываются;

4. Информация на сайте обновляется.

Так мы обеспечили замкнутый цикл работы интернет-магазина

Интегрировали систему «Честный знак», сервисы «СДЭК» и ЮKassa

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

Тестирование

Его мы подключили по мере готовности логики сайта.

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

А что в итоге?

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

Схватили серебро Рейтинга Рунета в номинации «Одежда и обувь».

И последнее, но самое важное – рассказали о значимом историческом событии, строительстве БАМа.

“В этом году исполняется 50 лет Байкало-Амурской магистрали, и это важное событие не только для РЖД, но и для всей страны. БАМ является символом технического прогресса, освоения Сибири и её природных богатств. Этот проект называли стройкой века, в которой в общей сложности участвовали около 2 млн человек. Это символ единения страны и подвига людей, которые отправились на строительство магистрали. 50-летие отмечали по всей стране, от Тынды, столицы БАМа, до Москвы. В связи с этим компания Epsilon по заказу РЖД разработала линейку мерча, посвященную юбилею БАМа. Зачем это было нужно? Чтобы осовременить имидж РЖД и создать подарочную линейку товаров, которые люди могли бы дарить друг другу или приобретать на память. Это отличная возможность подарить что-то ценное и приятное родным, которые участвовали в строительстве или были как-то иначе причастны к этому проекту”

— Андрей Семаков, директор по маркетингу в компании Epsilon.

А что дальше?

Мы продолжаем работать над сайтом, а в будущем планируем разработать отдельную CRM-систему, мульти-складскую систему, а также интеграцию с программой РЖД-бонусов.

FIN!

Спасибо всем, кто дочитал до конца) Оцените сайт сами: https://rzd-merch.ru/

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