← Back to Home
← Back
← Back to Home
Improving product discovery and streamlining the shopping experience for a premium streetwear brand.
Improving product discovery and streamlining the shopping experience for a premium streetwear brand.
Role
UX Research • UI Design
Role
UX Research • UI Design
Timeline
4 Weeks
Timeline
4 Weeks
Tools
Figma • Claude • Google Stitch • Perplexity
Tools
Figma • Claude • Google Stitch • Perplexity
Tools
Figma • Claude • Google Stitch • Perplexity
Platform
Web + Mobile
Platform
Web + Mobile
WHAT IS BLOK ?
WHAT IS BLOK ?
BLOK is a concept mobile and web e-commerce platform designed for a premium streetwear brand.
The experience combines intuitive shopping, modern visual identity, and a culture-first approach to make discovering premium products feel engaging rather than transactional.
BLOK is a concept mobile and web e-commerce platform designed for a premium streetwear brand.
The experience combines intuitive shopping, modern visual identity, and a culture-first approach to make discovering premium products feel engaging rather than transactional.
THE PROBLEM
THE PROBLEM
Indian Gen Z streetwear buyers are more than just shoppers—they follow global drops, understand hype culture, and see fashion as a form of identity. However, through my competitive analysis of major Indian fashion platforms, I found that most experiences treat streetwear like any other product category.
The problem wasn't a lack of products—it was a lack of culture, storytelling, and brand experience. Product listings felt transactional, making it difficult for users to connect with the identity behind the brand or feel the excitement that defines premium streetwear.
BLOK was designed to bridge this gap by creating a shopping experience where product discovery, brand identity, and culture become part of the journey—not just the purchase.
Indian Gen Z streetwear buyers are more than just shoppers—they follow global drops, understand hype culture, and see fashion as a form of identity. However, through my competitive analysis of major Indian fashion platforms, I found that most experiences treat streetwear like any other product category.
The problem wasn't a lack of products—it was a lack of culture, storytelling, and brand experience. Product listings felt transactional, making it difficult for users to connect with the identity behind the brand or feel the excitement that defines premium streetwear.
BLOK was designed to bridge this gap by creating a shopping experience where product discovery, brand identity, and culture become part of the journey—not just the purchase.
COMPETITOR ANALYSIS
COMPETITOR ANALYSIS
I reviewed five Indian fashion platforms — using them as a shopper, not just analysing their UI. Observational findings, not definitive conclusions.
I reviewed five Indian fashion platforms — using them as a shopper, not just analysing their UI. Observational findings, not definitive conclusions.
PERSONAS
PERSONAS
Two users. Every decision tested against both.
Two users. Every decision tested against both.
HOW MIGHT WE
HOW MIGHT WE
From pain points to design questions.
From pain points to design questions.
HMW 01 — How might we make drop alerts feel timely without feeling intrusive?
HMW 01 — How might we make drop alerts feel timely without feeling intrusive?
HMW 02 — How might we help users discover pieces that match their taste without overwhelming them?
HMW 02 — How might we help users discover pieces that match their taste without overwhelming them?
HMW 03 — How might we create a shopping experience that feels considered at an accessible price point?
HMW 03 — How might we create a shopping experience that feels considered at an accessible price point?
HMW 04 — How might we make sizing feel trustworthy so users don't hesitate at checkout
HMW 04 — How might we make sizing feel trustworthy so users don't hesitate at checkout
HMW 05 — How might we design a web experience that feels as intentional as the mobile one?
HMW 05 — How might we design a web experience that feels as intentional as the mobile one?
DESIGN PROCESS
DESIGN PROCESS
HOW IT EVOLVED.
Several directions were explored before landing on what BLOK became. The most important decisions often came from rejecting earlier idea
HOW IT EVOLVED.
Several directions were explored before landing on what BLOK became. The most important decisions often came from rejecting earlier idea
KEY DECISIONS
KEY DECISIONS
DESIGN SYSTEM
DESIGN SYSTEM
Every token has a reason.
The design system was codified after designing the screens — components emerged from actual use cases.
Every token has a reason.
The design system was codified after designing the screens — components emerged from actual use cases.
WHY THESE TOKENS
Warm dark, not pure black. Pure black (#000000) flattens product photography. A warm near-black gives garment shots depth without competing with them.
Amber, rationed. Amber only appears on high-signal elements — live drop countdowns, the BLOK Member badge. If amber were everywhere, urgency would mean nothing. Scarcity in color use mirrors scarcity in the product model.
Inter over Poppins. Poppins reads soft and rounded, closer to lifestyle/casualwear. Inter's neutrality let the photography carry the brand personality instead of the typeface fighting for attention.
4px grid throughout. Keeps spacing consistent across 22 screens without needing to re-decide padding on every new component.
WHY THESE TOKENS
Warm dark, not pure black. Pure black (#000000) flattens product photography. A warm near-black gives garment shots depth without competing with them.
Amber, rationed. Amber only appears on high-signal elements — live drop countdowns, the BLOK Member badge. If amber were everywhere, urgency would mean nothing. Scarcity in color use mirrors scarcity in the product model.
Inter over Poppins. Poppins reads soft and rounded, closer to lifestyle/casualwear. Inter's neutrality let the photography carry the brand personality instead of the typeface fighting for attention.
4px grid throughout. Keeps spacing consistent across 22 screens without needing to re-decide padding on every new component.
WEB SCREENS
WEB SCREENS
HOMEPAGE
HOMEPAGE
DROP DETAIL
DROP DETAIL
PRODUCT DETAIL
PRODUCT DETAIL
SHOP
SHOP
DROP
DROP
THE BLOK EDIT
THE BLOK EDIT
SUCCESS INDICATORS
SUCCESS INDICATORS
What success would look like.
What success would look like.
