Fils Sustainable fashion traceability ecosystem
Bridging the gap between ethical consumption and cognitive overload. Fils is a mobile platform that empowers consumers to make sustainable fashion choices through sub-second barcode scanning and behavioral gamification.
Role
Lead Product & Visual Designer
Timeline
Nov 2024 – Mar 2025
Core Deliverables
Design Tokens, OCR UX, Usability Testing, IA
Overview
Fils is an ethical commerce mobile ecosystem engineered to dismantle the opacity of fast fashion by turning complex supply-chain audits into actionable consumer decisions.
Acting as the Lead Product & Visual Designer for this Master's Final Project at SHIFTA by ELISAVA, I directed the product lifecycle end-to-end: conducting mixed-methods quantitative and qualitative user research, defining the information architecture, establishing an accessible design token system in Figma, and designing both the mobile application and responsive marketing web touchpoints.
The project directly confronts the reality that while consumers demand sustainability, cognitive fatigue and price sensitivity often stifle ethical purchases. Fils bridges this divide by delivering a sub-second label-scanning experience paired with habit-forming community loops.
The Challenge
The global fashion industry accounts for 10% of carbon emissions, consumes 2,700 liters of water per cotton shirt, and generates 92 million tons of annual textile waste. Despite growing environmental awareness, our primary field research across 100+ surveyed participants uncovered significant behavioral friction:
Cost-Convenience
Prioritize price and consume fast fashion, yet desire a friction-free rating tool.
Cognitive Overload
Prioritized ease of use well above raw data depth when standing in-aisle.
Discovery Deficit
Admitted they could not identify ethical clothing alternatives on their own.
Primary Field Research
Synthesizing qualitative & quantitative insights from 100+ surveyed participants.
Environmental Context
Addressing the massive footprint of the fashion industry on carbon and water resources.
UX Research & Benchmarking
Before designing the solution, we analyzed existing sustainability and product-scanning apps. We identified a clear gap: while tools like Good On You and Clear Fashion excel at deep data, they lack the speed needed for in-store decisions. Conversely, food-scanning apps like Yuka are incredibly fast but don't translate well to the complex supply chains of fashion.
Our goal became clear: Combine Yuka's sub-second scanning UX with Good On You's rigorous multi-dimensional grading system.
Good On You
Excellent directory depth, but critically lacks the instant barcode scanning UX required for fast in-store decision making.
Clear Fashion
Provides comprehensive supply chain transparency, but the evaluation process is too slow and cognitive-heavy for casual shoppers.
Yuka
Perfected the sub-second scanning UX, but their single "Nutri-Score" model oversimplifies fashion's complex multi-layered impact.
Renoon
Strong curation of sustainable brands, but operates strictly as an e-commerce aggregator rather than an on-the-spot physical product scanner.
Vinted
Massive user base for circular second-hand clothing exchange, but completely lacks objective scoring or environmental impact metrics.
BuyOrNot
Highlights brand ethics and controversies well, but the UX is heavily dated and the database is skewed toward groceries, not fast-fashion.
User Personas
From our qualitative interviews, we distilled our target audience into three distinct personas, each with different motivations and barriers regarding sustainable fashion.
I want to pass on the importance of a just and sustainable world to my students.
Motivations
Already shops second-hand and sustainable brands. Wants a centralized tool to verify impact and discover new ethical brands.
Requirements
- Detailed environmental impact breakdowns.
- Interactive maps for local ethical stores.
- History of scanned items to track progress.
I'm finding my own style, but my budget is tight.
Motivations
Wants to make better choices but is highly sensitive to greenwashing. Needs quick, transparent data to trust a brand.
Requirements
- Fast barcode scanning in-store.
- Clear, unfiltered brand data.
- Cheaper, ethical alternatives.
My priority is providing for my family with the budget I have.
Motivations
Sustainability is an afterthought compared to price and durability. She needs to be incentivized to care without feeling guilty.
Requirements
- Gamification and rewards for scanning.
- Clear indicators of a garment's durability.
- Non-intrusive, positive reinforcement.
Approach & Execution
Translating research into tangible user interfaces, focusing on progressive disclosure and gamification to drive sustainable habits.
Progressive Disclosure
To prevent cognitive overload standing in a store aisle, I designed a 3-tiered data consumption model.
-
1Instant Diagnostic OCR scanning surfaces an aggregate 0–100 Score.
-
2Relatable Equivalencies Metrics translated into human anchors (e.g., "Saved 55 kg of CO₂").
-
3Certified Provenance Direct access to third-party certifications (GOTS, OEKO-TEX).
.png)
Actionable Gamification
Knowledge isn't enough to drive behavior change. I integrated a robust gamification loop.
-
Micro-Learning Quizzes Users earn points by answering questions about sustainable practices.
-
Impact Milestones Unlocking new levels and avatar customization options based on scan history.
Scalable Token System
A robust design system is essential for a product spanning B2C apps, B2B dashboards, and marketing sites. I built a highly scalable token architecture in Figma that abstracts absolute values into semantic variables.
-
1Semantic Naming Colors and typography are defined by function (e.g., action-primary) rather than hex codes, enabling seamless dark mode toggling and multi-brand white-labeling.
-
2Component Architecture Every UI element is built using nested Auto Layout and Master Components, ensuring a single padding update propagates flawlessly across hundreds of screens.
-
3Developer Handoff The design tokens are structured to perfectly mirror Tailwind CSS variables, eliminating the translation gap between Figma and frontend engineering.
Core Palette
Typography System
App Ecosystem
Beyond the core scanning experience, Fils is a comprehensive platform featuring social leaderboards, deep educational content, and robust user profiles.
Social
Community Feed
See what brands your friends are scanning and discovering.
Discovery
Brand Discovery
Explore sustainable fashion brands categorized by impact.
Learn
Educational Hub
Learn about circular economy and sustainable fabrics.
Account
User Profile
Track your personal footprint and history of scanned items.
Details
Brand Details
Deep dive into a brand's third-party certifications.
Social
Friends Network
Compare your sustainable footprint with your social network.
Content
In-depth Articles
Read detailed guides on ethical consumption and recycling.
Gamification
Global Ranking
Gamified ranking system to incentivize better buying habits.
Product Strategy
A beautiful app is meaningless if the business model isn't viable. To ensure Fils could scale without charging the end-user (which would introduce friction), we developed a robust B2B and Freemium monetization strategy.
B2C: Free Core
The core scanning and educational loops remain 100% free for consumers to drive rapid adoption and habit formation. We completely remove the paywall barrier to ethical consumption.
B2B: Data Services
We monetize by selling aggregated, anonymized trend reports to fashion brands and providing consultancy services to help them improve supply chain transparency based on user patterns.
Consumer scale drives B2B value.
By keeping the consumer app entirely free, we rapidly acquire a massive user base. Their daily scanning behavior generates the exact high-fidelity market data that fast-fashion brands desperately need to adapt, effectively subsidizing the entire ecosystem.
Results & Impact
The high-fidelity prototype was subjected to rigorous usability testing with diverse participants across multiple retail environments. The outcomes overwhelmingly validated our core hypothesis: combining frictionless scanning with transparent data architecture dramatically shifts consumer purchasing intent.
Seamless Usability Validation.
Moderated usability tests across diverse participant profiles (ages 20 to 72) achieved a 100% task completion rate for primary scan-to-evaluation user journeys.
Market Viability.
Designed with a sustainable dual B2C & B2B freemium model, ensuring long-term revenue growth without compromising the core ethical mission.
Rapid
Iteration.
Resolved cognitive navigation issues identified during testing by clarifying the "Els meus fils" community iconography and elevating secondary categorical filters on the main product view.
Wireframe to Final UI.
Continuous evolution of the core product view through rigorous testing and qualitative user feedback.