Студия Meowdes · Дизайн-лид · Telegram Mini App

VPN, который понятно купить и подключить без инструкций

Водолей VPN: главный экран с подпиской на телефоне

Коротко

Водолей продаёт VPN через бота в Telegram. Клиент пришёл с работающим ботом и просьбой переделать личный кабинет: люди путались в двух тарифах.

Моя роль
Дизайн-лид. Вёл клиента, ставил задачи дизайнерам студии и ревьюил каждую итерацию, пока клиент проходил прототип и присылал правки видео.
Платформа
Telegram Mini App
Срок
14 дней, ревью после каждой итерации
Сдали
Макеты и кликабельный прототип

Проблема

Проблема

Люди путались в тарифах, а кабинет тонул в тексте

Цель: человек без опыта с VPN за пару минут понимает, что покупает, и подключает телефон, не читая инструкций.

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

Проблема

Разницу между двумя тарифами не понимали даже в поддержке

Проблема

В оплате висели способы, которые сервис не принимает

Было и стало

Было и стало

От синих градиентов к одному главному действию

БылоСтарый кабинет: синие градиенты, маскот и плотный текст
Синие градиенты, маскот на главной и плотные блоки текста
СталоНовый кабинет: светлая основа и карточка подписки
Светлая основа, на каждом экране одно главное действие

Решение 01

01

Остаток подписки виден по уровню воды

Карточка подписки заполнена водой: в начале срока она почти полная, к концу стекает. Остаток видно с первого взгляда, отдельный баннер про продление не нужен.

Карточка подписки при разном остатке дней

Решение 02

02

Белые списки объяснены двумя исходами

Обход белых списков стал переключателем внутри подписки. Абзац текста заменили проверкой: открылся только Яндекс, значит нужен сервер обхода, открылось всё, значит подойдёт любой.

Проверка за 10 секунд и выбор сервера обхода

Решение 03

03

Оплата без сюрпризов

Итог покупки собран над кнопкой, поэтому сумма не становится сюрпризом в выписке. Главное действие живёт в нижней панели Telegram, как у нативных мини-приложений.

Цена решенияНеактивные способы оплаты не показали: клиент решил, что способ, которым нельзя заплатить, только отпугнёт. Остался один способ, карта.

Выбор карты и подтверждение оплаты

Решение 04

04

Друга можно позвать прямо из Telegram

Приглашение отправляется из контактов Telegram. Если у друга Telegram не работает, ему уходит обычная ссылка.

Экраны приглашения друзей и подарка подписки

Экраны

Экраны

Весь путь пользователя

Итог

Итог

Один тариф вместо двух и прототип на весь путь

75
экранов и состояний
1
тариф вместо двух
14 дней
от старта до правок клиента

Результат

Клиент прошёл по прототипу весь путь сам и присылал правки видео с таймкодами.

Вывод

Обычные блоки не кричат: громким остаётся только главное действие