Оптимизировали процессы, разработали интернет-магазин мерча с нуля, и взяли серебро на Рейтинге Рунета. Кейс БАМ 50

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

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

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

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

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

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

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

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

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

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

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

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

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

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

И каталог:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

А если нужны руки для разработки – пишите лично мне в телеграм @olivoin или на почту hello@wewizards.ru