Кейс: веб-разработка интернет-магазина для сети гипермаркетов в Крыму с более чем 180 000 товарными позициями.
В этом кейсе расскажу, как мы с нуля переписали интернет-магазин для сети строительно-хозяйственных гипермаркетов в Крыму “УютСтрой”. Поделюсь, как работали с распределенной командой и какими решениями улучшили производительность ИТ-системы заказчика.
Обычно кейс начинается с цели разработки ИТ-продукта, но сегодня мы говорим о веб-разработке интернет-магазина. Поэтому не вижу смысла тратить время на цели, просто приведу статистику:
В 2023 году доля интернет-продаж в российском ритейле достигла 19% от всего ритейла и 37% от рынка непродовольственных товаров. Также, по данным на 2023 год, объем интернет-торговли в России вырос на 28% и составил 6,4 трлн рублей.
Проще говоря (да, я капитан очевидность 🙂), торговым компаниям с большим количеством товаров без интернет-магазина никак. Это касается и больших игроков, и малого бизнеса.
В этом кейсе мы с нуля переписали интернет-магазин для сети строительно-хозяйственных гипермаркетов в Крыму “УютСтрой”, улучшили производительность ИТ-системы заказчика и как работали с распределенной командой.
По традиции несколько слов о Заказчике
Компания “Уютстрой” является крупнейшей сетью строительно-хозяйственных гипермаркетов в Крыму, предлагающей более 180 000 наименований товаров для строительства, ремонта и обустройства дома. У компании 4 крупных гипермаркета в Симферополе и Севастополе, площадью более 82 000 кв.м. В штате числится более 1 500 специалистов. Компания ежедневно обрабатывает более 800 заказов.
А вот об отличиях работы со стартапами вы можете почитать в нашем другом кейсе ⬇
Знаете, чем работа со стартапом отличается от работы с действующим бизнесом? В первом случае мы чаще сталкиваемся с сжатыми сроками и бюджетами. Да, разработка стартапов — это своя специфика, с ними нужно уметь работать.
С какой задачей к нам обратились?
До того, как Заказчик обратился к нам, у него уже был интернет-магазин “Новацентр”, которому срочно нужен был апгрейд, потому что:
- использовался Битрикс, дорабатывать который стоило космических денег. Как говорил заказчик, каждая доработка рассчитывалась десятками тысяч долларов.
- у сайта был устаревший дизайн
- были проблемы при загрузке данных из 1С - она не просто была медленной, она толком не работала. Интернет-магазин зависал во время выгрузки или обмена товарами с 1С.
Поэтому Заказчик и обратился к нам с задачей, цитирую: "Ребята, нужно сделать магазин современным, функциональным и быстрым!"
Мы взялись за дело. Обсудили технологии, и решили использовать лучшее и проверенное, что есть в IT:
- Django, Python, Postgress для бекенда
- микросервисную архитектуру для обмена номенклатурой на базе RabbitMQ
- и React для фронтенда.
Мы выбрали эти технологии не просто так. Django и Python подошли, потому что позволяют легко управлять большими объемами данных и сложной бизнес-логикой. RabbitMQ помогает справляться с обменом более 80 тысяч товаров без задержек. А React делает сайт быстрым и удобным для пользователей.
Как происходит работа?
В целом, процесс веб разработки интернет магазина стандартный, однако я кратко расскажу про него, чтобы стало понятно, как вообще происходит сотрудничество.
Шаг №1: Связь с клиентом и получение задачи
Руководитель проекта со стороны Заказчика “приносит” задачи от бизнеса и формулирует их в виде конкретных требований.
Руководитель проекта со стороны Заказчика - это человек, который даёт задачи от бизнеса. Он говорит: “Я не знаю, как вы это сделаете, но я хочу себе комплекты. Чтобы у меня на сайте продавались товары комплектами. Чашечка и блюдечко. Разделить нельзя.” Он приходит с этой задачей, говорит нам, что он хочет. Мы, соответственно, думаем, как это реализовать максимально эффективно.
На данном этапе самое главное “синхронизироваться” с заказчиком, мы должны быть уверены, что мыслим одинаково. Тут как с ремонтом, у каждого в голове свое понятие “красиво”, поэтому нельзя останавливаться на общих фразах, важна конкретика и детализация.
Так мы формируем эпик - большую задачу, которую в дальнейшем будем делить на более мелкие.
Если задачка понятна, мы можем отдавать ее в разработку, если же нет, то мы приступаем к следующем шагу - к аналитике.
Шаг 2: Аналитика и оценка задачи
Как я уже говорила выше, задачи бывают разные – некоторые попроще, их оценивают быстро. А некоторые требуют детального анализа и консультации команды: фронтенд и бэкенд разработчиков, тестировщиков, сотрудников заказчика: маркетологов, заместителя руководителя проекта, специалистов по 1С и так далее.
Мы изучаем рынок, предлагаем варианты и слушаем обратную связь.
Чтобы было понятно, давайте рассмотрим на примере вышеупомянутой задачи: “реализовать продажу товаров комплектами”.
Первоначально мы определяем бизнес-цели и изучаем рынок, далее - советуемся с маркетологами заказчика, чтобы сделать такие комплекты максимально продающими, потом обсуждаем вопрос с бэкэндом и фронтендом в части реализации и составляем план.
Когда план расписан, каждый член команды смотрит на свою часть задачи и оценивает, сколько времени потребуется на её выполнение.
Иногда для точной оценки мы рисуем UML-диаграммы: вот здесь сайт, вот здесь 1С. Смотрим, как данные будут передаваться, что нужно сохранить в базе данных, что отправить на фронт и так далее.
Когда всё готово, команда отправляет задачу на согласование руководителю проекта со стороны Заказчика. Он рассматривает оценку, задает вопросы и, если всё устраивает, одобряет задачу.
Получив "зелёный свет", команда приступает к разработке.
Шаг 3: Реализация и сдача задач
Мы работаем в рамках месячных СПРИНТОВ, по завершении каждого из которых составляем отчет о выполненных работах. Чтобы сделать этот отчет, менеджер проекта берет все эпики за период, выписывает их названия и указывает часы, затраченные на выполнение. Этот отчет и согласовывается с руководителем проекта от Заказчика.
Вообще, приемка задач – это отдельный ритуал. На данном этапе команда показывает представителям Заказчика, что уже сделано. Все заинтересованные лица тестируют, пробуют, задают вопросы. Когда всё готово, руководитель проекта со стороны Заказчика говорит: "Всё, закидывайте на продакшен!" И команда сдаёт акты и закрывает СПРИНТ.
Какие трудности?
Главная трудность с “УютСтрой” – бюрократия. Согласование задач занимает много времени. Например, когда руководитель проекта от Заказчика получает пул задач, ему нужно пройти несколько этапов согласования: он рассказывает руководителям разного уровня, объясняет стоимость, иногда даже привлекает внешний аудит, чтобы понять, действительно ли оценка корректна.
Кроме того, руководитель от Заказчика не может ежедневно или еженедельно согласовывать задачи. Ему нужен большой пул, который согласовывается за раз. Это требует времени - недели или две - чтобы оценить каждую задачу. И еще нужно учитывать, что текущие задачи могут накладываться на новые, из-за чего трудно дать точную оценку новой задачи, пока не завершили предыдущую.
Вообщем, кто работает с крупными заказчиками, сейчас понимает нашу “боль” :-) Чем масштабнее проект, тем больше бюрократии - без этого никуда.
Как можно решить эти проблемы?
Чтобы снизить уровень бюрократии и обеспечить стабильное развитие продукта, мы рекомендуем проводить стратегические сессии с высшим руководством хотя бы раз в полгода. Так можно заранее обсудить планы и составить список задач на много недель вперёд.
В целом, хочу отметить профессионализм команды Заказчика. Они готовы к конструктивному диалогу и взаимовыгодному сотрудничеству, что делает разработку проще и эффективнее.
Реализованный функционал интернет-магазина.
За полгода сотрудничества мы полностью обновили сайт заказчика, обеспечили стабильный обмен данными и повысили конверсию.
Если кратко, то мы сделали:
- каталог товаров
- карточки товаров
- подборки товаров
- фильтры (категория, наличие, цена, бренд и проч., а также по по тегам, скидкам и рейтингу)
- понравившиеся товары
- блог
- информационные страницы
- корзина
- онлайн чат в мессенджеры и на почту
- умный поиск
- акции
- микросервис для обмена номенклатурой (товарами) с 1С.
- эквайринг от Юкасса.
- кастомное решение по серверному рендеренгу (SSR) по улучшению SEO.
Что интересного сделали в рамках последнего СПРИНТа?
В рамках одной статьи, я не буду подробно останавливаться на каждом функционале, лучше расскажу о том, что сделали в рамках последнего обновления:
Мы добавили функционал изменения цены в разных единицах измерения. Это значит, что пользователь может узнать стоимость плитки не только за упаковку, но и квадратный метр или паллету.
Для чего это нужно?
Например, плитка продается только в упаковках, но пользователю неудобно самому считать, сколько упаковок ему надо. Теперь он выбирает количество в квадратных метрах, а сайт показывает, сколько упаковок понадобится. Это удобно и для покупателей, и для поставщиков – система сама пересчитывает количество. Все интегрировано с 1С, данные о единицах измерения и коэффициентах пересчета поступают напрямую из нее, что гарантирует точный учет и отображение остатков на складе.
Какие интеграции используем?
Ну и, конечно, не могу не остановиться на интеграциях, потому что о них всегда спрашивают в рамках любого проекта 😅 Что же было интегрировано при разработке “УютСтрой”:
1С и RabbitMQ
Интеграция с 1С реализована через брокер сообщений RabbitMQ, что позволяет накапливать и обрабатывать сообщения (товары), которые передаются на сайт. Теперь нам не важны объемы этих данных, так как благодаря данному микросервису обмен происходит планомерно.
Одна из многих интересных задач на проекте - обмен номенклатурой (товарами) между 1С и сайтом. Это был вызов для меня как менеджера: было важно собрать всех участников процесса, правильно поставить задачи и внедрить функционал. Было не просто, но мы справились.
CRM-система
"УютСтрой" использует AMOCRM для управления заказами, которые поступают из 1С.
Платежные системы
Подключен эквайринг через ЮKassa для обработки платежей. Есть функционал холдирования (замораживания) платежа – заказ считается оплаченным после того как менеджер удостоверился, что все товары в наличии на складе и подтвердил это в 1С, изменив статус.
Поисковая система
Интеграция с поисковой системой AnyQuery обеспечивает эффективный поиск на сайте (поисковые подсказки, статистика запросов, автоматические фильтры, использование синонимов и проч). В нашем случае реализована интеграция по API что дает более гибкое управление поиском и контроль.
Аналитика
Система аналитики Roistat собирает данные по запросам пользователей и взаимодействию с техподдержкой. Интеграция выполнена в react приложении, разработанном для веба.
Каких результатов удалось добиться?
Ну и в завершении поговорим о результатах. Разработанный интернет-магазин стал лучшим в своем сегменте в Крыму. Он работает быстро, нравится пользователям и показывает высокую конверсию. Мы, кстати, участвуем в конкурсе Рейтинга Рунета, как лучший сайт, так что голосуйте за нас:
Ну и, конечно, мы продолжаем совместную работу, ведь "нет предела совершенству", а рынок Ecom требует постоянного развития и внедрения инноваций.
Компания ItFox зарекомендовала себя как надёжный партнёр в области разработки сайтов. Хочу особо отметить работу дизайнера Евгения, который предлагает качественные и креативные решения, а также своевременно вносит необходимые корректировки. Менеджер проекта Вячеслав обеспечивает эффективное управление процессом разработки, контролируя выполнение всех задач.
Конечно, как и в любом сотрудничестве, есть точки роста. Сейчас, например, мы планируем доработки по SEO-оптимизации сайта и административной панели, чтобы оптимизировать работу и сделать сайт еще более конкурентоспособным.
В целом же, компания ItFox продолжает развиваться и улучшать свои услуги, обеспечивая высокое качество предоставляемых услуг и индивидуальный подход к каждому клиенту. Рекомендую обратиться к ним для разработки вашего сайта.
Хотите, чтобы Ваш интернет-магазин был лучшим в своем сегменте? Обращайтесь к ItFox! Мы знаем, как сделать сайт быстрым, удобным и прибыльным. Свяжитесь с нами уже сегодня и начните трансформацию Вашего бизнеса!
Заказать веб-разработку интернет магазина с ItFox: https://mobile.itfox-web.com/main/ru
Чтобы более подробно ознакомиться с нашими кейсами переходите по ссылке ниже ⬇