simplifying the upcycling process while promoting sustainable fashion.

 A Sustainable Upcycling Experience

End - to - End Application (UX/UI Design)

Tools Used Figma, Adobe Creative Suite

Click on the logo to see the final prototype

Overview:

What is the problem?


Consumers today are increasingly conscious of sustainability but struggle to find an easy, accessible way to recycle, upcycle, and repurpose their used clothing. Existing solutions are often costly, inconvenient, or lack customization.

The Challenge in Sustainable Fashion

Story of Jodi:

“I am overstocked with old fabrics from my projects, wish I could interestingly repurpose them.”

Her Needs: Jodi, an entrepreneur, needs a solution to repurpose excess stock from her brand.

-A service that repurposes old fabrics and scraps leftovers from her workspace.
-Functional products .
-Make sure to properly clean the old fabrics for hygiene reasons.

My Role:  Crafting a Seamless Experience

People are more inclined and trusted to purchase custom product in-store than buying them from online platforms, and most of them are unaware of such platforms that customizes and sell recycled garments. Creating an application focused on online selling of custom upcycled clothing products is essential.
I was curious about how the application would function as an online platform dedicated to the preservation and repurposing of clients’ aging textiles and garments.

My initial opinions were :

-Having an online platform that simplifies the process of ordering,

-Sending old fabrics to the manufacturer, and receiving the desired customized product smoothly and hassle-free.

-Create an intuitive, visually engaging, functional e-commerce experience for personalized upcycled fashion.

-Raising awareness about using upcycled products and dispelling the myth that they are not durable. 

Methods:

I followed the traditional research methods like competitive analysis and user interviews followed by affinity mapping, wireframing and usability testing:

-Competitive Analysis & User Research to better understand the related existing brands and users pain points in this situation of recycling their own fabric to a new product. What kind of problem do they face and what are they expecting?
-Affinity Mapping for analyzing the data from the research and categorize them under each separate sections or features.
-Wireframing & Prototyping to start with the initial information architecture and do the user testing in each stage.
-Usability Testing & Iterations to understand how smoothly the user is able to go through the product browsing and ordering process .

Understanding   User Needs

In this initial design stage, I started with competitive analysis and user interviews to gather information and data about the existing similar brands and users’ needs followed by affinity mapping to organize and group the similar points.

Key Takeaways from my Competitive Analysis & User Interviews:

Research: Competitive Analysis & User Interviews

Quality Awareness- We need to dispel the myth that they are not durable. Most of the reviews say that they doubt the quality of the product and the process of recycling.

Logistics- Need for an easy and engaging process for sending old fabrics to the brand and receiving it back recycled in chosen designs.

Customization- A lack of customization options discourages buyers. We need bespoke options.

Lack of an App- Most of the brand doesnot have an app, users prefer for an app so that they can browse anytime and anywhere and buy from the app

Durability Question and High Price - “Many brands promote sustainability, but lack affordability & durability.” (-User)

Lack of Transparency- Customers desire transparency in the upcycling process.

Product variety/AI size guideline- Size is a very essential part of shopping, most of the brand do not have proper size guidelines, since people are shifting from in store purchase to online purchase , proper size guide and custom fit is very important.

Question - Any incident that you want to share with me related to your shopping experience for recycled products?

User-“We are aware of sustainable products and are interested in buying repurposed products but are looking for a better place to shop. We sometimes avoid shopping for repurposed products because of hygiene, durability, and affordability concerns.”

Question - Did you ever shop for vintage or recycled fabric products? What was your experience shopping from these brands? What is your review after using them

User-“We actively seek out recycled products, but there are fewer brands offering this option, which limits our ability to compare choices. Our preferred places to buy recycled products include thrift stores, Etsy, and craft fairs. It’s important to conduct thorough research before making a purchase, as some brands may falsely claim to produce sustainable products and charge higher prices. Additionally, not all brands adhere to proper hygiene practices, and there is often a lack of customization options.”

In my next step, I began collecting and analyzing the information from the empathize stage to pinpoint and define the fundamental issue. I tried to prioritize the main features by doing a thorough analysis of the research so that I can design an app that fulfills all the essentials providing a smooth intuitive navigation.
Putting all the above pain points and challenges altogether the key features to be worked upon are :

Opportunities:
-Offer affordable upcycled designs.
-Use AI to suggest style and size guidelines based on inputs.
-Introduce a seamless logistics process for fabric collection.
-Incorporate educational content to debunk myths about recycled products.

Ideate: Features and Information Architecture

     1.   Easy Navigation – Landing page with search filters & product categorization.   

     2. Customization Form – Users input preferences for personalized designs.  

     3. AI-Powered Style Recommendations – Suggests styles based on fabric quality.  

    4.  Seamless Fabric Collection – Users receive parcel bags or QR codes for mailing fabrics.   

    5.  Transparency Page – Visual storytelling of how fabrics are repurposed.   

    6.  Donation Option – Users can donate old fabrics for non-personalized upcycling.   

    7.  Virtual Chat Assistant – For guided customer support.   

A Visual Representation of the Site structure based on the core features

Click to view the user flow and task flows

  How does   the App work?

Provides statement of what the brand is about with a next button

SHOP

A product catalog with a filter and customize option and write-up to break the monotony of the page.

CUSTOMIZE

Provides option to select size, quatity and design change . It also provides parcel option to send old fabrics if one wishes to recycle their old products.

SIGN IN

Before checking out, one has to create an account or log in to proceed.

CHECK OUT

Checking out after inputting all the custom details and opting for sending their own old fabric for upcycling it to chosen design.

DASHBOARD

Low Fidelity Wireframe

I followed the crazy 8 method

to sketch one idea in each

square with a timer for one

minute per square. This process helped me to

think faster and come out with interesting solutions.



Things to change:


-Change the tagline on your dashboard.


-Add the donating fabric option on the dashboard to make it clear what is this App about.


-Add the estimated delivery date option.


-Add speech to text technology and a chat box.


-Correct the alignment and off centred navigation icons .
 

  Iterations:       why and how I changed the design?

Mid-Fidelity Wireframe and Testing

Changed the header to:
Brand Logo-
Sustainably Stylish,
Repurposing-MOKOSH
A shopping destination for
recycled custom products
Skip

Add the donating fabric option on the dashboard to make it clear what is this App about.

Inserted Delivery estimate option
in the checkout page

Add speech to text technology

Corrected the alignment and off-center navigation icons.
 

Visual Design Inspiration, Branding and Design System

In this project I had the freedom to design the interface from scratch. I did some visual and brand competitor research and developed a mood board. The visuals here depict recycled products in vibrant and soothing natural colors.

The mood board expresses both the modern touch and the organic rustic feel.

High-Fidelity Wireframe and Testing

After completing the branding and UI design, I moved on to high-fidelity wireframing, followed by prototyping and testing. I made final iterations based on user testing to achieve the completed design.

1)

1) Initially the dashboard page didnot have a back and next option, changed the skip button to back and next.

2)

2) The customizing option was confusing for some users. As per their suggestion, the customization page was split into two pages. The first page allows adding elements, while the second page has a pop-up box for adding old fabric.

3)

3) Added few more options for customization or elimination option.

4)

4) Users needed an explanation about how the old fabric is going to be repurposed into the selected product?
-Added the additional page that describes how the old fabric is treated along with parcel
receiving option.

Final Design

My Challenges:
Developing the entire flow for the End-to-End App was quite challenging because it required simplicity while providing all the key features in one App.
-I learned how to identify users' problems and develop an app that serves as online platform providing customizing options in an easy input form instead of making the process more complex.
-I have developed an efficient process for creating customized recycled products to meet users' needs in a caring and empathetic manner. This involves providing simple forms with icons, managing logistics for sending and receiving parcels, and promoting the sale of recycled products through information dissemination.

Challenges and Constraints

This project has provided me with valuable real-world experiences. The project made me focus on creating a responsive design, keeping the correct sizes in mind for both mobile and desktop platforms.
I made sure that the design solutions aligned with the users' needs and goals by conducting user tests with participants in the relevant field and category. This enabled me to gather a variety of relevant questions and suggestions from the user testing participants, prompting me to rethink and incorporate improved options for the users' needs.

What did I enjoy about this project?
I enjoyed the process of researching and developing the design. I had the liberty to work from scratch. Another fun part of this project was selecting the theme and finding inspiration for the user interface (UI). Seeing the final work after all the research and tests, I feel much more satisfied and confident!

Key takeaways
Key takeaways from this project included, focusing on responsive design as well as managing the project within a given timeline was challenging, requiring careful organization and adherence to deadlines for each phase from initial creation to final design development. Also developing a responsive web design was another experience where one has to think about the limitations, font and button sizes, and constraints.

Self Reflection

Back to Top