What is UGLY Clothing?
UGLY Clothing is an e-commerce proposal with a bold visual identity and streetwear aesthetic, targeting a young audience (19-30). The project focused on the challenge of designing a comprehensive Design System that balanced an aggressive aesthetic with strict WCAG accessibility standards and Frontend feasibility. My Hybrid Role was crucial in ensuring the brand's design was impactful, fast, and usable on any device.
🔍 The Challenge and Research: Defining the Problem
Ugly Clothing is a streetwear brand inspired by skater culture with a strong visual identity, created from scratch. The challenge was twofold:
1) To create an e-commerce platform that respected and amplified this aggressive aesthetic, and
2) To design a user flow (UX) that simplified purchasing despite the bold visual design. We started with a competitive analysis (benchmarking) of urban fashion stores to identify common pain points in navigation and checkout.
The main frustration detected in the sector is information overload on the product page and friction in the cart.
Site Map
Persona: Andrea, the busy student
User Journey Map
User Pain Points
✅ Validation Process and Key Learnings
The focus of validation was on the clarity of the purchasing process (checkout). Through User Flow Maps and low-fidelity wireframes, we simplified the flow to a three-step process, minimizing distractions.
The key learning was the need to separate the display design (brand aesthetics) from critical conversion elements (Add to Cart buttons and form fields). This was solved by applying strong accessibility contrast to the checkout CTAs and using a clear typeface for labels, ensuring the bold design did not compromise the main action.
Paper Wireframes
Digital Wireframe
Design Keys
Desktop Digital Wireframe
Tablet & Mobile Digital Wireframes
Low-fi User Checkout Process Flow
💻 Technical Feasibility and Hybrid Role
My experience as a Frontend Developer was fundamental to ensuring that the Visual Design, with its bold aesthetics and numerous images, was technically feasible and fast. Every decision was made with a focus on performance optimization and interaction accessibility.
Frontend Optimization and Components
I focused on designing the product cards, galleries, and filter components with efficient implementation in mind (using CSS Grid/Flexbox, image lazy loading) and optimizing load performance for Mobile First. I was responsible for the Information Architecture of the Product Listing Page (PLP) and the Product Detail Page (PDP) to optimize performance.
Accessibility and Hand-off
For interaction usability, I designed the checkout and forms with clear labels and predictive error messages to enhance the experience. My coding knowledge allowed me to specify that the hand-off of mockups be efficient, with detailed technical specifications for implementing a logical tab order (keyboard navigation) and the correct HTML tag hierarchy.
🍜 Hi-Fi Prototype Flows & Stark Annotations
🎨 Consistent Visual Design (Design System)
Leveraging my background in Illustration and Graphic Design, this project was based on creating a strong, coherent visual identity within a usability framework.
Design System Creation and Scale
To ensure scalability and efficiency, I created a new Design System in Figma which was coherently integrated using the Atomic Design methodology to build a complete UI Kit of components, reinforcing design consistency and efficiency.
Typography, Color, and Contrast (WCAG Criteria)
The design faced the challenge of being bold without compromising legibility. I redesigned the color scheme based on the branding, ensuring that every text and background combination met WCAG AA standards for contrast. Regarding typography, a display font was used for branding, but a highly legible system font was selected for body text and transactional elements, facilitating reading for users with reduced vision.
Corporate Image and Assets
This project focused on a strong visual identity from scratch. I designed the logo and specific brand iconography. A strict Mobile First approach was applied to ensure the aesthetic was impactful and accessible on any device.
Typography & Color
Branding
UGLY Clothing Home - Desktop
UGLY Clothing Store - Desktop
UGLY Clothing Product Details - Desktop
UGLY Clothing End of Purchase Flow - Desktop
Tablet
Mobile
Final Design
📈 Conclusion and Expected Results
The final proposal is an e-commerce platform that balances a unique visual identity with a low-friction purchasing flow. The design is optimized to maximize the Average Order Value (AOV) through intuitive cross-selling modules on the cart page.
It is expected that this combination of simplified UX and strong branding will increase both sales conversion and customer loyalty in the skater niche.
The next step would be to conduct A/B testing of different Product Card proposals to optimize the click-through rate.
Want to work together?
If you like what you see and want to work together, get in touch!
