4.12.2025 - 11.1.2026（Week 11 - Week 14)
Lee Xiang Ling / 0384095
Interactive Design / Bachelor of Design (Honours) in Creative
Media
Final Project / Website Redesign Development
LIST / JUMPLINK
INSTRUCTIONS
<iframe allow="autoplay" height="480" src="https://drive.google.com/file/d/1tcDY9tWQDWifRXmBV5E5en214xlpXnk8/preview" width="640"></iframe>
EXERCISES
WEBSITE REDISIGN DEVELOPMENT
This assignment aims to turn my approved redesign prototype into a
fully functional live website (minimum 5 pages). The final
product should reflect all design and UX decisions made throughout the
project, resulting in a polished and professional outcome.
Development Scope
We must implement the website using
HTML / CSS / JavaScript (or frameworks like Bootstrap), ensuring:
- Design consistency (typography, colors, imagery, layout)
- Responsive design across desktop/tablet/mobile
- Cross-browser compatibility on Chrome, Firefox, Safari, and Edge
Core Features
The website must include a clear, user-friendly navigation system and
necessary interactive elements (e.g., forms, buttons, dynamic
content) to enhance engagement and usability.
Technical Considerations
I will optimize performance by compressing assets, reducing unnecessary
code, and improving image/file sizes and loading logic to ensure fast load
times and smooth UX.
Testing & Deployment
After development, I will conduct responsive, usability, and cross-browser
testing, documenting issues and fixes. The website will then be deployed
(e.g., GitHub Pages / Netlify) and made accessible via a public URL.
Submission
After development, I will conduct responsive, usability, and cross-browser
testing, documenting issues and fixes. The website will then be deployed
(e.g., GitHub Pages / Netlify) and made accessible via a public URL.
- A public live URL
- A brief 800–1,000 word development report in my E-Portfolio
- Upload the final main project folder to Google Drive and include a public link in the E-Portfolio
Some brief introduction
In the previous Website Redesign Prototype, I designed six main pages for the redesigned website: the Home page, About page, Highlights page, Attraction Details page, Contact page, and Feedback page.
During the development stage, I made several adjustments based on practical implementation and interaction needs, while keeping the visual style and overall structure as consistent as possible with the approved prototype to maintain a cohesive and professional experience.
For more detailed design decisions and page planning, please refer to my previous assignment.
1. Process
Navigation Bar
During development, I translated the prototype’s navigation into an interactive fixed header with a category dropdown, keeping the original typography, color scheme, and hierarchy.
 |
| Fig. 1 - Navigation Bar _JPEG, Week 14 (11/11/2026) |
To improve readability and layout stability, I made minor adjustments to the hero section’s background blocks and spacing, shifting to a cleaner white-space-based structure to prevent visual clashes with the dropdown and to maintain consistent alignment across different screen sizes.
During this process, my first challenge was designing the right-side icons as interactive buttons with clear hover states. Since static images alone could not provide consistent state changes, I researched possible solutions and decided to use JavaScript to support the interaction, triggering icon switching and visual feedback on hover.
 |
| Fig. 2 - Icon _JPEG, Week 14 (11/11/2026) |
Footer
In this section, I refined the footer from a more decorative approach to a more functional one. The wave background in the Before version looked visually interesting, but it distracted from the content and affected alignment and reading flow.
 |
| Fig. 3 - Footer _JPEG, Week 14 (11/11/2026) |
In the After version, I simplified the background and strengthened whitespace and column structure, keeping links and information as the main focus for a clearer, more stable layout.
Back To Up Button
When implementing the Back to Top button, I initially used a straightforward approach by targeting the element with an id and triggering a scroll-to-top action with JavaScript.
 |
| Fig. 4 - Back To Up _JPEG, Week 14 (11/11/2026) |
Later, I refined the structure by wrapping the icon inside a button + image element, using the .backtotop class in CSS to fix it at the bottom-right corner, and adding a media query to keep its size and position stable across different screen sizes.
In JavaScript, I first checked whether the button exists before attaching the click event, and used window.scrollTo({ top: 0, behavior: "smooth" }) to create a smoother scrolling experience.
Home Page
Originally, I planned two interactive sections on the Home page: a switching effect for Top Destinations, and a Review section. But honestly, the Review part kept breaking during development—sometimes the layout went messy, sometimes the function wasn’t stable. Every time I fixed one issue, another one appeared, and it started affecting the overall progress. So in the end, to keep the website more stable and complete, I decided to remove the Review section and focus on the core content.
For Top Destinations, I really wanted to keep it because it improves the user experience. I tried a few different methods at first, but a friend suggested a more reliable approach—using JavaScript to support the content switching. That way, users can click to switch images/text smoothly, and the interaction becomes much more stable and user-friendly.
 |
| Fig. 5 - The Javascript that used in Top Destinations Section _JPEG, Week 14 (11/11/2026) |
About Page
For the About page, the content is quite long, so I didn’t want users to scroll forever to find what they need. That’s why I added a simple quick navigation / section jump (e.g., History, Climate, Culture). It lets users jump directly to the section they want, making the reading experience smoother and more practical.
 |
| Fig. 6 - Index in About Page_JPEG, Week 14 (11/11/2026) |
Besides that, to avoid having everything flow in the same direction on the About page, I used flex-direction: row-reverse to flip the image-text order in certain sections. This creates an alternating rhythm, improves readability, and makes the page feel more dynamic.
 |
| Fig. 7 - Row-Reverse_JPEG, Week 14 (11/11/2026) |
Galllery Section
 |
| Fig. 8 - Gallery Section in Final Outcome_JPEG, Week 14 (11/11/2026) |
For the photo gallery sections on the Cameron Valley page and the Tea Plantation page, I also used JavaScript to support image switching, allowing users to click thumbnails buttons to update the main image. While the core function works as intended, the final result still differs slightly from my original prototype due to layout responsiveness and image ratio constraints. However, I kept the same visual style and browsing logic so the interaction remains intuitive and easy to use.
Form
For the form design, my goal was to keep it “clean, easy to fill, and less error-prone.” I separated the inputs into clear groups (e.g., basic info and message content) and paired each field with a label so users know exactly what to enter.
 |
| Fig. 9 - Form_JPEG, Week 14 (11/11/2026) |
To reduce invalid submissions, I added required logic and simple prompts, like warning when fields are empty, and improved usability by providing visible hover/focus feedback on inputs and buttons.
Since the site is not connected to a back-end/database, the form currently redirects to a confirmation page that hasn’t been created yet, resulting in a 404.
Media
For cross-device optimization, I focused on the navigation bar, image ratios, and section spacing. On smaller screens, elements wrap/scale automatically to prevent overflow and misaligned buttons, creating a more stable reading and tapping experience.
 |
| Fig. 10 - Google Chrome in PC_JPEG, Week 14 (11/11/2026) |
Fig. 11 & 12 - Safari in Phone & Edge in Ipad_JPEG, Week 14 (11/11/2026)
My Final Outcome
Click Here to Watch My Final Website: Cameron Highlands
This is my Final Main Project Folder:
Interactive Design_Final Project
REFLECTIONS
This project, which involved creating a fully deployable prototype, revealed a significant difference between "design" and "production." Many aesthetic details (such as responsiveness, alignment, hover states, and page stability) constantly presented problems during development, requiring continuous testing, revisions, and further testing. While some features had to be removed or simplified, it taught me a more pragmatic approach: prioritize the core experience and then gradually refine the details. Overall, this project streamlined my development process and made it clearer that UX decisions must be considered alongside technical implementation.