Решение

Разработка

Мы провели полный цикл разработки сайта и его мобильной версии: от аналитики, разработки ТЗ и прототипирования до разработки дизайна, верстки и программирования.

Если говорить о структуре сайта, то она простая. Сайт включает внешнюю часть и личный кабинет инвестора.

Публичная часть сайта состоит из следующих разделов:

• О регионе
• Инвестору
• Экспертам
• Пресс-центр
• Контакты
• Единое окно

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

• основную статистику по региону
• историю успеха других организаций, которые развивают бизнес на территории области
• карту, отражающую положение Липецкой области и близость к рынкам.

Это привлекательно подает информацию о регионе для целевой аудитории.

• Географическое положение Липецкой области в мире относительно ключевых объектов и городов
• ЖД-сообщение на территории региона с кратким описанием
• Карту автомобильного сообщения на территории Липецкой области.

Добавили блок от лица губернатора и форму обращения к нему. Сделали блок об агентстве инвестиционного развития области с переходом на услуги.

Из блока с ключевой информацией для инвестора можно быстро перейти на документы, подбор объектов или участка, на инвестиционную карту и кнопку обращения к бизнес-куратору. Завершает главную страницу раздел новостей.

Пользователи могут посмотреть статистику Липецкой области и данные вокруг ее социально-экономического развития. Им доступен подробный блок с экономикой и инвестиционным климатом области, валовым региональным продуктом. Представили в цифрах динамику ВРП и перспективы развития региона. В этом разделе доступно много информативных дашбордов. Указали присутствие Липецкой области в рейтингах, дали статистику о структуре и динамике инвестиций. Завершает страницу раздел с презентациями о районах области.

Этот раздел можно назвать одной из фишек сайта. Мы подсвечиваем карту районов и даём пользователю перейти на объекты на ней. Можно ознакомиться с приоритетными отраслями и ключевыми проектами.

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

Также в этот объемный раздел входит статистика и информация об экономике и туристическом потенциале районов, контакты и формы для обращения к кураторам, презентации и новости.

Собрали в едином разделе полезные материалы для инвесторов. На странице подбора участка инвестор может найти нужную информацию: от алгоритма подбора инвестиционной площадки до информации об услугах агентства.

Рассказывается о функциях инвестиционной карты Липецкой области, по которой инвестор может подобрать площадку без помощи агентства. Карта доступна по всему сайту и является сторонней разработкой (не от команды WeJET). Она имеет отдельную ссылку.

Добавили для инвесторов набор ключевых документов от агентства инвестиционного развития (нормативно-правовая база, стандарты и другие документы). На странице «Предложить площадку» расписывается алгоритм предложения объекта от инвестора, услуги агентства и прочее.

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

Изучив свод правил, инвестор понимает, по какому алгоритму действовать, и с кем пообщаться, если нужен, например, земельный участок без торгов. Страница «Единое окно» рассказывает о деятельности агентства инвестиционного развития. Пользователь может задать любой вопрос, который его интересует. Доступна информация про:

• услуги
• инструкции
• формы по сопровождению
• подсказки
• контакты
• полезные документы

Другие страницы сайта

На странице «Бизнес-идеи» пользователь может ознакомиться с готовыми идеями проектов, которые можно реализовать на территории региона. Инвестору доступны теги, по которым он сможет интересующую его сферу и предложения по ней. Каждая идея описана: концепция, объем инвестиций, число рабочих мест, ОКВЭД, адрес и контакты собственника. Инвестор может связаться с владельцем объекта и обсудить бизнес-идею.

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

Раздел «Экспертам» создан для представителей федеральной власти, для удобства пользования сайтом и удобства доступа к разделам сайта. Сделана отдельная вкладка «Экспертам агентства стратегических инициатив (АСИ)».

В «Пресс-центре» пользователь может изучить новости, мероприятия и истории успеха. На странице «Новости» можно посмотреть карточки новостей по разделам. Каждое мероприятие оформлено в виде карточки. Если оно завершено, помечается тегом. Пользователи могут делиться мероприятиями друг с другом.

На странице «Истории успеха» собраны проекты, которыми может гордиться Липецкая область. Доступны теги по направлениям деятельности. Сейчас представлены сельское хозяйство, металлообработка и геофизика. В дальнейшем администраторы сайта смогут добавлять новые теги и фильтры.

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

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

Завершает сайт страница с контактами агентства.

Дизайн сайта

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

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

Дизайн сайта разработан в строгом и респектабельном стиле. Использована необычная модульная сетка с разделением посередине. Чтобы подчеркнуть геометрию, блоки десктоп-версии сделаны так, чтобы вмещать информацию на один экран, «прилипая» строго к краям при скролле.

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

Крупные заголовки и изображения разбавляют основной текст, помогая пользователю сконцентрироваться и добавляют эмоциональный эффект. Использован интересный приём в страницах типа «Статья» или «Новость»: крупный заголовок остаётся на левой части экрана, а пользователь комфортно читает текст новости на правой части.

Основные разделы сайта доступны пользователю с первого экрана любой страницы. Сразу видны функции (поиск, смена языка, ЛК) и способы связи.

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

Мы адаптировали все элементы сайта под разные устройства. Мобильная и десктопная верстка разные, но стилизованы одинаково. Страницы сайта оптимизированы для быстрой загрузки.

Разработка

По запросу клиента работали со старой лицензией на 1C Bitrix Эксперт. Переработали старую базу данных под новый сайт. Команда вела работы на сервере заказчика. Использование нетиповой версии Bitrix, конечно, усложнило разработку, но мы справились :).

В ходе работы клиент предоставил большой объем специфической информации, связанной между собой. Ее было важно связно и логично разместить на экранах. Корневая база документов общая, при этом они тиражируются на разные страницы. Мы сделали как шаблонные страницы, так и кастомные (например, районы Липецкой области), по которым проработали индивидуальную информацию.

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

Для оптимизации верстки команда использовала Webpack, Gulp и Scss. Анимации графиков мы выполнили на Canvas при помощи нативного JS.

Стек технологий: Bitrix Эксперт, Webpack, Gulp, Scss, Canvas

Результаты работы

Клиент выбрал WeJET, потому что мы умеем делать сложные сервисы для широкой аудитории лаконичными и удобными. Рады разработать сайт, который закрывает запросы клиента. Он упростит взаимодействие с инвесторами, представителями ведомств, СМИ и общественностью.

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

Новый сайт содержит 140 адаптивных макетов (И это еще без макетов личного кабинета, который пока в разработке!)

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

Планы развития сайта

В будущем на сайте агентства появится удобный личный кабинет для инвесторов. Сейчас мы активно занимаемся его разработкой. Личный кабинет упростит взаимодействие инвестора и агентства по проектам: от подачи заявки до ведения проекта.

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

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

Число страниц сайта возрастет — он расширится под запросы бизнеса, будут добавлены новые услуги. Особый акцент команда проекта сделает на отраслевой составляющей региона — появится раздел про приоритетные услуги и преимущества региона по ним. Добавятся новые страницы о туризме.