fxhash

fxhash operates within the Web3 generative art space, where users interact with wallets, mint assets, and navigate blockchain-based transactions.

The platform had grown rapidly, but visual inconsistency and structural complexity began to impact usability and scalability.

Challenge

•  Inconsistent UI patterns across pages
•  Rapid feature expansion without a system foundation
•  Fragmented layout hierarchy
•  Need for faster release cycles

Approach

I restructured the platform around scalable components and system-level thinking.

→ Redefined layout hierarchy
→ Built a modular design system
→ Designed clear transaction state handling
→ Collaborated closely with engineers for iterative shipping
→ Maintained direct conversations with artists and collectors through Discord to validate pain points and gather ongoing feedback.

Whiteboard

Defined hierarchy, component structure, and navigation logic to ground decisions in structure, not visuals.

Planning the Site Structure

Before redesigning the visuals, I addressed structural clarity. I simplified navigation, refined the information hierarchy, and reduced repetition within the sitemap to support future scalability — as reflected in the before and after below.

New

Before and After

The previous interface had:

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

Version 1

Version 2

Before arriving at the final design, we explored a beta version that attempted to surface too many features at once. In trying to improve the experience, we prioritized visibility over clarity.
‍
After testing with users, it became clear that not all features needed to be exposed. Some could be simplified, consolidated, or handled in the background without requiring user attention.
‍
We streamlined the structure by removing unnecessary pages and reducing feature clutter, shifting the focus back to what truly mattered. The result was a more minimal, intuitive experience centered on art and artists.

Key learning:

•  Feature visibility should not come at the cost of clarity.
•  Removing or consolidating functionality can improve usability.
•  Simplicity supports trust in complex systems.

The redesign introduced:

•  Standardized reusable components
•  Clear visual hierarchy
•  Removal of redundant and low-impact features
•  Prioritized art and artists, reducing financial clutter and simplifying the experience

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 and interviews, retaining only essential options such as chain and type.

Infinite Scrolling — Replaced pagination with infinite scrolling to create a more seamless browsing experience. This allows users to continuously explore artworks without interruption, making discovery feel fluid and natural.
‍
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 — Simplified supporting elements to keep attention on the art during critical interaction moments.
‍
The updated layout feels clearer, more intentional, and easier to navigate.

Built a modular design system from scratch.

What I did:

•  Built and maintained a modular design system in Figma.
•  Standardized visual foundations through tokens and scalable components.
•  Enabled light and dark mode while supporting rapid feature expansion.

Dark mode:

The redesign introduced:

•  Unified typography and spacing scale
•  Standardized reusable components
•  Clear visual hierarchy
•  Scalable layout system

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.