top of page

Smart Wardrobe Tracker

A web app designed to help users organise their wardrobe, track garment usage, and make smarter, more sustainable fashion choices.

Problem Statement

In a world of fast fashion, many people struggle to keep track of what they own, leading to impulsive purchases and clothing waste. Users often forget what they wear most frequently, which brands last the longest, and which materials suit their lifestyle best. Attire is a web application designed to solve this issue by helping users track their wardrobe, monitor wear frequency, and make more mindful clothing decisions.


Solution Overview

Attire is a wardrobe tracking web application aimed at helping users log their clothing items, track how often they wear them, and analyse trends in their wardrobe. Users can filter garments by categories, brands, colours, materials, and seasons to see which items they wear the most. A simple wear counter button allows users to track garment usage, helping them assess durability and make smarter future purchases. The app is built with a clean, minimalist UI, ensuring accessibility and ease of use across both desktop and mobile devices.


Main Goals

  • Allow users to record all items in their wardrobe with details such as brand, size, color, material, and season.

  • Enable easy wear tracking with a one-click button to log usage.

  • Provide insightful data on wardrobe trends, helping users make more informed shopping decisions.

  • Ensure an intuitive and aesthetically pleasing user experience, using modern UI/UX principles, accessibility considerations, and responsive design.

  • Optimise for mobile and desktop by simplifying navigation and eliminating unnecessary steps for smaller screens.

  • Keep the structure simple to encourage frequent usage and reduce friction in adding or managing wardrobe items.


Challenges and Issues

Technical Challenges

  • Efficiently structuring the database to ensure seamless tracking of wear counts and garment attributes.

  • Implementing a responsive design that adapts well to both desktop and mobile without overwhelming users.

  • Handling persistent storage using JavaScript and local storage to save user data between sessions without requiring an account system.

UX & UI Challenges

  • Designing an intuitive input system for garment entries while keeping the process quick and frustration-free.

  • Creating a user-friendly wear counter that minimises accidental clicks (hence, implementing a double-click confirmation for adding wears).

  • Balancing aesthetics with usability, ensuring that color choices, fonts, and layouts are visually appealing yet easy to navigate.


Technologies used

Frontend Technologies:

  • HTML5 – Structure and layout of the web application

  • CSS3 – Styling and responsive design

  • JavaScript (Vanilla JS) – Interactivity and frontend data handling

  • Figma – Wireframing and prototyping


Backend & Data Storage:

  • Local Storage (Web Storage API) – Data persistence between sessions


Development & Version Control:

  • Git & GitHub – Version control and repository hosting

  • VS Code – Code editor for development


Accessibility & UX Considerations:

  • WCAG 2.1 Standards – Ensuring readability and usability

  • Responsive Design Techniques – Mobile and desktop compatibility

Front-end Developer and Designer

Role

Solo creation

Scope

7 weeks

Project duration

Project Gallery

Process

Database Structure Planning

  • Defined key data points such as name, category, image, brand, size, color, materials, cost, comfort rating, wear count, etc.

  • Set up unique IDs and timestamps for each item to track wear history.

Wireframing & UI/UX Design

  • Created wireframes in Figma, ensuring a clean, minimal interface.

  • Designed mobile-first layouts and removed the ‘My Wardrobe’ sidebar from the mobile version to reduce clutter.

  • Used patterns, repetition, and variety in the category tiles for better user engagement.

  • Implemented contrast, whitespace, and typography principles for accessibility.

Mockups & Iterations

  • Refined design elements, focusing on a fashion-forward aesthetic while maintaining clarity.

  • Iterated on button designs, ensuring color-coded feedback (e.g., a traffic light system for the ‘Add Wear’ button).

  • Adjusted form inputs and dropdowns to speed up garment entry.

Development & Testing

  • Built the frontend with HTML, CSS, and JavaScript using a single-page architecture for a seamless experience.

  • Implemented local storage to persist user data across sessions.

  • Developed modals for adding, editing, and deleting items, ensuring smooth transitions.

  • Added confirmation dialogs for deletion and wear tracking to prevent accidental actions.

  • Debugged UI/UX issues and refined responsiveness.


Final Outcome

This project was a success in showcasing UI/UX principles, front-end development skills, and accessibility considerations. With further development, Attire could integrate user accounts, advanced filtering, and AI-powered wardrobe recommendations, helping users make even better shopping choices and reduce fashion waste. For more details, view the final project at the following link: https://github.com/verity96/vbro3124-tracker.git

bottom of page