Contributions
Mobile Platform Design
Created wireframes by design system for three key mobile features in our blockchain wallet
Strategic Research Report
Delivered 6 monthly reports on Web3 design trends, offering insights on visual patterns and features
Usability Testing
Led over 10 in-house usability tests, transforming insights into strategic design enhancements
Accomplishment
of user engagement was raised to participate in our blockchain ecosystem
monthly active users was accumulated during my internship tenure
There are 2 challenges included in this project
Ready to explore the design journey?
Therefore, quickly differentiating transaction types and statuses is crucial to ensure security and management.
Monitor Suspicious Activity
Regularly reviewing transaction records can help users check unusual transactions, enabling them to take action to stop fraud or unexpected large withdrawal to secure their assets.
Optimize Transaction Fee
By tracking trade history, crypto users can identify patterns and develop strategies to minimize fees from different network activities , optimizing their spending and financial planning.
What makes users struggle to review their transaction history in our current blockchain wallet?
I invited 10 users to participate wallet usability test, five are professional crypto users, and five are blockchain newbies. For crypto heavily player, their transactions will be formed by different resources such as DeFi investment and DApp (Decentralized Application), and would like to know the resources. On the contrary, for the crypto novice, they will mostly focus on the status of a transfer activity, whether it is success or not.
Let’s take a look at the current transaction page design...
The summary of users’ feedback to our wallet transaction page.
Cluttered Transaction Details
The transaction details page is overloaded with unnecessary information like block numbers and nonces. The excess data and a disorganized layout, makes it difficult for users to find relevant details efficiently.
Confusing Transaction Identification
Icons on the transaction history page are too similar, with identical gray arrows for all transaction types. This makes it hard to quickly distinguish between incoming, outgoing, and smart contract transactions, leading to confusion and inefficiency.
Missing Date Segmentation
Transactions are listed chronologically but lack clear date markers, making it difficult for users to scan and search through their history. Adding date segmentation would improve readability and streamline the search process.
After the usability test, I found users are confused and had hard time recognizing information on the interface.
I started to solve the problem by defining the transaction logic and optimizing page.
Redefine the transaction icon and wording displaying rule.
Transaction Types - Use Icons to Differentiate Each Category
I found the icon at the front of the transaction list is not helpful for users to differentiate the transaction type at first glance, which it suppose to be a effective signifier. Therefore, I redefined the icon display logic and redesigned their appearance to make the transaction types could be identified more easier.
Transaction Status - Use Color-coded and Wording to Reflect Status
Our wallet currently cannot reflect whether the transaction status is completed, failed, or still processing. Instead, it just displays the transaction amount in the end no matter this trade is not successful sent out or received from the target address. This could be an issue because blockchain trades usually take time and have risk to be failed. Therefore, I defined the transaction status display logic and use different color with specific wordings to highlight the status that needed to be noticed by users.
The transaction list was optimized based on the established rules, and the overall interface layout was also refined.
After setting up the transaction type and status displaying rules, the history list page was refined to align with the icon and wording presenting logic. In the meanwhile, I also refined the overall transaction history interface from several aspects, including the detail page and the asset home page, which help enhance users’ satisfaction when looking up a transaction history in our wallet.
Simplified and Optimized Transaction List Display
*Note: The refined version went through the rebranding process, so the primary colors are changed
Before
Repetitive contract addresses
Lack of clear date segmentation
Ambiguous types and statuses
After
Clearer identification of address sources
Grouped transaction history by date segmentation
Enhanced icons and labels for status indicators
Let’s break down the details to see where were refined.
Improved the Transaction Details Page Layout
When users want to look deeper into a certain transaction, they can click on the transaction and see the detailed information. However, current detail page could not display the necessary details in organize; instead, it not only contained redundant information but also presented the important details in a mess, making it hard for users to catch the points. Therefore, there is a need to redesign the layout of this page.
Before
Information overloaded
Unnecessary long string
Clutter details layout
After
Collapsed redundant details and adjusted visual hierarchy
Truncated long address and simplified the information
Improve readability by cleaner layout and colored status
So why these points needed to be refined?
Growing Complexity of DeFi Portfolios
The emergence of numerous DeFi projects has led users to diversify their investments across multiple projects. They need a unified method to track all investments efficiently to prevent inefficiency.
Constant Fluctuation in Asset Values
The DeFi market operates 24/7 with rapid changes in APRs. Users need real-time project data to make informed decisions; otherwise, they risk low returns if they can't adjust investments promptly.
How can we help users better manage their DeFi assets by optimizing the wallet interface?
After thoroughly investigating current DeFi management platforms and other blockchain wallets, I decided to introduce a new column called “DeFi Asset” in our wallet tab. The goal is to encourage users to utilize our wallet for DeFi investments, thereby boosting engagement. To achieve this, several key requirements were identified for the new interface:
Real-time APR
Displaying real-time APR for each DeFi project helps users make timely investment adjustments, optimizing returns and keeping up with market trends.
Link to Project Page
Including external links to project pages enables users to quickly access detailed information and adjust investments easily, enhancing wallet navigation experience.
Token Converter
Showing asset values in both cryptocurrency and USD allows users to understand their assets better, providing a clear view of their portfolio’s value in different contexts.
How to put solution into practice? I started to craft the interface design through the following process...
Low-Fidelity Wireframe
I began by creating the information architecture for the “DeFi Asset” column, ensuring all crucial information was listed and identifying their hierarchy. I then drew a low-fidelity wireframe to visualize the structure and establish a basic layout concept.
High-Fidelity Wireframe
In this step, I confirmed the design’s details and functionality with our product team. Through several meetings, we finalized all interface content, such as DeFi protocol names and data representation. The interaction flow was also decided upon, and usability tests were conducted to ensure the overall logic and user experience were sound.
Interactive Prototype
The final step involved creating a polished interface with visual elements like color palettes and iconography. Using our design system, I made adjustments to achieve the best user experience. After this, the prototype was handed over to the engineering team for development.
