Основные задачи

У клиента был сайт, который выглядел устаревшим и имел технические проблемы. Мы сделали редизайн и обновили его, обеспечив современный и стабильный функционал для роста бизнеса.

В рамках разработки мы должны были предусмотреть:
— Разработку интуитивного каталога товаров с удобной навигацией.
— Создание гибкой архитектуры сайта с возможностью масштабирования (добавление новых разделов и функций).
— Повышение скорости загрузки сайта и общей технической производительности.
— Обеспечение адаптивности под устройства и экраны.
— Улучшение пользовательского пути от первого визита до оформления заявки.

Оптимальную структуру сайта

Логичную, удобную для пользователя и соответствующую требованиям SEO
Простое администрирование

Интерфейс админ-панели должен быть понятен даже тем, кто ранее не работал с CMS
Интеграцию с CRM Битрикс24

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

Google Analytics, Яндекс Метрика для отслеживания поведения пользователей
Многоуровневую систему доступа

Разграничение прав для администраторов, редакторов и менеджеров
Удобную мобильную версию

Не просто адаптацию, а продуманную мобильную UX-логику

ЭТАП 1. Проектирование

При проектировании структуры мы использовали старую версию сайта, чтобы сохранить привычность для пользователей и учесть бизнес-потребности.

Основные акценты:

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

ЭТАП 2. Дизайн и вёрстка

На этом этапе наша задача была создать удобный и визуально привлекательный интернет-магазин для изготовления памятников и благоустройства. Мы выбрали готовое решение с последующей кастомизацией.

В дизайне сделали акценты:

В шапке разместили кнопки «Памятники» и «Благоустройство», чтобы пользователи сразу попадали в нужный раздел.
В подвал добавили интерактивную карту с точками магазинов, где можно построить маршрут до выбранного магазина.
На странице «Отзывы» реализовали автоматическую подгрузку рейтингов из Яндекса и Google, обновляющихся еженедельно.
Подготовили четыре цветовые схемы, из которых клиент выбрал наиболее подходящую. Также предложили альтернативные шрифты для улучшения читаемости.

Логотип и баннеры адаптированы с предыдущей версии сайта для сохранения бренда. При верстке учли адаптивность, кроссбраузерность и быструю загрузку, протестировав сайт на разных устройствах для удобства пользователей.

Цветовая схема 1
Цветовая схема 2
Цветовая схема 3
Цветовая схема 4
UI KIT
Прототип главой страницы
Прототип главой страницы на мобайле
Прототип карточки товара
Прототип отзывов
Прототип меню

ЭТАП 3. Программирование

Для реализации проекта мы выбрали готовое решение на CMS MODX — гибкую платформу, идеально подходящую для бизнес-проектов с возможностью масштабирования. Эта система обеспечивает стабильную работу и удобный интерфейс для контент-менеджеров без необходимости знаний в кодировании.

Функционал сайта включает:

Управление товарами, категориями и подкатегориями: добавление, удаление, редактирование и скрытие.
Работа с информационными разделами: статьи, страницы «О компании», контактные блоки и другие материалы.
Создание новых страниц и разделов с помощью готовых шаблонов.
Простота администрирования для сотрудников с базовыми компьютерными навыками.

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

Отметим преимущества сайта для продвижения:

Для каждой страницы можно прописать теги Tilte и Description, необходимые для корректного SEO-продвижения;
Имеется раздел «Новости» и можно создать раздел «Блог» для контент-маркетинга;
Предусмотрены технические аспекты SEO: генерация статических URL, наличие файлов Robots.txt и Sitemap.xml, наличие 404 страницы и т. д.
Есть возможность создавать посадочные страницы под рекламные кампании и для SEO-оптимизации;
Установлены аналитические счётчики Метрики и Google Analytics 4 для сбора статистики.