Этап 1. Маркетинг
Собрали информацию по принципу трех «К»: Компания, Клиенты, Конкуренты.
Компания:
- провели интервью с клиентом;
- проанализировали ассортимент, ценовую политику, логистику;
- составили карту пользовательских сценариев (например, «автосервис ищет масло по артикулу», «дистрибьютор оформляет оптовый заказ», «частник подбирает фильтр для своей машины»).
Клиенты:
- сформировали образ целевой аудитории;
- представители автосервисов и СТО;
- менеджеры по закупкам промышленных предприятий;
- частные автовладельцы;
- создали «аватары клиента» для разных сегментов;
- проанализировали боли и потребности (поиск аналогов, прозрачность цен, скорость обработки заказов, наличие сертификатов).
Конкуренты:
- изучили 12 сайтов конкурентов в сегменте поставок масел и автохимии;
- выделили лучшие практики по презентации технических характеристик и работе с B2B‑клиентами.
На основе данных сформировали «Чемодан знаний».
Результат:
- исследование ЦА;
- анализ компании;
- обзор конкурентов.
Этап 2. Проектирование
Используя «Чемодан знаний», спроектировали ключевые страницы:
- главная страница (презентация компании, преимущества, ключевые категории, акции);
- каталог продукции (фильтрация по типу, применению);
- карточка товара (характеристики, аналоги, похожие товары, фото);
- страница поиска (по артикулу, названию, фильтрация по цене);
- личный кабинет оптового клиента (персональные цены, корзина, история заказов, трекинг, документы);
- личный кабинет розничного клиента (личные данные, корзина, текущие заказы, история заказов, подписки на товары);
- правила заказа для розничных и оптовых клиентов;
- раздел «Доставка»;
- раздел «О компании» (история, партнеры);
- раздел «О продукции» (статьи);
- контакты (карта, телефоны, email).
Разработали прототипы всех страниц. Неоднозначные функции описали в техническом задании (ТЗ), сделав его лаконичным и понятным.
Результат:
- прототипы страниц;
- документ ТЗ.
Этап 3. Дизайн
Что сделали:
- разработали дизайн в строгом, деловом стиле с акцентом на функциональность и доверие;
- создали адаптивные макеты для планшета и смартфона;
- проработали UX‑элементы: фильтры каталога, поиск по артикулу, навигацию;
- подобрали фотоконтент (продукция, сертификаты, производственные процессы);
- согласовали визуальную концепцию (корпоративные цвета, четкая типографика, лаконичные иконки).
Результат: дизайн‑макеты всех страниц.
Этап 4. Верстка
Что сделали:
- сверстали макеты с использованием HTML, CSS и JavaScript;
- оптимизировали скорость загрузки (сжатие изображений, кеширование);
- обеспечили адаптивность для разных браузеров и устройств;
- добавили микроанимации для улучшения UX (плавные переходы, подсветка активных элементов);
- протестировали отображение на экранах с разным разрешением.
Результат: готовые HTML‑страницы сайта.
Этап 5. Разработка (back‑end)
Разработали интернет-магазин komteks.ru на платформе «1С‑Битрикс» (лицензия «Бизнес»).
Реализовали модули:
- главная страница;
- каталог продукции;
- карточка товара;
- страница поиска;
- личный кабинет оптового клиента;
- личный кабинет розничного клиента;
- правила заказа для розничных и оптовых клиентов;
- раздел «Доставка»;
- раздел «О компании»;
- раздел «О продукции»;
- контакты.
Дополнительно:
- интегрировали CRM (Битрикс24) для синхронизации заказов и клиентской базы;
- подключили систему учета для актуализации остатков и цен;
- провели SEO‑оптимизацию (ЧПУ, метатеги, микроразметка);
- настроили CMS для простого добавления продукции и цен;
- установили SSL‑сертификат и политику конфиденциальности.
Результат: альфа‑версия сайта.
Этап 6. Тестирование и запуск
Что сделали:
- проверили работоспособность всех функций (каталог, поиск, личный кабинет);
- протестировали адаптивность на разных устройствах;
- устранили баги и оптимизировали скорость загрузки;
- перенесли сайт на основной сервер и подключили домен;
- провели финальное SEO‑сканирование и исправили недочеты;
- проверили соответствие требованиям по защите персональных данных и документации.
Результат: готовый сайт.
Этап 7. Обучение
Мы максимально подготовили платформу для удобного управления менеджерами заказчика.
-
Мы сделали систему внутри Битрикса максимально простой, убрали лишние элементы из интерфейса.
-
Настроили работу удобного редактора WYSIWYG (похож на MS Word). Он удобен для создания контента и редактирования страниц.
Для удобной работы менеджера со стороны заказчика мы:
- подготовили видеоинструкции по управлению контентом (добавление продукции, обновление цен, публикация новостей);
- провели онлайн‑консультацию для сотрудников компании;
- продемонстрировали функционал сайта и ответили на вопросы;
- передали документацию по администрированию.
Результаты:
- подготовленная документация;
- готовая инструкция;
- менеджер заказчика получил навыки самостоятельного управления сайтом.
