Exam week – portfolio

After the final application had been completed and submitted, I focused on adding information into each section of the portfolio.

Above is a comparison of the original structure with the work-in-progress and the final portfolio site.


In order to create a better user experience, I added some additional functions such as:

  • Highlighting (Bold) the navigation links that refer to the section that the user is currently browsing at
  • Smooth scroll function, where rather than jumping straight to a section, an animation is played to show the transition to different area of the site.
  • Remove sections and added pop up modals to display larger contents without breaking the one page structure


Furthermore an plugin called “lightbox” (by Lokesh Dhakar) was included to  add a hidden image slider function to the site. This plugin enables the function of enlarging thumbnail image on mouse click and displays the full size image in a slideshow effect. This function helps to add images to the site, without taking too much spaces in each section.


Week 13 – Final Delivery doc

After all the testing and debugging had been completed, I started working on the final delivery document. Initially I separated the document into four sections and allocated different section to different team members.

  • Description of the final product – Phoung
  • Description of Implementation – Eva
  • Discussion of process – me
  • Reflection on the final product – Shannon

I was allocated with the section talking about the discussion of the development process. Initially, I separated this part into three major sections (process, changes and challenges) and brainstormed some dots points related to each section.



PART A – Design proposal

  • Researching and examining Trove
  • Creating different possible designs
  • Deciding on one specific topic that the group will focus on
  • Decide on different functions that the site will include and ways to utilize Trove data
  • Creating wireframe sketches
  • Base on the wireframe sketches, create a digital site sketch

PART B – Work-in-progress

  • Decide on the animals to be included in the site
  • Designing and creating background images
  • Creating the one page scrolling site structure
  • Adding internal navigation
  • Paper prototype
  • Designing and developing the home page/ introduction section
  • Adding sample responsive animal images
  • Research and implement the pop up textbox
  • Adding tabs and additional css styles
  • Changing the text in the textbox to the corresponding Trove content
  • Randomize article and image for each click
  • Creating some animal graphics
  • Implementing the hidden animal function
  • Adding and storing animal description from Ozanimal into a javascript dictionary

PART C – Final Delivery

  • Creating and populating the animal data into a database
  • Adding a counter for the hidden animal
  • Adding an additional internal refresh button
  • Implementing the random animal function
  • Adding an additional prop up as a replacement for alert statement when the user found a hidden animal
  • Smooth scrolling function
  • Finishing all animal graphics for each section
  • Testing and debugging database and Trove connection (checking whether there is enough Trove info for every animals)



  • Additional counter
  • An internal refresh button
  • call-to-action button in the home page -> arrow gif
  • Changed some of the animals to be included in the final applications, as some were’t native Australian wildlife
  • Adding more environmental elements
  • Changing some of the wording (e.g. changing the world ground to underground in the navigation)
  • Textbox design and position
  • Changed the secondary source to Ozanimal



  • Content retrieved from Trove is quiet obscure
  • length of time loading Trove article and image
  • retrieving images for kookaburra
  • set up and create a database
  • retrieve multiple animals from the database serially

Week 13 – Testing and Debugging

During the last and final week of development, I mainly focused on testing and debugging some of the errors that users may encounter when exploring through Australian Wildlife.

Testing out:

  • Trove content – Is there is enough article and image for every animals on the site?
  • Data in the database – Is all the data in the database correct and functional?
  • The pop up box for the hidden animal – Does the pop up have a suitable timeout that provide enough time for the user to read through the messages?

Errors and solution:

  • The animal “Musky rat-kangaroo” did not have any information available on Trove. In order to avoid replacing this animal, I renamed the id of this animal to kangaroo rat that contained more related information from Trove.
  • The pop up message when the user found all the animals disappeared quiet quickly and this was easily solved by adjusting the timeout
  • Some of the height and width of the animals stored in the database was adjusted to ensure the image size was somewhat proportional to the animal in real life

Contact 13

This was the contact session where we presented our final product to the tutors and lecturer. This demonstrations was in the form of a trade show where we set up a computer table filled with props and brochures related to our site. The image below was a photo of a trade show we set up.


We included brochures, posters that introduced the product to the audience, as well as adding small props such as animal paw stickers, koala toy and fake plant to further emphasis the main topic of our web paper application. (Australian Wildlife)

Overall the demonstration went quite smoothly and the application worked successfully with only a few minor errors. (E.g Trove articles and image not loading properly- long response time) However,  the tutors only had a very limited time in this session to look at our product and this caused the demonstration speech to be quiet rushed and not been able to explain every functions included in the final product. Additionally, little to no feedback was given towards both the demonstration and the product itself, one small specific advice was to test the website with primary school students to text their reactions towards the site.

Week 12 – Tradeshow

During week 12, I worked not only on testing the site and also on creating a brochure and animal paw cutout for our tradeshow.

Below is the design of the brochure, double sided.

The font side contained a simple and iconic animal silhouette that aims to provide a good imagery of the overall topic of the site. The back side contains four paragraphs separated into introduction, function, interactive, hide and seek exploration.


I also prepared animal paw cut outs that will be positioned and stick onto the tradeshow table. This was arranged to add uniqueness of our presentation as well as introduces the animal element of our site.

Contact 12

This was the second last contact session, where we worked and prepared for the tradeshow next week.  We planned the tradeshow desk to be filled with a natural wildlife elements including fake plants and animal paws to emphasis the site’s overall topic.

Below is a list of props the team is going to prepare for next week.

  • A2 Poster of team logo – Shannon
  • Brochures (for users to read and understand about the site) – Tina 20 copies
  • Start Pitch (1-2mins) – Shannon from Part A
  • Koala Lollies – Shannon
  • Stuffed animal of koala (other any Australian wildlife)- Shannon
  • Triangle paper stand (Facts of Australian Wildlife) – Eva
  • Ikea fake plant and animal paw – Tina

Week 12 – Final implementations – minor functions

After the random animal function was completed, I decided to focus on adding more minor functions to the site, in order to ensure that user can navigate through the site smoothly.

  1. Currently some of the graphics for the animals had still not been completed. (around 5 animals for the sky and underground habitat) So I decided to add a temporary image file to the database to ensure that the random animal function run perfectly on uqcloud net.
  2. After the digital prototype session, the team decided to change the button on the home page to a arrow gif that informs the user about the scroll mechanics. Similar to the gif bellow.

scroll-down-button-kopie13. To ensure that the site is still functional without the database. I added an additional function that checks every time when the document is ready. It is an ajax function that checks the connection to the php file and different functions will be ran depending on the success and failure.

  • If successful – ran the updatedata function
  • If fails – populate the animal dictionary with the default animals.

4. I worked with Eva to implement the counter of the hidden animals that the user haven’t found. One problem we encountered was to avoid decrease the counter if the user has clicked on the hidden animal multiple times. This was successfully solved by checking the z-index of the hidden animal and only decrease the counter if the animal z-index was less than 2.

5. Before, an alert statement appears when the user clicked on a hidden animal. Working from the counter function, the alert statement was changed into a pop up that appears only for a few seconds before automatically disappearing. This function was achieved by adding a time out function, so it could avoid conflict between the animal information text box.

6. Lastly an auto scroll function was added, where rather than the links jumping straight to the corresponding section, a smooth scroll animation was be included before arriving to the actual section.