Hellcat NFT
Gamified Web3 Engagement
Desktop | Year 2024
My Role UX & UI design
Overview
Heallcat NFT is a gamified Web3 experience designed to immerse users into the dark, playful, and mischievous world of Hellcats. Through interactive NFT engagement mechanics, the platform encourages users not only to collect, but also to interact, evolve, and connect with their assets in a deeper way.
Built on Polygon, the system is optimized for scalability and low gas fees, making it accessible and fast.
The platform introduces an ecosystem where NFTs are not just digital assets—but game characters with personality, purpose, and impact.
My Role
One of my colleagues was working as part of the design team on this project. Since there was a lot of work involved, I accepted the offer to join and gain experience in the NFT world.
My role included UX, UI, visual design, and maintaining component consistency.
I worked closely with the co-founder from concept to execution, shaping the user journey, game logic, and token interaction flows.
From wireframes to high-fidelity components and animations, every element was crafted with the goal of making blockchain feel fun, engaging, and user-friendly.
The Problem
Most NFT platforms focus only on minting and trading, failing to foster long-term engagement or storytelling.
Many users buy NFTs but never return—resulting in short-lived interaction and community drop-off.
Hellcat aimed to solve this by adding meaning and movement to NFTs—giving users reasons to come back daily and explore.
The Solution
The Hellcat NFT experience was designed mobile-first to ensure accessibility, speed, and engagement across all devices—especially for Web3-native users who interact via mobile wallets and social platforms.
Immersive scroll-based narrative introduces users to the Hellcat universe step-by-step with animated transitions and bold typography, creating a sense of story and progression.
Character Cards are displayed as rounded modules, representing each Hellcat NFT with custom visuals and rarities.
Game onboarding is streamlined into a single interactive scroll with embedded calls to action, making it easy to understand, claim, and participate—even for NFT newcomers.
Floating action bar provides quick access to the user’s wallet, inventory, and actions—anchoring the experience without interrupting it.
Microinteractions and loading effects enhance the gaming feel, making every tap feel like part of a live game.
Desktop experience
The desktop layout expands the interface to offer deeper exploration and community involvement while maintaining visual drama and clarity.
Split-screen layouts balance story content with visual elements, enabling storytelling and NFT preview side-by-side.
Hover effects animate cards and tokens to increase discoverability and make the interface feel dynamic and alive.
Mini-map dashboard provides an overview of Hellcat activity—claimed characters, progress in missions, and community stats—offering a sense of collective movement.
Scroll-synced transitions allow narrative-driven UX, where visual elements evolve as the user moves through the experience.
Navigation bar includes anchored sections for story, characters, missions, and minting—providing clarity in a world full of movement.
Responsive scaling ensures that no content feels stretched or crowded, keeping the hierarchy sharp across breakpoints.
Branded animations and iconography create a memorable experience that ties into the Hellcat theme, reinforcing the identity in every scroll and click.
Smart Rarity Insights for Strategic Collecting
This tooltip gives users instant insight into their NFT’s rarity score, detailed traits, and rank—helping them understand its value at a glance. It encourages strategic decision-making by showing which traits are common and which are rare, motivating users to refresh or upgrade their collection in pursuit of higher-ranked NFTs. This enhances engagement, adds replayability, and turns ownership into an interactive experience.
Clear Selection Design
I designed the selected state with a green checkmark and soft shadow to clearly show the user which NFT is active. It gives quick feedback and keeps the interface clean and easy to navigate.
Reveal Experience & 3D Carousel Animation
This screen is part of the NFT reveal flow, where users discover which Hellcat they received after swapping one into the pool.
To enhance the experience, I designed a 3D-style animated carousel that scrolls through the entire pool of available NFTs, simulating a dynamic spin. The animation gives the feeling of a randomized, high-stakes selection, building anticipation before landing on the final NFT.
Once the spin stops, the chosen NFT is permanently added to the user’s collection—replacing the one they sacrificed to the swap pool.
This moment is a key emotional point in the product:
It delivers a “loot-box” style thrill
Highlights the uniqueness and rarity of each NFT
Reinforces the feeling of exchange and upgrade, not just loss
The visual focus, smooth carousel transition, and strong “Spin now” CTA were all crafted to make this a satisfying and gamified UX moment.
Final Reveal & Social Sharing
After the carousel animation stops, the chosen NFT is highlighted at the center with its details and rank clearly displayed. At this stage, the user is given the option to share their new Hellcat on social media, boosting community exposure and project visibility. The interaction is designed to feel rewarding and celebratory, while simultaneously adding the NFT directly to the user’s wallet, making the reveal both engaging and meaningful.
