Kingdom

the fashion os

a decentralized fashion market. There is a significant amount of demand for large organizations to address worldwide social and economic problems, with corporate entities acting in their own interests. Control over data ownership becomes scarce as technology improves, only to relate to the human being as a product. In the fashion world, our shopping habits contribute to one of the largest environmental footprints across the globe.

Welcome. Please scroll.

Setting the stage

When I was brought onto Kingdom I was given a blank Figma project, a lengthy Litepaper, and a project that needed before anything a foundation to build on. Kingdom may be the Fashion OS of web3, but at its core it's an online shopping app. To successfully account for this, the initial phase of R&D will aim to build a solid foundation of an eCommerce/ NFT Platform & an MVP environmental impact report

Competitive Research & Analysis

To become familiar with the space, I began auditing other platforms to gain insight into their application architecture, shopping experiences, & interaction with Ethereum on chain data.

FigJam board auditing Opensea, Ssense, TikTok, ShopPay, Kingdom, Founded on.app and LooksRare on mobile

Takeaways

Opensea: Prioritizes mobile, but lacks clear discovery hierarchy. reinforced our decision to surface verified projects early

Ssense: Strong at quick-path shopping with high editorial polish. validated our choice to emphasize curated, scrollable content. lacks good filters, led us to prioritize sorting and filtering to support intent-driven search.

tiktok: Minimizes UI affordances to push immersion. we mirrored this by focusing on edge-to-edge content & reusing their 3 button pill for primary actions without losing immersion.

Opportunity Spaces

After reflecting on & discussing our competitive audit, we established that we should utilize common user flows found in eCommerce apps. The best online shopping apps utilize an almost identical application architecture, but lack the visibility that NFT markets offer, and have no method of environmental traceability.

Empathy Map

From here, we continued our research by creating a hybrid empathy map of an NFT marketplace & online shopping application, as Kingdom has many qualities of both of these web apps.

I created a hybrid empathy map of an NFT marketplace & online shopping application,

Empathy map quadrants covering user fears, frustrations and worries alongside their wants, needs and hopesSee, Hear, Does and Feels quadrants filled with sticky notes

Pain Points

I created 6 pain points, drawing two from each of the following user experiences.

Persona: Jocelyne

based on market research, pain points, opportunity mapping, empathy work & personal experience in fashion.

Application Mapping

To determine the structure and the flow of the application, I made an App Map. It shows the various states that a user encounters. It helped me specify which screens would need to be designed and what their purpose was. Here it's used with HiFi mockups.

App map running Entry, Home, Discover, Become a Creator, Impact Report, Account, Brand Info, Garment Info, Search by Brand, Message with a Brand, Wallet, Cart, Filter and Sort as columns of hifi screens

style guide

colors

  • #333333
  • #4F4F4F
  • #828282
  • #BDBDBD
  • #E0E0E0
  • #F2F2F2
  • #2F80ED
  • #42FF00

grid & spacing

8 px layout grid

60 px high rows

4 column grid
16 px margins

typography

Inter Light11141719

Inter Medium11141719

Inter Semi Bold11141719

logo

The Kingdom sunburst mark

interaction guide

  1. Edge-to-edge scroll on Discover prioritizes content immersion and mimics mobile-native app feel
  2. CTA placement remains fixed where critical, ensuring continuity during long-scroll interactions
  3. Color hierarchy remains neutral and lets brands take centerstage
  4. Card spacing optimized for tap targets

components

Component sheet covering the large card, brand card, item cards, category card, loading bar, slider, button pill, button outline, top nav, navigation and sort and filter controls
Product cards in the Kingdom feed, each showing garment, brand and ETH priceCategory cards for tops, denim, footwear and accessoriesBrand cards for ADER, Comme des Garcons and Maison MargielaGarment thumbnail grid at collection density
Goal card with a progress bar and an Explore Goal actionImpact report card listing funding, location and carbon offset figures

prototypes

Onboarding
Dashboard
Search Market
Become a Creator
Environmental Impact
Account & Brands

hifi mocks

Incorporating User Research, component design & brand design, I finalized the direction & creation of the hifi mockups.

final thoughts

This case study serves as an organic repository of research assets I create throughout Kingdom's lifecycle. This document will be continually updated as we continue designing Kingdom.