Problem
Metapier aimed to enhance the user experience for its decentralized finance (DeFi) platform. The current challenge was to redesign intuitive and user-friendly interfaces for complex financial operations such as swapping tokens, pooling assets, and launching new projects. Additionally, the project required a comprehensive rebranding to align with the evolving market and user expectations.
My role
Independently directing UX design initiatives, developing key product pages, and redefining the brand.
Solution
The solution involved creating polished, user-friendly, and fully responsive interfaces for the Swap, Pool, and Launchpad pages. Despite the Launchpad page not being included in the final website due to limited investment, the rebranding efforts elevated the design system and increased the click-through rate (CTR). The project also focused on evaluating user feedback and iterating on the designs to enhance usability and visual appeal.
Scope
Roughly 1-year project with Metapier, involving collaboration with product managers, business partners, and engineers to define product requirements and roadmap. The project included user feedback evaluation and continuous design iteration to improve the user experience.
Background
With the emergence of Web 3.0, the digital landscape is undergoing a transformative shift towards decentralization. This new era of the internet promises greater user control, enhanced security, and innovative financial opportunities.
The Challenge
DeFi introduces a fresh and complex field where traditional banking processes are reimagined through blockchain technology. Unlike the straightforward transactions of online banking, DeFi involves intricate mechanisms such as smart contracts, liquidity pools, and token swaps.
These complexities can be daunting for users who are new to the space, creating a barrier to entry and limiting the widespread adoption of DeFi solutions.
Research
At Metapier, our journey began with a comprehensive secondary research phase. We delved into the world of decentralized finance (DeFi), exploring various protocols and platforms to understand the landscape better. Our research included studying successful DeFi projects, analyzing their user interfaces, and identifying key features that contributed to their success. We also examined the challenges faced by these projects, such as security vulnerabilities and user adoption hurdles.
One of the critical insights from our research was the importance of user trust and security in the DeFi space. We found that users were often hesitant to engage with DeFi platforms due to concerns about the safety of their funds and the complexity of the interfaces. This insight guided our design philosophy, emphasizing simplicity, transparency, and robust security measures..
Interview
We managed to send out 100 online questionnaires and received 68 responses, a testament to the interest in our project.
“The biggest challenge for me is understanding how this page work, where is my money goes”
90% of participants expressed worries about the complexity of interacting with DeFi protocols. These findings were crucial in shaping our design approach. We realized that Metapier needed to address these pain points by creating a simple and secure platform. This led us to focus on intuitive design elements and implement stringent security protocols to build user trust.
Reframe design question
Current Concerns by users
How might we design a secure and user-friendly DeFi platform that instills trust and simplifies the user experience with sufficient information?
Ideation (For Swap Page)
Our team brainstormed ways to streamline the user interface. This included reducing the number of steps required to complete a swap, using clear and concise language, and incorporating intuitive design element
Display the calculated amount in US dollars at the start of the transaction to ensure users are aware of their spending, which will enhance their sense of security.
1
Although placing all features on the same card could shorten the route, it might confuse new users who prefer to complete one task at a time.
2
Concept validation
Why We Use Guerilla User Testing
As a startup with limited resources, we needed a quick and cost-effective way to gather user feedback on our platform. By testing with real users in informal settings, we could quickly validate our design assumptions and identify any major usability issues.
“ I wonder can i figure this our at first glance?”
“ yes, this is more secure if I see how much exactly I spent, but sometimes, I feel it always shows too much information, which one is the one I’m looking for?”
Guerilla user testing
Final Prototype
We collected and analyzed feedback from our guerilla user testing sessions. The main issues identified were not only the the issue we define before, but also the hierarchy of information and how information display.
Reconsidering the UI:
During testing, it was found that Lexend Deca, while great for headings and logos, did not perform as well for large text blocks. Users found the interface less clear when large amounts of information were displayed using Lexend Deca.
Switching to Roboto helps improve the overall readability and clarity of the platform. Roboto’s more neutral and straightforward design makes it easier for users to process information quickly, reducing cognitive load and enhancing the user experience.
Previousl: Lexend Deca
Now: Roboto
At Swap feature, we aim to create it be exceptionally user-friendly for new users. It eliminates distracting information, providing a clear and straightforward route for completing transactions. Each page focuses on a single task, ensuring that users can easily follow the process without feeling overwhelmed. Additionally, we have incorporated clear call-to-action buttons to guide users through each step, making the experience seamless and intuitive.
Want to start Trading in Defi?
View our project
How to use Swap?
(testnet demo)
Access the Pier Wharf (aka Swap) page.
Click on the 'Connect Wallet' button in the top right corner to give Metapier permission to access your wallet.
Select the token you own that you wish to sell, in the top box, in exchange for the token you wish to receive, in the bottom box (e.g. $FLOW & $tUSDT).
This transition keeps users informed of their status at each step, enhancing their sense of security, especially during large transactions.
