Конкурс редизайна кошелька Wallet для Telegram, как это было (Case Study)
7 мая 2024 года я увидел анонс конкурса по редизайну главного экрана Wallet — мини приложения в Telegram. Описание конкурса можете посмотреть здесь.
Я начал работу над проектом сразу же. Начал с размышлений. Всем процессом я делился в своём закрытом сообществе «Изнанка UI/UX-дизайна» в режиме реального времени. Пришла мысль в голову — поделился. Решил какую-то микрозадачу — поделился.
И в этой записи я хотел бы обнародовать этот флоу с теми мыслями, которыми я делился и изображениями, которые фоткал ребятам по ходу этих мыслей.
Цель записи — показать процесс дизайна не только на картинках или макетами. Показать, что для меня дизайн — это не только про то, что можно создать в Figma, красиво это или не красиво. Дизайн — это мышление, в процессе которого мы находим эффективные решения для продукта и его пользователей.
Предыстория
До анонса конкурса от Wallet, я участвовал в конкурсе, который был в апреле 2024 года, но от Telegram. Ещё до конкурса я активно изучал сам продукт, информацию об экосистеме Ton, криптовалюте Toncoin. У меня не было в планах касаться этой сферы, но меня настолько затянуло в сам продукт и экосистему, что я жадно впитывал всю информацию. А по мере понимания, куда движется продукт и для чего эта экосистема, у меня появлялся огромный заряд энергии и вдохновение.
Я был удивлён, как совпали события — начало погружения в изучение Ton и анонс конкурса от Telegram. После этого я погрузился в ресерч ещё больше и на этом заряде принял решение найти разработчика мини-приложения своего продукта внутри экосистемы.
Мои работы по конкурсу для Telegram вы можете увидеть здесь. Ну а мы приступаем. Далее я делюсь записями, которые публиковал ребятам в хронологическом порядке.
Case Study: research и выводы
Для меня было важно обдумать, зачем кошельку редизайн. У него уже и так неплохой интерфейс для новичков в сфере, он не отпугивает так, как остальные сложные решения. И первые 2-3 дня перед тем, как приступить к самой работе, я бродил по всему кошельку, перечитывал условия конкурса, искал любую информацию, чтобы понять фундамент — какая главная ценность должна быть у кошелька.
Все посты я привожу без редактирования в том виде, в котором размещал на канале. Тут нет диалога, тут монолог моих мыслей.
7 мая 2024 (начало)
— Капец. Там конкурс по редизайну wallet для телеграм + возможность присоединиться к команде. Когда отдыхать то?
— Срок до 19 мая.
— Радует, что не весь кошелек переделывать, а главный экран.
— Одна из главных задач конкурса — сделать кошелёк понятным и простым для пользователей, ничего не знающих о криптовалютах и Ton. Это значит, что понадобятся банковские референсы, так как для пользователей всё, что связано с деньгами и смартфоном — это банки. Самый привычный паттерн.
8 мая 2024 (главный research)
— Пока что несколько вопросов загоняют меня в размышления и откладывание задачи. Опять же перед началом важно хорошо подумать о том, что заявлял Павел на Token 2049, о том, будут ли приложения внутри кошелька (как сейчас) или отдельным разделом, будут ли внедряться в кастодиальный кошелек какие-либо NFT, или это только для Ton Space. В общем, вопросов много. Задавать себе такие вопросы перед проектом — это немного подняться над задачей и подумать о стратегии. Ведь в конечном счёте, Wallet 5.0 уже в роадмапе проекта Ton. А значит у команды уже есть какое-то видение по нему, скорей всего. И мне надо понять, какое.
— Из роадмапа:
— Нашёл макет кошелька Ильи из его конкурса по редизайну Telegram на Android от 2023 года. Чисто для анализа. Решение сделать кнопки консистентными относительно кнопок профиля канала разумно. В остальном тоже надо думать:
— We anticipate an increase in available assets: Currently, Toncoin, Dollars (USDT), and Bitcoin are available. Ensure quick access to assets without compromising access to other Wallet functionalities.
Мы ожидаем увеличения количества доступных активов: в настоящее время доступны тонкоин, доллары (USDT) и биткоин. Обеспечьте быстрый доступ к активам без ущерба для доступа к другим функциям кошелька. Сейчас, кстати, если скрыть через настройки список доступных активов, то неудобно, что может скрыться именно Ton, если даже пользователь хранит там монеты. Было бы здорово выбирать, что скрывается, а что — нет. Или какой из активов основной в закрепе.Но всё это, как раз, может и новичков отпугнуть из-за того, что покажется слишком сложным. Зачем в целом отображать активы с нулевым балансом? Зачем они на главном экране? Как-будто, просится навигация.
— Также в этом списке есть монета Ton + Ton Space блокчейн, у которого может быть свой баланс тоже в Ton. Это сильно путает. Особенно новичков.При этом, все активы, которые не в монетках, хранятся на Ton Space. Регистрация в приложениях будет не через 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-кода — то, что поможет упростить оплату для пользователей. Особенно в игровой сфере. Важно, чтобы этот флоу был также максимально прост и доступен с первого экрана.
— Категоризация операций кошелька:
— Хороший паттерн для коммуникации с пользователем, разумеется, у «Тинькофф». Где по привычной для пользователей механике (Stories) анонсируются новые фичи, геймификация и другие инструменты вовлечения.
— Семейный связанный счёт? 😳 С подтверждением транзакций через батю 😁
— Кто злится? Щас один фиг игры оплачивать будут. Школьники. А значит — доля здравого смысла есть в этом))
— Если поставить задачу смэтчить архитектуру банков с архитектурой кошелька, получается такая картина:
— А нет. В банке тоже могут быть разные валюты. Ошибочка.
— Хотя, тут в кошельке и карт нет. И могут выступать в роли карт разные монетки. Это же крипта. Все же, архитектура будет немного отличаться.
— Всё! Я всё понял по архитектуре и достиг просветления. На этом UX Recearch можно завершать и думать детальнее по UI.
— В кошельке убрана нативная кнопка с инпутом внизу модалки. Уточнил у разработчика, гипотетически, там можно сделать таббар. Вопрос — надо-ли. Или весь функционал, описанный выше, можно и так грамотно распределить внутри приложения пока что...
— Загрузил свою голову по полной кошельком, криптой и вот этим всем. Теперь надо хорошенько выспаться. И мозг сам все сделает. Надеюсь, мне не будет сниться Тонкоин.
Case Study: начало UI-дизайна
Дальше картина в голове прояснилась, что и как примерно я буду делать. И я приступил к работе в Figma время от времени возвращаясь к обдумыванию тех или иных моментом. Список постов с мыслями и результатами в хронологическом порядке также ниже.
9 мая 2024 (первые наброски UI для Wallet)
— Смущает один момент. В модалках миниэппсов анимация вообще возможна кроме лотти для всяких стикеров? Заметил переливание цвета кнопки + стикеры. А сами переходы все идут через дизолв. Как будто анимация переходов невозможна технически.
— Кнопки в кошельке должны быть такими:
— Как же иконка P2P-маркета портит всё. Надо подумать 🥸
— Подумал. Умею иногда. Стало чище:
— Честно? Я пока так и не определился, главную я это делаю или нет. Потому что, учитывая, наличие Ton Space, стоит подняться на уровень иерархии выше. Но для тех, у кого он отключён, уровень иерархии выше теряет смысл. Решу позже, как лучше. UPD: да, это главная, если выключен спейс.
— Как не рисовать 3D-объекты? Берём Pentool > делаем маску:
— С иллюстрациями на этом пока всё. Теперь надо подумать над композицией в 2 случаях: когда нет средств на кошельке; когда есть средства.🌈 На фотке перегруз, в таком случае кнопку лучше не делать синей, а делать нейтральной. Либо думать о другой композиции для баннеров. Так как когда нет средств, показать больше нечего. Нет смысла ни в кнопках перевода, ни в истории транзакций. Главная цель — пополнить кошелек.🧠 В общем, думаю. Люблю. Умею. Практикую.Самые внимательные заметят, что появилось кое-что ещё 👀Пока другие празднуют и отдыхают, я — как всегда 🤦♂️
— Так. Могут быть 3 типа баннеров: 1. Акции, как с долларами.2. Функционал, как с подтверждением переводов паролем.3. Встроенные, как с каталогом приложений.Должны ли они перемешиваться и быть общими по стилю или нет? В одном месте ли их размещать? На каких этапах их показывать? Важно подумать наперёд.Видимо, с этой мыслью на сегодня всё. Нужен перерыв. А то наворочу опять.
10 мая 2024
— Я думал, что возьму перерыв, посплю, проснусь и хоба — придет решение по поводу этих баннеров. Но нет. Монетку что-ли подбросить. Мысли такие Акции важно показывать либо по одной, либо каруселью. Показывать их надо, пока ими не воспользовались, либо не закрыли (давать ли возможность закрыть?). Функционал новый не так часто появляется. Но будет. После обновы важно также выводить. Он может показываться вместе с акциями. Веб 3.0 приложения — тут я пока только один баннер видел. И его не закроешь. Исследуйте экосистему Ton. Будут ли другие? Вряд ли. Стоит ли его мешать с акциями и фичами — тоже не думаю. Как будто он просится в подвал, так как каталог пока что маленький. Визуальное представление этих баннеров должно отличаться в кошельке пустом от кошелька, где уже пополнил баланс и подключен спейс. Там, где кошелек пустой, нет активов и истории транзакций, больше места. Там, где кошелек пополнен, все это появляется, как и доп. кнопки.В рефах банков, например, сверху все офферы, акции, функции, а когда переходишь в счет, там уже и кешбеки всякие. А еще главный вопрос, будут ли разделяться все эти акции между кошельком и Ton Space. У каждого свои или нет? Вот, что сейчас творится у меня в голове, когда я делаю дизайн. Это и есть дизайн, а не только размеры, шрифты, гайдлайны, цвет. Дизайн — это сложные решения уметь делать просто, и для меня любимый процесс в дизайне — это пример мыслительного флоу, которым я поделился сейчас.
— Кстати… 😉
— Логично. Когда в спейсе можно собирать разные активы и проходить через него авторизацию. Эту задачу я понял правильно. Важно, чтобы новички кошелька это тоже правильно понимали:
— Проблема Wallet и зачем нужен 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. Думал, как бы избавиться от лишних шестерёнок в шапке и заменить её на иконку приглашения друзей. Но, видимо, либо придётся оставлять, либо меню настроек объединять в случае подключенного Ton Space.
— Идеальное будущее 🤭
— В общем, результат пока такой. На сегодня всё 🤑
11 мая 2024
— Как допустили такой косяк с нижней кнопкой и её зажатостью внизу?
— Редактирование активов. Порядка их отображения и индикаторов.
— При большом количестве активов, промо акции улетают вниз и недоступны на первом экране. Думаю, стоит ли это исправлять.
— А так сами активы слишком низко получаются 🤔
— Если пользователь заходит в свой кошелёк, он заранее понимает, где активы. Их часть в любом случае будет видна. Когда появляется новый функционал или акция, важно, чтобы пользователи это заметили. Если мы будем размещать акции и фичи внизу, пользователь может просто пропустить эту информацию, не проскроллив экран, поэтому логичнее размещать их наверху, как на этом скрине. Но в этом случае пользователь может беситься, что до активов надо скроллить. Для этого, с одной стороны, есть механика закрытия баннера. Но тогда вопрос, что пользователю делать, если он закрыл баннер случайно или сначала закрыл, а потом передумал и захотел всё-таки участвовать в акции или поставить пароль. На такой случай нужно предусмотреть место и возможность, как можно посмотреть все актуальные акции и функции.
— Так компактнее. Но тоже не уверен, как в модалке будут свайпы работать. Пока на iOS работают максимально криво. Но если они смогут её на фронте зафиксировать…
— Добавил в макет пример, как выглядит выигранный Telegram Premium на балансе кошелька после проведенного гивэвея.
— Ну и лотереи.
— Именно поэтому я сначала делаю тот экран, где может быть использовано максимальное количество фич. Так как теперь пришло понимание, что когда пользователь только завёл кошелёк, у него уже в нём могут быть активы в виде выигранных гивов, например. А не только кнопка пополнения и баннеры.
— По индикаторам для крипты... Вроде бы нужный инструмент, но тогда нужен период, за который выводится инфа. И не будет ли перегружен интерфейс. Надо решить, оставить фичу или всё-таки отказаться от неё. Как я понимаю, кошелёк всё-таки не инструмент для торговли. А его очень легко сделать таким, добавляя подобный функционал. Что может пугать новичков. То, как реализован баланс сейчас, без лишней информации, уже хорошо. Если напихать датчиков зеленых и красных, это будет уже мясо. Наверное, их стоит делать при открытии конкретной монеты, а не прямо на главной. Так что данный тоггл либо уберу, либо заменю на опцию включения сегментконтроллов для активов.
— Монет то много может быть. Чуть не забыл поиск.
— По моему сегменты тут — плохая идея. Ставь 👎, если да.
— Вчера про настройки писал. Настройки спейса — часть настроек кошелька. Слава яйцам. Это упрощает задачу.
— Решено. Настройки в таббар, P2P туда же. В шапку инвайтинг + QR. Операции под балансом. Всё доступно в 1 нажатие 🫳
— Отображать ли выигранные акции в истории транзакций 🤔
— А вот и еще подсказочка, что надо предусмотреть.
— Вчера мой же ученик подсказал мне нюанс по поводу изменения порядка монет в списке ассетсов. Как и в чате уже Артур писал, что удобнее Drag and Drop юзать тут. Я это понимаю, но модалка в телеграме и её настройки зависят не от кошелька, а от самой платформы телеграм. В Тинькофф при открытии такой модалки, можно обновлять внутренний контент свайпом, при этом нет конфликта с закрытием окна. Но решит ли так сделать Telegram. Я думаю, что я оставлю два варианта этого раздела. Один на случай, если телеграм не сделает этого, а второй сделаю на случай, когда модалка будет зафиксирована разработчиками телеграм по вертикали. Думаю, это запланировано у них в один из следующих спринтов. Ведь юзать миниэппсы при постоянном движении окна по вертикали неудобно.
— Второй вариант.
— Блин. Я вот думаю, привести их к одному размеру или нет.
— Alert + Wallet Earn.
— Дизайн тонспейса консистентен валлету. Но есть раздел с NFT и табами для них. Кстати, дизайн истории транзакций на продакте сейчас у кошелька и тонспейса разный. Надеюсь, приведут к одному виду.
— Бонус 🌚
— 🏪 P2P Market сделал консистентно относительно Earn и др.
— ⭐️ Пригласи друзей, получи премиум.
— Экран пополнения кошелька. Остается только первый экран, где ничего нет. И на этом, думаю, по iOS пока всё.
13 мая 2024
— Когда новичок открывает кошелек, возможно несколько условий:1. У него ничего нет.2. У него есть выигранный премиум.3. Он получил перевод от друга.4. У него есть выигранная лотерея.Значит надо сделать 4 версии экрана.
— 1, 2 или 3… Первый консистентный, ко к кнопке далеко тянуться. На втором кнопка по принципу One Finger Tap. На 3-м нет лишнего перехода, сразу все способы пополнения.
— Смущает, что в этих стыках получается какой-то андроид. Исправляю.
— Короче, вот так сделал. А то буду бесконечно допиливать.
— Баннерочки 😍
— И для темной темы, а то светлые на ней так себе выглядят.
— 😬 Хьюстон, у нас проблема.
— В общем, тут есть конфликт таббара и табов раздела «История транзакций». Данный конфликт возможен только при одном сценарии — когда пользователь первый раз заходит в кошелёк, а у него уже есть транзакции — от друзей, либо подарок премиума. Наложение таббара на табы нежелательно.Варианты решения: 1. Убирать табы в момент, когда там только одна или две операции, если пользователь только открывает кошелёк. У него не будет разделов Exchanges, Transfers и т.п.2. Убирать таббар, но тогда P2P и настройки надо делать где-то на экранах. Что увеличит нагрузку на пользователя.3. В целом отказываться от табов, но тогда в истории транзакций будет каша.4. Выносить историю транзакций в таббар. Но тогда нужна история в разрезе по разным кошелькам + с коллекциями в тонспейсе всё равно табы будут.
— По моему так лучше. Но есть нюанс. Не всегда будет 4 баннера. Как один из вариантов оставляю. Я же говорил, главная для новичка будет самой сложной.
— Близок к решению. Уже лучше 🥳
— Решено. Оставляю. Практично, эстетично. Напрягает правда фон серый, но это iOS. Но ничего. На первом варианте убрал фон таббара. Также у акций в первых 2 вариантах сделал спейсинги по краям, чтобы не было андроида на iOS. Вроде бы стало кайфово. Да, нарушен гайд ios и секция не во всю ширину, но лучше кастомизировать, чтобы под баннерами не было серой дырки.
— Кто-нибудь! Остановите меня, пожалуйста. Как перестать клепать экраны? Экран промо акции.
— Dark theme 🌕
— iOS всё! 🥳
— Нет. Не всё. Я душнила. Зачем в аттачах выводить весь функционал кошелька?? Непорядок же.
— Если можно сразу вот так. И таббар не нужен кошелька.
— Не в курсе, можно ли подменить главную на другую, когда открывается прилка? Нет, API запрос писать не буду. Я дизайнер.
— Если открываем через бота 🤔 выглядит сомнительно. Но что поделать.
14 мая 2024 (приступаем к Android)
— Бонусом запилил лоадер и сплешскрин. Пусть фиксируют уже эти модалки от коллапса. Ну теперь точно к андроиду.
— Таббар или экшн баттн… 🤔
— Все обдумал. Рефы собрал. Уточняющие вопросы задал. Пилю.
— Думаю, сегодня андроид будет доделан 🥳 Впереди тот самый фаршированный экран.
— Ещё немного… Начинаю любить андроид, кстати 😍
— Финальные 2 экрана, затем — темная тема 😎
— А вот как тут поиск в модалке сделать 🤔 Обычно он в навбаре, а тут надо что-то другое. UPD: придумал.
— Зафиналил андроид 😎 Приступаю к темной теме. И отдыхать после этого. Продуктивно — за день запилить андроид.
— ВСЕ МАКЕТЫ ГОТОВЫ! 🤪
15 мая 2024 (анимация и доработки)
— Надо бы продолжить по конкурсу. Если делать анимацию, то какую и что именно важно показать. Что я хотел донести своей работой и такой компановкой экранов. Какие флоу самые ключевые. Если опираться на описание конкурса, есть 4 важных пункта, даже 5:1. Должно быть легко для новичка — очевидно, анимация первых экранов с пустыми балансами.2. Быстрый доступ к отправке средств, пополнению, QR (ой, экран не сделал) и другим операциям — здесь анимация операций.3. Флоу по работе с активами, ожидают их увеличение — анимация фичи, которую сделал для этого.4. Место для новых фич и акций — анимация, показывающая это.5. Показать алерт, сплешскрин, загрузку.Погнали.
— Скелетон замутил на случай проблем с соединением. Извините. Я хз, как макеты перестать плодить. Мне нравится. * Shimmer еще называется.
— Блин. А че никто не подсказал, что при Английском интерфейсе у меня лейбл «Назад» ВЕЗДЕ на русском 😂
— Все. Капец. Мне снился Дуров и Телеграм. Нужен отдых. Сегодня у меня день тишины.
16 мая 2024 (завершение)
— На случай, если откажутся от таббара:1. Настройки возвращены наверх.2. Пополнение кошелька вынесено из кнопок операций к балансу.3. P2P-маркет встаёт 4-й кнопкой в ряд с оставшимися операциями. Иконку сделал Outline. Надо только оптическую компенсацию сделать, похоже.4. Приглашение пользователей слева от аватарки кошелька. Исчезает при переходе в TonSpace.В этом случае таббар не нужен, но шапка становится тяжелее.
17 мая 2024
— Дизайн-привет. Скоро откроют отправку работ. Я отдохнул и понял, что у меня много разновидностей начальных экранов. И можно просто скинуть макеты, а можно внести больше ясности для жюри. Ведь я не знаю, кто будет в жюри. Поэтому я готовлю описание на английском о том, чем отличаются начальные экраны для новичков и какая логика у них.
Спасибо за внимание!
- Работу вы можете посмотреть в этом канале.
- Обо мне и проектах инфа тут.
