📌 Project Overview

• The Hook: Thread bridges the gap between digital curation and perfect-fit tailoring, offering a sophisticated, high-conversion mobile storefront where young professionals can confidently discover sustainable fashion without the anxiety of sizing inconsistencies.

• The Challenge: Modern digital apparel retail suffers from a massive fragmentation in garment standardizations, forcing consumers to navigate wildly inconsistent sizing charts between disparate eco-conscious brands. For busy young professionals, this unpredictability introduces immense cognitive friction, leading to a toxic cycle of over-ordering multiple sizes, escalating cart abandonment rates, and generating high return volumes that actively undermine the sustainability initiatives these consumers care about. The core business and user experience challenge lies in eliminating this sizing ambiguity directly at the point of discovery, thereby driving purchase confidence without cluttering the aesthetic interface.

• The Solution: The design introduces an intuitive, AI-powered sizing matrix seamlessly integrated into a minimalist three-screen user flow: a discovery-driven Home Screen, a structured Product List Screen, and an intent-focused Product Details Screen. By transforming sizing from a guessing game into a proactive, personalized recommendation engine, the interface lowers cognitive load, eliminates the need to cross-reference static measurement tables, and establishes a highly accessible, transparent path to purchase that drastically minimizes return rates.

• My Role: As the Lead UI/UX Designer, I executed the end-to-end product design lifecycle over a rigorous 4-week timeline. My responsibilities spanned foundational UX research, information architecture, wireframing, building a scalable atomic design system, and refining interaction design patterns to ensure a polished, premium mobile experience.

🔍 Discovery & Definition

• User Insights:

  • Inconsistent Brand Standards Breed Hesitation: 82% of surveyed users expressed intense frustration with size variance across different contemporary labels, noting that a "Medium" in one sustainable boutique often fits like a "Small" in another, stalling their final purchase decision.
  • Sustainability Requires Efficiency: Eco-conscious professionals explicitly stated they feel immense guilt when returning items due to the carbon footprint of reverse logistics, yet they currently view returns as an unavoidable tax on online shopping.
  • Aesthetic Overload Induces Drop-offs: Users abandon fashion applications when crowded marketing banners, intrusive pop-ups, and dense filter menus distract from product photography and disrupt clean browsing habits.

• The Persona:

  • Profile: Marcus, a 28-year-old Corporate Sustainability Consultant based in an urban tech hub.
  • Core Goals: Wants to build a high-quality, ethically made professional wardrobe effortlessly, needing a fast, frictionless mobile interface that respects his limited free time.
  • Primary Frustrations: Tired of spending hours reading user reviews just to guess his correct fit, and highly frustrated by clunky checkout flows that hide final costs and item dimensions until the last possible screen.

• Core User Flow:

  1. Entry & Discovery: Marcus opens the Thread app, arriving on a clean Home Screen where a targeted search placeholder and an uncluttered "Summer Essentials" banner instantly direct him toward curated men’s apparel.
  2. Structured Browsing: He taps into the Outerwear category on the Product List Screen, scanning a highly organized, dual-column grid featuring transparent price indicators and urgent status tags like "Limited Edition."
  3. Intent-Driven Evaluation: Selecting the Mustard Yellow Tailored Blazer, Marcus lands on the Product Details Screen, where his personalized AI sizing recommendation is already calculated and pre-highlighted right next to the sizing pills.
  4. Frictionless Affirmation: Confirmed by clear social proof metrics (star ratings and review volumes), Marcus taps the sticky, high-contrast "Add to Bag" call-to-action button anchored at the base of his viewport to seamlessly finalize his intent.

✏️ Design & Execution

• Wireframe Decisions: The layout strategy intentionally prioritizes whitespace and continuous vertical rhythm to give high-resolution apparel photography breathing room. On the Product List Screen, a fixed, minimal sub-header isolates essential sorting controls from the product grid, ensuring filters remain accessible without overlapping product thumbnails. For the Product Details Screen, the design ditches traditional multi-tab product descriptions; instead, it uses a single scannable page layout with clear typographic hierarchies, placing vital size and selection mechanisms permanently above the fold to keep the user focused and prevent scrolling fatigue.

• Design System Basics:

  • Primary Color (Deep Black - #000000): Chosen to ground the application in a premium, editorial atmosphere. It establishes stark visual contrast for primary call-to-action buttons, drawing immediate focal priority to checkout actions.
  • Secondary/Accent Color (Soft Sage Green - #E2EFE0 / Deep Charcoal - #262626): Light, muted tones are utilized for status tags, discount percentages, and selected state indicators. This color choice communicates savings and system status without clashing with the colors of clothing photography.
  • Typography (Inter & Montserrat): Montserrat is used exclusively for headers to add a bold, architectural, high-fashion personality to the app. Inter serves as the body typeface due to its exceptional x-height and readability at small scales on mobile displays, ensuring clean readability for pricing and dense measurement details.

• Key Screen Explanations:

  • The Home Screen Layout: Built around a rigorous modular grid, this screen serves as a low-friction jumping-off point. By limiting visual elements to a singular, spacious promo banner and a floating search bar containing contextual placeholder hints, the layout prevents decision paralysis right at launch. It gently guides the user into the catalog, utilizing a horizontally scrollable category rail that requires minimal physical effort to navigate.
  • The Product List Screen (PLP): This screen balances dense data presentation with an ultra-clean layout. A 2-column staggered grid allows user eye patterns to easily glide between items, while product tags (e.g., "Best Seller") are neatly housed in low-saturation pill shapes. This design choice maintains strong visual hierarchy, ensuring the layout communicates key product attributes without shouting over the clothes.
  • The Product Details Screen (PDP): Engineered specifically to maximize conversions, this screen centers entirely on size assurance. The personalized size recommendation capsule is positioned directly above the physical size selection pills, reducing the user's mental math to a single glance. The primary "Add to Bag" CTA sits inside a sticky bottom dock with a full-width container, ensuring that no matter how deep Marcus scrolls to inspect fabric details, the path to buy remains fixed and easily reachable by his thumb.

🧪 Testing & Results