Process #DES100

Last year as part of my level 3 NCEA computing assessment, I was asked to design a web page that could be used by DOC to both record where their pest traps were located, as well as how many pests had been caught in these traps. This site also had to work on both desktop and mobile and in as many web browsers as possible e.g. Chrome, Microsoft Edge, Safari etc. I coded the website in HTML, and linked it to a MySQL database, which housed the Pest/trap data, using PHP. Unfortunately due to me having to use school computers for most of my assessment, I have since lost the majority of code for the finished site. Although I have managed to find some photos of early planning and various early prototypes. These are presented below.

Planning

The first thing I did when planning out my website for this assessment, was to divide up the roughly six weeks I had to build the site, and then assigning each week a major task I needed to get done based on order of importance. I then wrote these tasks out onto colored post it notes, and stuck them in linear order on the back whiteboard, in order to keep a list of what needed to be done, and by what week.

Image of whiteboard with post it notes of what needed to be done on it, my notes are the sixth down from the top. I used the different colored notes to differentiate between different tasks e.g. tasks related to creating my database are in light blue.

Planning out my time using this method did not work for me, as I found myself constantly ignoring this plan, forgetting to check it at the start of the day. It also didn't help that I vastly overestimated and underestimated how long it would take me to create certain parts of the site, for example the database, which I thought would take two days to create instead only took me half a day.

After this, I then wire framed how my website was going to look, both on desktop and mobile.

Wireframe of my website on desktop

Wireframe of my website on a phone

Creating the site

Creating the site was generally pretty easy, with only a few challenging parts. One major challenge was getting the site to look good on mobile, as my background images and header image did not want to resize to fit the smaller screen size (as seen in the image below).

How my site appeared on a phone for the majority of the sites creation.

How my final site looked on a phone, while not perfect hopefully the improvement is noticeable.

Finished site

Photo of my finished site on a desktop