Redesigning Celsius wallet

Every app needs a bit of design love now and then. Don’t be that team that neglects their app once it gets into the app store. In the Redesigning … series, I review some mobile crypto applications and highlight some of the good, the bad, and the ugly design decisions. For more tips about creating great cryptocurrency products and services, check my other Medium articles, or the free book that I’m currently writing at redesigningbitcoin.com.

In this article, I’ll go through the Celsius mobile app. Celsius Network operates in the DeFi (short for Decentralized Finance) space by offering competitive loans and interests on cryptocurrencies such as Bitcoin, altcoins, and stablecoins. Their mission is to onboard millions of people around the world who are not necessarily familiar with cryptocurrencies. So let’s dive into this, and find out how they are doing!*

App launch

Good usability practices minimize errors. When looking at the default start-up screen, people see the default keyboard. This particular keyboard has two usability issues. The first is that it contains characters not matching the input (numbers), and allowing people to make unnecessary mistakes. The second drawback is that this keyboard is not optimized for thicker fingers, making misclicks likely to happen. The keyboard in the middle solves both of these usability issues with bigger numeric-only buttons. A commonly accepted replacement for PIN is also the biometric verification, as shown on the right. The thought behind this is that you may forget your PIN (hopefully it’s backed up), but a person unlikely to lose their fingers under normal circumstances. Another benefit is that fingerprint verification is often a little bit faster than recalling and entering a PIN. Therefore this would make a good alternative next to PIN. A little UX detail that I found was that the app also provides support when entering the wrong PIN. From a clean design perspective, this choice makes sense. But from a usability perspective, the visibility of this support tip might also be helpful to those who may not attempt to enter an incorrect PIN.

The current design (left). The right keyboard (middle). Alternative login (right).

Hero screen

After the main- or hero screen is loaded, the Celsius brand is immediately recognizable without overdoing it. The wallet sets itself apart from other wallets with unique colors, style, layout, illustrations, and an informal/personal tone-of-voice. The most important content information is correctly placed on the top, and less important information (e.g. other coins not used), is nicely hidden underneath accordion sections. This makes the main page look less cluttered. Unfortunately, this pattern is not completely applied to the large, blue “Did you know…” tooltip. When discarded, this piece of information is reappearing every time the user logs back in. A more recommended approach would be to hide this tooltip for a longer period of time or prompt the user with the option to opt-out and not show this tip again. Another nice feature on the hero screen is the preferred layout buttons. These little options, along with using people’s names and avatar, increase the personal connection that Celsius is trying to make with their community. Another approach for optimizing the UI to personal preferences would be to support drag & drop features, as suggested in the example below.

Reappearing tooltip (left). Clean UI (right). Drag & drop (right)

Navigation

Instead of a navigation bar on the bottom, or a dreadful hamburger menu at the top, Celsius took the approach of placing different pages under their Celsius floating action button. There is a certain difficulty using this pattern because it is not a very common one (as of date). Especially without using one of the menu icons or supporting menu text. However, there is something to say about this approach, especially when the app contains more than five different nav-items. It may be a bit difficult to find for people new to the app, but once found, it makes sense to click the big blue button. To enhance the playfulness app experience, it is not uncommon to use an animated transition from the menu icon to the full page menu. As for the location of the menu button, this is is nice as well, supporting one-thumb navigation. But perhaps left-handed people might appreciate setting for relocating this button to the left instead of the default right.

Main navigation menu at the bottom (left). Showing all top-level pages (right).

Promo codes

Underneath the profile page lies the option for entering promo codes. These “feely available” codes can be found on various Celsius social media channels, and the Telegram community. A little point of attention is thoroughly testing the application. As shown in the screens below, the “Dark” mode does not display supportive text very well, hindering the readability of information.

Promo code button (left). Success message (middle). Success message in Dark mode (right).

Deposits

Before opening the deposits page, there are two useful warning messages appearing as an overlay. Given the irreversible nature of cryptocurrencies, these messages are correctly made mandatory before taking any action. Unfortunately, there are some minor issues with the layout that could easily be straightened out. The first point is that there is no option to go back. Even the little cross at the top has the same actions as the buttons below. This seems a little redundant. Secondly, the texts and buttons appear to be scrollable and thereby clipping at the bottom of the page. This can easily be fixed by not allowing the text to scroll and completely showing the buttons (with a little bit of whitespace) at the bottom. The third point is the choice for selecting ethereum (ETH) as the default selection for depositing coins. It would be more likely to deposit bitcoin (BTC), given that this is the largest cap coin or the most deposited cryptocurrency within Celsius. An alternative would be always to select the last deposited coin of this specific user.

Unnecessary scrolling (left). Clipping of button (middle). Default setting (right).

Withdraw

Just like the hero screen, the withdraw page also starts with a tooltip. In this context (and given the Celsius business model), it may be useful to show this information once (and only once!). But knowing a bit about people (and banner blindness), not everyone discards this message unless it really hinders them. This is unfortunate because, as is shown in the right-sides image, underneath this message is some vital information; user balance! Without knowing this, the withdraw functions turns into a guessing game, often leading to the “Insufficient funds!” error situation. The withdraw amounts of $20, $50, and $100, are not helpful either when the funds turn out the be less than any of these options. A more elegant solution would be to avoid unnecessary paths that may lead to error situations. When the user balance is a key part of the required information, then it would better to show this information more visibly with a larger font and a bit more contrast (not white on light grey).

Default withdraw page (left). Error message (middle). Clean page (right).

Help & feedback

Not many apps support help & feedback functionality. This makes sense because if your products and services are unclear or incomplete, this may result in countless hours of support. Celsius shows to believe in their products and services, which is also in line with its “community-centered” strategy. Functionally the Help Center and Support Ticket works just fine. But what is lacking is the native app experience. Instead of integrating with Zendesk’s APIs, they have chosen for the web-experience inside their app. From a UX perspective, this is not completely ideal because on the fringe of the app and Zendesk, it doesn’t always work seamlessly together.

App support (left). Help Center (middle). Creating a ticket (right).

Profile settings

The profile settings are an important page for customizing the Celsius app. As briefly explained above, the app really included some non-functional options that make this app stand out from most other cryptocurrency apps. Something as small as customizing the app theme to “Dark”, can have a major impact amongst the community members. The next logical step would be to consider support for different geographical audiences. If Celsius would seriously want to onboard hundreds of millions of people, then there would be no better way than to support default settings for native languages and local currencies.

Profile settings (left). Theme selection (middle). Personalization (right).

Conclusion

The overall app design not only looks good but also works well. The designer and developers are well known with common design and platform practices. Icons are clear and appropriate for their function. Spacing around interactive elements is sufficient so that accidentally clicking the wrong element is minimized. And the app includes appropriate help and hints to help people getting things done without mistakes. But like many apps, the devil is often in the details.

So does Celsius have what it takes to onboard millions of people worldwide on this new platform? Personally, I believe that they are well on their way of doing so. Their app is a central piece of the full Celsius puzzle, connecting other channels together. On the fringe of both the DeFi space and traditional finance, Celsius puts itself in a challenging position with many opportunities. If Celsius continues to follow the route they have taken, they just might succeed where others stay behind.

Disclaimer: For privacy reasons, I have replaced some of the personal information and balances with fictive names and values. Some effects may be that the numbers in the app do not add up. Also, I have not been asked to write this article, nor am I affiliated with Celsius Network. All opinions are my own.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store