Разработка корпоративного сайта Фонда Развития Промышленности Санкт-Петербурга

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

Задача
Разработать фирменный стиль и корпоративный сайт с личным кабинетом. Сайт должен давать ясное представление о деятельности Фонда, а личный кабинет должен автоматизировать и упростить подачу заявок на финансирование.

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

Создание сайта

Основная задача сайта — рассказать посетителям о деятельности Фонда и ответить на основные вопросы по условиям финансирования. Поэтому максимальное внимание мы уделили информационной архитектуре сайта. Сайт содержит множество контентных страниц, схем и документов. Мы спроектировали сайт таким образом, чтобы пользователи легко могли получить необходимую информацию. В то же время сайт не отпугивает посетителей большим объемом сложных данных.

Дизайн сайта строгий, минималистичный. Он не отвлекает внимание от содержания сайта, а поддерживает его. В основе дизайна – фирменные цвета Фонда. 

Личный кабинет

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

Работу над ЛК мы начали с аналитики: провели интервью с представителями Фонда, погрузились в регламенты работы и нормы законодательства. По итогам аналитики мы знали, какие именно цели преследовали Фонд и его клиенты, с какими ограничениями они сталкивались. На основе этих данных мы составили пользовательские сценарии и спроектировали личный кабинет.

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

Мы учли требования законодательства. Например, все заявки и документы должны быть подкреплены печатью и подписью. Обязательно нужно было поучить у пользователя разрешение на обработку персональных данных.

Анкета заявителя и резюме проекта

Анкета и резюме проекта, которые заполняют пользователи, имеют внушительные размеры: по 2-4 страницы. Чтобы облегчить заполнение, мы сделали его пошаговым. Заявитель заполняет форму в несколько шагов. Затем он выгружает документ в .pdf, визирует печатью и подписью и загружает в личный кабинет. 

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

Отправка заявки на экспресс-оценку

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

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

UI-kit

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

Адаптивный дизайн 

И сайт, и личный кабинет корректно отображаются на мобильных устройствах.