DeFiner Labs
Optimizing Web3 and DeFi usability through design systems, app/website feature redesigns, and engaging NFT profiles for increased user engagement and cohesiveness.
My Role
UX/UI Designer
Team
3 Designers
1 Product Manager
2 Developers
Timeline
May 23' - Aug 23'
Tools
Figma
Adobe Illustrator
Adobe Photoshop
Gather.com
Skills
Project 1: Idea Generation, Journey Mapping, User Flows, UI and Visual Design;
Project 2: Design System, Cross-functional Collaboration
My contribution and Impact
Project 1: TypeIt (Web3 website and app)
I led the redesign of TypeIt's Web3 website and mobile app, where I focused on improving usability by streamlining the wallet-linking process, and creating the customer invitation dashboard, resulting in significant increases in user engagement and successful trade executions.
Check Project 1
Project 2: ZooEx (Design System)
Additionally, I contributed to creating a comprehensive design system and documentation for ZooEx, standardizing UI components to enhance consistency and reduce development time.
Check Project 2
Project 01 : TypeIt (Web3 website and app)
Background
What is TypeIt?
TypeIt is a Web3 product that allows users to earn cryptocurrency by typing on their mobile devices using an integrated keyboard. It also features NFTs, which can enhance earning potential, and includes functionalities like NFT trading and a marketplace.
Problem Space
When I joined the TypeIt project, the team had already conducted usability testing and stakeholder interviews on the existing product. To make sense of the findings, I categorized the outcomes into three main areas, allowing us to focus on key improvements and align our efforts with user and stakeholder needs.
Unclear
Wallet-linking steps
Users had to navigate through several screens to link their digital wallets, with unclear instructions regarding security permissions and transaction approvals.
Absence of
Invitation Tracking
Users lacked a clear interface to track their incentivized invitations after linking their wallets, leading to confusion and reduced engagement.
Redesigning of the website and mobile app led to
20%
Boost in successful trade executions.
28%
Reduction in time spent navigating trading elements.
43%
Increase in user satisfaction score.
The approach
Refining User Persona
Before beginning the redesign, I conducted a comprehensive review of the work done before. This provided key insights into the primary users’ motivations, pain points, and behavioral patterns.
Customer Journey Map
I used the customer journey map to identify key pain points, such as the complex wallet-linking process and difficult navigation. This guided our design improvements, ensuring a more intuitive and engaging user experience on the TypeIt platform.
Opportunity Areas
From refining the Personas and the user journey map, I created 3 opportunity areas that would help improve the overall user experience.
Simplify Wallet-Linking
Simplify the wallet-linking experience by reducing the number of steps and providing clear, transparent instructions, minimizing user frustration.
Enhance
Content Clarity
Reorganize content for better accessibility and comprehension, lowering cognitive load and enhancing user satisfaction.
Integration of
Invitation Dashboard
Designed the invitation dashboard to align with user workflows, making it more intuitive and effective, thereby improving usability and engagement.
Solution
Reducing steps to simplify Wallet-Linking
The integration of simplified wallet linking with instant invitation generation streamlines the user journey, reducing interaction costs and maintaining task continuity. This context-aware design promotes seamless engagement, enhancing user satisfaction and increasing conversion rates.
Before
After
01
Connecting wallet using WalletConnect
I simplified wallet linking on TypeIt by integrating WalletConnect, allowing users to connect their wallets through a quick QR code scan. This streamlined the process, eliminated manual steps, and enhanced both security and user experience.
02
One-Click Generate Invitation Link
I simplified the process by auto-filling the wallet address after connecting via WalletConnect, added a clear CTA for generating the invite link, and enabled easy one-click copying and sharing of the link. This helped in enhancing usability and streamlined the referral process.
Product comparison to enhance Content Clarity
I improved content clarity on the product comparison page by simplifying token comparison with clear, concise visuals, enabling users to make quick decisions. The optimized performance and streamlined content further enhance user understanding and engagement.
Designing the Invitation Dashboard
I designed the invitation leaderboard dashboard with a clear information hierarchy and an interactive toggle between "Commission" and "Computing Power Bonus." This intuitive layout enhances usability, allowing users to easily track performance and rewards, boosting transparency and engagement while optimizing the overall user experience.
Project 02 : ZooEX (Design System)
Project Overview
ZooEx is at the forefront of the decentralized finance (DeFi) sector, offering affordable multi-chain index and leveraged tokens. This platform enables users to engage in decentralized trading and investment across various blockchain networks seamlessly.
Problem Space
ZooEx was initially known as HODLer, and upon joining the team, they were already in the process of redesigning the product to align with the new brand name and identity, ZooEx.
During redesign projects, the team had to create new components libraries, and style guides from scratch, leading to a lack of design consistency when multiple people collaborated on the same file.
The design system is still a work in progress. At the time of my involvement, the components did have a set color, grid, typography and shadow palette, providing a base to establish consistency.
Design and Implementation
Our Approach
My team initiated the process by researching and acquiring a foundational understanding of design systems, referring to established systems from companies like Apple and Google.
Following that, we created a style guide for the new system, incorporating elements such as brand logos, grid systems, spacing scales, typography scales, color systems, and the redesigned modal layouts.
Consistency
Unified UI components across the platform, ensuring a cohesive experience from trading interfaces to the JackPot system.
Scalability
Designed the system to support future enhancements without disrupting the existing user experience.
Cross-Platform Modularity
Implemented a modular, cross-platform design approach, enabling easy integration of new features across web and mobile while maintaining a seamless interface.
Components
Experience Overview
Constraints
Adapting to Remote Dynamics
In remote collaboration, language barriers and time zone differences posed significant hurdles. Communication mainly in Mandarin and a product manager in a different time zone led to delayed discussions and feedback. To overcome this, platforms like Slack, Asana, and Gather were used by the teams to ensure consistent updates and bridge the communication gap.
Direct Design Engagement
I directly participated in the design process, deviating from the usual school project sequence where research precedes design. This shift prioritized design decisions without the traditional research-first approach, providing valuable insights and hands-on experience in real-time design scenarios.
Learnings
Handling Multiple projects
Given the small team size, it allowed me to wear multiple hats and operate in a fast-paced environment. My team had to iterate on designs, and make quick decisions, and this experience helped enhance my adaptability and agility.
Getting Approvals is tough
Working alongside multiple designers, I learned the importance of selling and defending ideas, not just in design but also in overall process decisions. It made me ask questions like: How can I show the value of my designs? Can I convince my project manager that these choices add value?
Thanks for visiting my portfolio!
I'm open to new opportunities and would love to hear from you.