Разработка e‑commerce проекта для бренда Teboil
В этом кейсе расскажем, как наша команда в кратчайшие сроки, всего за 4 месяца, разработала и выпустила интернет-магазин для бренда Teboil, связав его общим дизайном с основным сайтом бренда и интегрировав с несколькими внешними системами.
Клиент
«Teboil»
сроки проекта
декабрь 2022 – март 2023
технологии
1C-Битрикс: Управление сайтом, React JS
Отрасль
Нефтяная промышленность
Цель
Технологически обеспечить выход бренда Teboil на российский рынок онлайн-торговли, расширить географию клиентов с помощью интернет-магазина.
Задачи проекта:
1
Разработать сайт интернет-магазина с лёгким и понятным интерфейсом.
2
Автоматизировать процесс продажи продукции бренда.
3
Интегрировать сайт с сервисами доставки и оплаты.
Описание проекта
В 2022 году в Россию пришел новый международный бренд Teboil — производитель и поставщик топлива, смазочных материалов и жидкостей для автомобилей. Также в управлении бренда сеть заправочных станций. Для взаимодействия с современным клиентом и расширения продаж компания решила запустить интернет-магазин.
Разработку этого сайта доверили нашему агентству. Команда накопила большую экспертизу в разработке крупных ИТ-решений для корпораций, в том числе для клиентов из сферы производства, продажи моторных масел и смазочным материалов.
Для клиента крайне важно в кратчайшие сроки запустить интернет-магазин для быстрого вывода бренда на российский рынок и старта продаж смазочных материалов.
Решение
Для работы с проектом Teboil сформировали команду, которая уже имеет опыт разработки крупных e-commerce проектов. Эта экспертиза позволила значительно сократить сроки по проектированию и внедрению интернет-магазина для Teboil, избежать многих ошибок, которые могли бы возникнуть при создании сайта с нуля. Опыт и знания команды также позволили улучшить качество и функциональность проекта.
Наша экспертиза позволила значительно сократить сроки по проектированию и внедрению интернет-магазина для Teboil.
Этапы разработки:
1.
Подготовка сервера, настройка ci/cd, настройка сервиса анализа ошибок sentry, подготовка тестовых и боевых площадок для разработки.
2.
Создание интуитивно понятного UI и дизайн-макетов проекта.
3.
Реализация backend и API интеграций.
4.
Верстка сайта и синхронизация backend и frontend.
5.
Настройка SEO.
6.
Тестирование готового функционала и интеграция с внешними сервисами эквайринга, справочником адресов, фулфилмент-оператором.
7.
Отладка проекта.
8.
Релиз готового функционала.
Процесс
Реализация сайта на современном стеке позволяет создать высокопроизводительный, безопасный и современный сайт, который будет соответствовать ожиданиям пользователей и развиваться вместе с бизнес-требованиям.
В технологическую основу проекта заложили решение от «1С-Битрикс» и ReactJS. У нашей команды большой опыт по разработке сайтов крупным корпорациям, который доказывает, что React повышает производительность создания и развития проектов, а также снижает стоимость обслуживания сайта.
React позволяет добиваться высокой скорости работы. При этом роли фронтенд- и бэкенд-разработчиков разделены, а клиентские и серверные приложения взаимодействуют через Rest API.
После того, как определились со стеком, функциональной частью, структурой и архитектурой проекта, разработали прототип сайта. Он наглядно отображает структуру будущего проекта, визуализирует его и помогает внести корректировки перед разработкой дизайна.
Технологическая основа проекта
1C-Bitrix
ReactJS
Next.js
Дизайн
Важное условие проекта — синхронизация с основным сайтом по дизайну и стилистике, чтобы показать преемственность брендаhttps://teboil.ru/
От клиента команда получила брендбук. В формировании структуры опирались на основной сайт и на схожие решения для проектов других брендов. Помимо визуально-цветовой концепции было важно согласовать тексты, расположение элементов, акценты и механику взаимодействия сайта с посетителем.
shop.teboil
teboil.ru
Верстка страниц
После завершения работы над дизайн-макетом приступили к этапу верстки, на котором картинка становится живой. Вёрстка сайта подсвечивает все недочеты, которые могут быть в макете. В нашем агентстве есть специальные регламенты и отдельный этап — подготовка макетов к вёрстке. Менеджер проекта контролирует файлы, их техническое соответствие для следующего этапа работы по сайту. Перед интеграцией с CMS проверили все страницы и разделы будущего сайта на наличие ошибок.
На следующем этапе проработали с заказчиком административную часть: структуру каталога, торгового предложения, процесс создания заказа и логику взаимодействия с заказами.
Отдельно реализовали двухстороннее интеграционное взаимодействие с фулфилмент-оператором, настроив обмен заказами, статусами, остатками, дополнительной информацией по заказам и много другое. К интернет-магазину подключили удобный интернет эквайринг для возможности оплачивать заказ онлайн.
В нашем агентстве есть специальные регламенты и отдельный этап — подготовка макетов к вёрстке.
Список товаров
Карточка товара
Корзина
SEO
При разработке интернет-магазина нужно помнить про поисковую оптимизацию. Качественное SEO органически приносит часть целевого трафика из поисковых систем без дополнительных затрат.
Поисковая оптимизация React приложений — задача непростая. Но опыт и экспертиза команды «Вебпрактик» подтверждают, что проекты на базе React из различных сфер попадают в топы поисковых выдач. Мы используем технологию SSR, которая позволяет отдавать скомпилированный HTML SEO-роботам.
Интеграция с внешними сервисами
Для полноценного функционирования интернет-магазина shop.teboil.ru интегрировали его с внешними сервисами. Подключили эквайринг для оплаты товаров, справочник адресов для корректного оформления доставки и фулфилмент-оператора для учета товаров, отслеживания заказов и контроля других бизнес-процессов.
Фулфилмент — важнейший узел, обеспечивающий процесс взаимодействия интернет–магазина с покупателями. Для интернет–магазина Teboil спроектировалии и настроили интеграцию с филфилмент-оператором, которого выбрал заказчик. Этот сервис автоматизирует все процессы по клиентским заказам и содержит данные о товарных остатках на складе, синхронизирует статусы заказов с сайтом, рассчитывает тарифы и способы доставки, аккумулирует запросы на отмену заказов.
Сервис интернет-оплаты интегрировали через API. Одно из преимуществ — компания самостоятельно сможет отслеживать финансовый поток по заказам, и если с оплатой возникнет какая-то проблема, компания сможет разобраться во всём самостоятельно и оперативно, не отправляя клиента в банк.
Для удобства покупателей по вводу информации, проверке и автозаполнению адресов подключили справочник Dadata. Он определяет города и адреса с почтовыми индексами по IP-адресу пользователя для корректного формирования заказов.
Тестирование
Финальный шаг — проверка работы сценариев интернет-магазина. Протестировали поведение в условиях высокой нагрузки, проверили пользовательские сценарии взаимодействия с момента регистрации до этапа получения статусов по оплаченным заказам. Проверили рекомендации SEO-специалистов.
Результат
За 4 месяца мы создали сайт интернет-магазина с удобной загрузкой контента, легким управлением и максимальной оптимизацией в плане SEO. Выдержали визуальное единство основного сайта бренда Teboil и интернет-магазина масел. Сайт сдан клиенту в срок, релиз состоялся в конце марта 2023 года.
Сайт стал мощной основой для дальнейшего развития сервисов интернет-магазина.
В планах:
добавление новых способов доставки;
добавление функционала скидок и акций внутри интернет-магазина;
интеграция с системой лояльности бренда;
внедрение фильтров для подбора масел;
реализация функционала отзывов и рейтинга товара;
улучшение SEO проекта.
Команда
Ильдар Васин
Менеджер проекта
3 Backend-разработчика
2 Frontend-разработчика
4 SEO-специалиста
DevOps
QA-инженер
Дизайнер
Контент-менеджер
Команда заказчика
Иван Саламатов
Руководитель проекта, бренд TEBOIL