Wallet redesign for Telegram, how it was (Case Study)
RU VERSION | ENG VERSION
Contest announcement from Wallet and Ton
On May 7th, 2024, I saw an announcement about a contest for redesigning the main screen of Wallet β a mini app in Telegram. You can see the description of the contest here.
I started working on the project right away. I started with brainstorming. I shared the whole process with my closed community "Inside Out UI/UX Design" in real time. I had a thought β I shared it. I solved some microtask β I shared it.
And in this post, I would like to make this flow public with the thoughts that I shared and the images that I took guys in the course of these thoughts.
The purpose of this post is to show the design process not only in pictures or mockups. To show that for me design is not only about what can be created in Figma, whether it is beautiful or not. Design is thinking, in the process of which we find effective solutions for the product and its users.
Background
Before the Wallet contest announcement, I participated in the contest that was in April 2024, but from Telegram. Even before the contest, I was actively studying the product itself, information about the Ton ecosystem, and the Toncoin cryptocurrency. I had no plans to touch on this area, but I was so drawn into the product and ecosystem itself that I eagerly absorbed all the information. And as I began to understand where the product was headed and what this ecosystem was for, I got a huge boost of energy and inspiration.
I was surprised how the events coincided - the beginning of my immersion in the study of Ton and the announcement of the competition from Telegram. After that, I immersed myself in research even more and on this charge decided to find a developer for a mini-application of my product within the ecosystem.
You can see my works for the Telegram contest here. Well, let's get started. Further I share the posts that I published to the guys in chronological order.
Case Study: research and insights
It was important for me to think about why the wallet needed a redesign. It already has a good interface for newcomers to the field, it does not scare away like other complex solutions. And the first 2-3 days before starting the work itself, I wandered around the wallet, rereading the terms of the contest, looking for any information in order to understand the foundation - what is the main value that the wallet should have.
I present all the posts without editing in the form in which they were posted on the channel. There is no dialogue here, here is a monologue of my thoughts.
May 7, 2024 (start)
- Wow. There is a contest for a telegram wallet redesign + an opportunity to join the team. When to rest?
- I am glad that not the entire wallet will be redesigned, but the main screen.
- One of the main objectives of the contest is to make the wallet clear and simple for users who know nothing about cryptocurrencies and Ton. This means banking references will be needed. For users, everything connected with money and a smartphone is a bank. The most usual pattern.
May 8, 2024 (main research)
- For now, several questions make me think and put off the task. Once again, before you start, it is important to think carefully about what Pavel said at Token 2049, whether the applications will be inside the wallet (as they are now) or a separate section, whether any NFTs will be implemented in the custodial wallet, or this is only for Ton Space. In general, there are many questions. Asking yourself such questions before the project means rising somewhat above the task and thinking about strategy. After all, Wallet 5.0 is already in the Ton project roadmap. So the team most likely already has some vision for it. And I need to understand what it is.
- I found Ilya's wallet layout from his 2023 Telegram redesign contest on Android. Purely for analysis. The decision to make the buttons consistent with the channel profile buttons is reasonable. Otherwise, I also have to think:
β 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.
Incidentally, it is inconvenient now that if you hide the list of available assets through the settings, Ton may be hidden even if the user stores coins there. It would be great to be able to choose what to hide and what not to hide. Or which of the assets is the main one in the Π·Π°ΠΊΡΠ΅ΠΏ.
But all this can scare away newcomers because it may seem too complicated. Why display assets with zero balance at all? Why are they on the main screen? It seems like navigation is required.
β Also present on this list is the Ton + Ton Space blockchain token which can also have its balance in Ton. This is very confusing. Especially for beginners. In this case, all assets that are not in coins are stored on Ton Space. Registration in applications will not be through Wallet, but through Ton Space. Payment can come from either source. It depends on the application. It seems that a new section for Ton Space should be created inside the Wallet. It would no longer be an asset, but a fully-fledged tool permeating the future Web 3.0.
β Trust Wallet reffs. I wouldn't call the flow simple. But I liked the tabbed division between crypto and NFTs. And the popularity rating of crypto.
β Bitget Wallet reffs. From the second screen after opening the wallet, I immediately wanted to quit. I wouldnβt call the flow simple either. Telegram has already made everything much simpler for the average user. Let's discard it.
β Tonkeeper reffs. What's good are the transactions by day. A price chart with a coin. Ton applications are built-in (but this is more related to Ton Space, apparently). There is a section with NFTs, also hello Ton Space.
β It would be nice to see the list of transactions in tabs. Regular transfers between Telegram users, gifts and giveaways. Other transfers and promotions related to deposits and withdrawals from Ton Space, exchangers and other cryptocurrencies. To make the section more human-friendly for regular users.
β QR-code scanning is something that will help simplify payments for users. Especially in the gaming industry. It is important that this flow is also as simple as possible and accessible from the first screen.
β Wallet operation categorization:
β Tinkoff has a good pattern for communicating with the user. They use the mechanics that are familiar to users (Stories) to announce new features, gamification, and other engagement tools.
β Joint linked account? π³ With transaction confirmation via father π
β Who's angry? Right now, one way or another, schoolchildren will be paying for games. So, there is some common sense in this))
β If we set the task of matching the architecture of banks with the architecture of a wallet, we get the following picture:
β Oh, no. A bank can also have different currencies. My mistake.
β Although, there are no cards in the wallet. And different coins can act as cards. It's crypto. Nevertheless, the architecture will be slightly different.
β That's it! I understood everything about the architecture and reached enlightenment. We can finish the UX research at this point and think about the UI in more detail.
β The wallet has removed the native button with input at the bottom of the modal window. I checked with the developer, and hypothetically, a tab bar could be placed there. The question is whether it's necessary. Or maybe for now, all the functionality described above can be Π³ΡΠ°ΠΌΠΎΡΠ½ΠΎ distributed within the application...
β My head is completely full of wallets, crypto, and all that stuff. Now I need to get a good night's sleep. And my brain will do everything by itself. I hope I don't dream about Toncoin.
Case Study: The Beginning of UI Design
The picture in my head became clearer, and I started to get an idea of what and how I was going to do. I started working in Figma, periodically returning to think about certain aspects. The list of posts with thoughts and results in chronological order is also below.
May 9, 2024 (First UI sketches for Wallet)
β One thing confuses me. In mini-app modals, is animation possible at all aside from Lottie for various stickers? I noticed the color overflow of the button + stickers. And all the transitions themselves go through dissolve. It's as if transition animation is technically impossible.
β The buttons in the wallet should be like this:
β How the P2P marketplace icon spoils everything. I need to think about it π₯Έ
- I thought. I can do that sometimes. Things got cleaner:
- Honestly? I haven't decided whether it's the main one or not. Because, taking into account the presence of Ton Space, it's worth rising to a higher level in the hierarchy. But for those who have it disabled, this higher level of hierarchy loses its relevance. I'll decide later what's best. UPD: yes, this is the main one if the space is off.
- How not to draw 3D objects? Take the Pentool > create a mask:
- That's it for the illustrations for now. Now we need to think about the composition in 2 cases: when there are no funds in the wallet; and when there are funds.
π The photo is overloaded, in which case it's better to make the button not blue, but neutral. Or think about a different composition for the banners. Since when there are no funds, there's nothing else to show. There's no point either in the transfer buttons or in the transaction history. The main goal is to top up the wallet.
π§ In general, I'm thinking. I love it. I can do it. I'm practicing.
The most attentive ones will notice that something else has appeared π
While others are celebrating and relaxing, I'm β as always π€¦ββοΈ
- So. There can be 3 types of banners:
1. Shares, like with dollars.
2. Functionality, like with confirmation of transfers with a password.
3. Built-in, like with the catalog of apps.
Should they be mixed and should their style be unified or not? Should they be placed in one place? At what stages should they be shown? It's important to think ahead.
Apparently, that's all for today in terms of this idea. Need a break. Otherwise, I'll screw it up again.
May 10, 2024
- I thought that I would take a break, sleep, wake up, and bam β the solution about these banners would come to me. But no. Maybe I should flip a coin.
These are my thoughts:
- It's important to show shares either one by one or as a carousel. They need to be shown until they're used or closed (should I provide the option to close them?). New functionality doesn't appear that often. But it will. After an update, it's also important to show it. It can be shown together with the shares. Web 3.0 appsΒ β so far, I've only seen one banner here. And you can't close it. Explore the Ton ecosystem. Will there be others? Unlikely. Should it be mixed together with the shares and features β I don't think so either. It seems like it belongs in the basement, since the catalog is still small. The visual representation of these banners should differ in an empty wallet from a wallet with a replenished balance and connected space. In a place where the wallet is empty, there are no assets or transaction history, more space. In a place where the wallet is replenished, all of this appears, as well as additional buttons. In bank referrals, for example, all the offers, shares, functions are on top, but when you go to an account, there are all sorts of cachebacks. And also the main question is whether all of these shares will be divided between the wallet and the Ton Space. Does each have its own or not? This is what's going on in my head right now while I'm doing the design. This is design, not just sizes, fonts, guidelines, and color. Design is knowing how to make difficult solutions simple, and my favorite process in design is the example of the thought flow that I've shared right now.
- It makes sense. When you can collect different assets in the space and go through authorization through it. I understand this task correctly. It's important for new wallet users to understand this correctly as well:
β The Wallet dilemma and why we need Ton Space. Now to the issue at hand. If you want to store funds in your Wallet, itβs not safe. Not because the Telegram Wallet is designed poorly or because your funds may be written off without your knowledge. There are no issues with the wallet per se, itβs a problem with novice user security awareness. The mechanics are such that the wallet is created in your Telegram account. If for some unknown or accidental reason, your Telegram account gets hacked (e.g., your ex-girlfriend logs in from another device, you lose your phone, etc.), your assets in the wallet will also be compromised if your account is hijacked. Your Wallet is an integral part of your account, whereas Ton Space is not a part of your account and is an external integration. A user can have only one wallet, but Ton Space can be linked to multiple accounts, and if one account is compromised, it can be relinked to another. Why is Web3.0 authorization via Space, not via Wallet? Why are all NFTs, .ton domains, collectible addresses, and everything else in the ecosystem attached to Ton Space? Because itβs safer for storing assets. Even if you lose access to your Telegram account, you will not lose access to Ton Space. But there is a catch. Ton Space seems to have been developed without taking into account Telegramβs consistency, and this is a problem. The main design goal is to maintain consistency. Why? Because it inspires more trust and gives the user a feeling that they are not leaving the messenger, that they are still within it, and the application itself is a part of Telegram. The same goal applies to Ton Space. We want users to not think of it as a third-party solution. And no one will have to relearn a bunch of new UI.
β The control segment was originally supposed to be at the top, but I decided to try it this way. Does it make sense? Ton Space will be slightly different. But for now, this is it.
β I'll keep throwing ideas at you.
β Added pagination for clarity:
β I have reached the settings. There are two types of settings. Wallet settings = app settings. And Ton Space settings. I was thinking about how to get rid of the extra gears in the header and replace it with the invite friends icon. But apparently, Iβll either have to leave it as is, or merge the settings menu if Ton Space is connected.
β So, here are the results for now. That's it for today π€
May 11, 2024
β How could you let such a mistake happen with the lower button getting squeezed downwards?
β Editing assets. The order in which they are displayed and indicators.
β With a large number of assets, promo shares fly down and are not available on the first screen. I'm wondering if this is worth fixing.
β And so the assets themselves turn out too low π€
β If a user enters their wallet, they already know where the assets are. Some of them will be visible anyway. When new functionality or a promotion appears, it is important for users to notice it. If we place promotions and features at the bottom, the user can simply miss this information without scrolling the screen, so it is more logical to place them at the top, as in this screenshot. But in this case, the user may be annoyed that they have to scroll to the assets. On the one hand, there is a mechanism for closing the banner. But then the question is what the user should do if they closed the banner by accident or closed it first, then changed their mind and still wanted to participate in the promotion or set a password. For such a case, it is necessary to provide a place and an opportunity to view all current promotions and functions.
β This is more compact. But I'm not sure how swipes will work in the modal window either. So far, they work extremely crookedly on iOS. But if they can fix it on the front end...
β I have added an example to the layout of what the won Telegram Premium looks like on the wallet balance after the giveaway.
β That is why I first make the screen where the maximum number of features can be used. Because now we understand that when a user has just created a wallet, they may already have assets in it in the form of won giveaways, for example. And not just a top-up button and banners.
β For indicators for crypto... It seems to be a necessary tool, but then we need a period for which the information is displayed. And won't the interface be overloaded? We need to decide whether to leave the feature or abandon it. As I understand it, the wallet is still not a trading tool. And it is very easy to make it that way by adding such functionality. Which can scare newcomers. The way the balance is implemented now, without unnecessary information, is already good. If you cram it with green and red indicators, it will be a mess. Perhaps they should be made when opening a specific coin, and not directly on the main page. So I will either remove this toggle, or replace it with the option of enabling segmented controls for assets.
β There can be many coins though. I almost forgot about search.
β In my opinion, segments are a bad idea here. Put π, if yes.
β Yesterday I wrote about settings. Space settings are part of the wallet settings. Thank god. This simplifies the task.
β Decided. Settings to the tab bar, P2P there too. In the header, inviting + QR. Transactions under the balance. Everything is available in 1 click π«³
β Whether to display won gifts in transaction history π€
β And here's another hint of what to consider.
May 12, 2024
β Yesterday, my student told me a nuance about changing the order of coins in the list of assets. As Arthur already wrote in the chat, it is more convenient to use Drag and Drop here. I understand this, but the modal window in Telegram and its settings do not depend on the wallet, but on the Telegram platform itself. In Tinkoff, when you open such a modal window, you can update the internal content with a swipe, while there is no conflict with closing the window. But will Telegram decide to do this? I think I'll leave two versions of this section. One in case Telegram doesn't do this, and the second in case the modal window is fixed vertically by Telegram developers. I think they have it planned for one of the next sprints. After all, using mini-apps with the constant vertical movement of the window is inconvenient.
β Darn. I'm thinking whether to make them the same size or not.
β Tonspace design is consistent with the wallet. But there is a section with NFT and tabs for them. By the way, the design of the transaction history in production is now different for the wallet and tonspace. I hope they will bring them to the same look.
β πͺ P2P Market has been made consistent with Earn and others.
β βοΈ Invite friends, get premium.
β Wallet replenishment screen. The only thing left is the first screen, where there is nothing. And on that, I think, that's all for iOS for now.
May 13, 2024
β When a newbie opens a wallet, there may be several conditions:
1. He has nothing.
2. He has won a premium.
3. He received a transfer from a friend.
4. He won the lottery.
So we need to make 4 versions of the screen.
β 1, 2 or 3β¦
The first is consistent, because the button is far to reach. The second button is based on the One Finger Tap principle. The third one does not have an extra transition, all the methods of replenishment are available at once.
β It bothers me that these joints end up looking like some kind of android. Fixing it.
β I did it that way. Otherwise I will be improving it indefinitely.
β And for dark theme, because the light ones look so-so on it.
β π¬ Houston, we have a problem.
β Overall, there is a conflict between the tab bar and the tabs of the "Transaction history" section. This conflict is possible only in one scenario - when the user enters the wallet for the first time, and he already has transactions - from friends, or a premium gift. Overlapping the tab bar on the tabs is undesirable.
Possible solutions:
1. Remove the tabs when there is only one or two operations, if the user is just opening the wallet. He will not have the "Exchanges", "Transfers" sections, etc.
2. Remove the tab bar, but then P2P and settings should be done somewhere on the screens. This will increase the load on the user.
3. In general, abandon the tabs, but then the transaction history will be a mess.
4. Move the transaction history to the tab bar. But then you need a history in the context of different wallets + with collections in the thinspace, there will still be tabs.
β I think this is better. But there is a nuance. There will not always be 4 banners. I leave it as one of the options. I told you, the main thing for a beginner will be the most difficult.
β Close to a solution. Better already π₯³
β Solved. I'll leave it. Practical, aesthetic. The gray background is annoying, ΠΏΡΠ°Π²Π΄Π°, but this is iOS. But nothing. In the first version, I removed the background of the tab bar. I also made spacings along the edges for the shares in the first 2 options so that there was no android on iOS. It seems to have become pleasant. Yes, the ios guide is broken and the section is not full width, but it is better to customize so that there is no gray hole under the banners.
β Someone! Stop me, please. How to stop churning out screens? Promo stock screen.
β No. Not all. I'm a bore. Why display all the functionality of the wallet in the attachments?? It's not right.
β If possible, like this right away. And the wallet tab bar is not needed.
β I'm not sure if it's possible to replace the main one with another one when the application opens? No, I will not write an API request. I'm a designer.
β If we open it through a bot, π€ looks doubtful. But what can you do.
May 14, 2024 (start on Android)
β As a bonus, I made a loader and a splash screen. Let them fix these modals from collapse already. Well, now definitely to android.
β Tab bar or action buttonβ¦ π€
β Everything's considered. Refs are collected. Clarifying questions are asked. I'm making it.
β I think, today Android will be finished π₯³ Ahead is the very stuffed screen.
β A little moreβ¦ By the way, I'm starting to love Android π
β Final 2 screens, then β dark theme π
β But how to make search in the modal here π€ Usually it's in the navbar, but here we need something else. UPD: figured it out.
β Finalized Android π Starting on dark theme. And taking a break after that. Productive β made Android in one day.
β ALL THE LAYOUTS ARE READY! π€ͺ
May 15, 2024 (animations and improvements)
β I should continue on the contest. If I do animations, then what kind and what exactly is important to show. What I wanted to convey with my work and such an arrangement of screens. Which flows are the most key. Based on the description of the competition, there are 4 important points, even 5:
1. It should be easy for a beginner - obviously, animation of the first screens with empty balances.
2. Quick access to sending funds, replenishment, QR (oh, I didnβt make the screen) and other operations - here is the animation of operations.
3. Flow for working with assets, expect them to increase - animation of the feature that I made for this.
4. Place for new features and promotions - animation showing this.
5. Show alert, splash screen, loading.
Let's go.
β Skeleton made in case of connection problems. I'm sorry. I don't know how to stop multiplying layouts. I like it. * Also called Shimmer.
β Damn. Why didn't anyone tell me that when the English interface is on, the "Back" label is in Russian EVERYWHERE π
β That's it. Dude. I dreamed of Durov and Telegram. I need a break. Today is my day of silence.
May 16, 2024 (completion)
β Just in case they refuse the tab bar:
1. Settings are back on top.
2. Wallet replenishment is taken out of the operation buttons to the balance.
3. The P2P market becomes the 4th button in a row with the remaining operations. I made the icon Outline. It seems that you only need to make optical compensation.
4. User invitation to the left of the wallet avatar. Disappears when moving to TonSpace.
In this case, the tab bar is not needed, but the header becomes heavier.
May 17, 2024
β Design hello. Submission of works will open soon. I had a rest and realized that I have many varieties of initial screens. And you can just throw off the layouts, or you can bring more clarity to the jury. After all, I do not know who will be on the jury. Therefore, I am preparing a description in English about how the initial screens for beginners differ and what their logic is.
Thank you for your time!
- You can check out my work on this channel.
- Here is some information about me and my projects.