Разработка сайта‑каталога Motorsboat

Motorsboat — компания, специализирующаяся на поставках лодочных моторов, ПВХ‑лодок, запчастей и аксессуаров. Охватывает рынок Юга России и осуществляет доставку за его пределы. Работает как с розничными покупателями, так и с оптовыми клиентами.

Создать функциональный сайт‑каталог motorsboat.ru, который продемонстрирует весь ассортимент моторов, лодок, запчастей и аксессуаров и позволит быстро и просто оформить заказ.

🔵 разработать понятный каталог продукции с фильтрацией по категориям (моторы, лодки, запчасти, аксессуары), брендам, мощности, габаритам и другим ключевым параметрам;
🔵 создать информативные карточки товаров с описанием, техническими характеристиками, фото, ответами на частые вопросы;
🔵 сделать быстрый и удобный процесс заказа товаров на сайте;
🔵 интегрировать платежную систему и систему доставки;
🔵 обеспечить адаптивность под все устройства (десктоп, планшет, смартфон).

Этап 1. Маркетинг

Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты.

Компания:

• провели интервью с клиентом;

• проанализировали маркетинговые материалы, прайс‑листы и техническую документацию;

• составили карту пользовательских сценариев (например, «рыбак ищет мотор до 10 л. с.», «предприниматель сравнивает цены на ПВХ‑лодки для проката», «мастер ищет запчасти для ремонта мотора»).

Клиенты:

• сформировали образ целевой аудитории:

• рыболовы и любители водного отдыха;

• предприниматели (прокат лодок, туристические базы);

• сервисные центры и мастерские по ремонту моторов;

• оптовые закупщики;

• владельцы яхт и катеров;

• создали «аватары клиента» для разных сегментов;

• проанализировали боли и потребности (поиск по техническим параметрам, сравнение цен, проверка наличия, быстрая подача заявки).

Конкуренты:

• изучили 12 сайтов конкурентов в нише лодочных моторов и ПВХ‑лодок;

• составили список из 36 идей по представлению технических данных и оформлению заказов.

На основе данных сформировали «Чемодан знаний».

Результат:

• 4 «аватара клиента»;

• анализ 12 конкурентов;

• список из 36 идей для реализации.

Этап 2. Проектирование

Используя «Чемодан знаний», спроектировали ключевые страницы:

• главная страница;

• каталог продукции;

• карточки товаров;

• корзина;

• страница оформления заказа:

• страница доставки;
• платежная система;

• личный кабинет (история заказов, текущие заказы, личные данные);

• «О компании» (история, география поставок, преимущества, коллектив);

• «Доставка и оплата»;

• «Новости и статьи»;

•  контакты.

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

Результат:

• прототипы страниц;

• документ ТЗ.

Этап 3. Дизайн сайта

Что сделали:

• разработали дизайн с учетом специфики продукции и потребностей целевой аудитории;

• создали адаптивные макеты для планшета и смартфона;

• проработали UX‑элементы: фильтры каталога, карточки товаров, формы заявок, кнопки «Добавить в корзину»;

• подобрали фотоконтент;

• согласовали визуальную концепцию (корпоративные цвета, шрифты, стиль подачи технической информации).

Результат: дизайн‑макеты всех страниц.

Этап 4. Верстка

Что сделали:

• сверстали макеты с использованием HTML, CSS и JavaScript;

• оптимизировали скорость загрузки (сжатие изображений, кеширование, отложенная загрузка контента);

• обеспечили адаптивность для разных браузеров и устройств;

• протестировали отображение на экранах с разным разрешением.

Результат: готовые HTML‑страницы сайта.

Этап 5. Разработка (back‑end)

Разработали сайт motorsboat.ru на платформе «1С‑Битрикс» (лицензия «Бизнес»).

1. Развернули платформу «1С‑Битрикс», настроили базу данных.

2. Реализовали следующие модули:

• каталог продукции с фильтрацией по категориям, брендам, техническим параметрам;

• карточки товаров с техническими характеристиками, фото, инструкциями и кнопкой «В корзину»;

• корзина, в которой удобно выбрать количество товара и ввести промокод для получения скидки;

• страница оформления заказа: страница доставки, платежная система;

• «Доставка и оплата» (способы, сроки, стоимость);

• «О компании» (история, партнеры, география поставок);

• «Новости» (обновления ассортимента, акции);

• личный кабинет (история заказов, текущие заказы, личные данные).

3. Интегрировали платежную систему, систему доставки.

4. Настроили интеграцию с CRM (Битрикс24).

5. Настроили высокую производительность: 

• настроили кеширование;
  
• сжали изображения.

6. Провели базовую SEO‑оптимизацию сайта (ЧПУ, метатеги, микроразметка). 

7. Настроили CMS.

Результат: готовый сайт альфа‑версии.   

Этап 6. Тестирование и запуск

Что сделали:

• проверили работоспособность всех функций (фильтры, формы, личный кабинет, загрузка документов);

• протестировали адаптивность на разных устройствах (десктоп, планшет, смартфон);

• устранили баги и оптимизировали скорость загрузки;

• перенесли сайт на основной сервер и подключили домен;

• провели финальное SEO‑сканирование и исправили выявленные недочеты.

Результат: готовый сайт бета‑версии.

Этап 7. Обучение

Чтобы упростить работу с админ‑панелью, использовали редактор WYSIWYG.

Для удобной работы менеджера со стороны заказчика мы:

• подготовили видеоинструкции по управлению контентом (добавление товаров, обновление цен, публикация обзоров);

• провели онлайн‑консультацию для сотрудников;

• продемонстрировали функционал сайта и ответили на вопросы;

• передали документацию по администрированию.

Результаты:

• подготовленная документация;

• готовая инструкция;

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