Будущее уже сейчас
Сайт для системного интегратора Senetsy — просто космос!
Senetsy — профессионал на рынке системной интеграции. Компания продает сложное и дорогое IT-оборудование и программное обеспечение, которое специалисты (а это всегда инженеры, а не простые менеджеры по продажам) подбирают отдельно под клиента: учитывают особенности, требования, сферу деятельности и бюджет, уделяя большое внимание технической экспертизе.
Сайт интегратора сильно устарел и не мог донести преимущества компании и рассказать об оборудовании и технических решениях на должном уровне — требовалось масштабное обновление.
Сайт интегратора сильно устарел и не мог донести преимущества компании и рассказать об оборудовании и технических решениях на должном уровне — требовалось масштабное обновление.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3163-6461-4036-b830-656662316666__-__empty____.png)
Задачи
1
Создать свежий современный дизайн, формирующий положительный имидж компании.
2
Сформировать четкую структуру, чтобы все типы пользователей могли быстро найти нужную информацию.
3
Презентовать компанию и её услуги: показать процесс работы, преимущества и реализованные проекты.
Аналитика
Senetsy — не столько про разовую покупку какого-то оборудования, сколько про комплексные IT-решения. Потенциальные клиенты — IT-директора, инженеры и топ-менеджеры, которые ищут профессиональных решений, учитывающих специфику их бизнеса, а вот закупщики — совсем чужая аудитория.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild6135-3666-4032-b335-316363646264__-__empty__persons1.png)
Для целевой аудитории важно сформировать впечатление о компании, убедиться в её компетентности и понять процесс работы. Исходя из этого, на сайте было важно полностью пересмотреть подачу контента и уйти от типично каталожной системы — ставка должна быть именно на решениях, заточенных под конкретного клиента, и богатой экспертизе компании.
На прототипе мы предложили сделать акцент на процессе работы — именно он отличает Senetsy от других системных интеграторов: вместо обычной продажи оборудования по запросу компания сначала брифует клиента, чтобы узнать его глубинные потребности, а после предлагает несколько решений на выбор. А поскольку у компании партнёрские статусы с мировыми брендами оборудования, их логотипы мы разместили на первом же экране — так технически продвинутые пользователи сразу могут оценить, есть ли на сайте оборудование конкретных марок, и по клику перейти в каталог.
На прототипе мы предложили сделать акцент на процессе работы — именно он отличает Senetsy от других системных интеграторов: вместо обычной продажи оборудования по запросу компания сначала брифует клиента, чтобы узнать его глубинные потребности, а после предлагает несколько решений на выбор. А поскольку у компании партнёрские статусы с мировыми брендами оборудования, их логотипы мы разместили на первом же экране — так технически продвинутые пользователи сразу могут оценить, есть ли на сайте оборудование конкретных марок, и по клику перейти в каталог.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild6336-6664-4237-b766-646230643864__-__empty__proto.png)
Дизайн
В дизайне было важно сохранить строгую структуру, присущую сайтам отрасли, поэтому мы решили «похулиганить» с визуалом. Заказчик хотел придать новому сайту глубины, поэтому на брейншторме у нас родилась идея с психоделическим визуалом и космической тематикой, ведь системная интеграция для «непосвященных» — это неизведанный, необъятный и порой даже пугающий космос:)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild6237-3762-4962-a163-333766323764__-__empty__inspire_1.png)
![]() |
![]() |
Для альтернативной версии мы нашли другое решение — с меньшим градусом креативности:) В товарном знаке компании Senetsy есть элемент африканского дерева, выживающего в самых суровых условиях и одновременно вызывающего ассоциации с разветвленными решениями в системной интеграции. Мы решили обыграть эту связь в макете, взяв за основу цвета логотипа. Кроме того, эту версию мы показали клиенту в первую очередь, чтобы немного подготовить его к основной.
Клиенту понравились структура и космический визуал основной версии — она получилась впечатляющей, но немного мрачной, хотя изначально заказчик был не против монохромной гаммы.
Цвет пришлось поискать: исходный зелено-синий не подходил для концепции, а черный (даже разбавленный цветными картинками) получался слишком угнетающим. Мы долго штурмили, пока не наткнулись на органичную пару бирюзового и фиолетового.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3561-3434-4264-b762-376161326430__-__empty__photo.png)
Евгений
Арт-директор
Так, двигаясь от прототипа поэтапными дизайн-шагами (scrum-студия всё-таки), мы нашли идеальное для клиента решение:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3335-6664-4830-b466-633065376332__-__empty__main_fin_all_800.png)
На сайте практически нет типовых текстовых страниц — на странице «Компания» процесс показан с помощью иллюстрированных блоков. Похожий приём используется на странице «Как купить».
Разработка
Девиз нового сайта Senetsy — «Будущее уже сейчас». На первом экране мы реализовали эффектную анимацию, которая переводит слоган с английского и отображает ключевых партнёров. Фишка в том, что первый экран при скролле пропадает, оставляя только плашку со слоганом.
Анимация есть и в блоке ниже, рассказывающем о типах решений: космические фотографии гипнотически приближаются и отдаляются, создавая глубину и привлекая внимание. В этом же блоке есть быстрые ссылки на конкретные продукты в каталоге.
Продажа оборудования для сетевой интеграции через простой клик на корзину в каталоге невозможна — во-первых, универсальных решений не существует, во-вторых, при подборе нужного решения приходится учитывать много клиентской специфики. Поэтому в блоке, рассказывающем об этапах работы, спрятан колл-ту-экшн — форма заявки. Она не кричит пользователю «купи-купи!», а предлагает просто поговорить о его проблеме, заказав консультацию у менеджера. И это бесплатно. Только после детального обсуждения менеджер, если нужно, предложит подбор индивидуального решения.
Продажа оборудования для сетевой интеграции через простой клик на корзину в каталоге невозможна — во-первых, универсальных решений не существует, во-вторых, при подборе нужного решения приходится учитывать много клиентской специфики. Поэтому в блоке, рассказывающем об этапах работы, спрятан колл-ту-экшн — форма заявки. Она не кричит пользователю «купи-купи!», а предлагает просто поговорить о его проблеме, заказав консультацию у менеджера. И это бесплатно. Только после детального обсуждения менеджер, если нужно, предложит подбор индивидуального решения.
Над каталогом Senetsy мы поработали основательно. Он имеет довольно сложную структуру: продукция делится по производителям, по назначению, а внутри каждого раздела есть ещё и несколько подуровней.
Основная сложность раздела с продукцией была в том, что физически разделы и подразделы — это один и тот же тип сущности, но в бизнес-логике каждый уровень вложенности — отдельный тип сущности, и у каждого типа сущности есть свой набор характеристик.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild6665-3835-4334-b561-323864666562__-__empty__den-vinokurov.jpg)
Денис
Разработчик
Иерархия в каталоге
1 уровень — производитель;
2 уровень — тип оборудования (категории);
3 уровень — список серий;
4 уровень — серия.
2 уровень — тип оборудования (категории);
3 уровень — список серий;
4 уровень — серия.
Серия — финальная страница продукта, где выводятся все возможные модификации продукта со схемами, таблицей сравнения характеристик и кнопкой «получить цену» по каждой.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3165-3233-4365-b236-306434653936__-__empty___800.png)
Команда инженеров участвует в заполнении контента, поскольку разбирается во всех технических характеристиках, как никто другой. И для удобства работы со столь сложной структурой каталога мы полностью перепилили функционал Битрикса, сделав карточку оборудования в админке невероятно кастомной и гибкой: админ может выбирать, что отображать, а что нет.
Все продукты иерархически разбиты по производителям, типам, семействам, сериям. Контент-менеджер может вбить различные свойства для каждой единицы, настроить параметры этих свойств (вкладки, группировку и сортировку свойств, и не только) на любом уровне иерархии. Удобство в том, что на нижних уровнях свойства наследуются от верхних — это помогает избежать дублирования и сокращает время на ввод информации.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild6530-3366-4531-a565-383861613230__-__empty__photo.png)
Павел
Разработчик
Ниже в карточку серии подтягиваются материалы по теме из раздела с публикациями. Публикации на сайте Senetsy несут не только имиджевую функцию, но и формируют образ эксперта и привлекают уже состоявшихся клиентов за полезной информацией.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3931-3366-4262-b030-303962393432__-__empty___800.png)
Внутри раздела с материалами транслируются свежие посты из Твиттера, а также есть раздел с технической документацией, куда можно прикреплять PDF-руководства к оборудованию.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3038-3736-4633-b936-333732316230__-__empty_____.png)
Когда речь заходит о покупке оборудования (особенно если оно критически важное и недешевое), большое значение имеют клиенты и их отзывы. Учитывая ранг заказчиков Senetsy, отзывов в виде «лого-должность-цитата» недостаточно — важно подтвердить компетентность на уровне официальных рекомендательных писем. Мы не стали располагать их плиткой (как часто делается в таких случаях), а спрятали миниатюры на плашках с цитатами: при клике письмо разворачивается на всю страницу.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3030-3338-4531-b335-393964313333__-__empty__clients_800.png)
Во всплывающем окне предусмотрено несколько опций: можно включить слайд-шоу, переключаться между письмами листалками по бокам и во всплывающей плитке справа.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3437-3832-4564-b038-646264326262__-__empty__cliens-detail_800.png)
Редко когда заказчик морально готов радикально и креативно подойти к редизайну. Здесь же нас попросили показать глубину глубин их работы, которая бы сочетала в себе ассоциативные образы надежности, работы с клиентами, экспертизы. И при этом важно сохранить строгость контента, чтобы всем было удобно с ним работать. У нас получилось :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project30911_1534224192/tild3764-3030-4530-a663-373264313133__-__empty__Dina.jpg)
Дина
Руководитель проекта
Готовый проект