VO Wallet это криптокошелёк, который открывается прямо в Telegram как Mini App. Пользователь хранит фиат и криптовалюту, меняет одно на другое, покупает и продаёт на P2P-маркете и переводит деньги контактам. Мы спроектировали интерфейс приложения, нарисовали его в светлой и тёмной темах и сделали логотип с дизайн-системой для разработки.
Задача
Деньги в мессенджере вызывают недоверие: человек не видит привычного банковского приложения и боится ошибиться. Поэтому интерфейсу кошелька нужно было три вещи: понятный баланс, короткий путь к каждому действию и защита, которую пользователь видит.
Главный экран
Сверху общий баланс крупными цифрами, под ним четыре главных действия: отправить, пополнить, обменять и P2P-маркет. Ниже список счетов, разделённый на фиат и криптовалюту: у каждой строки иконка валюты, сумма в долларах, количество монет и изменение курса. Нижняя панель ведёт к истории, обмену и настройкам.
Обмен и P2P
Обмен уместился в один экран: сверху «вы платите», снизу «вы получите», между ними курс и одна кнопка. Ничего лишнего между решением и действием.
P2P-маркет показывает объявления карточками: цена за монету, продавец и число его сделок, доступный объём, лимиты и способы оплаты. Фильтры по оплате, верификации, валюте и сумме стоят сверху, чтобы нужное предложение находилось за пару нажатий.
Отправка, пополнение и PIN
Отправка и пополнение открываются шторкой с понятным выбором: перевод контакту в Telegram или на внешний кошелёк, покупка картой, через P2P или с биржи. Под каждым вариантом короткая подсказка, чем он отличается. Перед важными действиями приложение спрашивает PIN-код: это та защита, которую пользователь видит своими глазами.
Две темы и дизайн-система
Mini App открывается внутри Telegram, а у пользователей включена то светлая, то тёмная тема. Поэтому каждый экран нарисован в двух вариантах, и кошелёк выглядит родным в любых настройках.
Чтобы разработка собирала новые экраны без дизайнера на каждую мелочь, мы сделали дизайн-систему: цвета, шрифты, кнопки, карточки, поля ввода и шторки в обеих темах. Вместе с ней логотип VO для иконки приложения.
Результат
Готовый дизайн Telegram Mini App в двух темах: баланс, обмен, P2P-маркет, отправка, пополнение, история и PIN-код. Логотип и дизайн-система, из которой команда собирает новые экраны в том же стиле.