WORNING
Sustainable Streetwear & Interactive Awareness Platform
A wearable awareness campaign bridging sustainable streetwear with an interactive digital hub that decodes garments to expose fashion industry issues.
Role
Lead UX/UI Designer, Brand Designer & Developer
Context
Master’s Thesis
Timeline
05.2025 – 11.2025 (6 months)
Tools
Figma, Webstudio, Clip Studio Paint, Photoshop
Deliverables
Brand Identity, Responsive Website & Decoder, Hand-Printed Streetwear Collection
Challenge
Problem
Fast fashion causes severe environmental and social issues, yet consumers ignore them due to low prices and fast trends. Sustainable alternatives are often expensive, while thrifting makes finding specific items difficult.
Objective
Design a rebellious streetwear brand paired with a digital web platform. Hand-printed secondhand garments act as a physical conversation starter on the street, while the website decodes the graphics to expose industry issues and offer actionable solutions.
Research
Applied Methods
Competitor Analysis • Target Group Survey • 3 User Personas • User Story Mapping • Atomic Design System • Usability Testing (3 Rounds)
Insights
Aesthetics First, Education Second
Consumers wear clothing for its aesthetic appeal. The graphic design on the shirt must hook their curiosity before they are willing to engage with the deeper political message on the website.
Rejecting Eco-Clichés
Traditional eco-branding (green tones, wood textures, plant imagery) alienated the Gen Z streetwear target audience.
Clear Interface Cues Needed
Usability testing showed that users needed stronger visual contrast to differentiate static educational content from interactive modules quickly.
Design Process
UX Decisions
Rebellious Visual Identity
Deliberately abandoned green "eco-codes" in favor of a raw, high-fashion aesthetic. The visual identity borrows heavily from care labels (transparency) and receipts (the true cost of fast fashion).
High-Contrast Interaction Language
Based on usability test findings, all interactive UI elements were assigned a bold, high-contrast black-and-white box layout, while collapsible or movable components utilize ivory tones.
Scalable Atomic Design System
Built a comprehensive component library in Figma (atoms, molecules, organisms) to keep 74 custom micro-graphics, typography, and page templates consistent across the platform.
Mascots as Narrative Anchors
Illustrated 15 custom "Lil' Punks" characters (inspired by 70s/80s DIY punk culture) to soften heavy industrial data and guide users through complex topics smoothly.
Solution
Key Features
Interactive Motif Decoder
Dedicated sub-pages for every print motif. Selecting a shirt graphic translates cryptic artwork into clear facts about fast fashion issues.
Contextual Storytelling & Action Hub
Detail pages seamlessly blend educational content, video elements, and actionable steps ("Ways to Take Action") within a clean, modern layout.
Custom-Coded Webstudio Platform
Built a fully responsive and performant website using Webstudio, enhanced with custom code for advanced UI interactions and transitions.
Physical Collection & Event
Produced 8 hand-printed screen-print designs on secondhand garments, leading to a photoshoot and a live screen-printing launch workshop at Werkschau Mannheim.
Retrospective
Outcome & Impact
Successfully launched a full cross-media campaign featuring over 50 social media posts, a live screen-printing workshop, and a Master’s degree awarded with a 1.0 grade.
Personal Reflection
WORNING demonstrated how powerful UX design can be as a tool for social impact when physical touchpoints and digital interfaces work together. Moving forward, I would explore embedding direct QR codes or NFC chips directly onto woven care labels to lower the barrier between physical garments and digital decoding even further.