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

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

Было: сайт не отличался от конкурентов, не дружил с мобайлом (≈80% трафика), уводил на оплату в Telegram, простой визуал не внушал доверия. Цели — продавать гифт-карты, ускорять пополнения, наращивать доверие и удержание.

Стало: собрали систему из 17 уникальных шаблонов по ТЗ на 126 страниц. Mobile-first: короткие пути, быстрые переходы, фиксированный CTA внизу экрана при оплате. Ключевая «деньговая» страница Steam упрощена: меньше шагов, ясная иерархия, акценты на цене и способах оплаты. Включили фирменную палитру (серый/мятно-зеленый/лиловый), добавили градиенты и 3D-референсы из гейм-сторов; ввели колор-кодинг разделов. Проработали блог как SEO-двигатель: типографика, контейнер контента, стили для цитат/списков/таблиц, таймер чтения, автор, подписка, мягкие CTA — по E-E-A-T. Финализировали UI Kit и Style Guide: состояния, иконки, типографика — для масштабирования без ручного онбординга.

Изменения для пользователей: быстрее к оплате, меньше когнитивного шума, понятная навигация и прозрачные правила сервиса — это конвертируется в доверие (у бренда уже 8000+ положительных отзывов). Изменения для бизнеса: сайт перестал быть «прокладкой» к боту и стал самостоятельным каналом продаж и органики; разработка прошла без доуточнений.

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

Быстрее к результату. Главная и ключевые страницы собраны “в один присест”: меньше шагов, понятная иерархия, фиксированная кнопка «К оплате» внизу экрана — не нужно «ловить» CTA на мобильном.

Без лишних переключений. Сценарий с подарочными картами и корзиной — на одной странице; не выпадаешь из процесса и не теряешь контекст.

Понятнее, что и где пополнять. Колор-кодинг разделов и язык из гейм-сторов помогают мгновенно ориентироваться между Steam/подписками/картами.

Больше доверия. Вместо «безликого» интерфейса — визуальная логика бренда (палитра, акценты, микроверстка), прозрачные блоки про способы и шаги оплаты. Это снижает тревожность и ошибки.

Читабельный контент. Блог с нормальной типографикой, структурами для списков/цитат/таблиц и таймером чтения — не «SEO-текст ради текста», а реально полезные ответы и сценарии.

Стабильность и предсказуемость. Единый UI Kit/стайлгайд = одинаковое поведение элементов на всех экранах; меньше сюрпризов — меньше когнитивной нагрузки.

Итог: пополнить счёт или купить карту теперь — понятный, быстрый и спокойный ритуал. Не «квест», а действие на автомате.

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

Поставленная задача. Превратить телеграм-MVP в самостоятельный сайт-канал продаж и органики:
— выделиться среди конкурентов,
— учесть мобайл (≈80% трафика),
— сократить путь до оплаты и увеличить доверие,
— усилить продажи гифт-карт и пополнений, удержание и имидж.

Как решили. Спроектировали систему из 17 шаблонов по ТЗ на 126 стр., mobile-first. Упростили «денежные» сценарии (Steam и карты), закрепили CTA на мобайле, объединили каталог+корзину на одной странице, навели иерархию и колор-кодинг. Запустили SEO-friendly структуру и блог по E-E-A-T. Финализировали UI Kit/Style Guide для масштабирования без потерь.

Что улучшилось в бизнесе.
— Сайт стал самостоятельным каналом продаж, а не «прокладкой» к боту.
— Сокращение шагов до оплаты → рост конверсии ключевых страниц.
— SEO-структура и блог дают стабильный органический трафик.
— Выше доверие к бренду (соцдоказательство: 8000+ положительных отзывов).
— Быстрая имплементация: без уточнений со стороны разработки.

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

— Путь к деньгам: фиксированный CTA в зоне большого пальца, каталог и корзина на одном экране, меньше шагов и отвлечений.
— Ориентация: колор-кодинг разделов и логика гейм-сторов — быстрее найти нужный сценарий.
— Контент и SEO: читабельная типографика, структурированные блоки (списки, цитаты, таблицы), авторство и условия — E-E-A-T закрыт.
— Перформанс: адаптивные форматы изображений, ленивая загрузка, зарезервированные места под медиа — интерфейс не «прыгает».
— Доступность: контраст, видимые фокусы, понятная валидация ошибок.
— Масштабирование: UI Kit и Style Guide — новые экраны собираются без рассыпаний.
— Аналитика: события на ключевых действиях и заранее заложенные точки для A/B.

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

Исходные инсайты: 80% мобайл, ядро — геймеры и подписки, значит короткий путь к оплате и язык гейм-сторов.
Проверили гипотезы про объединение каталога и корзины, колор-кодинг и SEO-контент — всё нацелено на снижение отказов и рост органики.
Процесс: аудит ниши (50 сайтов, 100+ рефов), две концепции на мудбордах — выбрали тёмную; спроектировали 17 шаблонов по ТЗ на 126 страниц, mobile-first.
Коммуникация с клиентом — точечная и по делу: согласование ключевых решений, финал с UI Kit/Style Guide; разработка приняла без дополнительных вопросов.

Скриншоты