INTERACTIVE DESIGN: Final Project

Fig. 1. Bobert from The Amazing World of Gumball

INTERACTIVE DESIGN: FINAL PROJECT

–––

15/10/2025 - 11/01/2026 (Week 7 - Week 15)
Irdhina binti Mazli Sham (0366894)
Interactive Design - Bachelor of Design in Creative Media - Taylors University
Final Project



TABLE OF CONTENTS:

  1. Instructions
  2. Process Work
  3. Reflection


INSTRUCTIONS


Objective: The objective of this assignment is to bring your website redesign to life by developing a fully functional website (MINIMUM OF FIVE (5) PAGES based on the prototype created in the previous assignment. This final product should reflect all the design and user experience decisions made throughout the project, resulting in a polished and professional website.

Assignment Description: Building on your redesign proposal and prototype, you are now required to develop the final working website. This website should be fully functional, demonstrating your ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility.

Website Development:

Implementation: Convert your prototype into a fully functioning website using HTML, CSS, JavaScript, or any other relevant technologies or framework (e.g., Bootstrap).

Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color schemes, imagery, and layout.

Responsive Design: The website must be fully responsive, adapting seamlessly to various screen sizes, including desktops, tablets, and mobile devices.

Cross-Browser Compatibility: Ensure that the website functions correctly across multiple browsers (e.g., Chrome, Firefox, Safari, Edge).

Core Features:

Navigation: Implement a user-friendly navigation system that allows visitors to easily access all key areas of the website.

Interactive Elements: Include any necessary interactive features, such as forms, buttons, or dynamic content, that enhance user engagement.

Technical Considerations:

Performance Optimization: Optimize the website for fast load times by minimizing file sizes, using efficient coding practices, and employing tools like caching and compression.

Final Testing and Deployment:

Testing: Conduct thorough testing of the website, including usability testing, cross-browser testing, and responsiveness checks. Document any issues found and how they were resolved.

Deployment: Host the website on a live server or a web hosting platform of your choice (e.g., GitHub Pages, Netlify, or a custom domain). Ensure that the website is accessible via a public URL.

Submission:
A live URL to the fully functional website. A brief report (800–1,000 words) documenting the development process, any challenges faced, and how they were overcome in your E-Portfolio, and upload the final project main folder into Google Drive and include the link in your e-portfolio (set the access to public).

PROCESS WORK

For the final project, we were required to build a working responsive website using HTML, CSS and (if needed) JavaScript based on our prototype from Project 2. 

The website I chose to redesign was a plant-based website called Tropusikert, Hungarian for "Tropical Garden". I ended up making six pages of the website, which are:
  • Home/Landing Page
  • About Page
  • Explore Page
  • Explore Details Page (Citrus)
  • Gallery Page
  • Contact Page
Fig. 2. Original Website Screenshot

To help better understand how the coding works, especially JavaScript, I watched many video tutorials as well as look through websites such as W3Schools.

Based on the prototype, what I aimed to achieve was:
  • Landing Page: Contains New Arrival Products alongside the date of the update as well as a start on exploring broad plant categories (Frost-Tolerant, Tropical & Mediterranean, Miscellaneous)
  • About Page: Contains a carousel image of how the place would look alongside a brief description on the business itself, including what they sell as well as where they are based.
  • Explore Page: Starts with a broader category for users to look through (Frost-Tolerant, Tropical & Mediterranean, Miscellaneous) followed by smaller categories that would go under specific groups. Once the user clicks onto one of the smaller categories, they would be met with specific species alongside a photo (if possible) and brief notes on its care such as the frost-tolerance level.
  • Gallery Page: Similar to the original website where the photos are separated by specific groups but with more organisation on size and placement.
  • Contact Page: Contains a map on the business location alongside the address, phone number and e-mail. Additionally, a form is included that would be used to make enquiries or for ordering products. To make sorting easier, users would have to tick an option on whether their request is an enquiry or order.
There were, however adjustments made to better fit the overall content but I wanted a cleaner and less cluttered look at least. I also went for a more stylised approach by having a set format of showing specific vector art depending on the section for consistency.

Landing Page:

For the landing page, I wanted the website to start with the logo where you can click to scroll down. I found a problem, however, with getting the hover effect when hovering over the logo as it was a transparent png file, which meant that if I stack another photo on top, it would make it slightly harder to readjust later on. To solve this, rather than changing the image using class:hover css, I decided to use onmouseover and onmouseout instead, with the former being the alt image whereas the latter was the original image.

Fig. 3. HTML code screenshot

Additionally, I wanted to add a curved title but it had to be removed since the curvature had to be relied on the logo rather than a set format and would mess up when changing screen sizes. Instead, I put the title behind the logo so when the user hovers over, the logo opacity decreases and the full title will be seen.

Fig. 4. New Website Screenshot

One of the things I wanted to feature on the landing page was a section for new arrival products to entice customers. This section would include the product's name, photo and a small piece of information attached under the same box.

Fig. 5. HTML Screenshot

Fig. 6. CSS Screenshot


Additionally, I also added a preview of the about page, as suggested by Mr. Shamsul with a "Read More" button leading to the about page.

About Page:

Based on the prototype, the about page was relatively simple as it only had a short description on the website alongside a horizontal image carousel, showing pictures of the garden.

For the image carousel, I made it using HTML and CSS with the help of Youtube videos. For me, particularly the overflow-x: auto, scroll-snap-type: x mandatory and scroll-snap-align: start line of code was important to execute the carousel.

However, I had to slightly extend the page by adding information and readjusting the elements because since it was too short, the tablet view would get cut off halfway down the screen.

Fig. 7. New Website Screenshot (Tablet View Before)

Fig. 8. New Website Screenshot (Tablet View After)

Explore Page

On the original website, the buttons were all displayed on the landing page with no image clarifying the plants' appearance, so that was the first thing I wanted to fix as it made the original website very cluttered. After looking through the confusing layout of the website, I decided to group the explore page into two main sections; Select by Type and Select by Plant. I also decided to put both sections on one page for easier access and put a similar format from the new arrivals section in the landing page but forgoing the description. Select by Type had the options Frost-Tolerant, Tropical & Mediterranean and Garden where Select by Plant consisted of the different plants the original website had.

Fig. 9. New Website Screenshot


Explore Detail Page

I chose one of the plants from the website to develop into their own page to showcase how the individual plants can be a subject for separate pages rather than combining everything under a singular long page like what was done in the original website. In the original website, the information was present in the form of plain text with no images and little organisation. To fix this, I used images to describe the appearance of all the listed citrus plants and organise them in boxes for better readability. Additionally, I also added buttons to help filter and sort the information by alphabetical order, popular products and/or latest but unfortunately, I didn't manage to input the JavaScript code as it requires a database.

Fig. 10. New Website Screenshot

I organised the information by threes with no row gap to imitate the look of tickets or flash cards.

Fig. 11. New Website Screenshot

Gallery Page

For the gallery page, I wanted a photo gallery that was not just photos with the same size as some of the ones in the website had different ratios. To execute this, I used column-count: 4 for the desktop view, then reduced it to two followed by one for tablet and mobile view respectively. To make the website look more like a garden, I used the bush photo as a divider and the background colour for each section gets darker as you move along with the colour chosen based on the bush vector art. Additionally, rather than simply scrolling with no interactivity, users are able to hover over individual images, which slight lifts and increases its size.

Fig. 12. New Website Screenshot

Fig. 13. CSS Screenshot


Contact Page

For the contact page, I included a map using iframe followed by the contact information such as phone number, address and email. Afterwards, I made a contact form where users can choose to use it as an enquiry and/or order form by selecting the subject matter. In this page, I had trouble readjusting the contact form for other device views because the buttons would not stay in place but eventually, I was able to somewhat fix it.

Fig. 14. New Website Screenshot


Additional Features:
  • Interactive Potted Plant Buttons: Some of the links and pages use potted plants as buttons when when hovered, they either tilt or get blocked in a solid colour using onmouseover and onmouseout. This was done to make the website suit its plant-like theme as well as increase interactivity.
Fig. 15. HTML Screenshot

Fig. 16. Potted Plant Button – Tilt Hover

  • Toggle Button for Sorting Information: This button was made with a few trial and error on JavaScript by changing the image source using the if else system.
Fig. 17. JavaScript Screenshot

Fig. 18. Potted Plant Button – Toggle

  • Shopping List on Explore Details Page: On the explore details page, users are able to write down the plants they want to order on a 'shopping list' textarea while browsing. Once completed on a page, they are able to copy the list to be pasted on the contact form for ordering. The copy to clipboard button was done using Javascript.
Fig. 19. JavaScript Screenshot

Fig. 20. HTML Screenshot

Fig. 21. Shopping List

  • Footer with Different Background Colour: For the footer, I edited the appearance based on the page itself since some pages require darker colours according to the sections presented. Thus, rather than linking one footer with iframe like the header, I instead copypasted the code on each page and edited them from there.
Fig. 22. Footer from Landing Page


Experience: This module overall was actually something I looked forward to since I got to revisit coding, which I still consider a fun activity but I don't really see myself taking computer science as a career in the long run because of how technical it is. The production of this website was quite hard because I kept thinking it looks too simple but it is what it is... I did learn a lot though and it was an enjoyable time revisiting the things I learned in high school since I don't get to do that a lot in tertiary studies with how far off the study theme is (science and design). The final outcome could definitely be better and I hope to revisit this project if I do have the time because it was genuinely fun despite how time consuming it was at times.

Observation: I found doing this assignment alongside other heavy assignments was very very veryyyy tiring even though it was enjoyable. I also found that you need to be really precise when doing coding because the slightest mistake such as a missing colon or a letter can mess up the entire composition, which was frustrating when you need to fix it by looking through hundreds of lines of code trying to find that one specific line. Thankfully, I had friends who were also facing the same problems and we would ask each other about our respective codes so that made me less alone in wrangling with the coding.

Findings: Websites such as W3Schools, GeeksforGeeks and StackOverflow were huge help in allowing me to create this website, especially when I was facing a specific problem because chances are at least one person had faced that exact problem like two years ago and decided to post on StackOverflow for a solution so I'm forever grateful to that kind of community.

Comments

Post a Comment