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