This project was developed as part of the TAFE Diploma in IT program, simulating a real-world web design and development process for A2Z Recyclers, an environmental organization. The goal was to demonstrate proficiency in industry-standard workflows—from gathering client requirements to delivering functional prototypes using modern frontend technologies.

The project reflects real-world project constraints and collaboration practices. We applied a structured user-centered design (UCD) approach, beginning with early email consultations to clarify client expectations. Through simulated role-plays and SurveyMonkey questionnaires, we engaged user groups such as families, businesses, and schools to identify key pain points and needs.

We performed comprehensive research including user demographics, competitor benchmarking, and stakeholder interviews. Based on the findings, we designed low-fidelity wireframes to establish layout and structure, progressing to high-fidelity prototypes in Figma for visual accuracy and interaction planning.

After securing client approval, the project moved to detailed UI/UX design in Figma—featuring responsive layouts, micro-interactions, and accessibility standards. The final design underwent stakeholder review to ensure it aligned with both user needs and business goals.

This end-to-end workflow—from research and analysis to prototyping and frontend development—demonstrates capabilities in HTML, CSS, JavaScript, and modern design thinking. The project showcases iterative feedback loops, user testing, and collaborative problem-solving, all grounded in practical TAFE training.

Key Features

• Client Needs Analysis: Interviews and surveys via SurveyMonkey to define functional and content requirements.
• Content Planning: Site architecture and user flow design based on feedback.
• Wireframing & Prototyping: Created Figma mockups from low- to high-fidelity and secured client approvals.
• Frontend Development: Built a responsive HTML/CSS/JavaScript website with:
  • Client-side search powered by Fuse.js
  • Accessible and keyboard-navigable UI
  • TAFE-branded project documentation
• User Testing: Feedback from diverse target groups (families, schools, businesses).

Tools & Technologies

• Design: Wireframes, Figma, Photopea
• Development: HTML, CSS, JavaScript
• Data: MySQL for form-driven simulations
• Research: Personas, SWOT analysis, SurveyMonkey