Refinable

Empowering Creators with Custom NFT Storefronts

Year

Nov 2021 – Dec 2022

Role

Product Designer

Tools

Figma

Adobe Photoshop

Adobe Illustrator

Industry

Web3 / NFT Marketplace

Company Context

Refinable is a Web3 platform built on Binance Smart Chain that enables users to mint, trade, and discover NFTs. Positioned as a creator-focused marketplace, the platform aims to lower the barrier to entry for NFT creation while supporting a growing ecosystem of digital artists and projects.

As the NFT space evolved, Refinable expanded beyond basic marketplace functionality to explore tools that give creators more control over how their work is managed, presented, and experienced by collectors.

My Role & Responsibilities

As the Product Designer, I led the end-to-end design of the storefront experience, covering both the creator dashboard and the public-facing storefront. The focus was on translating product requirements into a structured system that balances customization for creators with clarity for collectors.

Key responsibilities:

Defined user flows for storefront creation, configuration, and browsing
Designed wireframes, high-fidelity UI, and interactive prototypes
Established the structure and layout system for storefront pages
Collaborated closely with product managers and engineers on feature scope and feasibility
Iterated on designs through feedback, testing, and ongoing product discussions
Contributed to maintaining consistency with existing platform patterns and components

Project Overview

Most NFT marketplaces are designed for transactions, with collections displayed in standardized layouts that offer limited room for creators to express their identity. This made it difficult for projects to stand out or communicate their story beyond individual NFT listings.

Refinable Storefront was introduced to address this gap by allowing creators to build branded, no-code storefronts for their projects. The feature enables creators to organize collections, present project context, and guide collectors through their work, while still supporting a clear browsing and purchasing experience.

The Problem

NFT marketplaces made it easy to mint and trade assets, but they offered limited support for how creators present and manage their projects. As a result, creators struggled to build identity and guide collectors through their work beyond individual listings.

Lack of Project Identity

Marketplace listings followed standardized layouts, making most projects look visually similar. Creators had limited ways to communicate their story, structure collections, or highlight key content, which reduced differentiation and made it harder to build recognition and community.

Customization vs Usability Tradeoff

Creators wanted control over how their storefront looked and behaved, but most were non-technical. Providing too much flexibility risked introducing complex tools and inconsistent layouts, while too little would limit their ability to express their project effectively.

Inconsistent Collector Experience

While storefronts needed to feel unique, they also had to remain predictable. Without a shared structure, navigation and browsing could become confusing, making it harder for collectors to understand projects, explore collections, and evaluate NFTs.

Dual User Complexity

The product needed to support two distinct users: creators configuring storefronts through a dashboard, and collectors browsing and purchasing NFTs through the public storefront. Each group had different goals, requiring two connected but carefully balanced experiences.

Design Goals

To address the challenges around customization, usability, and dual user needs, the design focused on creating a structured system that balances creator control with a clear and consistent experience for collectors.

Enable Structured Customization for Creators

Allow creators to personalize their storefront while avoiding the complexity of full design tools. The goal was to provide controlled flexibility through predefined sections and settings, so creators could shape their page without needing design or technical expertise.

Maintain a Consistent Browsing Experience

Ensure all storefronts follow a predictable structure so collectors can navigate different projects without confusion. This supports quick understanding of a project, easier exploration of collections, and smoother evaluation of NFTs.

Support Both Creator and Collector Workflows

Design a system that connects storefront configuration and public browsing without introducing friction between the two. Creators should be able to build and manage their storefront easily, while collectors experience a clear and intuitive interface once it is published.

Build a Scalable Storefront System

Create a modular structure that can support different types of content and future feature expansion. The system needed to remain flexible enough for growth while maintaining clarity and consistency across all storefronts.

Design Process

The design process focused on understanding how NFT creators present their projects and how collectors explore and evaluate NFTs. The goal was to translate these behaviors into a structured system that supports both customization and clarity without introducing unnecessary complexity.

Discovery & Product Alignment

I worked closely with the product manager and engineering team to align on the scope and direction of the storefront feature. Early discussions helped define key constraints, including the need to support non-technical creators while maintaining consistency across storefronts.

Understanding Creator and Collector Behavior

Insights from creator interviews and ecosystem research showed that many projects relied on external websites to tell their story, while marketplace listings focused only on individual NFTs. This gap highlighted the need for a centralized space where creators could present their project more holistically.

Mapping the collector journey further clarified key moments the storefront needed to support, particularly discovery, exploration, and evaluation. This helped prioritize what information and structure should be surfaced on the storefront.

Defining Storefront Structure

The dashboard was designed to make storefront creation approachable for non-technical users. Rather than exposing complex design controls, the interface focused on simple configuration through structured settings and guided inputs.

This reduced the cognitive load for creators and made it easier to build and update storefronts without requiring design or development knowledge.

Designing the Public Storefront Experience

The public storefront was designed to support how collectors discover and evaluate NFT projects. The layout prioritizes clear hierarchy, allowing users to quickly understand the project, browse collections, and explore NFTs.

While allowing visual customization, the structure remains consistent across storefronts to ensure predictable navigation and reduce friction when moving between different projects.

Solution

The final solution introduced a storefront system that separates how creators build their pages from how collectors experience them. The design focuses on structured customization, allowing creators to control presentation while maintaining a consistent and predictable browsing experience.

Project Introduction & Navigation

Supporting Discovery and Exploration

The hero section and collection navigation work together to help collectors quickly understand a project and explore its content.

Problem

Collectors lacked context when landing on a project and struggled to navigate across multiple collections efficiently.

Design Decision

Surface key project information at the top of the page, including identity, description, and featured content, while introducing clear navigation between collections and activity. This creates a structured entry point that supports both understanding and exploration.

Result

Faster understanding of project context
Simplified navigation across collections
Improved engagement with project content

NFT List & Filters

Managing Large Collections

Filtering tools that allow collectors to refine and explore NFTs based on attributes.

Problem

Large NFT collections were difficult to browse, requiring users to manually scan through assets.

Design Decision

Provide filtering and sorting controls to help users narrow down results based on relevant attributes. This supports faster discovery without overwhelming users.

Result

Reduced time to find relevant NFTs
Improved usability for large collections
More efficient exploration and comparison

About Section

Supporting Project Context

A dedicated space for project description, roadmap, and team information.

Problem

Collectors often relied on external sources to understand the credibility and intent of a project.

Design Decision

Centralize key project information within the storefront, separating descriptive content from transactional browsing. This allows users to evaluate the project without leaving the platform.

Result

Increased transparency and trust
Reduced reliance on external links
Better-informed purchase decisions

Project Context & Trust

Supporting Informed Decisions

A dedicated space for project information, FAQs, and external links that help collectors evaluate credibility and engage with the project.

Problem

Collectors often relied on external sources to understand the intent, legitimacy, and community behind a project. Key information such as roadmap, team, and FAQs was fragmented across different platforms.

Design Decision

Centralize project context within the storefront by combining descriptive content (project overview, roadmap, team) with FAQs and social links. This allows collectors to access both informational and community-related content without leaving the platform.

Result

Increased transparency and trust in projects
Reduced need to navigate external sources
Improved confidence during evaluation and purchase

Storefront Structure

Guided Content Layout

A modular layout that organizes storefronts into predefined sections such as hero, collections, and project information.

Problem

Creators needed flexibility to present their projects, but fully customizable layouts would lead to inconsistent and difficult-to-navigate pages.

Design Decision

Instead of a free-form builder, the storefront uses predefined sections that creators can configure and reorder. This ensures each storefront can feel unique while preserving a consistent structure across the platform.

Result

Reduced complexity for creators building storefronts
Maintained predictable navigation for collectors
Enabled scalability across different project types

Creator Dashboard

Simplified Storefront Configuration

A configuration interface that allows creators to manage content, layout, and branding.

Problem

Creators needed control over their storefront but lacked the expertise to use complex design tools.

Design Decision

Replace free-form editing with structured settings for each section, allowing creators to configure content through guided inputs rather than manual layout design.

Result

Lower barrier to creating storefronts
Faster setup and iteration
Consistent output across different creators

Theme & Settings

Controlled Customization

Settings that allow creators to adjust visual style, navigation links, and storefront details.

Problem

Creators wanted branding control, but unrestricted customization could break consistency across the platform.

Design Decision

Limit customization to key visual and content elements such as themes, colors, and links. This provides flexibility while preserving a cohesive system.

Result

Balanced customization with consistency
Prevented inconsistent layouts
Maintained platform-wide visual coherence

Navigation Links

Connecting External Ecosystems

Allows creators to add external links to community platforms, websites, and social channels.

Problem

Project information and community engagement often lived outside the marketplace, forcing collectors to search across multiple platforms.

Design Decision

Provide a dedicated space for external links within the storefront navigation, making it easy for creators to connect users to relevant resources without disrupting the browsing flow.

Result

Reduced friction in accessing external resources
Strengthened connection between storefront and community channels
Improved overall project discoverability

Hero Configuration

Flexible First Impression

Controls how the hero section presents project identity and featured content.

Problem

Creators needed flexibility in how they introduce their project, but unrestricted control could lead to inconsistent or unclear layouts.

Design Decision

Offer predefined hero layout options with configurable content such as visuals, descriptions, and featured elements. This maintains structure while allowing variation in presentation.

Result

Enabled flexible project presentation without breaking layout consistency
Maintained a clear and structured entry point for collectors
Reduced complexity in configuring key visual elements

Project Details Settings

Roadmap & Team

Allows creators to manage roadmap and team information within the storefront.

Problem

Collectors needed transparency into a project’s direction and the people behind it, but this information was often scattered or missing.

Design Decision

Integrate structured inputs for roadmap and team details within the storefront configuration, ensuring this information is consistently presented across projects.

Result

Improved transparency and project credibility
Standardized how supporting information is displayed
Reduced reliance on external sources for validation

FAQ Settings

Addressing Common Concerns

Enables creators to define frequently asked questions directly within their storefront.

Problem

Collectors often had recurring questions about projects, which required them to search externally or rely on community channels for answers.

Design Decision

Allow creators to configure FAQs within the storefront, providing a centralized and easily accessible source of information.

Result

Reduced uncertainty during evaluation
Minimized repetitive inquiries across channels
Improved clarity around project details

Fee Settings

Transparent Transaction Structure

Allows creators to configure transaction fees applied to their storefront sales.

Problem

Fee structures were not always clear or configurable, which could create confusion for both creators and collectors.

Design Decision

Provide structured controls for defining fees, ensuring transparency while giving creators flexibility in how transactions are handled.

Result

Increased clarity around transaction costs
Gave creators control over monetization structure
Reduced confusion during purchase decisions

Impact & Results

Following the launch of the storefront feature, creators began adopting it as a way to present and manage their NFT projects beyond standard marketplace listings. Early data showed strong engagement from both creators and collectors, indicating demand for more flexible project presentation.

Creator Adoption & Growth

2 months post-launch: 21 storefronts created
4 months post-launch: 483 storefronts created
5 months post-launch: +71 new storefronts (+29%)

Adoption increased rapidly within the first few months, showing that creators were actively seeking more control over how their projects were presented.

Active Usage & Listings

74% of storefront creators listed NFTs for sale
Storefront creators contributed 16% of all marketplace listings
57–62% of storefronts had at least one active listing

Creators were not just creating storefronts, but actively using them to manage and sell their collections.

Feature Adoption & Customization

17% of new storefronts adopted multi-collection support early
Adoption increased to 54% within a few months
24% of storefronts implemented custom fee settings

Creators engaged with configuration tools over time, indicating that structured customization supported more advanced use cases.

Collector Engagement

Several storefronts became high-activity hubs, with projects such as Crypto Pirates, ApeMove, and Wine Protocol driving strong engagement and trading volume.

Collectors visiting storefronts showed higher intent, averaging ~$200 per trader compared to ~$88 on the broader marketplace.

Marketplace Ecosystem Impact

58–71% of trading volume still came from marketplace discovery
Storefronts acted as high-engagement destinations for specific projects

The storefront complemented the marketplace by supporting deeper engagement, while the marketplace continued to drive discovery.

Reflection & Key Learnings

Designing the storefront required balancing flexibility for creators with consistency for collectors. Giving creators too much control risked breaking usability, while too little would limit their ability to express their projects. The final approach—structured customization through predefined sections—allowed both needs to coexist without adding unnecessary complexity.

Working on a feature that spans both creator tooling and a public browsing experience reinforced the importance of aligning multiple perspectives early. Decisions often involved tradeoffs between product goals, technical constraints, and usability, making close collaboration with product and engineering critical to maintaining clarity across the system.

One key takeaway was designing for scalability from the start. By building the storefront as a modular system with configurable sections, the feature could evolve without requiring major redesigns. Looking back, earlier and more structured user validation would have helped strengthen some decisions, particularly around how creators approach customization and how collectors interpret storefront content.