Комментарии
Типичный скрам и пирамида автоматизации технологических процессов
Результат Процесс
Сайт для группы компаний SCAD tech
Сибирикс
Сайт для группы компаний
SCAD tech
Пирамида автоматизации технологических процессов
Не ошибается только тот, кто ничего не делает? На производстве, где от ошибки зависят ключевые финансовые показатели, такие отговорки не пройдут — любая неточность губительно сказывается на бизнесе. И доверять серьёзные технологические процессы человеческому фактору — значит, подарить конкурентам клиентов, репутацию и прибыль.

Для автоматизированного управления технологическими процессами Группа компаний SCAD tech разрабатывает комплексные решения. Они предназначены для нефтегазового сектора, горно-металлургической промышленности, энергетики, транспорта и инфраструктуры. Специалисты ГК проектируют и внедряют системы для управления объектами (ЕСДУ и СДКУ), разрабатывают математические модели для регулирования движения нефти, производят программные продукты для работы автоматизированных систем (блок-контейнерная продукция, шкафы автоматики и телемеханики, и т. д.).
Задачи
1
Оптимизировать структуру сайта для быстрого поиска нужной информации.
2
Разработать дизайн, отражающий образ компании.
3
Интересно подать информацию о производстве и технологиях.
4
Отразить конкурентные преимущества и подчеркнуть имидж эксперта.
5
Подробно рассказать о продукции и услугах и предусмотреть возможность обратной связи.
6
Проработать адаптивную версию для смартфонов и планшетов.
Аналитика
Сайты в сфере производства отличаются ставкой на репрезентативность — каждая страница должна транслировать экспертный статус, формировать положительный имидж, отражать последние тенденции и параллельно подталкивать пользователя к заполнению заявки, чтобы заказать или обсудить с менеджером свой проект.

Ситуация усложняется еще и тем, что в целевой аудитории присутствуют группы с разными задачами, мотивами и статусом: это и руководители, которые хотят сложить впечатление о группе компаний, и технические специалисты, которым хочется продвинутых решений, и партнёры, для которых сайт становится инструментом взаимопиара. Помимо типично бизнесовых посетителей есть и соискатели, которые пока только приглядываются к возможному месту работы и хотят узнать больше о ценностях, истории компании и руководстве.
Исходя из мотивов и болей целевой аудитории, мы выявили необходимые разделы сайта и разработали прототип. Пирамида — центральный элемент, через который рассказывается о направлениях деятельности компании. Этот образ был в корпоративном видео, и заказчик хотел сделать его ключевым на новом сайте.
Корпоративное видео
Прототип
Дизайн
В дизайне мы сохранили фирменный стиль и узнаваемость компании через использование красного цвета и фоновой подложки. Блок с пирамидой вынесли на отдельный экран и трансформировали в элемент навигации: нажав на сегмент пирамиды, попадаешь в соответствующий раздел.
Одним из основных референсов было корпоративное видео. Мы адаптировали существующую стилистику в новый дизайн — например, «подкрутили» красный, сделав его свежее. Заказчик стремительно и без правок принял главную, и мы перешли к дизайну внутренних.

Евгений
Арт-директор
На основном варианте предложили нестандартную сетку, где видео из промо-блока находит на шапку, и монохромный визуал в блоках о направлениях деятельности. Тот же вариант показали с цветным контентом. На альтернативной версии — фоновое видео в промо-блоке, а поверх него накладываются элементы навигации, заголовки и лого партнёров. Заказчик выбрал основную версию с цветным визуалом.

Другая фишка главной — карта с географией проектов с отрисованными симпатичными промышленными объектами. Её реализовали уже во втором спринте, поскольку первый релиз был нужен к выставке — мы запустили облегченную версию сайта, на которую сейчас накатываем фичи и обновления.
Страница «О компании» — одна из важнейших, поскольку пользователям нужно сложить впечатление о потенциальном бизнес-партнёре. Здесь, помимо текстового описания, появляется аккуратный таймлайн с вехами развития группы компаний и блок с ценностями.
Немножко забегаем вперёд — смотрите, как классно слайдится таймлайн:
На страничке «Наше руководство» мы разместили слайдер с большими фотографиями и алыми плашками. В сочетании с красочной профессиональной съемкой от заказчика получилось очень эффектно:
Часто на сайтах промышленной и технической сфер много документации: сертификаты, руководства, анкеты и шаблоны договоров. Чтобы это выглядело презентабельно, и пользователи хотели скачать и заполнить какой-то документ, выдавать их сплошным текстом — плохая идея. Мы добавили иконки с подписями — это и наглядно, и удобно:
Разработка
Главная фишка сайта — пирамида на главной: с помощью масок внутри каждого её блока при наведении появляются фотографии, соответствующие одному из комплексных решений. При скролле она служит своеобразным оглавлением, а при клике на раздел пользователь «проваливается» в нужный сегмент:

Эта же пирамида появляется в нашем копирайте:)

Мы любим зашивать микроанимации в пользовательские взаимодействия: например, мини-промышленные объекты на карте с главной страницы забавно подпрыгивают при наведении. Как и контакты в футере. А на страничке «Контакты» точки расположения офисов спускаются на карту сразу при загрузке страницы, а при клике преобразуются в геометку.
На страничке вакансий на подложке тоже есть монохромная карта — специалисты требуются по всей России. Можно установить фильтрацию по конкретному городу. Удобство раздела для соискателей в том, что здесь сразу можно связаться с работодателем через форму, которая учитывает, на какую именно вакансию человек хочет откликнуться.
На сайте SCAD tech есть и другая форма — для обратной связи по любому вопросу, которая учитывает, с какой страницы задаётся вопрос, и распределяет запросы на почты разных отделов:
И хотя в разделе «Производство» страницы планировались типовыми, мы предусмотрели для заказчика больше возможностей — помимо аккуратных маркированных и нумерованных списков и виджетов с фото, можно добавлять форму обратной связи и сниппет для открытия изображений в увеличенном виде.
Главный акцент при реализации сделан на анимации и адаптиве. Вместо пирамиды там аккуратные блоки с иконками и раскрывающимся описанием о каждом из направлений работы компании. Чтобы облегчить загрузку страницы — видео на промо-блоке для телефонов заменили на картинку.

Александр
Разработчик
На адаптиве в раскрывающемся меню сразу видна вся структура сайта — это помогает пользователям быстро сориентироваться и найти нужное:
Сайт получился лаконичным по структуре и дизайну, что полностью отражает деловой имидж компании, а алые акценты добавляют стиля. Обратите внимание, как тщательно подобран фотоконтент — результат сплоченной работы дизайнера и заказчика. SCAD tech активно продолжают обновлять проект и скорее всего, когда вы прочитаете эту статью, на сайте уже появится что-то новенькое. Так что бегите смотреть :)

Татьяна
Руководитель проекта