2nd year group project as part of my assignment coursework at SHU.
Sustain-Wear, a web-based platform for donating clothing, managing users, accepting donations and encouraging sustainability.
Product Goal: A mobile-first approach to help promote sustainability by providing an easy way for donors to manage their donations while providing impact metrics to understand the importance of sustainability. Our goal is to increase the average number of donations processed by our partner charities by 20% in the first quarter.
Dedicated User DashboardsDonors, Staff and Admins each have tailored interfaces to manage their specific tasks efficiently.
Donor:
Donations (Add donation, view donation history, track impact)
Account
Rewards & Badges (Collect virtual badges for no. of donations made)
Staff:
Donations (Accept / edit pending donations, view / undo past donations)
Account
Admin:
Donations (Accept / edit pending donations, view / undo past donations)
User Management (Edit, add and delete users)
Reports (Generate a pdf report of charity wide donations)
Secure Login & Registration (with Google Auth)Users can securely log in using email or their Google account, providing flexible and secure authentication options.
Integrating the OAuth 2.0 protocol for authentication, users can log in securely with either their email or Google account.
Furthermore, lots of care went into ensuring any data passed from server to client is validated to prevent security vulnerabilities.
Add Donations (Donor)Donors can easily upload their clothing donations through an intuitive form. Complete with category dropdowns and image uploads.
The app offers a dedicated dialog box to add a donation providing inputs for a title, description and several category / filter options.
A dedicated image carousel allows donors to upload multiple images for each donation, by clicking for the file selector or dragging and dropping files. These are stored with the Cloudinary API, which we chose over local server storage for its ease of use and security.
Notifications (Donor, Staff, Admin)Notification panel showing live notifications for tracking updates or user changes.
The notification panel keeps users informed when certain events are triggered. These notifications are stored on the server database allowing greater flexibility and widening the potential scope of application.
Current events:
(Donor) Donation transit updates e.g. "Your donation has arrived at the charity."
(Donor) Donation milestone e.g. "You've unlocked X badge!"
Profile updates e.g. "Your username has been updated to [username]."
Other potential notifications could include system alerts or maintenance notices.
Clicking on any notification will have it marked as read.
Mobile-first responsive UIMobile-first approach to UI/UX design to ensure accessibility and usability to all users.
We approached the design with a mobile-first mindset, ensuring the interface is intuitive and accessible on all devices.
Smartphones are increasingly becoming the primary way people access the internet, so optimizing for smaller screens was a priority.
This included incorporating responsive design with flexible layouts as well as large, touch-friendly buttons and inputs.
Below are some screenshots of many of the main pages in the mobile UI:
AI-powered autofill (Donor)Users can leverage AI to speed up their donation process by auto-filling relevant fields.
This feature is powered by Google's Gemini LLM, leveraging its multi-modality to describe the first uploaded image.
Category dropdown fields are then selected by inputting this description into an additional AI model.
Statistics & Reporting (Donors, Admin - features vary)Comprehensive metrics and reports to track donation impact and sustainability efforts.
Both donors and admins have access to a selection of statistics represented visually through charts.
Donors receive a personal impact report based on their donations. The CO2 impact is approximated as the number of trees planted providing a more tangible measure of their contribution.
Admins can generate reports downloadable as a PDF with charity-wide sustainability and donation metrics.
Manage Donations (Staff, Admin)Process and edit pending donations and view or undo completed donations.
Future developments
Interface with real courier API: Select a service to send your clothes and it should generate a digital label and allow you to select an appropriate drop-off location. The existing tracking feature should sync with the courier via an API, providing live updates from within the app.
Disable AI: Many people are still concerned about the ethical implications and potential biases of AI, so providing an option to disable AI features would accommodate for a wider range of customers.
Marketplace: While the project was designed exclusively as a solution for sending clothes to a charity, expanding this to a marketplace could further encourage users to buy second-hand. This could be provided as a solution for a charity so they can have it as part of their website or could exist as a central marketplace for all partnered charities that have opted-in.
Charity Brand Theming: As this platform is being provided as a solution to charity organisations, having the option to apply their brand image to the interface would help it feel more cohesive with their existing services.
Technologies Used
Vue.js - JavaScript Web Framework
Postgres - Database
Prisma - ORM
Nuxt UI - Design Library
HTML, CSS, JavaScript