Education3 Website:
Education3.org is a website I developed for the company Education Education Education for the ImpactNPO Charity Hackathon. Over our given time of 48 Hours, I worked with 4 designers, 2 testers and 1 backend developer to design, build, test and launch this website. My responsibilities for this project included:
Front End code management with Git and Github
UI animations with CSS, SASS and JavaScript
Compiling SASS code to CSS with Gulp.JS
Image optimisation to improve webpage loading speed
Browser compatibility checking
Assisting other team members with any Front End issues
The clients request:
Education Education Education provides students with donated goods they can use for daily tasks at school. The client came to ImpactNPO with the need to have a new website. The website needed to reflect the companies branding, be responsive, simple to navigate and provide a way for users to donate goods for students.
Front end build:
My primary task was to work alongside the main website designer and build the Front End Architecture for the website. I chose not to work with a CSS framework like Bootstrap to help with page speed and allow the design to not be so limited by the technical constraints of a pre-built framework.
To help with collaboration, our team used Github to ensure everyone's aware what parts of the website each person was working on to avoid doubling up work.
To allow people to donate goods on the site, we utilised Google Forms to allow users to enter what they were donating, attach photo evidence of the item and contact details for the charity to contact them about their donated items if necessary.
The challenge of a new team:
Alongside working to a tight deadline, me and the team members also faced the challenge of learning how to work together after only meeting at the kick off night with the client.
To help break down silos and to get the team to work together, I helped organise both introduction exercises before we started to work and regular team stand-ups as the weekend went on to see how each team member was going on their tasks and identify where support is needed to reach the deadline.
Organizing these sessions helped our team with the following:
Each team member knew who to talk to when stuck
Everyone had a clear vision on what they needed to achieve before the end of the weekend
No team member was doing duplicate work that may override another persons
End Result and client handoff:
Over the 48 hours of the hackathon, we reached our end goal of launching a new responsive website that satisfied our clients needs. The site has continued to help market the charity and offers users on the site a more convenient way for them to alert the charity of the items they want to donate.
The source code for the website can be viewed on the Github repository.
“Michael worked on the front end development of the website and his competency and expertise proved immensely valuable for us in bringing a responsive site to life. As he worked on coding the website, he also checked up on other members to make sure everyone was on track. Overall, Micheal is open, communicative and a true team player. It was an absolute pleasure to work with him.” - Vivian Wu (UX Designer at Digital Arts Network)
“Michael was in charge of the front-end in building a website in only two days. He was very engaging, communicating with the team and leading us to be organized and work efficiently. He was so patient on the project, listening and appreciating team members opinion and engaging his skills with others skills to create a great outcome. I’m so grateful that I worked with Michael.” - Mona Gabr (UI/UX Designer at Air New Zealand)
