PROJECT 3 | FINAL WEBSITE REDESIGN
05/11/2025 - 11/01/2026 (Week 7 - Week 16)
LIST OF CONTENT :
LECTURE NOTES
CLICK HERE FOR W3 NOTES.
FINAL PROJECT
INSTRUCTIONS
Develop a fully functional website with a minimum of five (5) pages based on your approved prototype. The final site should reflect all design, usability, and user experience decisions made throughout the redesign process.
Assignment Requirements
- Implementation: Build the website using HTML, CSS, JavaScript, or relevant frameworks (e.g., Bootstrap).
- Design Consistency: Match the approved prototype in typography, color scheme, layout, and imagery.
- Responsive Design: Ensure the website adapts to desktop, tablet, and mobile devices.
- Cross-Browser Compatibility: Confirm functionality across major browsers (Chrome, Firefox, Safari, Edge).
Core Features
- Navigation: Provide clear and intuitive navigation across all pages.
- Interactivity: Include appropriate interactive elements such as forms, buttons, or dynamic content.
Technical & Final Requirements
- Performance: Optimize for fast load times using efficient code and minimized file sizes.
- Testing: Perform usability, responsiveness, and cross-browser testing; document issues and fixes.
- Deployment: Host the website on a live platform (e.g., GitHub Pages or Netlify) and provide a public URL.
PROJECT LINKS
Original Website : ASPAC Malaysia
Proposed Redesign : Working File
Google Drive : GCD60904 | Erin Fenner | Final Project
Redesigned Website : ASPAC Website Redesign Project
PROCESS WORK
This project required me to redesign the ASPAC Malaysia website and produce a fully responsive final outcome that reflected both strong visual design and functional usability. Over the course of this project, I progressed from early analysis and proposal development to prototyping, implementation, feedback iteration, and refinement. More importantly, this project helped me understand how design decisions and technical implementation directly affect one another in real-world web development.
Initial Analysis and Design Intent
At the beginning of the project, I analysed the existing ASPAC Malaysia website to identify weaknesses in usability, layout, and visual consistency. The original site lacked a clear hierarchy, relied heavily on inconsistent colour usage, and did not translate well to mobile screens. From a user perspective, this made navigation and content discovery more difficult than necessary.
Based on this analysis, I established several design goals for my redesign:
- Improve clarity of navigation and content structure
- Create a consistent visual identity aligned with the brand
- Ensure responsiveness across desktop, tablet, and mobile devices
- Strengthen calls-to-action to guide user behaviour
These goals guided all subsequent design and development decisions.
Proposal and Prototyping in Figma
Before beginning development, I created a detailed proposal and prototype using Figma. This stage was critical in allowing me to explore layout ideas, test user flows, and establish a design system without the constraints of code. I designed the Homepage, Our Story page, and Contact page, as these represent the core user journey through the site.
I also developed a component-based system, including navigation bars, CTA buttons, footers, and form elements, each with light and dark variants. This helped me think more systematically about consistency and reuse. At this stage, my focus was primarily visual, and while the design appeared cohesive in Figma, I later learned that translating these decisions into responsive code introduced new challenges.
Prototype Link : Prototype View
*Note: There is a slight lag when viewing from embeded prototype. Click link for smoother viewing.
Consultation Feedback
During my consultation on 18/12, I presented my Homepage, Contact page, and Our Story page. The feedback I received was a turning point in my project, as it highlighted issues that were not immediately obvious to me during the design phase.
One key piece of feedback was that my CTA buttons were too subtle. While they matched the overall aesthetic, they failed to stand out as primary actions. Reflecting on this, I realised I had prioritised visual harmony over usability. In response, I increased the size of the CTA buttons and introduced stronger colour contrast to improve visibility and interaction clarity.
I was also advised to use relative units (
em) instead of fixed pixel values, which made me more conscious of accessibility and scalability. Implementing this change improved the site’s responsiveness and made resizing behaviour more predictable across devices.Refining Visual Identity and Branding
Another major reflection point came from feedback stating that my overall colour palette did not fully align with the ASPAC Malaysia brand. Although my initial palette was visually pleasing, it lacked cohesion with the organisation’s identity. Revisiting this forced me to reassess my design decisions beyond personal preference.
I refined the colour palette to better reflect the brand’s tone and values, which significantly improved the coherence of the site. I also changed the testimonial box colour on the Our Story page to reduce visual distraction while maintaining emphasis on user voices.
Adding a background to the header further strengthened visual hierarchy and improved readability when scrolling. These adjustments helped me understand how subtle visual changes can have a large impact on usability.
Contact Page and Interaction Improvements
The Contact page became one of the most challenging and educational parts of the project, particularly in terms of interaction design and code stability. Based on feedback, I redesigned the contact form input boxes by improving spacing, borders, and focus states. These changes made the form clearer and more intuitive for users, especially on smaller screens.
During consultation, I was advised to include a reset button that would appear once the user started typing in any input field. I initially attempted to implement this feature using JavaScript, however, I encountered significant issues where adding this interaction caused unexpected behaviour across other parts of my code. Changes made to support the reset button began to interfere with layout styling, responsiveness, and existing form functionality.
As I continued troubleshooting, I realised that further attempts to implement the reset button would require a larger refactor of my codebase, which risked breaking other core features close to the submission deadline. After reflecting on this, I made the decision not to implement the reset button in the final outcome. Instead, I prioritised overall site stability, responsiveness, and usability.
Although the feature was not included, the process was still a valuable learning experience. It helped me better understand how interconnected different parts of a website can be, especially when using shared styles and scripts. This experience also highlighted the importance of planning interactions early and considering technical feasibility alongside design intent.
Despite this limitation, I ensured that the contact form remained clear, accessible, and functional. I also successfully improved the footer by linking the organisation’s address directly to external map services such as Google Maps, Apple Maps, and Waze, which enhanced real-world usability.
Development Challenges and Technical Reflection
During development, one of the most challenging aspects was that editing one part of the code often affected other areas of the website. For example, changing layout spacing or resizing elements on one page would unintentionally impact shared components like headers, footers, or buttons elsewhere.
This issue became more apparent when working on responsiveness and resizing. Small changes at one breakpoint sometimes caused unexpected layout shifts at another. Through this, I learned the importance of properly structuring CSS and isolating page-specific styles from global components.
To overcome this, I reorganised my CSS, made styles more specific where necessary, and relied more heavily on reusable components. This experience significantly improved my debugging skills and deepened my understanding of how CSS inheritance and layout systems function.
REFLECTION
Project 3 was honestly more difficult than I expected, and at times it felt overwhelming. Going into the project, I thought I had a clear idea of what I wanted the redesign to look like, but once I started working on it, that confidence quickly faded. I struggled with turning abstract ideas into something concrete, and there were moments where I felt stuck, unsure if my design choices were good or if I was moving in the right direction at all. This made the process frustrating and, at times, discouraging.
There were several points during the project where I had to completely rethink my work. I would spend a long time on a layout or design element only to realize it wasn’t working the way I imagined. Letting go of ideas I liked was difficult, especially after putting so much time into them, but it forced me to be honest with myself about what actually improved the design versus what I just wanted to keep. This taught me that good design sometimes means sacrificing personal preference for clarity and usability.
Emotionally, this project tested my patience. Progress felt slow, and it was easy to compare my work to others and feel like mine wasn’t strong enough. However, pushing through those moments helped me realize that struggle is part of learning, especially when working in a creative field. Each mistake made me more aware of my habits as a designer and helped me better understand how to approach problems instead of avoiding them.
By the end of Project 3, I felt a sense of accomplishment, not because the redesign was perfect, but because I didn’t give up when things became difficult. I gained a deeper respect for the design process and for the amount of thought required before a website is even built. This project showed me that growth often comes from discomfort, and while it challenged my confidence, it also helped me build it. I now feel more prepared to approach future projects with patience, openness, and a willingness to revise rather than expecting everything to work perfectly on the first try.