Serginnetti

О компании

ООО “Модный Город” , известное больше под брендом одежды Serginnetti - один из крупнейших российских производителей одежды в стране, существующий с 1996 года и открывший более 100 франшиз магазинов в России и Казахстане.

Задача

Заказчик пришел с запросом разработать интернет-магазин для своего бренда одежды. Важно, чтобы сайт отличался минималистичным и современным дизайном. Также необходимо было разработать мобильное приложение в стилистике сайта для IOS и Android.

Этапы реализации

Анализ бизнес-процессов заказчика
Составление технического задания
Прототипирование
Концепт-дизайн
Разработка полного дизайна
Полная программная реализация
Тестирование и запуск

Прототипирование и согласование дизайна

Работа над проектом началась с анализа бизнес-процессов заказчика и составления технического задания. ТЗ получилось на 96 страниц, в нем подробно описаны технические средства, требования к разработке, описание страниц сайта, общая структура, модули сайта в Битрикс, мобильное приложение, нефункциональные и дополнительные требования к сайту. Вместе с ТЗ создавался прототип сайта с основными страницами и разными видами каталогов, было разработано и согласовано более 50 страниц.

Концепт дизайн создавался на основе примера: заказчик скинул сайт, который ему очень понравился по дизайну и мы должны были придумать что-то похожее, но в то же время отличающееся, чтобы не копировать сайт полностью. Заказчику быстро понравился предложенный нами дизайн и мы взялись за разработку полного дизайна интернет-магазина.

Страниц дизайна получилось так много, что полное согласование пришлось разделить на 3 этапа: примерно по 20 страниц каждый. Когда страницы были согласованы или по ним были выполнены правки, шел следующий этап согласования. К счастью, у заказчика было немного правок, и этап дизайна не затянулся.

Общая структура интернет-магазина

Сайт получился многостраничным, в нем есть несколько блоков:

Личный кабинет, Заказы;
Корзина;
Дисконтные и подарочные карты;
Акции, скидки;
Каталоги: Новинки, Хиты, Подборки, Гардероб, разделение по типу изделий;
Раздел о компании: История бренда, производство, сотрудничество;
Блог;
Раздел с вакансиями;
Контакты и адреса магазинов;
Информационные блоки: Вопрос-ответ, Политика конфиденциальности, Оферта, таблица размеров;
Условия по возвратам, доставке;

Административная панель Bitrix и интеграция с 1С

За основу сайта брался модуль интернет-магазина Битрикс: в нем было удобно работать заказчикам, добавлять контент на сайт, выгружать товары с фотографиями и описанием. Однако, Битрикс всегда предлагает стандартизированные решения для интернет-магазинов, а заказчику такое не подходило: нужно было, чтобы сайт был с привлекательным дизайном и разными форматами каталогов. Для подобной реализации разработка также велась дополнительно, а от Битрикс осталась административная панель, где работали сотрудники заказчика.

Всего контент на сайте можно загружать двумя способами:

напрямую в админ. панели Битрикса;
загрузкой через 1С.

В админ. панели Битрикса можно было:

Загружать и редактировать весь текстовый контент, кроме каталогов;
Настраивать отображение фотографий в каталогах (справа, слева, центральный образ и т.д);
Работать со списками покупателей;
Работать с заказами;
Загружать и удалять акции и промокоды.

Интеграция с 1С давала возможность:

Выгружать товары, их описание и фотографии;
Распределять их по каталогам;
Формировать дисконтные и подарочные карты.

Данные из 1С автоматически подтягивались в админ.панель Битрикса.

Разноформатные каталоги товаров

Заказчик хотел разработать несколько видов каталогов под определенные запросы покупателей. Каталоги должны были отличаться визуально и могли содержать разные категории товаров. Так, у нас получились следующие каталоги:

Новинки: новые товары, только поступившие в продажу;
Каталог по времени года (Весна 2025, Осень 2025) : новые товары, подходящие к актуальному времени года;
Распродажа: товары, на которые распространяются скидки; в основном товары из старых коллекций4
Хиты: товары, на которые высокий спрос и которые заказывают чаще всего;
Подборки: несколько каталогов с товарами на определенное мероприятие (на Новый год, на День рождения, в Офис, на Официальную встречу);
Гардероб: каталог, в набор которого входит все товары,составляющие определенный образ;
Избранное: товары, которые отметил пользователь, как понравившиеся ему.

Фотографии в каждом каталоге отображаются в определенном порядке. Их разработано два типа:

Имиджевая фотография. Основная фотография, которая отображает стиль раздела. Имиджевых фотографий в каталоге может быть 2-4 штуки, их соотношение к обычным фотографиям 1:4. Рядом с одной имиджевой фотографией всегда 4 обычных, демонстрирующих товары.
Фотография,демонстрирующая конкретный товар. Их расположение зависит от распределения имиджевых фотографий в каталоге. Например, около одной имиджевой фотографии располагается четыре обычных слева и четыре внизу.

Пометки об имиджевых или обычных фотографиях проставляются в 1С и загружаются в админ.панель Битрикса, где с ними может работать заказчик.

Личный кабинет пользователя

Для удобства пользователей был разработан модуль личного кабинета. При регистрации используется невидимая капча от Яндекса на определение ботов. Покупатели имеют доступ в личный кабинет, после регистрации им назначается ответственный менеджер. Входящие заказы от клиентов приходят автоматически определенному менеджеру. Неавторизованному покупателю не доступны цены на ассортимент товаров.

Личный кабинет состоит из нескольких разделов:

Профиль пользователя Основная информация: имя, мобильный телефон, почта. Дополнительная: фамилия, дата рождения, размер, адреса доставки К одному аккаунту может быть привязана только одна почта, поэтому смена почты недоступна. Также нельзя менять дату рождения - это сделано для того, чтобы пользователь не мог часто менять дату и получать акции на день рождения. В профиле также можно сменить пароль и установить настройку уведомлений на телефон или в мессенджеры.
Заказы Заказы делятся на две категории: текущие и все заказы. Текущие заказы - это заказы, которые оформил пользователь и еще не получил. Все заказы - это список текущих, доставленных и отмененных заказов.
Дисконтная карта У пользователя есть возможность завести дисконтную карту магазина. Активация дисконтной карты происходит после подтверждения номера телефона по смс. Скидка по дисконтной карте автоматически рассчитывается в корзине при оформлении заказа. Оформление дисконтных карт проходит через 1С: сначала они появляются в 1С, а после автоматически подгружаются в админ. панель Битрикса.
Подарочная карта Подарочную карту можно приобрести номиналом от 1 000 до 10 000 рублей. Карту можно заказать себе или другому человеку. Если у человека, на которого заказана карта, есть личный кабинет на сайте, ему придет смс и карта автоматически появится в этом разделе. Если нет, ему придет смс-уведомление о получении подарочной карты. Её оформление также проходит через 1С.
Акции В этом разделе отображаются актуальные акции магазина или персональные акции пользователя, например, скидка 10% на первую покупку или в честь дня рождения.

Покупка через Alfa.API и доставка через СДЭК и Почту России

Покупка товаров осуществляется через модуль “Корзина”. “Корзина” имеет 2 стадии отображения:

Перед оформлением заказа: выводится информация о списке товаров и итоговая информация к оформлению. Для каждого товара предусмотрена возможность изменять его количество и размер, удалить его из корзины или добавить в избранное. Итоговая информация показывает суммарную стоимость товаров в корзине, сумму скидок и акций и стоимость товара с применением скидок и акций.
При оформлении заказа к этой информации добавляется информация о способах доставки (СДЭК или Почта России), адресах доставки и способе оплаты товара. Также есть блок промокода. После введения всей информации отображается итоговая сумма с учетом всей введенной информации.

Для возможности доставки товаров было сделано две интеграции:

СДЭК. Осуществляется через специализированный модуль интеграции от компании IPOL. Модуль обеспечивает интеграцию интернет-магазина со службой доставки СДЭК. Обеспечивается отсылание заявок на доставку заказов, мониторинг статусов доставки заказов и выставление соответствующих им статусов в админ.панели Битрикса.
Почта России. Осуществляется через официальный модуль интеграции от Почты России. Интеграция позволяет сформировать новый заказ на Почту России, отправить клиенту номер отслеживания посылки и уведомление о прибытии посылки.

Для автоматического сервиса оплаты заказов была сделана интеграция 1С заказчика и Alfa API - API Альфа Банка. Интеграция позволяла:

Оплатить клиенту выбранный заказ;
Отправить уведомление в 1С об оплате нового заказа;
Добавить оплату банковской картой;
Добавить оплату через СБП;
Осуществлять возврат средств в случае необходимости.

Тестирование готового интернет-магазина

На этапе тестирования было около 300 багов, собранных заказчиком и нами. Для такого обширного проекта - это немного. Однако, некоторые баги сильно мешали работоспособности сайта. Например, сайт мог перестать работать, когда пользователь выбирает фильтрацию товаров: это происходит из за слишком большого количества товаров в каталоге. Как только все баги были устранены, интернет-магазин официально открылся.

Мобильное приложение Serginnetti

Мобильное приложение разрабатывалось после этапа разработки интернет-магазина. Приложение производилось на React.Native и в размещалось через аккаунт заказчика в Google Play и App Store. Перед размещением все приложения проходят проверку. Выгрузка приложения задержалась, потому что мы 4 раза не проходили проверку от Google: сначала 2 недели ждали одобрения, потом загружали снова. На пятый раз проверку прошли.

Основной функционал приложения копирует функции интернет-магазина. Админ. панель сайта и мобильного приложения – единая, расположенная на платформе 1С:Битрикс.

Дополнительный функционал приложения был:

При переходе на экран с дисконтными или подарочными картами в мобильном приложении дополнительно отображается кнопка “Добавить карту в Apple Wallet”;
Аналитика пользования мобильным приложением собирается при помощи AppMetrica от компании Yandex;
Настройка определения геолокации пользователя, чтобы приложение автоматически указывало город пользователя.

Технологии

Полный список интеграций

Участники проекта

Бизнес-аналитик
Менеджер проекта
UI/UX дизайнер х2
Frontend х2
Backend
Bitrix разработчик
Верстальщик
DevOps
Тестировщик

Результат

Разработка интернет-магазина Serginnetti затянулась на месяц дольше, чем должна была. Однако, заказчик был полностью удовлетворен результатом. В месяц сайт посещают более 115 тысяч человек. За это же время оформляется порядка 800 заказов, 500 из которых доставлены без проблем. Это приносит компании свыше 5 миллионов рублей.