Разработка сайта для АО "Расчётные Решения"

О клиенте и проекте

К WeJET обратились представители АО «Расчетные решения». Предприятие входит в Группу компаний Сбер. Продукты бренда позволяют проводить онлайн-платежи в социальной сфере. 

Продукты клиента

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

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

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

• Молодые жители России возрастом от 25 до 44 лет

• Пользуются сервисами клиента, активные потребители digital-решений

• Госслужащие, соискатели по вакансиям в продуктах компании 

Задачи проекта

Клиент поручил нам:

1. Провести рефакторинг старого сайта.  

2. Разработать новый удобный сайт с нуля, обеспечив редизайн и сохранив прежнюю структуру проекта.  

3. Привлекательно представить продукты бренда и карьерные возможности для соискателей.

4. Добавить больше интерактивных элементов и возможностей поддержки пользователей.

5. Обеспечить высокий уровень информационной безопасности.

Разработка

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

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

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

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

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

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

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

• Межсайтовый скриптинг (XSS).

• SQL-инъекции.

• CSRF-уязвимости.

• Фишинг через редирект.

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

• полную настройку сервера для работы сайта,

• настройку и проверку базовой защиты,

• установку и включение модулей защиты сервера и CMS.

В ближайшее время разграничим права доступа: предусмотрено разделение прав для контент-менеджеров и администраторов.

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

1. Автоматическое создание резервных копий сайта.

2. Обработка ввода и вывода данных.

3. Настройки аутентификации и разделения прав доступа.

4. Подключение к серверу и админ-панели через демилитаризованную зону (DMZ) по VPN.

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

• От внедрения управляющих SQL-команд.

• От атак «Cross-site scripting».

• Минимизация прав в СУБД и ОС.

• Безопасность Web-сервисов и приложений.

• Безопасность XML-документов и XML-схемы.

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

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

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

Дизайн

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

1. начать лучше привлекать внимание пользователей, 

2. повысить узнаваемость бренда,

3. улучшить взаимодействие пользователей с продуктами и повысить эффективность их продажи,

4. привлечь новых клиентов,

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

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

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

Стилистика

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

Типографика

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

Анимация

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

• Реализована анимация и подсветка регионов.

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

• Пользователь может легко получить информацию о присутствии компании в регионах.

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

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

1. ПК — 1920×1080 пикселей.

2. Планшеты — 1280×768 пикселей.

3. Смартфоны — 320× 569 пикселей.

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

Результат

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

• Главная страница — дает полное представление о компании и её возможностях.

• Витрина продуктов — удобная структура с информацией о продуктах.

• Пресс-центр — доступны ановости с фильтрацией по тематике и дате.

• Карьерная страница — информативный раздел для соискателей с текстами о корпоративной жизни. Можно откликнуться на вакансии прямо с сайта.

• Поддержка — для каждого из 8 продуктов доступны FAQ, форма связи и контакты.

• Статьи — материалы и аналитика по актуальным темам.

• Контакты — не только контакты основного офиса, но и всех подразделений, служб поддержки и пресс-служб.

• Юридические документы — материалы предоставлены и  отсортированы по типу документа и продукту.

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

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

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

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

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

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