16.06.2025 - 27.07.2025 (Week 9 - Week 14)
Nur Asma’ Binti Anuar / 0378095 / BDCM
Interactive Design
Final Project
____________________
LECTURES
Refer to Lecture Blog: Lecture & Exercises
____________________
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 frameworks (e.g., Bootstrap).
Design Consistency: Ensure that the final design remains
consistent with the approved prototype, including typography, colour
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 Optimisation: Optimise the website for fast load
times by minimising 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).
1.0 Recap Prototype:
For this final project, I will be using the layout of the prototype I did in Figma for Project 2 (Project 2). Navigations, layout, and design will all be the same in the final output.
 |
| Fig1.1 Figma Prototype |
2.0 Project:
This website page is set in 1024px of width size as its maximum and 500px for its minimum for mobile use.
2.1 Homepage:
Logo: To start, I renewed the original logo of the website to be in a higher quality by using Procreate on my iPad with a transparent background.
 |
| Fig.2.1.1 Renewed MPM logo |
Hero: After that I went ahead to start the layout of the hero section of the homepage by using a table to input the logo, the name of the website, the language options, and the dropdown menu. I use the hover effect for the language options to become a button and navigate it to a different page, and for the dropdown menu to show the navigation options to the home, about, service, charter, and contact page.
 |
| Fig.2.1.2 Hero section of homepage |
Then comes the About Examination section of the homepage. This section gives the information for each type of exams for the students, such as STPM, MUET, SKBMW, and MoD. By using the dropdown menu for each exams tablet, it gives a dummy link for each points within the respected examination tablet with using a hover effect to indicate the user for each points they want to speculate.
 |
| Fig.2.1.3 About Examination section |
After that is the Exam Countdown section. This section I use bootstrap to use the countdown code (in days) for each respected exams as well as using a table to place them in an organize order.
 |
| Fig.2.1.4 Exam Countdown section |
After I'm done with that section, then comes the our partners section. For this section, I use the symbols provided by Google Symbols for each respected tablet for its logos and to add in a border for a button look.
 |
| Fig.2.1.5 Our Partners section |
Then comes the News & Announcements section. For this section, I also use bootstrap for the carousel code so that it would move or swipe horizontally automatically, and can manually do it by pressing the button given. For the content, I search up background pictures on Pexels, and for the caption, I use the hover code to indicate that navigates to a dummy page by clicking on it.
 |
| Fig.2.1.6 News & Announcements section |
Then later I did the same layout for the registration section as I did with the news and announcements section, except that this one is a manually navigation instead of a carousel. I did a small practice in another page to fully understand and make sure the layout is correct before inputting it in the main page.
 |
| Fig.2.1.7 Registration section |
Then the last part is the footer contact and its copyright section. For the homepage, I included, the website logo to refer back to the top page, contact footer to navigate to the contact page, helpful links to navigate to the service page, and the copyright with the partnerships in the original website.
For the links that are under get in touch, I linked them to the contact page in each respected sections, and the same goes for the links under helpful links but with the service page.
 |
| Fig.2.1.8 footer |
2.2 About page:
First comes the main hero section from the main page, as it stays for every page. Then comes the subheading section, I input each button to each of the sections of the page, and I placed it in sticky mode so that when you scroll down it stays in place and the user can easily manage and access the sections of the pages.
Then comes the CEO section, I placed them in an organized manner from the recent to the first person in a justified alignment, given the name and the date of their time as chiefs.
 |
| Fig.2.2.1 CEO section |
Then comes the background section, I copied the content from the original website and align them in a consistent manner. The same goes for each sections. As for the structure section, I input the picture given by the original website along with the content.
 |
| Fig. 2.2.2 about page content sections |
As for the footer, I only input the copyright claims and the partnership for every other pages without the contact footer.
2.3 Contact page:
For the contact page, I placed a forum as the first section for the user to input their contact informations or leave a note.
 |
| Fig.2.3.1 contact forum section |
Then comes the call us and our email section to provide the contact informations of the original website. I used the call icon given from google symbol next to the phone numbers.
 |
| Fig.2.3.2 call us section |
After that I searched up the location of the original website from google maps and used its <iframe> embedded code and input it in the page.
 |
| Fig.2.3.3 location section |
 |
| Fig.2.3.4 FAQ & feedback section |
Then last comes the customer service section. For this section I placed the content given in the original website in a consistent way with the page's layout. And then I used a dummy link for each of the contacts., except for the official portal, as I linked it to the homepage. And the footer is also there at the very last.
 |
| Fig.2.3.5 Customer service section |
2.4 Service & Charter page:
For the service page, I input the content given by the original website and placed them in a continuous and consistent manner. The same goes for the charter page. And I used a table to input the charts given in the original website and make the design and colors consistent with the layout of the redesign.
 |
| Fig.2.4 Charter page table section |
2.5 Navigation & Icons:
For the navigations in the homepage, I used the dropdown menu for the hero section for the menu bar, with the icon I used the hamburger symbol provided by google symbol. The same goes for the about examination section and its tablets. Then the language options, I link them to each respective pages with the Malay and English pages. For the logo, I linked it to the homepage (each differently for the Malay and English page) whenever the user is in a different page for easy shortcut. Then I used the symbols from google symbols for the partners icons. Then the carousel navigation that swipes the pictures and its links automatically or manually, the same type goes for the registration section. Then comes the footer where I individually link it to different sections of the contact and service page.
Then later comes the about page. I input the same navigation tools for the hero section. Then comes the subheading section, where it indicates and navigates to the different sections of the about page, and it stays sticky as you scroll down for the user's to easily access.
Lastly comes the contact page. I inserted the forum for the user to input their email and contact information. Then for the call us section, I used the call icon from google symbol and inserted the phone numbers provided by the original website that links to a dummy page. The same goes for the email and the customer service section. Then I use the same dropdown menu for the FAQs and feedback section.
 |
| Fig.2.9 google symbols |
3.0 Final Submission:
Link to Netlify: https://nurasmabintianuar0378095-finalproject.netlify.app/mec
____________________
REFLECTION
Website Overview:
For my project in this module, I used the Malaysian Examination Council government website to redesign its outdated layout and inconsistent design, for the new students to feel more welcoming and have a friendly and simple user interface for them to manage. The website has the homepage and four other pages--About, Charter, Service, and Contact--accessible through the hamburger menu. The homepage provides the main information students and parents need to know for the examinations, with dates, abouts, registration, and announcements that relates with the examinations. It is for a better organization with consistency and a more modernized version and layout of the website for user comfortability and usability.
Challenges and Overcoming:
The hardest part of it all was to understand and use coding as the main tool for designing. Although in the previous project (2), it was difficult to use Figma in the early stages, but as I use it more often, I have gotten used to it, and it was easy to design a website with. However using Dreamweaver as the main tool to create a fully functioning website, as well as designing it, I had some days where I struggle to even understand most parts, to the point I had to ask for help from others, and we all struggled together in the end. But as I kept on going and trying to understand the tutorials, I find that it was actually easy to code in Dreamweaver than trying to code in other html coding sites, such as using div and class, makes everything easier than it was before.
Then comes the CSS, the most difficult part of this entire project. As a beginner, not knowing how to use css was dangerous. For starters, crying was a must, to get on and move forward, crying was the best option. While designing using css, I've tried to understand what to use and what not to use. And in the end, some of it were still questionable for me to fully understand its uses and functions.
Acknowledgments & Reflections:
Although this project was a nightmare from the beginning, I've begin to realize that it's not that deep. Honestly. It taught me more than it needs about website development. Now, whenever I go to a website, I'll always search for the navigation bar and criticize it if it's not easily accessible. Rule number 1 as they say, always make sure the nav bar is easy to find and its accessible.
In the end, it was actually fun to do, the designing, and actually seeing the finish product, makes you think of how proud you are to see it after weeks of struggles, despite it being mediocre, that I can honestly take pride in as a beginner. And even though it was such a struggle, I'm actually glad to take this module, the hardships I've faced together with my friends were something to remember by in the future, along with the constant reminder of the codes from Dreamweaver and the css, that I will not forget in the long run.
Comments
Post a Comment