Дизайн сервиса для оплаты зарубежный подписок Paytool
Сделали дизайн с акцентом на графике. Крупные 3D-элементы цепляют взгляд и отсылают к знакомым интернет-магазинам и привычным приёмам в интерфейсах гейм-индустрии. Начали с мобильной версии, потом перенесли всё на десктоп: собрали адаптивы с привязками к переменным, чтобы облегчить работу девелоперам.
Смотреть проекты 
paytool.ru 
О клиенте
Paytool — сервис для оплаты зарубежных цифровых товаров и подписок. Он появился, когда из‑за санкций российским геймерам и подписчикам стримингов стало сложно платить за привычные сервисы.
Задача
Paytool запустили как MVP — чат-бот в Телеграме, через который можно было быстро пополнить баланс кошелька на игровых площадках Steam или PS Store, оплатить подписку в онлайн-магазинах Apple и Google.
Запуск прошёл успешно, но ключевые задачи сайт не решал: не выделялся на фоне конкурентов, не был ориентирован на мобильные устройства, а для оплаты переводил пользователей обратно в Телеграм. Простой дизайн не вызывал доверия и не был удобным и функциональным для пользователей.
Чтобы это исправить, ребята обратились к нам, потому что мы глубоко погружаемся в UX и понимаем, как дизайн влияет на SEO.
Проект был контентно‑ориентированным: важны были поисковые позиции и органический трафик. Мы применили SEO‑friendly подход: опирались на методологию EEAT и заложили в структуру ключевые факторы — от иерархии и юзабилити до трастовых элементов.
Запрос был максимально проработанным и чётким. В ТЗ — 126 страниц с подробным описанием каждой, требованиями к структуре, элементам и визуальному стилю. От нас требовался адаптивный дизайн под все устройства — мобайл, планшет и десктоп.
Команда
-
Дизайн-лидерство
Артемий Скуратов
-
Арт-директор
Игорь Фроловский
-
Дизайн
Анастасия Морозова
Сначала изучили нишу и запросы
Отсмотрели 50 сайтов в тёмных и белых темах — проверили конкурентов, понравившиеся заказчику примеры, референсы, подходящие по семантике. Ещё собрали доску из 100+ реф-шотов, чтобы точно и до самых крохотных деталей проработать визуальный язык.
Главные определения и ассоциации: современность, технологичность, надёжность и близость к игровой индустрии.
Палитра: серый, мятно-зелёный, и светлый лиловый. Цветовая палитра была определена брендбуком заказчика, но в старом дизайне почему-то была проигнорирована или использовалась редко, сайт был в базе черно-белым. Мы это исправили и включили палитру полноценно, ярко выделяя акценты и СТА.
Отсылки: игровые интерфейсы и UI гейм-шопов.
Финальные выводы: градиенты и яркие акценты были необходимы, чтобы подчеркнуть связь с игровой индустрией и привлечь внимание аудитории. Вёрстку выбрали блочной — таково было одно из пожеланий заказчика, чтобы пользователям было удобнее воспринимать и визуально разделять контент на категории. Также использовали колор-кодинг разделов, вдохновившись интерфейсами гейм-сторов: там ранги предметов выделены цветом.
Также мы провели исследование ниши с точки зрения SEO. У заказчика были исходные пожелания по структуре страниц, но мы дополнили их, опираясь на свою экспертизу в SEO-friendly дизайне, и сделали структуру ещё точнее и эффективнее для продвижения.
Потом проработали концепцию
На этом этапе мы не просто предложили варианты визуала, а показали две стилистические альтернативы через мудборды, чтобы понять, какая лучше отвечает ожиданиям заказчика.
В светлом варианте показали драфтс упором на понятность и трастовость — здесь главным фокусом стали услуги и прозрачность сервиса.
В тёмном варианте сделали акцент на графике и интерфейсах, знакомым ЦА. Градиенты, 3D элементы, крупные иконки — прямая отсылка на экраны магазинов игр и их визуальные приёмы. Заказчик выбрал этот вариант.
Пошли по структуре
Всего нам нужно было создать 17 страниц, чтобы закрыть все ключевые сценарии пользователя. Чтобы пользователю было проще ориентироваться, сделали понятную навигацию. Дальше расскажем подробнее про ключевые страницы.
Главная страница
На главной странице человек решает, остаться или нет на сайте. В нашем случае важно было учесть, что 80% трафика приходит с мобильных устройств, поэтому мы уделили особое внимание им. Сделали акцент на удобстве навигации, быстрых переходах между разделами и понятном представлении ключевых преимуществ Paytool.
Страница пополнения Steam
Эта страница — ключевая: на неё ведут почти все CTA. Мы взяли клиентский wireframe и упростили процесс оплаты. Разделили контент, расставили акценты и сократили шаги, чтобы пользователь быстрее завершал покупку.
Подарочные карты и корзина
Эту страницу спроектировали по нестандартному сценарию — согласно техническим требованиям, корзину нужно было разместить на той же странице, что и сами карты.
А вот кнопку «Перейти к оплате» закрепили в нижней части экрана мобильной версии. Кнопка доступна всегда, но скрывается в блоке оплаты, чтобы не отвлекать от процесса. В такой системе нет лишних шагов, поэтому пользователю легче перейти к целевому действию и совершить покупку.
Блог
Блог — это один из важнейших разделов для SEO, потому что качество и структура контента на этой странице влияют на выдачу в поисковиках. Мы учли все технические требования и разработали типовые шаблоны для оформления статей и текстов.
Для этого мы использовали специальный контейнер для контента, увеличили межстрочный интервал, создали кастомные стили для заголовков и оформление ссылок, цитат, списков, карточек, таблиц и слайдеров. Добавили блок с подпиской, просмотры, лайки и таймер чтения, а также блок с автором и разные CTA. Мы заложили все ключевые типы контентных элементов, которые учитывают поисковые системы — заголовки, цитаты, списки и карточки, чтобы страница работала и на читателя, и на SEO.
Ключевая задача этой страницы — передавать полезную информацию пользователю и приводить его в телеграм‑бот компании для подписки или покупки. При этом статьи собирают трафик по разным тематическим запросам, что помогает расширять охват и привлекать новых пользователей из поиска.
Результат
Остальные страницы разработали, учитывая актуальные тренды и паттерны. Благодаря нашему отлаженному процессу и включенности заказчика не получили ни одной серьёзной правки.
Когда все макеты были готовы, мы подготовили UI kit и Style guide: сквозные блоки, иконки, состояния элементов, палитру и типографику. Этим шагом мы завершаем каждый проект: всегда передаём не просто макеты, а вместе со стартовой версией дизайн-системы. С ней клиенту будет легко создавать новые экраны, дорабатывать текущие и масштабировать продукт без необходимости снова обращаться к нам.
После передачи файлов разработчики не задали ни одного вопроса — всё было понятно с первого раза. Мы всегда передаём проект так, чтобы его можно было развивать без лишних доработок.
Прозрачно и без правок
Передали все материалы, пожали друг другу руки и успешно завершили проект.
В общем, за свою вовлечённость мы можем ручаться: даже если у вас нет ТЗ на 126 страниц, мы проведём бриф, во всем разберемся и поможем его составить.
