РЖД-мерч
Мерч приурочен к юбилею строительства БАМа. 50 лет назад началась самая масштабная и сложная стройка в России — Байкало-Амурская магистраль.
В ней приняли участие около двух миллионов человек, а юбилей начала строительства отмечали по всей стране — от Тынды до Москвы.
Контекст и задача
К нам обратились команда Epsilon. Они продвигают идею, что корпоративные подарки могут быть эмоциональными и душевными. Ребята полностью берут на себя всю заботу о мерче клиентов: от производства до реализации и продаж. А мы им в этом помогаем.
Этот проект не стал исключением. Epsilon передала нам весь цикл разработки сайта для продажи мерча: от построения цифровой архитектуры онлайн-продаж до поддержки и развития проекта
Что сделали?
Прежде чем начинать что-то рисовать или кодить, мы выясняем, какие задачи должна решать функциональная часть сайта. С какими-то пожеланиями клиент приходит сам, а какие-то помогает сформулировать наша команда.
За время работы в e-commerce мы сформулировали собственную формулу идеального брифинга, который легко трансформируется в понятное ТЗ для разработчиков.
Перескочили через UX, потому что можем
Без паники, только в этом случае.
Зачем тратить миллионы на исследования, если их уже потратили за нас? Все давно привыкли, что корзина в интернет-магазине находится в правом верхнем углу, а кнопка оплаты — внизу этой корзины. Это базовые паттерны поведения пользователей в интернет-магазине.
Мы не стали изобретать колесо заново и нарушать привычный флоу пользователя, потому что заранее знали, как должен выглядеть результат.
… и сразу взялись за UI
Но вы же помните, что We Wizards — чисто хардкорные программисты?? Поэтому за дизайн отвечали ребята из компании p.motion. Мы давно работаем вместе, умеем взаимодействовать и полностью доверяем их вкусу.
Процесс мы не оставляли, включались как могли: вместе накидывали варианты и обсуждали, как должен выглядеть итоговый сайт.
Вот кусочек из дизайн-системы:
А вот как выглядит главная страница:
Каталог и экран загрузки.
Сделали его в виде БАМа, а для удержания внимания пользователя добавили интересные факты о строительстве магистрали.
Пока дизайнеры рисуют, мы начинаем кодить
Вот как выглядит график работы над проектом:
Фронтенд
Сервис разработан на классическом монолитном стеке: vanilla JS в парадигме ООП.
Чтобы ускорить процесс разработки, команда начала работу с shared components на этапе дизайн-концепции. Мы легко справились с этой задачей, пока дизайнеры доделывали дизайн-макеты.
На этапе концепта у нас уже были компонентная база и сетка.
Ждать отдельного листа с UI Kit не пришлось.
Бэкенд
Для бэкенда выбрали комбинацию WordPress с WooCommerce, которую часто используем на подобных проектах. Быстрая разработка, огромный репозиторий готовых решений по интеграции от вендоров — лишь малая часть преимуществ этой комбинации.
Перешли к интеграциям
Их мы тоже делали параллельно с работой дизайнера. Эти этапы не влияют на бизнес-логику сайта, и сами по себе непоследовательны. Уже на тестовой среде с тестовым шаблоном WordPress мы установили и настроили 1С, сформировали товарную номенклатуру, провели тестирование обмена.
А когда подъехала итоговая версия – интеграция была уже готова.
Выбрали подходящую редакцию для 1С
Обсудили, будет ли это облачная или стационарная версия системы.
На этом этапе было важно правильно внести данные о товарах, чтобы при взаимодействии с другими ресурсами все работало штатно. А еще распределить эти товары по складам, чтобы наличие товаров отображалось правильно.
Далее настроили и автоматизировали систему синхронизации, и показали клиенту как правильно вносить данные. Вот как работает система:
- После оформления заказа сайт отправляет запрос в 1С;
- Там формируется заявка на существующего или нового контрагента;
- Товары отгружаются со складов, а остатки списываются;
- Информация на сайте обновляется.
Так мы обеспечили замкнутый цикл работы интернет-магазина
Интегрировали систему «Честный знак», сервисы «СДЭК» и ЮKassa
Стек, который мы выбрали, предоставляет готовые плагины для интеграции. Поэтому процесс прошел гладко, а нам удалось быстро связать все компоненты в единую экосистему.
Тестирование
Его мы подключили по мере готовности логики сайта.
Настроили тестовые контуры каждой среды, и проверили поведение системы на разных вариантах пути пользователя.
А что в итоге?
Разработали удобный сайт с гибкой формой настроек в административной панели.
Схватили серебро Рейтинга Рунета в номинации «Одежда и обувь».
И последнее, но самое важное – рассказали о значимом историческом событии, строительстве БАМа.
