2025|ART DIRECTION, LEAD DESIGNER
UGLY Clothing
Premium Streetwear E-commerce Performance.
Refining the balance between raw identity and high-end conversion to solve the perceived value issues of the initial beta.
UGLY 2.0: Strategic Evolution
Refining Brand Essence: An Editorial Leap
The initial beta of UGLY Clothing relied on vibrant brand colors that competed with the products. Through guerrilla testing, we identified that this visual friction lowered the brand’s perceived value.
The Strategy:
Visual Silence: Transitioned to a minimalist, high-contrast palette to let the garments speak for themselves.
Editorial Hierarchy: Implemented an asymmetrical layout to increase the 'Brand Lust' factor and align with high-fashion standards.
Simplified Checkout: Reduced cognitive load by condensing USPs into a performance-oriented footer, directly targeting an increase in Average Order Value (AOV).
Blueprint for Conversion
Architectural Shift: From Noise to Intent
To elevate UGLY Clothing’s perceived value, we had to clear the foundations. The original information architecture suffered from decision paralysis: too many competing elements on the screen. The redesign focused on removing these cognitive barriers to ensure a seamless, high-speed purchasing flow.
The Pivot: We transitioned from an 'exploratory' layout to a 'goal-oriented' structure. By simplifying the navigation and reinforcing the visual path toward the product, we addressed the friction points identified during the wireframing phase.
Key Insight: A streetwear e-commerce doesn't just sell clothes; it sells an aesthetic. If the structure is chaotic, the brand feels cheap. Our testing confirmed that visual clarity equals premium positioning.
Technical Feasibility and Aesthetic Focus
High Performance meets High Fashion
Maintaining a heavy editorial aesthetic without sacrificing speed was the core challenge. Since the target audience is Mobile-First, performance was as critical as the 'wow' factor.
Asset Optimization: Implementation of WebP and lazy-loading to ensure sub-2-second load times.
Scalable UI System: Built a modular kit for rapid collection launches while maintaining strict consistency.
Dynamic Engagement: Engineered a custom grid that breaks e-commerce monotony, increasing time-on-site through a magazine-like browsing experience.
Responsive Grid Logic: Explain how the 2-column or 3-column layout adapts to maintain visual rhythm.
Asset Optimization: Mention that images are served in WebP to ensure the grid loads instantly even with 20+ items.
Micro-interactions: Point out the hover states or the transition from the skeleton/wireframe to the final render.
Consistent Visual Design System
Typography & Visual Hierarchy
The brand’s soul lives in the contrast between its custom logo—blending MadFont’s raw energy with Brandon Grotesque’s precision—and its digital interface. To ensure maximum performance, Outfit was chosen as the sole UI typeface. This decision ensures a clean, modern aesthetic that prioritizes legibility and puts the product first, as validated in our usability sessions.
Sticky Navigation Header
Interactive Product Card
Checkout & Size Selection Logic
Primary Call to Action (CTA)
Final Design
Conclusion and Expected Results
The Final Verdict: Identity vs. Performance
The final iteration delivers an e-commerce platform that balances a disruptive visual identity with a low-friction purchasing flow. By solving the friction points identified in the beta phase, the design is now optimized to maximize AOV through intuitive interaction and clean hierarchy.
Expected Impact: This combination of simplified UX and high-end branding is projected to increase both conversion rates and customer loyalty within the skater niche.
Next Steps: Launching A/B testing on Product Card variations to further optimize the CTR and refine the cross-selling modules.