Продуктовый сайт для инновационной платежной экосистемы «Расчётные Решения»

1. Вводная задача от заказчика, проблематика, цели

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

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

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

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

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

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

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

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

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

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

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

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

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

Стилистика

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

Типографика

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

Анимация

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

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

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

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

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

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

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

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

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

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

Стек технологий: Webpack, Gulp, Scss, Ts, HTML5. Библиотеки Popper.js, Swiper.

3. Результаты сотрудничества

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

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

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

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

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

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

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

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