Корпоративный сайт для ОЭЗ «Липецк»
Особой экономической зоне — особый сайт
Корпоративный сайт для ОЭЗ «Липецк»
Корпоративный сайт для ОЭЗ «Липецк»
Особой экономической зоне — особый сайт
Особые экономические зоны — заманчивая история и для инвесторов, и для бизнеса. Налоговые льготы, продуманная инфраструктура и своё особое комьюнити резидентов — то, за что так ценятся такие территории. И конечно, без функционального сайта, который учитывает интересы потенциальных пользователей и играючи решает их задачи, здесь не обойтись. А когда ты одна из самых привлекательных экономических зон России, как ОЭЗ «Липецк» — тем более :)
ОЭЗ «Липецк» — особая экономическая зона промышленно-производственного типа «Липецк» на территории площадью 2 300 гектаров в центре европейской части России. Проект развивается с 2006 года. На сегодня в списке резидентов территории ОЭЗ 60 компаний из Европы, Японии, США, России и Китая, 28 предприятий уже работают.
Конфигуратор инвестора
У инвесторов — много денег и мало времени. Поэтому процесс принятия решения об инвестировании не может быть долгим, но обязательно должен быть взвешенным и четким. Чтобы максимально облегчить задачу потенциальным инвесторам ОЭЗ «Липецк», мы реализовали на сайте конфигуратор — с ним легко подобрать идеальный участок для проекта в три шага.
Например, вы хотите организовать в особой экономической зоне пищевое производство и ищете под него подходящий участок. Идём по шагам: сначала — вводим общие данные о проекте: в какой сфере, какой тип бизнеса, за сколько лет планируем реализовать. Следом — требования к участку и коммуникациям: какие нужны ресурсы и есть ли особые требования к производству.
Например, вы хотите организовать в особой экономической зоне пищевое производство и ищете под него подходящий участок. Идём по шагам: сначала — вводим общие данные о проекте: в какой сфере, какой тип бизнеса, за сколько лет планируем реализовать. Следом — требования к участку и коммуникациям: какие нужны ресурсы и есть ли особые требования к производству.
 |  |
Анна
Руководитель проекта
Чтобы оживить процесс подбора, мы отрисовали 3D-модели для первых двух шагов. Например, если на первом шаге выбрать «производство» — справа построится одна модель, если «логистику» — другая.
Глеб
Дизайнер
Идею моделей транслировал заказчик на этапе визуального брифа и прототипа: хотелось, чтобы пользователь мог в режиме реального времени увидеть, как участок с нужными ему параметрами строится на интерактивной карте. Но трехмерная карта — история дорогая и трудозатратная. Выбрали более практичный вариант — конфигуратор реализовали через Яндекс.Карты. Но для и интерактива мы нашли место, сделав 3D-модели для первых двух шагов конфигуратора.
С помощью 3D-моделей визуализировали тип предприятия на первом шаге конфигуратора (производство или логистика). Для этого подготовили две 3D-анимации: построение завода с прилегающей территорией и построение складского помещения в аналогичной стилистике. Монохромную минималистичную изометрическую стилистику выбрали на основе референсов, понравившихся заказчику на визуальном брифе.
Анимация для производства
Анимация для логистики
Заказчику модели понравились — мы сразу их согласовали. Но клиент хотел, чтобы при настройке пользователем необходимых коммуникаций (на 2 шаге конфигуратора) они тоже появлялись на анимации: что накликал — то и увидел на модели.
Для этого мы прокачали уже имеющиеся 3D-иллюстрации: добавили для каждой сцены 7 дополнительных объектов, соответствующих каждой из коммуникаций (ж/д-пути, ЛЭП, трубопроводы, вышки связи и т. д.).
Для этого мы прокачали уже имеющиеся 3D-иллюстрации: добавили для каждой сцены 7 дополнительных объектов, соответствующих каждой из коммуникаций (ж/д-пути, ЛЭП, трубопроводы, вышки связи и т. д.).
Глеб
Дизайнер
Возник вопрос — как реализовать возможность интерактивно управлять появлением или исчезновение каждой из коммуникаций и создавать на иллюстрации свои комбинации этих коммуникаций. Сперва мы подумали, что стоит отрендерить вручную каждую комбинацию коммуникаций, и в зависимости от выбора пользователя выводить конкретную картинку, но нашли решение лучше.
В итоге сделали 2 рендера: завод без коммуникаций и завод со всеми коммуникациями. Затем из изображения со всеми коммуникациями нарезали PNG-файлов с отдельными объектами. При выборе конкретных параметров пользователем эти PNG-шки просто появляются поверх основного рендера без коммуникаций.
Чтобы анимация появления элементов на рендере не была слишком линейной и скучной, мы сделали её похожей на анимации из компьютерных игр-стратегий: объект не просто появляется из ниоткуда, а прерывисто мерцает, прежде чем фиксируется в статике.
В итоге сделали 2 рендера: завод без коммуникаций и завод со всеми коммуникациями. Затем из изображения со всеми коммуникациями нарезали PNG-файлов с отдельными объектами. При выборе конкретных параметров пользователем эти PNG-шки просто появляются поверх основного рендера без коммуникаций.
Чтобы анимация появления элементов на рендере не была слишком линейной и скучной, мы сделали её похожей на анимации из компьютерных игр-стратегий: объект не просто появляется из ниоткуда, а прерывисто мерцает, прежде чем фиксируется в статике.
Следующий шаг конфигуратора — выбор конкретного участка на территории ОЭЗ: доступные выделены цветом. Квадраты на карте — участки размером 1 Га. Выбираем столько, сколько нужно, кликая на каждый доступный: по клику он закрашивается.
Иван
Технический директор
Заявка из конфигуратора сохраняется на сервере плюс отправляется письмом на почту администратору сайта. Заказчик рассматривает заявки: какие-то принимает, какие-то нет. Чтобы информация о доступных участках на карте была актуальной, заказчику нужно с определенной периодичностью заново импортировать данные.
После прохождения конфигуратора заявку можно скачать в виде PDF — внутри будет вся заполненная информация и картинка выбранных участков на площадке. Хостинг заказчика не позволял установить никакой дополнительный софт —
из-за этого пришлось переписывать генерацию PDF с базового инструмента на такой, который этим хостингом поддерживается.
После прохождения конфигуратора заявку можно скачать в виде PDF — внутри будет вся заполненная информация и картинка выбранных участков на площадке. Хостинг заказчика не позволял установить никакой дополнительный софт —
из-за этого пришлось переписывать генерацию PDF с базового инструмента на такой, который этим хостингом поддерживается.
Михаил Путилин
АО «ОЭЗ ППТ «Липецк»
В процессе разработки технического задания для сайта мы учитывали мнение и потребности различных групп пользователей. Провели серию рабочих совещаний с инвесторами, представителями компаний-резидентов ОЭЗ «Липецк». В результате получился продукт, с которым работать просто и удобно. Например, при создании конфигуратора подбора участка можно не только заполнить графы с информацией, но и за 4 шага получить шаблон будущего завода с необходимыми техническими параметрами проекта. После чего мы сразу же получаем заявку на электронную почту. Таким образом, в дальнейшем нам проще работать с инвестором, предварительно зная его требования и запросы.
Разные отрасли производства можно организовать на разных группах участков — для этого на карте есть фильтр, с которым можно посмотреть, где лучше разместить пищевое производство, а где — металлургическое.
Пищевое производство и металлургическое — на разных участках
Анна
Руководитель проекта
Если в фильтре применить «По типу объекта» → «Все», то на карту выводятся все резиденты с пинами уже занятых участков: сразу видно, где завод, где склад, а где — свободная территория, на которой можно строить.
Просмотреть резидентов и выбрать участки рядом с кем-то из них — просто
Здесь же, в фильтре, можно выбрать «Все коммуникации» или отдельные их виды, чтобы посмотреть схемы их расположения на территории — это поможет принять решение при выборе участков.
Анна
Руководитель проекта
Даже если нужные коммуникации не проложены рядом с участком, где пользователь хочет построить свой завод, их могут провести — это можно согласовать с представителями ОЭЗ «Липецк» на этапе обсуждения будущего проекта. А на сайте можно оставить заявку на техническое присоединение в личном кабинете.
После выбора территории дело за малым — оставить контактные данные и отправить заявку, чтобы с нами связались по деталям проекта.
Интерактивная карта
У особой экономической зоны две площадки: Елецкая и Грязинская, которые расположены на расстоянии друг от друга. И там, и там есть свободные участки и уже действующие предприятия. Поэтому на карте есть быстрые ссылки для переключения между площадками, а по клику на предприятие можно узнать о нём подробнее.
Для карты предусмотрен фильтр — с ним можно быстро найти резидентов из конкретной отрасли.
Также о резидентах можно узнать в отдельном разделе сайта: здесь тоже есть фильтр по отраслям, готовности проектов и географии.
Личный кабинет
Для резидентов на сайте мы создали личный кабинет. Внутри вся нужная информация:
- заявки на присоединение — с датами и статусами;
- список обращений — с датами, статусами и оценкой качества (прямо как в техподдержке);
- показания приборов — больше не нужно никуда ходить и никому ничего писать: представитель резидента просто вносит данные в личном кабинете;
- документация — та, что может понадобиться;
- услуги — любые дополнительные услуги для реализации проекта на территории ОЭЗ. Для подключения услуг есть своя форма.
Как выглядят заявки в личном кабинете
Анна
Руководитель проекта
Услуги для резидентов могут быть самыми разными: от заказа авто до аренды помещения. Для удобства заказчика мы сделали так, чтобы для в формах заказа разных услуг можно было создавать свои поля и задавать выпадающие списки.
Иван
Технический директор
На проекте много достаточно сложных форм. Во-первых, сам конфигуратор — 4-шаговая форма с кучей фишек и плюшек.
Во-вторых, заявка на техническое присоединение — огромнейшая форма с массой связей между полями (в зависимости от выбора чего-то в одном блоке — появляются и скрываются поля в других блоках) для тех, кто хочет, чтобы до его участка дотянули электричество или что-то ещё. С ней мы долго колдовали на адаптиве — там такие термины, что по ширине в экран смартфона просто не входят :)
Третья — форма заказа услуги, которая для каждой услуги может быть своя.
Во-вторых, заявка на техническое присоединение — огромнейшая форма с массой связей между полями (в зависимости от выбора чего-то в одном блоке — появляются и скрываются поля в других блоках) для тех, кто хочет, чтобы до его участка дотянули электричество или что-то ещё. С ней мы долго колдовали на адаптиве — там такие термины, что по ширине в экран смартфона просто не входят :)
Третья — форма заказа услуги, которая для каждой услуги может быть своя.
 |  |
Разные поля для разных услуг
Иерархия и приятные мелочи
Особая экономическая зона — территория, от которой ждут ёмкой и прозрачной информации о её деятельности. Поэтому на сайте есть раздел, где собрано вообще всё всё: от годовых отчётов до внутренних документов.
Весь этот массив данных мы аккуратно разложили по разделам и причесали, чтобы это не выглядело банальными списками-простынями. Меню слева — многоуровневое, и в основном контенте для каждого выбранного пункта может быть какая угодно вложенность текстовых блоков со спойлерами и скачиванием файлов.
Весь этот массив данных мы аккуратно разложили по разделам и причесали, чтобы это не выглядело банальными списками-простынями. Меню слева — многоуровневое, и в основном контенте для каждого выбранного пункта может быть какая угодно вложенность текстовых блоков со спойлерами и скачиванием файлов.
Анна
Руководитель проекта
Работа над проектом велась плотная. Сам проект интересен, и у команды горели глаза — особенно, когда дело дошло до разработки конфигуратора. На планингах было что-то вроде: «Ничего не понятно, но очень интересно».
Отзыв заказчика
