Целевая аудитория продуктов

• молодые жители России возрастом от 25 до 44 лет;
• пользуются сервисами клиента, активные потребители digital-решений;
• госслужащие, соискатели по вакансиям в продуктах компании.

Единая цифровая экосистема для государства, бизнеса и жителей

• система оплаты проезда;
• карта жителя для предоставления льгот;
• сервис целевой социальной поддержки;
• биллинг для услуг ЖКХ;
• сервис по приему платежей;
• автоматическое расщепление платежей;
• система оплаты питания в учреждениях;
• мобильная платформа для вузов.

Разработка

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

Обошли сложный доступ к данным

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

Разработали интерактивную карту по продуктам

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

Сделали группу задач по обеспечению безопасности сайта

Мы уделили особое внимание защите сайта. Он создан с учётом требований защиты от постороннего доступа. 

Провели длительные проверки, прошли аудит от специалистов по кибербезопасности на стороне Сбера и обеспечили защиту от следующих видов атак:

• межсайтовый скриптинг (XSS);
• SQL-инъекции;
• CSRF-уязвимости;
• фишинг через редирект.

Провели блок технических работ на сайте:

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

Обеспечили действия по защите данных сайта и их резервированию:

• автоматическое создание резервных копий сайта;
• обработка ввода и вывода данных;
• настройки аутентификации и разделения прав доступа;
• подключение к серверу и админ-панели через демилитаризованную зону (DMZ) по VPN.

Команда настроила следующие виды защиты:

• от внедрения управляющих SQL-команд;
• от атак «Cross-site scripting»;
• минимизация прав в СУБД и ОС;
• безопасность Web-сервисов и приложений;
• безопасность XML-документов и XML-схемы.

Настроена обработка ввода и вывода. Созданы требования к аутентификации.

Поработали с упрощением поиска данных

Улучшили возможности поиска данных на сайте. Внедрили на страницах нейросеть GigaChat: пользователь может задать вопрос и быстро получить информацию по своей тематике.

Редизайн цифровой платформы с акцентом на продукты компании

Клиент заказал редизайн сайта, чтобы эффективнее продвигать линейку из 8 продуктов.

При обновлении дизайна мы поставили такие цели:

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

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

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

Стилистика

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

Типографика

Подобрали шрифт, который делает контент привлекательным и удобным для восприятия.

Анимация

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

На карте:

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

Удобство и функциональность

Разработали макеты каждой страницы сайта для 3 видов разрешений экрана:

• ПК — 1920×1080 пикселей;
• Планшеты — 1280×768 пикселей;
• Смартфоны — 320× 569 пикселей.

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

Стек технологий

• Webpack;
• Gulp, Scss;
• Ts;
• HTML5;
• Библиотеки Popper.js;
• Swiper.

Современная цифровая платформа для клиентов, партнеров и соискателей

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

Он станет точкой притяжения для клиентов, партнеров и соискателей бренда благодаря следующим разделам:

• Главная страница — дает полное представление о компании и её возможностях;
• Витрина продуктов — удобная структура с информацией о продуктах;
• Пресс-центр — доступны ановости с фильтрацией по тематике и дате;
• Карьерная страница — информативный раздел для соискателей с текстами о корпоративной жизни. Можно откликнуться на вакансии прямо с сайта;
• Поддержка — для каждого из 8 продуктов доступны FAQ, форма связи и контакты;
• Статьи — материалы и аналитика по актуальным темам;
• Контакты — не только контакты основного офиса, но и всех подразделений, служб поддержки и пресс-служб;
• Юридические документы — материалы предоставлены и отсортированы по типу документа и продукту.

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

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

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

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

Наш DevOps сделал доработки, и уже второй аудит сайта прошел отлично. Мы действительно позаботились об усиленной защите сайта от действий хакеров. Обеспечили базовую защиту межсайтового скриптинга, SQL-инъекций, CSRF-уязвимостей и фишинга через редирект.

Заказчик доволен, хочет передать нам техподдержку сайта. Наша команда тоже осталась довольна этим сотрудничеством и будет рада его продолжить в 2025.