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

Создать мультирегиональный сайт

Создать сайт на одной платформе для двух аудиторий: европейской и российской
Продумать структуру каталога

Оптимизировать структуру для дальнейшего продвижения
Создать хранилище документации

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

Сформировать сообщество профессионалов, делиться с ними новостями и документацией

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

Кликабельная версия прототипа для просмотра в браузере

На момент старта работ у компании был сайт, разработанный более 10 лет назад на самописной системе управления. Разработчик давно уволился, техническая поддержка сайта прекратилась.

Кроме того база товаров и документации настолько разраслась, что содержала огромное количество ошибок, битых ссылок, неактуальной информации. Администратор сайта уже не мог всей этой базой информации.

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

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

Далее подготовили и прототипы всех типов страниц.

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

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

Фирменный стиль клиента был переработан полностью. Ранее основным цветом был голубой. Но такой же цвет использовал и конкурент, поэтому для того, чтобы сделать фирменный стиль более узноваемым было принято решение полностью переработать логотип, ипользуемые шрифты.

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

Цветовая схема
Сайт на разных разрешениях
Дизайн главной страницы (RU)
Дизайн главной страницы (EN)
Дизайн каталога
Дизайн категории товаров (упрощённая)
Дизайн категории товаров (детальная)
Дизайн карточки товара (описание)
Дизайн карточки товара (характеристики)
Дизайн карточки товара (файлы)
Дизайн карточки товара (упрощённая)
Дизайн раздела с брендами
Дизайн карточки бренда
Дизайн раздела тех. поддержки
Дизайн блога новостей
Дизайн новостной статьи
Дизайн информационной страницы

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

Для реализации проекта использовалась система управления Evolution CMS.

В ходе этапа проектирования был реализован следующий функционал:

полное управление контентом из админ-панели сайта без использования html-кода (контакты, социальные сети, заголовки, кнопки, реквизиты и др.)
многоуровневый каталог товаров
страницы брендов-партнеров с привязкой категорий товаров и карточек товаров к ним
блог
личный кабинет пользователя с модерацией при регистрации
подписка на рассылку из личного кабинета (на весь каталог или только интересующие направления)
мультиязычность (RU и EN) и мультирегиональность (подготовка к продвижению сайта на несколько регионов)
добавление технической документации для товаров (часть документации публичная, часть — только для зарегистрированных пользователей)
модуль ведения документации в админ-панели (разграничение прав доступа, версионность)

Первичное наполнение товарами было призведено автоматическим переносом со старого сайта на новый.

В процессе выполнялось модульное и операционное тестирование.

Перед переносом на хостинг были проведены необходимые seo-работы: перенесена оптимизация сайта и настроены редиректы. Таким образом, мы минимизировали просадку трафика и падение позиций в момент переезда.