Как я выиграл конкурс по дизайну Wallet от Telegram и занял 1-е место из 300 участников

«Настало время проводить собственные конкурсы» — эту фразу я увидел в конкурсном канале Ильи (дизайнер кастодиального криптокошелька, встроенного в Telegram). Он принимал участие в конкурсах от Telegram ранее, в которых я тоже любил поучаствовать. Далее я расскажу, как у меня получилось занять первое место. Но что было до этого момента?

В 2018-м году был мой первый конкурс по дизайну от Telegram по меню вложений. Тогда я очень удивился, что выиграл его. Результаты на данный момент времени выглядят, разумеется, сомнительно, но тогда были актуальны. Сам кейс вы найдёте здесь.

Далее я принимал участие в конкурсе в 2019-м году по редизайну звонков в Telegram, работу делал не думая и на скорую руку. Это было единственное поражение за всё время, где я не занял никакого места. Ну… заслуженно.

Далее спустя только 4 года активной работы я увидел анонс очередного конкурса по Telegram. Нужно было сделать редизайн Telegram для Android. Также занял призовое место. К этому времени они внедрили платформу Contest.com. Мой ник Nice Pony. Кейс можете увидеть здесь.

Ну а дальше я подсел и старался не пропускать ни одного конкурса.

В 2024-м году в апреле Telegram вновь анонсировал конкурс по дизайну, но в котором был упор на анимацию. С тем же ником Nice Pony, я снова занял призовое место. Мои работы размещены на специальном канале.

А как только я его доделал, произошло то, что я описал в первом параграфе статьи. Я увидел анонс конкурса от Wallet у Ильи на канале. В результате этого конкурса я занял первое место, за которое полагается вознаграждение в 2500$ (ник @itsets).

Из 5-ти моих участий 4 победных, где крайний конкурс с первым местом. Как этого получилось добиться? Для этого я и решил написать данную статью, чтобы поделиться процессом и мышлением, которые к этому привели.

До того, как я увидел анонс конкурса от Wallet, я принимал участие в конкурсе от Telegram, где нужно было придумать 3 фичи и показать их в стиле Telegram блога через анимацию. А до участия в этом конкурсе, по удачному стечению обстоятельств, я активно изучал информацию про Telegram, Mini Apps, Notcoin, да и про Дурова. Так что к первому конкурсу я был максимально в контексте происходящего.

Я жадно пылесосил весь контент про Telegram и Ton (блокчейн экосистема The Open Network — стратегический партнер Telegram) с марта по май 2024-го года. Дело в том, что я планировал запускать свой Mini App внутри Telegram, так что вся эта информация, которую я изучил ещё до начала конкурсов, была весьма кстати.

Параллельно со всем этим я завёл закрытое сообщество в Telegram по подписной модели, где делился с ребятами всем процессом во время участия в обеих конкурсах. Это мотивировало меня регулярно фиксировать происходящие действия, инсайты от ресерча, решения в процессе дизайна. Все участники «Изнанки UI/UX-дизайна» видели, как в риалтайме рождается дизайн, который я планировал отправить в качестве результата конкурсной работы.

Перед началом работы самым главным было определиться, а что именно и как делать. Зачем вообще Wallet запустил такой конкурс, зачем им редизайн. У них уже был и так простой и довольно неплохой по UX интерфейс. Поэтому первые 2-3 дня перед тем, как приступить к созданию макетов, я исследовал весь интерфейс кошелька и Ton Space, перечитывал условия конкурса, искал любую информацию, чтобы понять фундамент — какая главная ценность должна быть у кошелька.

Итак, я начал с ресерча. Одна из главных задач конкурса — сделать кошелёк понятным и простым для пользователей, ничего не знающих о криптовалютах и Ton. Это значит, что понадобятся банковские референсы, так как для пользователей всё, что связано с деньгами и смартфоном — это банки. Самый привычный паттерн.

Но несколько вопросов загоняли меня в размышления и откладывание задачи. Опять же перед началом важно было хорошо подумать о том, что заявлял Павел на Token 2049, о том, будут ли приложения внутри кошелька (как сейчас) или отдельным разделом, будут ли внедряться в кастодиальный кошелек какие-либо NFT, или это только для Ton Space. В общем, вопросов много. Задавать себе такие вопросы перед проектом — это немного подняться над задачей и подумать о стратегии. Ведь в конечном счёте, Wallet 5.0 уже в роадмапе проекта Ton. А значит у команды уже есть какое-то видение по нему, скорей всего. И мне надо было понять — какое.

Нашёл макет кошелька Ильи из его конкурса по редизайну Telegram на Android от 2023 года. Чисто для анализа. Решение сделать кнопки консистентными относительно кнопок профиля канала разумно. В остальном тоже надо думать:

Далее я снова вернулся к описанию конкурса.

Мы ожидаем увеличения количества доступных активов: в настоящее время доступны тонкоин, доллары (USDT) и биткоин. Обеспечьте быстрый доступ к активам без ущерба для доступа к другим функциям кошелька.

Я понял, что если скрыть через настройки список доступных активов, то неудобно, что может скрыться именно Ton, если даже пользователь хранит там монеты. Было бы здорово выбирать, что скрывается, а что — нет. Или какой из активов основной в закрепе. Но всё это, как раз, может и новичков отпугнуть из-за того, что покажется слишком сложным. Зачем в целом отображать активы с нулевым балансом? Зачем они на главном экране? Как-будто, просится дополнительная навигация.

Также в этом списке есть монета Ton и Ton Space кошелек (децентрализованный), у которого может быть свой баланс тоже в Ton. Это сильно путает. Особенно новичков. Регистрация в приложениях будет и через Wallet, и через Ton Space. А вот оплата может быть и оттуда, и оттуда. Зависит от приложения. Как-будто бы, для Ton Space пора делать новый раздел внутри Wallet и это не актив, а уже полноценный инструмент, пронизывающий будущий Web 3.0.

Рефы Trust Wallet. Не назвал бы флоу простым. Но понравилось разделение на табы между криптой и NFT. И рейтинг популярности крипты.

Рефы Bitget Wallet. Со 2-го экрана после открытия кошелька вообще выйти захотелось. Не назвал бы флоу тоже простым. У телеграм уже сделано все намного проще для обычного пользователя. Отметаем.

Рефы Tonkeeper. Что хорошо — транзакции по дням. График курса с монетой. Встроены Ton приложения (но это больше к Ton Space, видимо). Есть раздел с NFT, тоже привет Ton Space.

Список транзакций было бы неплохо в табах видеть. Обычные переводы между пользователями Telegram, подарки и гивы. Другие переводы и акции, связанные с вводом на ton space и выводом оттуда, обменники и другая крипта. Чтобы больше очеловечить раздел для обычных пользователей.

Скан QR-кода — то, что поможет упростить оплату для пользователей. Особенно в игровой сфере. Важно, чтобы этот флоу был также максимально прост и доступен с первого экрана.

Далее я накидал структуру операций кошелька.

А если поставить задачу смэтчить архитектуру банков с архитектурой кошелька, получилась такая картина. Но в банке тоже могут быть разные валюты. Хотя, тут в кошельке и карт нет. И могут выступать в роли карт разные монетки. Это же крипта.

На этом UX Recearch был завершен и я начал думать детальнее по UI-дизайну.

Дальше картина в голове прояснилась, что и как примерно я буду делать. И я приступил к работе в Figma время от времени возвращаясь к обдумыванию тех или иных моментов.

Меня смущал один момент. Анимация вообще возможна в модалках Telegram Mini Apps кроме лотти для всяких стикеров. Заметил переливание цвета кнопки + стикеры. А сами переходы все идут через дизолв. Как будто анимация переходов невозможна технически. Решил сфокусироваться именно на дизайне, а не Motion.

Чтобы дизайн был консистентным, кнопки в кошельке думал сделать такими (как в каналах и чатах), но мне не нравилась, как иконка P2P-маркета выделялась от остальных по стилю.

Я накидал вариант, но начал думать, что делать с иконкой P2P:

Поняв, что при продаже крипты и так используется P2P, переименовал пункт и заменил иконку.

В этот момент я еще так и не определился, главную я это делал или нет. Потому что, учитывая, наличие Ton Space, стоило подняться на уровень иерархии выше. Но для тех, у кого он отключён, уровень иерархии выше теряет смысл. В конечном счете понял, что это главная, если выключен спейс.

Дальше я занялся иллюстрациями для промо баннеров. А затем думал над композицией в 2 случаях: когда нет средств на кошельке; когда есть средства.

На фотке возник перегруз, в таком случае кнопку лучше не делать синей, а делать нейтральной. Либо думать о другой композиции для баннеров. Так как когда нет средств, показать больше нечего. Нет смысла ни в кнопках перевода, ни в истории транзакций. Главная цель — пополнить кошелек.

Я выделил 3 типа баннеров:

1. Акции, как с долларами.

2. Функционал, как с подтверждением переводов паролем.

3. Встроенные, как с каталогом приложений.

Должны ли они перемешиваться и быть общими по стилю или нет? В одном месте ли их размещать? На каких этапах их показывать?

На следующий день пришло решение по баннерам. Акции важно показывать либо по одной, либо каруселью. Показывать их надо, пока ими не воспользовались, либо не закрыли (давать ли возможность закрыть?). Функционал новый не так часто появляется. Но будет. После обновы важно также выводить. Он может показываться вместе с акциями. По веб 3.0 приложениям — тут я пока только один баннер видел. И его не закроешь: «Исследуйте экосистему Ton». Будут ли другие? Вряд ли. Стоит ли его мешать с акциями и фичами — тоже не думаю. Как будто он просится в подвал, так как каталог пока что маленький.

Визуальное представление этих баннеров должно отличаться в кошельке пустом от кошелька, где уже пополнил баланс и подключен спейс. Там, где кошелек пустой, нет активов и истории транзакций, больше места. Там, где кошелек пополнен, все это появляется, как и доп. кнопки. В рефах банков, например, сверху все офферы, акции, функции, а когда переходишь в счет, там уже и кэшбеки всякие. А еще был главный вопрос, будут ли разделяться все эти акции между кошельком и Ton Space. У каждого свои или нет?

Вот, что творилось у меня в голове, когда я делал дизайн. Это и есть дизайн, а не только размеры, шрифты, гайдлайны, цвет. Дизайн — это сложные решения уметь делать просто, и для меня любимый процесс в дизайне — это пример мыслительного флоу, которым я поделился сейчас.

Также пришла идея добавить фичу с инвайтом друзей, как реализовано в Т-Банке.

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

А теперь о том, почему возникла такая задача. Если вы хотите хранить деньги в кошельке, это не безопасно. Не потому что кошелек Telegram сделан криво, не потому что могут деньги списать без вашего ведома. Нет проблем с кошельком, есть проблема с безопасностью неопытных пользователей.

Механика такова, что кошелёк создаётся внутри аккаунта Telegram. Если по какой-то неведомой или случайной причине наступает конец аккаунту в Telegram (бывшая зашла с другого устройства, или где-то телефон оставили и т.п.), наступает конец и активам в кошельке при угоне аккаунта, допустим.

Wallet — часть вашего аккаунта, Ton Space — не часть аккаунта, а внешняя интеграция. Wallet может быть один у одного пользователя, Ton Space можно привязать к одному аккаунту, а при угоне аккаунта перепривязать к другому. Почему авторизация в веб 3.0 идёт через спейс, а не кошелек, почему все NFT, домены .ton, коллекционные адреса и всё остальное из экосистемы крепится именно к Ton Space? Потому что это безопаснее для хранения активов.

Даже при утрате доступа к аккаунту Telegram, вы не утратите доступ к Ton Space. Но есть нюанс. Ton Space, видимо, делалася без учета консистентности самого Telegram а это проблема. Основная задача в дизайне — сохранить консистентность, почему? Потому что так доверия больше и пользователю кажется, что он не покидает мессенджер, что он продолжает быть в нем, а само приложение — часть Telegram. Такая же задача стоит и перед Ton Space. Чтобы пользователь не думал, что это стороннее решение. Да и переучивать к другому UI никого не придется.

Сегмент контроллы думал сначала сделать наверху. Но решил попробовать так.

Дальше начал ускоряться, потому что уже поджимали сроки, а впереди ещё был андроид и темные темы.

Добавил пагинацию, чтобы было понятнее.

После дошел до настроек. Есть два их типа. Настройки кошелька = настройки приложения. И настройки Ton Space. Думал, как бы избавиться от лишних шестерёнок в шапке и заменить её на иконку приглашения друзей. Но, видимо, либо придётся оставлять, либо меню настроек объединять в случае подключенного Ton Space.

Также доработал историю транзакций в соответствии с идеями при ресерче.

Вернувшись к работе на следующий день сделал редактирование активов. Порядка их отображения и индикаторов.

При большом количестве активов, промо акции улетают вниз и недоступны на первом экране. Думал, стоит ли это исправлять.

А так сами активы слишком низко получаются:

Если пользователь заходит в свой кошелёк, он заранее понимает, где активы. Их часть в любом случае будет видна. Когда появляется новый функционал или акция, важно, чтобы пользователи это заметили. Если мы будем размещать акции и фичи внизу, пользователь может просто пропустить эту информацию, не проскроллив экран, поэтому логичнее размещать их наверху, как на этом скрине. Но в этом случае пользователь может беситься, что до активов надо скроллить.

Для этого, с одной стороны, есть механика закрытия баннера. Но тогда вопрос, что пользователю делать, если он закрыл баннер случайно или сначала закрыл, а потом передумал и захотел всё-таки участвовать в акции или поставить пароль. На такой случай нужно предусмотреть место и возможность, как можно посмотреть все актуальные акции и функции.

Так компактнее. Но тоже не уверен, как в модалке будут свайпы работать. Пока на iOS работают максимально криво. Но если они смогут её на фронте зафиксировать…

С этими баннерами у меня прям мозговой штурм был неслабый. Поэтому занялся другими моментами.

Добавил в макет пример, как выглядит выигранный Telegram Premium на балансе кошелька после проведенного гивэвея.

А также прикрутил к балансу лотереи (Raffles).

Именно поэтому я сначала делаю тот экран, где может быть использовано максимальное количество фич. Так как после пришло понимание, что когда пользователь только завёл кошелёк, у него уже в нём могут быть активы в виде выигранных гивов, например. А не только кнопка пополнения и баннеры.

Теперь по индикаторам для крипты... Вроде бы нужный инструмент, но тогда нужен период, за который выводится инфа. И не будет ли перегружен интерфейс. Надо решить, оставить фичу или всё-таки отказаться от неё. Как я понимаю, кошелёк всё-таки не инструмент для торговли. А его очень легко сделать таким, добавляя подобный функционал. Что может пугать новичков. То, как реализован баланс сейчас, без лишней информации, уже хорошо. Если напихать датчиков зеленых и красных, это будет уже мясо. Наверное, их стоит делать при открытии конкретной монеты, а не прямо на главной. Так что данный тоггл либо уберу, либо заменю на опцию включения сегментконтроллов для активов.

Монет то много может быть. Чуть не забыл поиск.

Про настройки писал. Обнаружил, что настройки спейса — часть настроек кошелька. Слава яйцам. Это упрощает задачу.

Решил настройки поместить в таббар, P2P туда же. В шапку инвайтинг + QR. Операции под балансом. Всё доступно в 1 нажатие.

В момент, когда делал работу, кошелек тормозил из-за наплыва пользователей. Поэтому я увидел, что нужно ещё проработать системный алерт. Вот так он криво выглядел в кошельке.

Далее я обсуждал с ребятами в «Изнанке» нюанс по поводу изменения порядка монет в списке ассетсов. Мне говорили, что удобнее Drag and Drop юзать. Я это понимаю, но модалка в телеграме и её настройки зависят не от кошелька, а от самой платформы телеграм.

В Тинькофф при открытии такой модалки, можно обновлять внутренний контент свайпом, при этом нет конфликта с закрытием окна. Но решит ли так сделать Telegram. Я думаю, что я оставлю два варианта этого раздела. Один на случай, если телеграм не сделает этого, а второй сделаю на случай, когда модалка будет зафиксирована разработчиками телеграм по вертикали. Думаю, это запланировано у них в один из следующих спринтов. Ведь юзать миниэппсы при постоянном движении окна по вертикали неудобно.

Экраны с Wallet Earn и демонстрация Alert.

Дизайн тонспейса консистентен валлету. Но есть раздел с NFT и табами для них. Кстати, дизайн истории транзакций на продакте сейчас у кошелька и тонспейса разный. Надеюсь, приведут к одному виду.

Дальше я начал проработку темной темы:

🏪 P2P Market сделал консистентно относительно Earn и др.

Далее то самое окошко с инвайтом пользователей.

Экран пополнения кошелька.

Когда новичок открывает кошелек, возможно несколько условий:

1. У него ничего нет.

2. У него есть выигранный премиум.

3. Он получил перевод от друга.

4. У него есть выигранная лотерея.Значит надо сделать 4 версии экрана.

— 1, 2 или 3… Первый консистентный, ко к кнопке далеко тянуться. На втором кнопка по принципу One Finger Tap. На 3-м нет лишнего перехода, сразу все способы пополнения.

Дальше смутило, что в этих стыках получался какой-то андроид. Исправлял.

В результате сделал так:

Баннеры для светлой и темной тем отличались, так как светлые баннеры на темной теме выглядели не очень.

В общем, тут есть конфликт таббара и табов раздела «История транзакций». Данный конфликт возможен только при одном сценарии — когда пользователь первый раз заходит в кошелёк, а у него уже есть транзакции — от друзей, либо подарок премиума.

Наложение таббара на табы нежелательно. Варианты решения:

1. Убирать табы в момент, когда там только одна или две операции, если пользователь только открывает кошелёк. У него не будет разделов Exchanges, Transfers и т.п.

2. Убирать таббар, но тогда P2P и настройки надо делать где-то на экранах. Что увеличит нагрузку на пользователя.

3. В целом отказываться от табов, но тогда в истории транзакций будет каша.4. Выносить историю транзакций в таббар. Но тогда нужна история в разрезе по разным кошелькам + с коллекциями в тонспейсе всё равно табы будут.

Продолжаю с главной. По моему так лучше. Но есть нюанс. Не всегда будет 4 баннера. Как один из вариантов оставляю. Как я и полагал, главная для новичка будет самой сложной.

Решено. Оставляю. Практично, эстетично. Напрягает правда фон серый, но это iOS. Но ничего. На первом варианте убрал фон таббара. Также у акций в первых 2 вариантах сделал спейсинги по краям, чтобы не было андроида на iOS. Вроде бы стало кайфово. Да, нарушен гайд ios и секция не во всю ширину, но лучше кастомизировать, чтобы под баннерами не было серой дырки.

Далее сделал экран промо акций.

И завершил темную тему для iOS.

Если Wallet открываем через бота 🤔 выглядит сомнительно. Но что поделать. Такая механика Telegram Mini Apps.

Бонусом запилил лоадер и сплешскрин. Пусть фиксируют уже эти модалки от коллапса. После этого приступил к андроиду.

Ещё экраны для андроида.

Адаптация кошелька и тон спейса для андроида.

Финальные 2 экрана, затем — темная тема.

Задумался, как тут поиск в модалке сделать 🤔 Обычно он в навбаре, а тут надо что-то другое.

Решил сделать таким образом. Внутри секции.

Зафиналил андроид и темную тему за 1 день.

А вот все макеты в фигме.

Также на случай, если бы захотели отказаться от таббара, сделал ещё вариант.

1. Настройки возвращены наверх.

2. Пополнение кошелька вынесено из кнопок операций к балансу.

3. P2P-маркет встаёт 4-й кнопкой в ряд с оставшимися операциями. Иконку сделал Outline. Надо только оптическую компенсацию сделать, похоже.

4. Приглашение пользователей слева от аватарки кошелька. Исчезает при переходе в TonSpace.В этом случае таббар не нужен, но шапка становится тяжелее.

— Вся работа размещена на этом канале.

— Информация обо мне здесь.

Также я сейчас активно делюсь процессом работы по разработке своего Telegram Mini Apps, для которого собрал команду. Это приложение знакомств внутри Telegram. Всеми деталями делюсь в изнанке, так что присоединяйтесь.