Отдельный сценарий для телефона
Быстрый заказ доступен без наведения мыши, меню учитывает доступную высоту экрана, а кнопки удобно нажимать пальцем.
Из старого каталога — в B2B-инструмент оптовой заявки
Полностью пересобрал сайт ивановского производителя женского трикотажа: от структуры и визуальной системы до каталога, серверной логики, SEO-миграции и запуска.
- Формат
- Полная пересборка
- Основа
- OpenCart 4
- Роль
- От исследования до запуска
- Результат
- Рабочий B2B-каталог
Содержание кейса
Не перекрасить старое, а пересобрать путь покупателя
Сайт должен был не просто показывать товары, а помогать оптовому клиенту собрать запрос по нескольким моделям и размерным рядам — без лишних переходов и потери позиции в каталоге.
От прежнего проекта сохранились бренд, полезный контент, актуальные товары и OpenCart как административная основа. Структура, интерфейс и сценарий заказа были спроектированы заново.
Скриншот будет добавленДо редизайнаГлавная старого сайта или характерный экран прежнего каталога.
Старый сайт состоял из отдельных страниц и товаров.
Новый ведёт от знакомства с производством к одной оптовой заявке.
Каталог перестал быть тупиком
Главный сценарий собран вокруг реальной оптовой закупки: найти модель, указать количество по размерам, добавить другие позиции и отправить всё одним запросом.
- НайтиПо названию, артикулу, категории, размеру и составу
- Выбрать размерыКоличество задаётся отдельно для каждого варианта
- Собрать заказНесколько моделей остаются в одной корзине
- Отправить заявкуМенеджер получает структурированное письмо
Скриншот будет добавленКаталогDesktop-экран каталога: карточки товаров, фильтры, поиск и сортировка.
Скриншот будет добавленБыстрый заказПанель выбора количества отдельно для каждого размера.
Визуальная система работает на ассортимент
Крупная предметная фотография, ясная типографика и спокойная редакционная сетка помогают быстро ориентироваться в моделях и не конкурируют с продукцией.
Винный цвет держит фирменные поверхности, розовый отмечает действия и активные состояния, а светлый фон сохраняет ощущение каталога.
Скриншот будет добавленКарточка моделиКарточка товара или раскрытая полноэкранная галерея с фотографиями.
Галерея без лишнего шума
Полноэкранный просмотр, листание, увеличение, закрытие клавишей Esc и корректный возврат к товару.
Движение под контролем
Слайдер останавливается при взаимодействии, фоновые анимации — за пределами экрана, а настройка уменьшения движения учитывается автоматически.
Одна заявка вместо цепочки сообщений
Корзина хранит несколько моделей и размеров, считает ориентировочную сумму и показывает, сколько осталось до минимального оптового заказа. После отправки менеджер получает готовую структуру запроса.
Скриншот будет добавленОптовая корзинаКорзина с двумя или более моделями, размерами, количеством и суммой.
Скриншот будет добавленПисьмо менеджеруОформленное HTML-письмо: контакты, источник и таблица заказа.
Новый сайт удобен не только покупателю
OpenCart сохранился как знакомая административная основа, но получил инструменты для массовой работы с ассортиментом и SEO.
Товары выгружаются и загружаются через XLSX, ошибки видны до применения импорта, а изображения автоматически получают WebP-копии и заранее прогреваются для нужных размеров.
Скриншот будет добавленИнструменты администратораЭкран предпросмотра XLSX-импорта или панель прогрева изображений.
- XLSX
- Название, артикул, описание, цена, категории, параметры и SEO-поля в одном файле.
- Предпросмотр
- Создание и обновление товаров различаются, ошибки показываются по строкам до импорта.
- Изображения
- Автоматические WebP-копии, совместимый fallback и пакетный прогрев кэша.
Новая структура — без слепой потери старых адресов
Для каждого старого адреса определил дальнейший маршрут. Актуальные страницы перенаправил, устаревшие корректно удалил, а спорные соответствия вынес на ручную проверку.
500URL старого sitemap проанализировано
501строка: 500 адресов sitemap и один сохранённый маршрут
61/61новый URL ответил 200 при запуске
90 адресов получили постоянные редиректы
410 страниц удалены корректно, без перенаправления на нерелевантный контент
1 маршрут сохранён без изменения и учтён в общей карте
То, чего не видно на скриншотах
Редизайн был только одной частью проекта. Параллельно настраивались формы, аналитика, техническое SEO, производительность, почта и безопасный перенос на основной домен.
Формы и безопасность
- Единый серверный обработчик и структурированные письма
- Сессионный токен, honeypot и ограничение частоты
- Проверка расширения, MIME-типа и структуры вложений
- MX, SPF, DKIM и DMARC с проверкой доставки
SEO и аналитика
- Canonical, sitemap, robots, 404 и хлебные крошки
- JSON-LD для организации, страниц, товаров и предложений
- Метрика, Вебвизор и электронная коммерция
- Четыре проверенные бизнес-цели
Скорость и надёжность
- Адаптивные изображения, WebP и lazy loading
- Файловый кэш данных и Twig-шаблонов
- Годовой браузерный кэш статики с версионированием
- CSP, HSTS и закрытые служебные каталоги
Не витрина, а рабочий инструмент продаж
Компания получила новый фирменный сайт, где оптовый клиент может пройти весь путь от знакомства с производством до одной собранной заявки.
Для бизнеса это управляемый каталог, массовая работа с товарами, безопасные обращения, подготовленная поисковая миграция и аналитика всего пути — основа, которую можно развивать дальше.
Что было в моей зоне ответственности
- Исследование и требования
- Информационная архитектура
- UX/UI и адаптив
- Frontend-разработка
- OpenCart и серверная логика
- Каталог и быстрый заказ
- XLSX-импорт и экспорт
- Формы и письма
- SEO-миграция
- Метрика и e-commerce
- Оптимизация
- Перенос и запуск
Нужно так же глубоко пересобрать сайт?
Пришлите ссылку на текущий проект и опишите, что мешает бизнесу сейчас. Я посмотрю структуру, функционал и предложу понятную точку старта.