The Story
Projects
english
Blocto is a project led by former team members of the well-known crypto exchange Cobinhood. The team aims to simplify the onboarding process for blockchain applications and foster a thriving developer ecosystem.
Project Management
UI/UX Design
UX Writing
Graphic Design
2019/09 - 2021/03
CLIENT OVERVIEW
CLIENT
DATE
role
Blocto,
A novice-oriented
cryptocurrency
wallet
Blocto was founded by members of the former well-known cryptocurrency exchange Cobinhood. The team initially aimed to create a Blockchain application browser (dApp Browser) to simplify the blockchain onboarding experience for users. And collaborate with companies who looking to develop blockchain applications through Blocto SDK.
However, we found that due to the overly simplified design, users could not find the functions they needed in the MVP version. They did not even understand the original concept of Blocto as a “dApp Browser”, and were unwilling to continue using Blocto to use blockchain applications.
As a founding team member, my role extended beyond designing features; my role extended beyond designing features; I also took on the responsibility of product management. I assisted the team in redefining the product positioning and introducing product thinking. I needed to explain to the team which information might frustrate users and which designs might be overly simplified.
the challenge
1
Product Positioning
Most users perceive Blocto as a cryptocurrency wallet, and many reported difficulty finding the wallet entry point during their first use. Therefore, aligning the product design with market expectations is crucial.
2
Building Trust with Users
Many users are hesitant to use new cryptocurrency wallets due to concerns about asset misappropriation, which makes them reluctant to store significant assets in the wallet. For Blocto to profit from transaction fees, users must feel confident storing their assets within Blocto. Addressing this trust issue is crucial for the platform’s success.
3
Understand User Behaviors
We observed that most users frequently check their asset status when using dApps, as the majority of dApps are related to financial applications. However, the current structure does not support this user behavior effectively.
4
Improve Feature Navigation
In the MVP version, most users cannot intuitively find the functions they want in a single step.
Design Iterations
Version MVP
Initially, we spent two months building the product from scratch. To increase development efficiency, we modified and expanded the entire Browser mechanism based on Firefox.
Version 1.2
Enhance the landing page and add wallet entry.
Adjust dApp shortcuts and new add browse history. Put the Search feature into the Navigation Bar.
We collaborated with an idle mobile game called
Knight Story. The game required players to claim daily rewards on the blockchain, and Blocto gained new users by subsidizing the transaction fees for these claims. However, as Knight Story lost popularity, Blocto’s usage also gradually declined. The team realized that users were only using Blocto as a tool to claim daily rewards and were not interacting with other dApps through Blocto.
Version 1.5
I took inspiration from the changes in the App Store, they used articles to introduce Apps. Since our target users at that time were mainly blockchain novices, we believed this approach would help increase user interest.
dApp Shortcuts: Use the category to organize the dApp shortcuts. Make articles more stand out and accessible.
Article List: Refer to the design of Blinkist. Add Recommendation section and 7 Days Reading Quest.
Gamification Design
We incorporated gamification into our design by offering tasks within each article. Users who completed these tasks could earn cryptocurrency or Blocto points as rewards. However, this design did not generate significant usage data for the team, and we noticed that users often transferred their rewards out immediately after receiving them.
User Interviews
During this phase, we conducted multiple user interviews with various types of users, including tech enthusiasts, blockchain company founders, business developers, blockchain technology enthusiasts, and blockchain game players.
We discovered that:
Most users were confused about Blocto’s product positioning, and many were uncertain about the concept of a dApp browser
Many users still find it difficult to find the Wallet feature, even we already placed a balance dashboard to our landing page
Users want to introduce Blocto to their friends, but it took too much time to explain what Blocto is
The gamification design didn’t increase our user retention rate, but users love to learn blockchain knowledges on Blocto
Wallet and Transaction History
Optimization
Solution 1.
Define Key Features and
Use Tabs to Separate Functions
The team members finally realized that “users do not understand the concept of a dApp browser”, which led us to hold a meeting to discuss the future product positioning.
Our target users are still blockchain beginners, so the team agreed that Blocto’s product positioning should be “a blockchain portal providing various knowledge and recommended blockchain applications.”
We redefined the main features of the Blocto App based on past iterations. Since users generally perceive blockchain products as “wallets” and “exchanges,” we decided to enhance the asset management experience and allow users to switch to the wallet function anytime.
Tab Navigate Design
Initially, other team members resisted using tab navigation, believing it would make our product too similar to others. However, after the user interviews, everyone recognized the importance of usability. Therefore, we reorganized the UI hierarchy and design. The tab navigation design made Blocto more intuitive, allowing each feature to be properly presented.
Home Tab
At the Home Tab, users can access articles. We aim for users to perceive Blocto as a platform for continuous learning and exploring blockchain-related knowledge.
Discover Tab
We have created a separate Discover page for the dApps we want to introduce, where users can find a variety of the latest and featured dApps.
Wallet Tab
As users perceived Blocto as a crypto wallet, we want to enhance the assets management experience. Now users can directly find their assets with a tap.
Notification Tab
As users engage in more various transactions and activities on Blocto, a unified asset change overview can help them understand their asset status more promptly.
Solution 2
Built-in Foldable Browser
Through user studies and data analysis, it became apparent that users frequently monitor their asset status when using dApps, particularly those tied to financial operations. Hence, there's a necessity for a constantly available browser, rather than a WebView that gets closed after each use.
My design includes a foldable browser that enables users to effortlessly toggle between any Blocto page and this browser. Inspired by YouTube and Spotify’s Mini-Player, which offers the convenience of browsing additional content while enjoying music or viewing videos. This feature ideally suits our needs, providing users the ability to keep an eye on their assets while exploring other Blocto features.
This design helps the user seamlessly switch between the browser and their previous page.
Solution 3.
Unify Assets Management Experience
In the new design, all assets are displayed side by side instead of being categorized under specific blockchains, making the interface more intuitive. We've found that many blockchain novices are still learning about tokens and their symbols, and they typically hold less than five different crypto assets.
I took inspiration from third-party payment services and beginner-friendly cryptocurrency wallets like MyEtherWallet. These platforms use a card-style design instead of a list to present crypto assets. This approach is more in line with everyday experiences, making virtual assets feel similar to using credit cards or loyalty cards, which helps users perceive them as real assets.
Fungible Tokens
Previous Design
The previous user interface has a confusing mix of cryptocurrency transaction records and crypto assets. This causes challenges for users when they attempt to locate specific entries. Also, users are unable to find the NFT in this interface.
After Revamp
Users can see all assets and their total value (estimated in USD) on the page. To view non-fungible tokens, they simply need to swipe right to the Collectibles page.
After Revamp
A single page displays the transaction records of specific assets, and the control buttons at the bottom allow users to send or receive that type of cryptocurrency.
Non-Fungible Tokens
Collectible List
The management interface for non-fungible tokens (NFTs) is unified, making receiving, purchasing, and sending actions the same as for fungible tokens, which makes it user-friendly.
Display
Fully display the images of non-fungible tokens (NFTs).
In this version, users can find suitable marketplaces through the sell button.
Solution 4.
Allow Users to Customize Their Asset List
Most users only hold a few types of cryptocurrency assets. In this new design, the asset list will only display the assets that users already own, with the option to manually add additional ones. This design also reduces the cost of creating wallets (since Blocto is a smart contract wallet, there is a transaction fee each time a wallet is created).
Based on user research, this design also includes features that allow users to reorder and hide assets, providing a more personalized and efficient asset management experience.
The management experience for tokens and collectibles has been made intuitive, allowing users to easily customize their assets list with ease.
Micro-Interaction Design
Active Blockchain Indicator
Blocto is a wallet that supports multiple blockchains, and many dApps today also support multiple blockchains. Therefore, it's crucial to inform users about the active blockchain they are using. Users can switch the active blockchain by clicking on the blockchain icon at the front.
Address Bar shows the network information after the page is loaded,
and disappears after 2-3 seconds.
Real-Time Pending Transactions Counter
After users initiate a transaction on a dApp, they need feedback on the interface to remind them that the transaction has been sent, preventing duplicate transactions. This counter also informs users of the number of pending transactions.
Address Bar collapses and Transaction Counter appears during transactions. Counter updates on confirmation.
Expand Assets Details
This interaction design helps users understand that the information on the new page is directly related to the asset card they clicked on. It allows users to better comprehend the relationship between the asset card and the transaction history.
0x5CcD3728...dD97341686800b3
4.5603
ETH
≈ 12,599.92 USD
Ether
0x5CcD37284f20A44134....68680b3
≈ 12,599.92 USD
ETH
4.5603
Balance
RESULT
Adopted by Mainstream NFT Projects and Marketplaces
Blocto has become a staking representative for Flow tokens and has been adopted by many mainstream NFT projects such as VIV3, MotoGP, Versus, Rarible, and Axie Infinity. Users can easily connect their wallets to these NFT projects through the Blocto SDK and manage their assets within the Blocto App. This demonstrates that Blocto has gained the trust of both the market and its users.
1
Growth of Over 80,000 Unique New Users from November 2020 to March 2021
After the November 2020 update, we successfully met user needs and repositioned Blocto from a “dApp browser” to a “cryptocurrency wallet,”. Since mainstream NFT markets and projects adopted Blocto, we saw growth of over 80,000 unique new users, primarily from the US, Asia, and Russia, between November 2020 to March 2021.
2
Collectibles
Empty State
Transaction History
Empty State
Notification List
Empty State
Event completed
Successful State
Instruction for 2FA authentication
Illustrations
