fxhash

fxhash is a Web3 generative art platform where users mint, collect, and trade digital artworks.

As the platform grew, feature expansion outpaced structural clarity. The experience became fragmented, visually inconsistent, and increasingly complex.

Challenge

•  Inconsistent UI patterns across pages
•  Feature-heavy beta creating cognitive overload
•  Complex wallet and transaction states
•  Limited system foundation for scale

Structural Redesign

Before visual changes, I focused on system structure. I mapped content hierarchy and feature relationships to clarify:

• Navigation logic
• Component grouping
• Information priority

This grounded decisions in structure rather than surface aesthetics. We then removed redundant pages and consolidated overlapping features — shifting the platform from feature-dense to focused.

Previous Sitmap

New Sitemap

Platform Evolution

Previous interface

•  Inconsistent typography and spacing
•  Multiple card variations without hierarchy
•  Visual clutter
•  Too many features added unnecessary complexity.

The interface had become fragmented and heavy.

Beta Version

The beta surfaced more functionality to improve usability. Instead, increased visibility amplified surface complexity. Testing showed that more features did not mean better clarity.

Current Version

The redesign shifted from feature exposure to structural focus.
‍
•  Consolidated overlapping functionality
•  Removed redundant pages and surfaces
•  Shifted non-essential logic into the background

The result: a cleaner, more intentional platform centered on art — with reduced cognitive friction and stronger user confidence.

The explore page was redesigned to reduce clutter and improve artwork discoverability

Card Design — Simplified metadata to focus on artwork name, artist, and price. Secondary details, such as edition numbers, were moved to the product page to keep browsing clean and focused.

Filters — Removed low-usage filters based on research. Retained only essential filters (chain, type).

Infinite Scrolling — Replaced pagination with infinite scrolling to support fluid browsing.
‍
The updated layout emphasizes art and clarity over feature density.

The previous footer contained excessive spacing and secondary links that disrupted flow and consumed unnecessary screen space.

Compact Navigation Bar — Replaced the large footer with a small, sticky bottom navigation bar. This keeps essential actions accessible without overwhelming the interface.
‍
Quick Access — The sticky bar allows users to quickly access resource pages and switch between light and dark mode. By centralizing utility functions in one compact area, the design reduces clutter while maintaining accessibility.
‍
The result is a cleaner layout that prioritizes artwork while keeping secondary actions within easy reach.

The project page was restructured to balance artwork and information more effectively.

The project page was restructured to balance artwork and information more effectively.
‍
Side-by-Side Layout — Placed the artwork next to key details to reduce scrolling and improve hierarchy.
‍
Reduced Visual Noise — Removed redundant elements during high-attention moments (minting, bidding).
‍
The updated layout feels clearer, more intentional, and easier to navigate.

Minting flow: designing for system states

Minting is a multi-step, asynchronous process involving wallet connection, transaction approval, and blockchain confirmation. The original flow lacked clarity around transaction states, creating uncertainty during high-stakes interactions.
‍
I mapped the full transaction lifecycle and designed explicit system states — from wallet connection to pending, confirmed, failed, and rejected outcomes. Each state was supported with clear feedback and defined interaction logic.
‍
By treating minting as a state-driven system rather than a single action, the experience became more predictable, transparent, and confidence-building.

Built a modular design system from scratch.

What I did:

•  Established visual foundations (type, spacing, color tokens)
•  Built modular components with defined states
•  Implemented token-based structure
•  Supported light and dark modes

Dark mode:

Key takeaways

Some of the decisions made during the redesign were informed by direct community feedback and personal observation of how users interacted with the platform. While the changes addressed clear friction points, continued research and testing are essential to further validate and refine the experience.
‍
Designing within Web3 presents unique challenges. Wallet behaviors, blockchain constraints, and evolving user expectations all influence interaction patterns. While the redesigned system improves clarity and confidence, the space itself is still maturing. Ongoing iteration and community engagement remain crucial as both the technology and user behavior continue to evolve.