Редизайн платформы PayTool: из Telegram-MVP в полноценный сервис

Главное о кейсе

PayTool – это сервис для оплаты зарубежных цифровых товаров и подписок.
Мы сделали редизайн сайта. Главная цель - превратить рабочий MVP-чат-бот
в полноценную привлекательную платформу с удобной навигацией и главное — понятным процессом покупки и оплаты; доверием со стороны пользователей и крутым визуалом.

Теперь это платформа для быстрого пополнения баланса кошелька на игровых площадках Steam или PS Store, оплаты подписки в онлайн-магазинах Apple и Google.

От клиента мы получили очень подробное ТЗ с описанием требований к структуре
и необходимым страницам, в результате:
– разработали 17 уникальных шаблонов страниц
– создали адаптивный дизайн под все устройства – мобайл, десктоп и планшет.
– Подготовили дизайн-систему для того, чтобы масштабирование было быстрым, сохраняя консистентность.

Команда проекта:
арт-директор, дизайн-лид, руководитель проекта, редактор и 2 дизайнера.

Как проект изменил жизнь пользователей

Реализация сайта запланирована на 2026 год, но мы ожидаем следующие позитивные изменения:

– Платформа станет вызывать больше доверия: переход с формата Telegram-бота на полноценный сайт с понятной структурой повысит уверенность пользователей в безопасности и надежности сервиса;

– Пополнить счёт или купить карту теперь можно быстрее: фиксированная кнопка «К оплате» внизу экрана и продуманная навигация сокращают количество шагов до совершения платежа;

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

Бизнес-задача и ее решение

Сделать адаптивный дизайн и обновить стиль под все устройства — мобайл, планшет и десктоп:
Продажа подарочных сертификатов
Удобное и быстрое пополнение счетов в сервисах и играх
Повышение доверия пользователей
Удержание пользователей
Улучшение имиджа компании

Решение:

SEO-friendly дизайн в стилистике гейм-сторов — для эффективного продвижения
и роста трафика.

На основе исследования 50+ сайтов и 100+ референсов собрали два мудборда и вместе с клиентом утвердили стилистическое направление. Выбрали тёмную тему, усилив её градиентами и элементами игровых интерфейсов — так дизайн стал ассоциироваться с привычным для геймеров визуалом. Доработали каждую из 17 страниц структурно и по контенту.
Основной графический принцип — колор-кодинг разделов, вдохновленный интерфейсами гейм-сторов. Цвет указывает на категорию товара и его статус, создавая динамичный и интуитивно понятный интерфейс.
Вернули в работу полноценную фирменную палитру из брендбука (серый, мятно-зелёный, светлый лиловый), которая ранее игнорировалась, и закрепили ее в дизайн-системе для консистентности.

Этапы:
1. Старт:
— Брифинг и интервью
— Планирование работ
— Исследование ниши (50+ сайтов)
— Сбор референсов (100+)

2. UX-проектирование:
— UX-анализ существующих прототипов
— Разработка user flow
— Создание структуры проекта (17 страниц)

3. UI-дизайн:
— Создание мудбордов
— Mobile-дизайн
— Desktop-адаптив
— Tablet-адаптив

4. Передача в разработку:
— UI kit & style guide
— Примеры адаптации
— Hand off

Ключевые решения:

Упростили процесс оплаты: На странице «Пополнение Steam» — ключевой странице с основными CTA — улучшили структуру, разделили контент, расставили акценты и сократили количество шагов.
Оптимизировали каталог: Разместили корзину на той же странице, что и товары. Закрепили кнопку «Перейти к оплате» в нижней части экрана — она скрывается только в блоке оплаты.

Визуализировали систему лояльности: Встроили в дизайн отображение баланса Pay Coins и создали понятный блок с описанием системы начислений бонусов за покупки.

Разработали SEO-оптимизированный блог: Создали универсальный шаблон страницы материала с учетом EEAT-факторов. Добавили кастомные стили для контента, блок подписки, таймер чтения и различные CTA.

Все решения были зафиксированы в дизайн-системе для сохранения консистентности
и упрощения разработки.

Крафт (мастерство), реализация, технические детали

Одной из главных задач было превращение Telegram-MVP в полноценный сайт-канал продаж, который вызывает доверие и делает процесс оплаты максимально простым.

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

Визуальная система на основе брендбука
Вернули в работу цветовую палитру из брендбука (серый, мятно-зеленый, светлый лиловый), которая ранее игнорировалась. Добавили фирменные градиенты и дополнительные оттенки. Внедрили колор-кодинг разделов по аналогии с гейм-сторами.

SEO-оптимизированная структура контента
Спроектировали блог как инструмент привлечения трафика: создали универсальный шаблон с кастомными стилями для контента (специальные контейнеры, увеличенный межстрочный интервал, оформление цитат, списков, таблиц). Учли EEAT-факторы, добавив блок автора, просмотры и релевантные CTA.

Система лояльности в интерфейсе
Встроили в дизайн отображение баланса Pay Coins и создали понятный блок с описанием системы начислений бонусов. Пользователь видит свой баланс и может использовать бонусы для будущих оплат.

Адаптивная дизайн-система
Подготовили UI-kit и Style Guide с компонентами, переменными и состояниями элементов. Это обеспечило консистентность на всех 17 страницах и упростило разработку адаптивов для мобильных устройств, планшетов и десктопов.

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

Фронтенд-разработчики приняли готовые макеты без дополнительных вопросов -
детальное ТЗ на 126 страниц с требованиями к структуре, контент и визуалу позволило точно спроектировать все 17 страниц.

Вернули фирменную палитру из брендбука и добавили колор-кодинг разделов.

В результате созданная дизайн-система стала основой для будущего масштабирования платформы.

Скриншоты