Weave

Web3 marketplace for NFT-backed phygital fashion

TL;DR

This case study explores how complex product data can become a story through social-native UX. I designed a card-based interface for WEAVE that transforms blockchain-backed supply chain data into clear, shareable experiences—bridging NFTs, e-commerce, and social apps.

Context

WEAVE is a Web3 social commerce app offering a phygital shopping experience with NFT-based sustainability verification. I was brought in to design the MVP—building a unified UI system that connects physical garments to their blockchain-backed stories, with a focus on clarity, shareability, and low-friction checkout.

Client

WEAVE

My Role

Product Designer

Platform

iOS

Year

2022-2023

Weave app from physical scanning to storytelling process illustration

Result

Conversion Rate

Above industry average at 12.4%, improved product discovery and checkout flow reduced hesitation and helped first-time buyers convert faster.

User-Generated Content

Over one-third of testing users posted at least one product story, comment, or review (measured over a 30-day period).

Platform Stickiness

With a DAU/MAU ratio at 31% , testing users return regularly for updates, not just purchases.

Problem Scope

Turn complex sustainability data into a format that's easy to read, Web3-friendly, and built for sharing on social media—no dense tables, no info overload.

Competitive Analysis

Most platforms focus on either provenance tracking or community—not both. Through a quick audit of blockchain and e-commerce tools, I found space to merge the two: turning raw supply chain data into a social, story-driven experience. This became WEAVE's core differentiator.

logos from competing companies in the crypto and e-commerce industries

User Research

What does sustainable fashion mean to online shoppers — and what would convince users to switch platforms?

    What actually builds credibility, curiosity, and conversion in a crowded, trend-sensitive market? 

To explore this, we conducted online surveys, as well as in-depth interviews with 14 potential users. We focused on perceptions of credibility, trust, and innovation in the context of fashion transparency.

Numbers won't win me over. Zara has done that too many times with their carbon-offset. Give me something I should care about.

— Anonymous shopper

I've yet to find a place where I can shop both physical AND digital fashion at the same time.

— Hannah, Fashion designer

It's one thing to own. To participate, be on-chain, and be part of it--that's a whole lot more attractive.

— NFT Collector

Our research surfaced a few consistent themes:

Users are skeptical of vague sustainability claims
Users were drawn to an integrated platform with physical and digital capacities
Social sharing and brand signaling played a bigger role than expected in conversion

Through user interviews, we zeroed in on our Persona.

A persona featuring Emily's goals and frustrations.

A persona featuring Michael's goals and frustrations.

Design Objectives

Integration

Connect physical products and NFTs in one flow—no tab-switching, just tap-and-shop.

Simplification

Synthesize and layer information—hide jargons, show what matters.

Participation

Let users explore the supply chain as a story—flippable, stackable, shareable.

Now, let's tackled these three objectives one by one.

Wireframe: Tackling Phygital Integration

The core flow guides new users to register, browse, and buy physical garment AND digital NFTs in one seamless experience.

WEAVE's primary user flow

A secondary flow exists when a user already owns a physical garment and wants to access its NFT twin through the app.

WEAVE's physical garment led user flow

User Testing

With a solid foundation in place, I created a minimal prototype. The usability study surfaced key friction points, leading to two major design changes:

① Perfecting Integrated Checkout

Problem

Wallet setup was mandatory before checkout, leading to drop-offs.

Solution

Introduced guest checkout with auto-wallet creation by email. Wallet setup is deferred to post-purchase.

Before and after userflow for guest checkout

② Information for Depth, Not Overload

Problem

The full supply chain breakdown was shown upfront, overwhelming users who were here to shop.

Solution

A dynamic card stacknig visual that showshigh-level summary before checkout and a full supply chain tracking experience post-purchase.

Before and after userflow for guest checkout

Kicking it up to high fidelity

I started shaping WEAVE's visual design by gathering references, research, and inspiration to define its brand identity.

The magic of strong visuals and digestable narratives for socials.

Each step in the garment history and each stakeholder in the supplychain is brokendown into digestable, sharable pieces. Meeting the needs of social-native users.

Prototype of WEAVE highlighting the ease of sharing garment history on socials

    An one-stop integrated 
checkout flow

3D View + integrated checkout system (more on this later).

   Dynamic UI
Stack, Scroll, Expand

Key details upfront, deeper data on flip—balancing transparency with engagement. Users explore at their own pace.

Dynamic card flip to decluster and store information--Key information upfront, and supporting evidence, certificates, data points in the back.

Card stacking motion).

A concept demo to showcase the physical to digital "stacking" behind the choice of card deck UI.

NFC tag scan to access product.

Style Guide

Logo, color, typography

Style guide for WEAVE

Future Recommendations

This project taught me the importance of simplifying complex information and the value of user-centered design in building trust and engagement. It reinforced my belief in the power of design to make sustainability more accessible and understandable.