MODE
A Hackathon Project: Up Cycling Your Old Clothes With An Incentive
My Roles
Front-End Developer
UX/UI Designer
Languages And Tools
Javascript
React
NodeJS
Figma
Verbwire
Timeline
January 2023
Link To Project
Problem
I have always loved fashion and a lot of my clothes held a lot of sentimental value to me. Some of the pieces that I keep are never to be worn but solely hold a memory dear to me so I refuse to let them go. Eventually I know that they will go into the landfill and I wanted to keep them up cycled especially with the new vintage clothing movement. So I decided to create a project with my Hackathon teammates.
Solution
1. Up-cycling your old and unworn clothes:
Mode allows you to post your unworn clothes on an online and free to use marketplace using a simple form. People can then request for your clothes and pay for the shipping costs to get it. The old clothes are free but the seller gets a minted NFT for their time and effort. This helps keep old clothes out of the landfill while giving them new life in someone else's closet.
2. Keeping sentimental value:
Mode allows you to the mint an NFT on the VerbWire blockchain of the clothes that you donate. This allows you to keep a digital wardrobe of the pieces that you have while keeping your old clothes out of the landfills. Your NFTs go instantly into your wallet that you choose.
Learn More
Creating The Marketplace
To create the marketplace, the first steps that I took as a designer was to look at some inspiration from different clothing marketplaces such as: Grailed, Uniqlo, Chanel to see what other online marketplaces were doing. I also wanted to keep the design simple and user friendly so therefore designing a website close to similar websites made a lot of sense to me.
For this project, my team and I decided to use React on the front end, VerbWire for minting and Node for the back end. One of the things that I really wanted to learn was to solidify my understanding of routing and learning a different routing library. For this project we chose to use react router which made it very easy to transition between pages.
For this project, my team and I decided to use React on the front end, VerbWire for minting and Node for the back end. One of the things that I really wanted to learn was to solidify my understanding of routing and learning a different routing library. For this project we chose to use react router which made it very easy to transition between pages.
An Easy Upload Interface
We wanted the smoothest onboarding process for new users to make it easy for them to post their clothes onto Mode. Having a smooth and effortless process would keep users uploading and and contributing to Mode while reducing frustration.
I settled for using a simple form with minimal fields so the user would not be bogged down. In doing so, there was only the most important information on for those people who were interested. This makes the UI much cleaner and familiar to other clothing websites out there. At first, I decided to use react states to keep track of the information in each individual field however it became to complicated and unnecessary. I learned how to use React hook forms which was a very lightweight library that made it very easy to keep track of different fields. It also output a very easily to use JSON object which made things very convenient to use instead of having a state for every field.
Once you are done, there is an upload button on the bottom of the form that then confirms that your item has been minted. You can then see it in your open sea account.
I settled for using a simple form with minimal fields so the user would not be bogged down. In doing so, there was only the most important information on for those people who were interested. This makes the UI much cleaner and familiar to other clothing websites out there. At first, I decided to use react states to keep track of the information in each individual field however it became to complicated and unnecessary. I learned how to use React hook forms which was a very lightweight library that made it very easy to keep track of different fields. It also output a very easily to use JSON object which made things very convenient to use instead of having a state for every field.
Once you are done, there is an upload button on the bottom of the form that then confirms that your item has been minted. You can then see it in your open sea account.
A Rewarding Personal Profile Page
I thought that the users of this app who both request and contribute to sustainable fashion and clothing should have a place to see their contributions clearly. This would incentivize them to keep using the platform as well as give them a good feeling when they look at their efforts. I thought of this page as a place where users could see their contributions as trophies.
To make this page as integrated as possible, I designed a small card to show the user their ongoing requests as well as recent requests. These quick links allow the user to quickly keep track of their current requests. I then created a few little accomplishments tiles to show them how much they have been doing. 💡 Fun Fact : I have read that people who feel like they are working towards a goal are might likely to continue.
The digital wardrobe is there to show snapshots of their minted NFTS so that the users can come and reminisce and see what clothes that they used to have. This was one of the core principles of our application which was to allow the user to keep mementos of their closet as an incentive to donate them to other people.
To make this page as integrated as possible, I designed a small card to show the user their ongoing requests as well as recent requests. These quick links allow the user to quickly keep track of their current requests. I then created a few little accomplishments tiles to show them how much they have been doing. 💡 Fun Fact : I have read that people who feel like they are working towards a goal are might likely to continue.
The digital wardrobe is there to show snapshots of their minted NFTS so that the users can come and reminisce and see what clothes that they used to have. This was one of the core principles of our application which was to allow the user to keep mementos of their closet as an incentive to donate them to other people.
Reflections On Mode ðŸ’
These are some of the things that I did and learned:
1. I learned mobile development using React Native
Building Mode really tested my skills as a developer as I was building an application from the ground up. I had to learn how to route between pages as well as create many of the reusable components myself. For the form, I was using many reusable components that I had built myself which taught me how to keep my code concise and reusable.
2. I tested my UX/UI Skills.
Before Mode, I had tried designing many websites both for school but also as a freelancers however I was given specifications by the teaching staff and from my employer. For this project I had full creative direction over the look and feel of the application which made it both fun and challenging. I had to really dig deep into the principles of UI design and often times get a lot of feedback from my teammates or other hackers in order to optimize my application. In the end, I think I designed something that I was very proud of.