Редизайн Telegram Mini App, через которое продаётся и настраивается VPN

Цель работы

Сделать так, чтобы человек без опыта с VPN за пару минут понял, что покупает, и подключил телефон, не читая инструкций. Второй слой цели шёл от клиента: никаких тёмных паттернов. Человек должен видеть, сколько заплатит и когда будет следующее списание, ещё до нажатия на кнопку, а отключить продление должен находить сам, без поддержки.

Что было до

Старый кабинет был собран на синих градиентах, с маскотом-Водолеем на главной и плотными блоками текста. Тарифов было два, и по переписке видно, что разницу между ними не понимали даже в поддержке: по сути она сводилась к обходу белых списков. Клиент прислал двух конкурентов. У одного ему нравились большие кнопки, поддержка на виду и подарок другу. Он же попросил «много текста не вываливать» и убрать всё, что похоже на ловушку при оплате. Отдельная проблема была в способах оплаты. В интерфейсе висели СБП, криптовалюта и звёзды Telegram, которые сервис не принимает. Мы предложили показывать их неактивными. Клиент отказался: человек увидит способ, которым не может заплатить, и уйдёт. Остался один способ, карта.

Решение

Главный экран держится на одной метафоре. Карточка подписки заполнена водой, и уровень привязан к оставшимся дням: в начале срока она почти полная, к концу стекает. Цифры над водой темнеют, когда вода уходит из-под них. Остаток видно с первого взгляда, и напоминать про продление отдельным баннером не нужно. Обход белых списков стал переключателем внутри подписки. Его видно сразу при покупке, и выключить его можно одним движением, без звонка в поддержку. Белые списки пришлось объяснять людям, которые не знают этого слова. Абзац текста мы заменили модалкой с двумя исходами: открылся только Яндекс, значит нужен сервер обхода, открылось всё, значит подойдёт любой. Серверы подписаны флагами стран, а не техническими названиями. На каждом экране одно главное действие, и оно живёт в нижней панели Telegram, как у нативных мини-приложений. Итог покупки собран над кнопкой, поэтому сумма не становится сюрпризом в выписке. Пригласить друга можно прямо из контактов Telegram. Если у друга Telegram не работает, ему уходит обычная ссылка.

Дизайн-система

Основа светлая: белые карточки на сером поле, один синий акцент, шрифт Manrope. Тёмную «премиальную» карточку для обхода мы рисовали и убрали. Клиент сказал, что она слишком выделяется, и с тех пор в проекте правило: обычные блоки не кричат. Интерфейс собран на компонентах и переменных, поэтому экраны одинаково держатся на маленьких и больших iPhone и учитывают вырез и полоску «домой». Прототип собран из тех же макетов. Клиент проходил по нему весь путь сам и присылал правки видео с таймкодами.