FabricFeed B2B Sustainable Transaction Design Preview

Ouros Industries - Fabric Feed MVP ๐Ÿ‘•โ™ป๏ธ

FabricFeed revolutionizes textile waste transactions by offering a seamless web app and supplier database, enabling faster transactions for waste collectors and recyclers.

About FabricFeed
Project Overview
FabricFeed is a web app and supplier database in which textile waste collectors and textile recyclers can facilitate transactions of textile waste feedstock in one place, faster than their current alternatives.

My Contributions

- Leading team in UX Research, Design System Building, Branding, Feature Implementing
- Personally Translating Research to Designs

MVP Timeline

November 2023 - March 2024

Problem
Over 2.5 million tons of textile waste is recycled in the U.S every year in a $2.5 billion market in 2030. Every ton of textile waste that is recycled must be exchanged between textile recyclers and their textile waste collection partners.
โ€
However, collectors have a hard time finding recycling partners for their textile waste. When they do find a partner, their transactions are done in a slow, manual process by exchanging multiple emails, photos and invoices.

Team

Product Designers:
3๐Ÿง๐Ÿง๐Ÿง
โ€
SWEs:
3 ๐Ÿ’ป ๐Ÿ’ป ๐Ÿ’ป
โ€
User Researcher:
1๐Ÿง
โ€
Product Manager:
1๐Ÿง

Tools ๐Ÿ› 

Figma
Github
Adobe Ilustrator
Confluence
Notion
Slack
Jira

1. Research & Understanding ๐Ÿ”ฌ

2. Ideating ๐Ÿ’ก

3. MVP Design ๐ŸŽจ

4. Testing ๐Ÿ’ฌ

My Design Process
Duration: Ongoing

Phase 1: Research &ย Understanding

My Research Plan
Welcome to the "Research & Understanding" phase of the FabricFeed case study, a pivotal segment where I orchestrated a comprehensive approach to inform our UX strategy. Join me on this exploration as we delve into the foundational research that paved the way for an impactful and user-centric FabricFeed experience. Below, you can find my research methods, so feel free to click around!

1. User interviews and surveys - Helped us gain invaluable insights, ensuring our approach resonates with user needs.

2. User Personas - Allowed our team to encapsulate the diverse profiles within our target audience. ย 

3. User stories - Helped our team visualize user needs and journeys that served as a guiding framework for our project

4. Competitive Analysis - provided a nuanced understanding of our field, highlighting industry trends and informing our design decisions.

1. User Interviews (3 total): What do we want to know?

Delving into sustainability, interviews with stakeholders like Sam Jenkins, Director of Sustainable Operations, reveal insights into textile waste transactions. Sam's input highlights FabricFeed's potential to streamline processes and enhance sustainability. Take a look at our insights below!

What Did the Interviews Teach Us?

  • Current Challenges ๐Ÿค”
    Many teams currently rely on various channels for transactions, facing challenges in coordination and efficiency.
  • Success Factors ๐ŸŒŸ
    Clear communication, transparent pricing, and streamlined user flows are crucial for successful transactions.
  • FabricFeed Impact ๐Ÿ’ฅ
    FabricFeed has the potential to significantly speed up processes by centralizing transactions in one dedicated platform.
  • Sustainability Goals โ™ป๏ธ
    FabricFeed aligns with sustainability goals, offering a more efficient marketplace for textile waste and reducing environmental impact.
  • Valuable Features ๐Ÿ’ก
    Real-time export/import tracking, facilitating communication, and a comprehensive supplier database are key features for enhanced decision-making and efficiency.

2. User Personas: Who are we trying to reach?

In designing FabricFeed, our team collectively developed User Personas representing our diverse audience. Through the extensive research we conducted on our target audience, we were able to confidently define user needs, pain points, and opportunities.

Main Pain Points โš ๏ธ

  • Desire to create sustainable textiles programs within their ecosystem suggests a lack of existing infrastructure or tools to facilitate this goal.
  • Lack of access to tools or platforms to support community members in leading sustainable lives.
  • Team may struggle to comfortably fulfill objectives due to resource constraints.

Main Opportunities โœ…

  • Opportunity to streamline team operations and improve efficiency through better resource allocation.
  • Opportunity to leverage FabricFeed to connect with textile recyclers and waste collectors to establish sustainable initiatives.
  • Opportunity to engage with a community of like-minded individuals and organizations focused on sustainability through FabricFeed.

3. User Stories: Further Understanding Users

As a group, the FabricFeed team brainstormed a few user needs that followed our insightful user interviews and new user personas. In Notion, we also decided to categorize them by feature type and priority. Below, you can see these needs translated into 3 simplified, yet specific user stories.

  • Seamless Messaging and Collaboration ๐Ÿ’ฌ
    As a user on FabricFeed, I want a seamless messaging mechanism that allows me to communicate with other users, attach files to messages, and view conversations in a threaded format. This will enable efficient interaction, streamlined transactions, and organized communication threads, enhancing the overall user experience.
  • Professional Identity and Precise Interaction ๐Ÿ’ผ ๐Ÿ‘ค
    As a textile waste collector or recycler using FabricFeed, I want the ability to create an account under my employer or company, ensuring a clear representation of my professional identity. Additionally, I need the capability to communicate specific types and quantities of feedstock, facilitating precise interactions and collaboration with potential suppliers or partners.
  • Enhanced Communication with Attachments ๐Ÿ–‡
    As a user on FabricFeed, I want to engage in effective communication and collaboration by adding attachments to messages. This feature will enable the exchange of essential documents, images, or files within the communication thread, enhancing the overall usability and functionality of the platform.

4. Competetive Analysis:ย How can we do it better?

Who We Analyzed
In shaping the FabricFeed user experience, a comprehensive competitive analysis was conducted to glean insights from prominent players in the textile waste management landscape.

By examining the strategies and interfaces of key competitors, including Finds (Paris, France), Helpsy (NJ, USA), Reverse Resources (Bangladesh, India), and Trans Americas Trading Co (NJ, USA), a nuanced understanding emerged of the industry's current trends and opportunities.

What We Looked For
This comparative exploration delved into each competitor's approach, strengths, weaknesses, and unique features. By dissecting the user experiences crafted by these industry leaders, FabricFeed gained valuable insights that informed strategic decisions in creating a platform that stands out in the global textile waste marketplace.

Join me in unraveling the intricacies of this competitive landscape, where each player contributes to the rich tapestry of insights shaping FabricFeed's unique and user-centric design.

Key Takeaways

Product Connection ๐Ÿ”Œ
All competitors aim to connect unsold fashion products to appropriate channels (reselling, donating, or recycling) on behalf of fashion brands.

Textile Collection Services ๐Ÿš›
โ€
Multiple competitors operate extensive textiles collection networks, utilizing trucks for efficient pickups and offering services such as household pickups.

Retail Presence ๐Ÿ›
โ€
Some competitors run secondhand shops, featuring products from large brands, providing consumers with accessible secondhand options

Wholesale Services ๐Ÿ“ฆ
โ€
Certain competitors extend their services to include wholesale options, catering to small business owners dealing in secondhand clothing.

Textile Waste Mapping ๐Ÿ—บ
โ€
One competitor offers mapping and tracking services for textile waste movements, providing insights for circular fashion stakeholders.

Textile Recycling Bins โ™ป๏ธ
โ€
Two competitors provide textile recycling bins for municipalities, with one offering a cost-free service and a stable payment structure based on collected tonnage.

Focus on Manufacturers ๐Ÿ‘•
โ€
One competitor primarily deals with post-consumer textile waste, receiving significant quantities from manufacturers and waste pre-collectors.

FabricFeed's Opportunities:ย Strategic Insights and User-Centric Solutions

How are we different?
The platform efficiently connects unsold fashion products to recycling companies for reselling, donating, or recycling, prioritizing convenience on a large scale and fostering a vibrant circular fashion economy.

Enhancing Sustainability and User Experience
FabricFeed integrates retail and wholesale services, alongside mapping and tracking features, fostering transparency and trust in textile waste management

Scalability and Sustainable Waste Management
FabricFeed's scalable approach begins with efficiently connecting textile recyclers and waste managers, leveraging features such as textile recycling bins and a stable payment structure for municipalities. This commitment extends to supporting users dealing with post-consumer textile waste, offering valuable insights for informed decision-making.

As FabricFeed expands, it aims to incorporate additional features like textile inventory management, further enhancing its impact on sustainable waste management.

Phase 2: Organizing & Ideating ๐Ÿง 

Team Ideation
In the Ideation phase, I spearheaded initiatives to elevate FabricFeed's design and brand identity. Establishing a comprehensive design system ensured cohesive product development across the team. Taking charge of rebranding FabricFeed within the broader context of Ouros Industries, I focused on creating a distinctive identity for the platform. To visualize and enhance the user experience, I crafted task flows and wireflows, meticulously envisioning every step of our users' interaction with the interface.

Additionally, I produced detailed wireframes, providing a tangible framework to fully flesh out design layouts and refine the overall user interface. This holistic approach in the Ideation phase aimed to not only improve the visual elements but also to ensure a seamless and user-centric design for FabricFeed.

5. Establishing Our Design System ๐Ÿ“š

I played a key role in developing FabricFeed by creating a comprehensive design system. This involved defining and documenting brand guidelines for consistency and identity. I also implemented an intuitive button library, established logo usage protocols, and created icons to improve visual communication. Additionally, I crafted a user-friendly sidebar navigation and implemented sliders for a more interactive experience. This approach improved FabricFeed's usability and appeal, enhancing its position in user-centric textile waste management.

5A. Creating Brand Guidelines + Logo Design ๐ŸŽจ๐Ÿ–Œ

I led the creation of FabricFeed's brand guidelines, carefully selecting nature-inspired colors such as #1BFA83, #4DBB80, #66FAAB, and #0D7A40. The main palette, #13AD5B and #FFFFFF, creates a fresh and clean look. We chose Barlow Semibold for titles and Inter Normal for paragraphs to convey sophistication. Our commitment to sustainability is reflected in the logo's colors: #13AD5B, Black, or White.

The brand guidelines also embody FabricFeed's voiceโ€”focused, innovative, and dedicated to simplifying textile waste transactions for a greener future, aligning every design choice with our pledge to drive positive change in the industry.

Palette Mastery ๐ŸŽจ
Elevated FabricFeed's visual identity through a thoughtfully curated color palette. The supporting colorsโ€”#1BFA83, #4DBB80, #66FAAB, #0D7A40โ€”imbue the brand with a refreshing, nature-inspired vibrancy. The main palette, comprised of #13AD5B and #FFFFFF, provides a clean and sophisticated foundation, reflecting our commitment to a sustainable future.
Typography Strategy ๐Ÿ–‹
Infused sophistication into FabricFeed's messaging with a carefully selected typographic approach. Titles command attention in Barlow Semibold, projecting strength and modernity. Paragraphs, set in Inter Normal, strike a balance between readability and contemporary elegance, enhancing the overall user experience.
Logo Integrity ๐Ÿ›ก
Established stringent guidelines for the FabricFeed logo, ensuring consistency and recognition. The logo is exclusively represented in #13AD5B, Black, or White, maintaining a harmonious connection with the brand palette. This deliberate choice reinforces our visual identity and enhances brand recall across diverse applications.
Resonant Brand Voice ๐Ÿ—ฃ
Defined FabricFeed's brand voice as a commitment to simplifying and accelerating textile waste transactions while contributing to a greener future. Our messaging resonates with a focused, innovative tone, reflecting our dedication to positive change in the industry. FabricFeed's voice is a testament to our missionโ€”creating impact and sustainability through user-centric design and responsible practices.

6. User Flows & Journeys Overview: Navigating Innovation ๐Ÿ›ซ

In the intricate tapestry of FabricFeed's development, the User Flows and Journeys section serves as the compass directing our journey toward a seamless and impactful user experience. Positioned strategically after our meticulous problem statement and proposal, this section plays a pivotal role in keeping our team on course and aligning every design decision with user-centric goals.

Why We Needed User Flows & Journeys
Understanding the user's journey is like navigating through uncharted territoryโ€”it's essential for guiding our product design and development. By diving into user flows and journeys, we get a deep understanding of how our audience interacts with FabricFeed. With clear problem statements and proposals, we strategically create user pathways to address pain points. These pathways form the backbone of a seamless user experience, integrating smoothly into user workflows. Positioned strategically in our process, this section aligns our team with user-centric goals, fostering collaboration and informed decision-making. Ultimately, it highlights our dedication to improving the user experience within FabricFeed.

7. Wireframes & Iterations Overview: Blueprinting the User Experience


After reviewing the user flow/journey, we progressed to the Wireframes section, which acts as our product blueprint, bringing to life the strategic decisions made in earlier research stages. Following the clarity established by our problem statement and proposal, this section is pivotal in translating concepts into tangible, visual representations that bridge the gap between ideation and execution.

The Wireframing Process
In our FabricFeed project, wireframes serve as the linchpin between strategic planning and visual execution. Stemming from our initial problem statement and proposal, these wireframes embody our commitment to usability principles, prioritizing simplicity and clarity to steer the development process in the right direction.
Why Iterative Design?
Embracing iterative design was pivotal for our team in refining the FabricFeed experience. Through a series of six meticulous iterations driven by user and stakeholder feedback, we honed our product's interface to maintain a clean aesthetic and minimize cognitive load. While the number of iterations might seem excessive, each cycle was instrumental in perfecting our layout, thus alleviating pressure during the prototyping phase and ensuring a seamless transition from design to code. These iterations served as a compass, guiding us towards a user-centered solution that resonated with both our audience and stakeholders.

Phase 3: Design Journey to MVP ๐ŸŽจ

Embarking on the prototyping phase for FabricFeed has been a dynamic journey, evolving conceptual designs into interactive realities. Focused on transforming wireframes into a functional Minimum Viable Product (MVP), our team aimed is to bring the envisioned user experience to life through meticulous prototyping. This process involves translating design concepts into interactive elements aligned with our user-centric goals. As we transition to testing the MVP, each interaction informs refinements to the user journey. The prototyping stage signifies the culmination of design efforts and marks the beginning of rigorous testing to ensure the MVP resonates with users and lays a strong foundation for further enhancements.

8. MVP Evolution: Iterative Design in Action

FabricFeed's design journey is characterized by the ethos of iterative design in action. This dynamic process of constant refinement, collaborative stakeholder engagement, and dynamic iteration in product meetings has been the driving force behind the evolution towards our Minimum Viable Product (MVP). Each design iteration was a deliberate step towards crafting an exceptional user experience.

This section unveils the behind-the-scenes narrative of how FabricFeed's design team, in close collaboration with stakeholders, navigated the intricate path of iterative design to ensure that every element, from the smallest detail to the overarching architecture, aligns seamlessly with user expectations and business objectives.

Constant Refinement
In the pursuit of FabricFeed's MVP, the design journey unfolded as a continuous process of refinement. Every design element underwent meticulous critique and adjustment, ensuring a seamless and user-centric experience.

Collaborative Stakeholder Engagement
Engaging with both internal and external stakeholders was pivotal. From the development team to project managers and the CEO of FabricFeed, design decisions were thoroughly discussed and aligned with overarching business goals.

Dynamic Iterations in Product Meetings
Product meetings became the nexus of dynamic iteration. Close collaboration with stakeholders allowed us to absorb valuable feedback, fostering a responsive design process that evolved in real-time to meet user needs.

Commitment to UX Excellence
The MVP is not just a product; it's a culmination of FabricFeed's commitment to delivering an exceptional user experience. The iterative design approach ensures that every interaction resonates with users and contributes to the platform's success.

Phase 4: Testing ๐Ÿ’ฌ

9. Testing Stage: Gathering User & Stakeholder Insights

As FabricFeed enters the testing stage of our MVP, we are not just gathering feedback; we are embarking on a journey of refinement and evolution. Collaborating closely with our advisory board and engaging potential users, this phase is a strategic restart of the design process. Through user and stakeholder interviews, we are not only seeking valuable insights but laying the groundwork for the next phase of FabricFeed's design evolution.

This immersive testing experience ensures that every user interaction contributes to the product's growth and aligns with our commitment to delivering a platform that exceeds expectations.

MVP Feedback Integration Planning

In closing, FabricFeed's evolution has been deeply influenced by invaluable feedback from users and stakeholders. Our commitment to integrating this feedback is evident in the organized Confluence board, showcasing insights from usability tests. Moving beyond the scope of FabricFeed's MVP, we prioritize continuous refinement, ensuring alignment with user needs and stakeholder goals. This user-centric approach not only enhances the experience but also fosters engagement. As we evolve, feedback remains central, ensuring FabricFeed's relevance and resonance.

Back-to-top button
Back to TopNext Project

Any Feedback? The Floor is Yours ๐ŸŽ™

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Connect with me!

Let's connect! Click the icons below to reach me on LinkedIn or via email. I look forward to hearing from you!