Разработка продуктового сайта для АО «Расчетные решения»

О клиенте

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

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

• Система оплаты проезда

• Карта жителя для предоставления льгот

• Сервис целевой социальной поддержки

• Биллинг для услуг ЖКХ

• Сервис по приему платежей

• Автоматическое расщепление платежей

• Система оплаты питания в учреждениях

• Мобильная платформа для вузов

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

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

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

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

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

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

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

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

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

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

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

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

Разработка

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

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

Административный доступ к существующему сайту был максимально ограничен. Нам пришлось запрашивать данные вручную или через архивы, а также использовать 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.

Результат

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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