Web3 dApp UX Research and UI Solutions
Hector Network faced UX challenges; I revamped staking, developed Hector MultiPay and Tax Report, enhancing utility and conversion rates.
Headquarters
British Virgin Island, UK
Industry
Blockchain, Web3, Fintech
Company size
11 — 50 employees
Funding
$101M
Services provided
— UX Research
— Product Design
— Business Analysis
The client
Hector Network is an expansive decentralized ecosystem run by a utility token, HEC, and complemented by the TOR stablecoin. The company is committed to developing the future of web3 by pioneering decentralized offerings ranging from Tokenomics to Defi Gaming. Hector Network believes that crosschain expansion, lowering the barrier to entry and providing trusted sources for information are key in mass adoption of this technology.
The challenge
Staking Feature Usability:
Users experienced difficulty navigating and using the staking feature due to an outdated user interface (UI) and convoluted user flows.
High abandonment rates during staking processes.
Product Ecosystem Awareness:
Limited user awareness and adoption of other Hector Network products.
No integration between various products within the ecosystem, leading to fragmented user experiences.
Gas Fee Management:
Users often abandoned transactions midway due to insufficient gas fees, impacting transaction completion rates and overall user satisfaction.
Transaction Visibility:
Lack of a clear and interactive transaction history feature reduced user confidence in using the platform.
To achieve their ambitious goals, CLLE needs a design partner who understands the nuances of fintech and can create a user experience that is both intuitive and visually appealing. A cohesive brand identity across all marketing materials will further strengthen CLLE's market presence and attract their target audience.
The solution
1. Redesigning the Staking Feature
The staking feature was reimagined with a user-first approach:
Conducted extensive user research to understand pain points and behavior.
Simplified the staking process with clearer user flows and step-by-step guidance.
Enhanced UI aesthetics to align with modern DeFi platform standards, ensuring accessibility across all devices.
Introduced interactive visualizations for staked assets and rewards, providing users with real-time insights.
2. Building a Cohesive Product Ecosystem
To address the lack of integration between Hector Network products, I:
Developed Hector MultiPay: A feature allowing users to send payments to multiple destination wallets in a single transaction.
Created Hector Tax Report: A tool enabling users to generate detailed wallet audit reports and export tax summaries for compliance.
Incorporated contextual advertising banners across the dApp to promote these products. For example:
Users viewing transaction histories were prompted with banners for the Tax Report tool.
Swap and bridging interfaces highlighted the MultiPay feature for users seeking advanced payment solutions.
3. Tackling Gas Fee Challenges
Recognizing transaction abandonment due to insufficient gas fees, I introduced:
In-App Gas Conversion: Users could convert a portion of their transaction token (e.g., USDT) to cover gas fees without leaving the platform.
Third-Party Integration: Partnered with MoonPay and Banksa to enable users to purchase gas using credit cards directly within the dApp.
4. Enhancing Transaction History
To build user trust and provide greater transparency:
Designed a seven-day transaction history view directly accessible from the swap and staking interfaces.
Linked transaction history to the Tax Report tool for a seamless data export experience.
The Result
1. Improved Conversion Rates
The redesigned staking feature led to a 65% increase in staking completion rates, attributed to simplified workflows and enhanced visual cues.
2. Increased Ecosystem Engagement
Integration of banners and cross-promotional strategies significantly boosted product adoption:
MultiPay usage increased by 40%.
Tax Report downloads grew by 30% within the first month of implementation.
3. Higher Transaction Completion Rates
In-app gas solutions reduced transaction abandonment rates by 25%, with MoonPay and Banksa preferred by 70% of users over token conversion.
4. Positive User Feedback
Users praised Hector Network for evolving into a comprehensive DeFi ecosystem, emphasizing the utility and usability of its products.
The "networked" approach to promoting features within the dApp resonated with users, making it easier for them to discover and utilize additional tools.
Start a project →