Hi-Tech компас в сфере автоматизации бизнеса
Сайт-презентация новаторского решения от международной компании Colvir
Написать внутренний продукт для B2B-бизнеса или систему учёта и контроля для производств — одно, скоординировать работу банка, почты или государственных финансовых институтов — уже другое. Но компания Colvir Software Solutions, основанная в Великобритании, уже 20 лет успешно разрабатывает и внедряет комплексные интегрированные решения для автоматизации бизнес-процессов в любых субъектах экономики, какими бы сложными и иерархичными те ни были.
В компании разработали новаторское решение для бизнеса — Colvir MIS. Это система для поддержания полного цикла управления и принятия грамотных бизнес-решений в любых отраслях. И ей требовался добротный сайт-презентация, который раскрыл бы все преимущества разработки, вызвал доверие и сформировал целое бизнес-сообщество.
В компании разработали новаторское решение для бизнеса — Colvir MIS. Это система для поддержания полного цикла управления и принятия грамотных бизнес-решений в любых отраслях. И ей требовался добротный сайт-презентация, который раскрыл бы все преимущества разработки, вызвал доверие и сформировал целое бизнес-сообщество.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6664-3838-4863-b035-346163306531__-__empty____.png)
Задачи
- 1Презентовать решение Colvir MIS, сформировав имидж надежного партнёра.
- 2Продумать структуру сайта, чтобы доступно рассказать о решении, его особенностях и преимуществах.
- 3Выгодно преподнести кейсы и отзывы.
- 4Отразить информацию о решении и сделать акцент на простоте его настройки и масштабируемости.
- 5Адаптировать сайт под разные устройства.
Аналитика
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3637-3834-4162-b232-313766663430__-__empty__group_98-min.png)
Сайты прямых конкурентов либо скучные, либо малоинформативные — первый яркий, но о решениях рассказывается по-минимуму, второй даёт много информации, но она плохо визуализирована, третий — где-то посерединке.
А между тем, пользователям хочется ответить для себя на ряд вопросов, прежде чем выбирать партнёра для внедрения решения по автоматизации бизнеса.
А между тем, пользователям хочется ответить для себя на ряд вопросов, прежде чем выбирать партнёра для внедрения решения по автоматизации бизнеса.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3161-6236-4530-b962-666432646666__-__empty__persons1.png)
1. Обычно не очевидно, действительно ли решение подходит под нужды компании
Смотрим агрегацию, сравниваем с решениями на рынке — пользователям часто не хватает конкретики. Показываем на прототипе блок с кратким перечнем возможностей системы и её основными принципами. Клиентам с первого взгляда на страницу ясно, какие проблемы можно закрыть разработкой от Colvir, будь то оптимизация издержек или регулирование управленческого аппарата.
Смотрим агрегацию, сравниваем с решениями на рынке — пользователям часто не хватает конкретики. Показываем на прототипе блок с кратким перечнем возможностей системы и её основными принципами. Клиентам с первого взгляда на страницу ясно, какие проблемы можно закрыть разработкой от Colvir, будь то оптимизация издержек или регулирование управленческого аппарата.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3032-3332-4661-b166-393636643165__-__empty__proto-1_1.png)
Следом размещаем блок «Решения по направлениям» — рассказываем об отраслях, в которых у Colvir богатая экспертиза: государственные организации, банки и финансовые организации, предприятия и холдинги.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3633-6563-4264-a432-363563333165__-__empty__proto2_1.png)
2. Продукт технически сложный — обычно мало информации для его оценки, и непонятны критерии выбора системы
Рассказываем о преимуществах решения Colvir в интерактивном блоке и подкрепляем их разделом с реализованными кейсами. В кейсах — лого и название компании, проблема и решение, а также теги по отраслям.
Рассказываем о преимуществах решения Colvir в интерактивном блоке и подкрепляем их разделом с реализованными кейсами. В кейсах — лого и название компании, проблема и решение, а также теги по отраслям.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3936-6534-4030-b232-613836303236__-__empty__proto-1_1_1.png)
3. Клиентов часто беспокоит длительность сроков внедрения, стоимость проекта и сложность его масштабирования
Нужна консультация. В блоке «Оцените решения Colvir» предлагаем ознакомиться с презентацией, посмотреть видео, воспользоваться услугой try&buy или заказать демонстрацию продукта к себе в офис или по скайпу. Перед футером дублируем предложение в CTA — форме заявки.
Нужна консультация. В блоке «Оцените решения Colvir» предлагаем ознакомиться с презентацией, посмотреть видео, воспользоваться услугой try&buy или заказать демонстрацию продукта к себе в офис или по скайпу. Перед футером дублируем предложение в CTA — форме заявки.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6431-3432-4137-a334-653064393964__-__empty__proto4-5_1.png)
4. Многие клиенты не хотят сложностей с настройкой системы и не уверены, подойдёт ли она под их конфигурацию
Размещаем блок «варианты внедрения» — есть возможность внедрить на площадке клиента или использовать модель SaaS с облачными технологиями.
Размещаем блок «варианты внедрения» — есть возможность внедрить на площадке клиента или использовать модель SaaS с облачными технологиями.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6463-3633-4663-b461-383435373865__-__empty__proto6_1.png)
Прототип получился информативным, но при этом не перегруженным информацией — всё чётко и по делу:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3739-3163-4434-b938-626636323365__-__empty__proto_mini_1.png)
Дизайн
После утверждения прототипа приступаем к дизайну. Помним про баланс между информативностью и дизайн-элементами на странице. Для начала собираем на мудборде примеры проектов, которые хорошо подошли бы для такой сферы и при этом были бы близки по духу заказчику.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3166-3462-4331-b432-343165626661__-__empty__mood-1.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3730-3234-4566-b339-666339616432__-__empty__mood-2.png)
Заказчик был готов к экспериментам: ему понравились 5 и 6 варианты с мудборда по цветовой гамме, но при этом нам дали полную свободу: можно было поиграть с традиционной для отрасли синей гаммой и импровизировать с визуалом.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3833-6139-4736-b331-393336383935__-__empty__-.png)
Марина
Руководитель проекта
Мы подобрали очень удачное фото для промо-блока, использовав ассоциацию решения Colvir с компасом — устройством, которое помогает ориентироваться в бизнес-пространстве.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3732-3434-4535-a461-613863316661__-__empty__misbusiness_.png)
Заказчик усилил идею промо-блока подходящим по смыслу текстом, а также подобрал к ключевым принципам системы Colvir MIS подходящие цитаты, которые хорошо вписались рядом с блоком о возможностях системы:
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3537-6632-4662-b266-363035313730__-__empty__group_96-min.png)
Идея с округлым компасом наследуется в других блоках, где элементы вписаны в круги — например, в разделе с преимуществами или с кейсами.
Мы выбрали нестандартную для отрасли гамму: контрастную и запоминающуюся, но при этом строгую и сдержанную. Заказчик назвал сочетание кирпично-красного с лаконичным серым очень уютным — как тёплый клетчатый плед осенью :).
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3563-3464-4562-a166-303564343834__-__empty__-.png)
Дарья
Дизайнер
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6530-3763-4066-b263-613932613737__-__empty__main800-1.png)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6364-6233-4631-b232-393633393935__-__empty__main800-2.png)
404-ю страницу обыграли идеей с дисконнектом, а на этапе сборки добавилась анимация, где нолик разъединяется.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6335-6466-4237-b833-633738313835__-__empty__404.png)
Разработка
Фишка проекта — в необычном промо-блоке: при первой загрузке в небольшое окошко с параллакс-эффектом виден только компас, но при скролле блок разворачивается в полноценную картинку, а после появляется текст.
Проект впечатляет пользователей своей отзывчивостью: невероятно плавно скользят и появляются не только элементы страницы, но и абзацы текста по всему сайту.
Проект максимально кастомный для заказчика: всё редактируется и настраивается под себя. Анимации для текста — отдельная история. Мы сделали так, что заказчик может настраивать эффект появления хоть для каждой отдельной строчки :)
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6636-3365-4263-b330-383337653030__-__empty__-.png)
Марина
Руководитель проекта
Также мы предусмотрели особые секретные разделы на сайте, доступ к которым заказчик может предоставлять по желанию.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6237-6438-4633-b633-393630333431__-__empty__photo.png)
У всплывающего поля снизу, отвечающего за CTA, заказчик может настраивать визуал (а может и видео добавить), а также привязывать к нему нужные формы обратной связи.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3234-3862-4434-a530-623663323465__-__empty__group_97-min.png)
Чтобы заказчику не приходилось расписывать вопросы и ответы по несколько раз на разных страницах, мы прописали в админке нестандартный компонент: теперь можно выбирать перечень выводящихся на разных страницах вопросов, а также вставлять их единым блоком, не тратя время на заполнение.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6236-3338-4235-a263-666262666231__-__empty__fecc07d32c69b092262d.png)
Андрей
Разработчик
Одна из задач проекта — выгодно отразить кейсы. В блоке с кейсами — анимированный прогресс-бар: когда круг полностью завершен, слайдер сменяет кейс на новый. При желании заказчик может добавить на обложку кейса не фото, а видео.
На отдельной странице с кейсами мы предусмотрели фильтр по отраслям и проблематике решаемых задач — пользователям из конкретных сфер будет удобно отсортировать кейсы под свою отрасль.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild6166-3330-4134-b538-373761376362__-__empty__photo_1.png)
На сайте предусмотрено 3 формы обратной связи — больше не нужно гадать, подойдёт ли система для конкретного бизнеса. Можно просто заказать демонстрацию в офис или онлайн, попробовать режим try&buy либо задать интересующий вопрос.
На адаптиве для смартфонов нам удалось сохранить фишку проекта с окошком и компасом — слайд с текстом разместили ниже. На версии для планшетов всё работает так же, как и на ПК.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3132-6139-4163-a531-653236663838__-__empty__devices2.png)
При разработке сайта нам удалось сосредоточиться на пожеланиях и создать дизайн, который сможет эффективно решать бизнес-задачи. Впереди большие планы, есть отличные идеи по интерактивным динамическим инструментам на сайте, а также по формированию обучающей платформы и целого сообщества для обмена опытом по использованию отраслевых решений.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3335-3034-4365-b764-646435333263__-__empty__-.png)
Марина
Руководитель проектов
Начиная этот проект, было понятно — «что делать» и «как делать». Но это оказалось предположением. Правильно выстроенный проект заставлял отвечать на сформулированные вопросы и переосмысливать информацию, которой владеешь. При этом каждый следующий шаг логично продолжал предыдущий. В результате концептуально осмысленный и продуманный в деталях продуктовый сайт сегодня смело представляет себя визитной карточкой.
![](https://s29805.cdn.ngenix.net/upload/_tilda/project417113_1709720727/tild3231-3439-4761-b032-316237613832__-__empty__photo.png)
Олег Слабнов
Руководитель направления по Аналитической платформе Colvir Software Solutions