Trinity.fi
Dual-reward Staking Protocol
My Role
Brand & Product Designer , I led the creative vision and design strategy, from crafting the brand identity to prototyping the interactive dApp and staking interfaces.
Team
1 Project & Marketing Lead
1 Fullstack Developer
1 Product & Brand Designer (Me)
Overview
Trinity is all about giving users options. By holding the Trin token, you can earn rewards in a mix of Matic, AVAX, and DOT, no staking required if you don’t want it, though staking is available to boost your returns. I was in charge of everything from the branding and web design to the reward selection dApp and even an NFT VR museum built in Unity.
LOGO AND BRANDING
Crafting Trinity’s Visual Identity
Choose a Pill 💊
Overview
I drew inspiration from the iconic Matrix choice – a nod to picking your own path. The visual identity for Trinity was all about flexibility and bold decision-making. I needed a look that not only reassured users with trustworthiness but also grabbed attention in the crowded DeFi space.
We blended futuristic elements with familiar visuals to create an identity that stands out.
The color palette was carefully curated to reflect choice, vibrancy, and a modern Web3 vibe.
Modular Approach
I took a modular approach with the logo design so it could adapt across different platforms, whether on the website, the staking pages, or even in marketing materials. The geometric shapes in the logo subtly shift based on user interactions, mirroring Trinity’s core value of flexibility.
Color Palette Development
The red and blue tones were a playful homage to the Matrix films, with a Polkadot pink-violet tone serving as a bridge between the two. This mix gave the logo a futuristic edge while keeping it rooted in DeFi culture.
WEB DESIGN
Clean, Minimalist, and Efficient
Key Components
Overview
The website was designed as Trinity’s welcoming gateway. I focused on blending our bold branding with an intuitive layout, ensuring that whether you’re on desktop or mobile, the experience is smooth and straightforward.
High contrast and clear readability were essential, especially for users on the go.
We prioritized fast load times and smooth performance, so the site feels snappy even on slower networks.
Simplicity and Trust
I built the design to be as uncluttered as possible, inspiring trust through simplicity. Bold headings and interactive elements like responsive wallet buttons help users feel secure and in control.
Performance
Knowing crypto users value speed, the site was optimized for quick load times and smooth navigation, ensuring a hassle-free experience even on mobile.
User Authentication
Thanks to Moralis, connecting your wallet (think MetaMask) is super simple and fast, keeping the login flow frictionless.
WEB3 DAPP
The Reward Selection dApp
A Dynamic Token Distribution Platform
Overview
This dApp is where the magic happens. Users can tailor how they split their rewards between two of the three tokens, Matic, AVAX, and DOT, making it a powerful yet straightforward tool that puts choice right in your hands.
Simplifying the choice to two tokens keeps the interface clean and easy to navigate.
Real-time feedback shows you instantly how your choices affect potential earnings.
Core Features
Dual Reward System: Users pick two tokens from the three available and decide on their distribution (for example, 40% Matic and 60% AVAX), with the dApp crunching the numbers based on live token prices.
Real-Time Adjustments: Using Moralis, the interface updates your potential returns as you adjust the sliders, making the experience interactive and transparent.
Design Challenges and Solutions
The biggest challenge was giving users flexible control without overwhelming them. Initially, we tried a dual-slider interface, but user tests showed that some folks preferred manual input. So, we kept both options, letting users either drag the sliders or enter exact numbers. Real-time updates were key here, so we leveraged WebSocket connections through Moralis to deliver instant feedback as users tweaked their reward distribution.
STAKING
The Staking Interface
Boosting Returns with Token Locking
Overview
Not everyone wants to stake, but for those who do, I created an interface that makes it easy to boost your returns by locking up your Trin tokens. Since staking means committing your funds, I focused on clear displays of APY and lock-in periods so you always know exactly what you’re getting into.
Live updates keep you in the loop on your staking data at all times.
Interactive elements encourage you to engage with the staking features and make informed decisions.
APY Visualization
The staking page clearly shows live APY figures based on current pool data, so you always know what to expect.
Staking Amount Selection
A smooth, user-friendly slider lets you choose exactly how many Trin tokens to stake, with a summary panel that updates your potential rewards in real time.
Information Clarity
All the crucial details, like lock duration and early withdrawal penalties, are easy to access. Handy tooltips and hover effects break down the finer points without cluttering the design.
Conclusion
Trinity is a prime example of how smart design and innovative tech can come together to create a user-first Web3 platform. From Matrix-inspired branding to a slick, intuitive reward dApp and a clear-cut staking interface, every element was crafted with the user in mind. The real-time integrations powered by Moralis ensured a smooth, responsive experience, while flexible design choices allowed us to cater to a diverse crypto audience.
Want to dive deeper? Check out the full project file here.