Kadet Wallet is an app that helps you securely store and manage cryptocurrency and digital assets, such as NFTs, on the internet.
Instead of keeping credit or debit cards in your pocket, Kadet Wallet lets you store digital accounts inside the digital wallet app.
Instead of holding traditional currencies like dollars or euros in your Chase/BOA account, you store tokens in accounts of the Kadet Wallet. (Tokens can be cryptocurrencies like Bitcoin or other forms of digital assets, including NFTs.)
During the previous phase, we worked on creating different flows within the app, such as setting up an account, sending tokens, and handling NFTs.
However, we noticed that the design components used in the app were not consistent. Colors and sizes were used inconsistently throughout, leading to a visually disjointed experience. Additionally, some usability issues were identified during user tests, which we aim to address and improve.
“I'm quite unfamiliar with cryptocurrency and I'm honestly worried about the possibility of losing my money while using it.”
“There seems to be so much information to absorb, but I'm not sure where to begin. It's all quite overwhelming...”
“Could you explain what "Anychain" means? Also, is there a distinction between Chain 0 and Chain 1? Oh my god, so many terms...”
After analyzing the users' quotes, we identified three primary themes: inconfident operations, ambiguous layout and confusing information. To enhance the user experience, we have formulated three design principles that directly address these concerns.
Our objective is to instill users with CONFIDENCE when conducting cryptocurrency operations within our app, ensure CLARITY in guiding their actions, and increase UNDERSTANDABILITY throughout the application.
To help users build up confidence in cryptocurrency knowledge and app operation
To make the interface fresh and clear for users to take actions, instead of overwheming them with too much information
To make the terminology simple, and improve easiness in understanding for users
- Misguiding dashboard layout (send NFT flow)
- Complex Cryptocurrency jargon
- Unable to connect with other accounts
- Visual inconsistency
To send an NFT, users are supposed to click on the NFT icon located in the bottom bar. However, it has been observed that many users tend to click on the 'send' button in the middle of the dashboard, which doesn't direct them to the 'NFT' page but instead initiates the flow for sending tokens.
Beside, users also mentioned that the hierarchy of this page isn’t clean. "Everything seems important"
To address this issue, we conducted a brainstorming session to generate ideas for improving the layout.
Some of the ideas proposed were:
- Modifying the wording from "send" to "Send Tokens" to clarify its purpose.
- Enhancing the prominence of the NFT icon in the bottom bar to make it more noticeable.
- Using visual indicators, such as an account balance, to convey that the dashboard is specifically for managing tokens.
After a synthesis process, we have ultimately developed a new dashboard layout that looks like this.
"I'm a bit confused about what the 'any' chains refer to. Can you explain the difference between 'any' and 'auto'?"
"Why do I need to pay gas fees? I'm not sure why it's necessary."
"I'm not sure what the 'chain' and 'any chain summary' mean here. I feel uncertain about where to click, and I'm worried that I might accidentally lose money because of it."
To tackle this issue, our initial solution involved considering a change in phrasing, and we discuss this concern and solution with the writing. In collaboration with the UX Writing team, we worked on generating relatable examples to provide clearer explanations.
Furthermore, we proceeded to make definitive decisions regarding the definitions of 'auto' and 'any' chains. Subsequently, we redesigned the summary page within the sending flow.
After gaining a thorough understanding of the user needs, we proceeded to develop wireframes and a user flow for the process of adding external accounts to the Kadet wallet app.
One design challenge we encountered was seamlessly integrating the 'identifying imported wallet' icon into the compact interface. We explored various approaches to address this issue.
We created the design system based on former design and Material Design System.
The design system was applied to the mock ups.
