Interactive Design- Final Project: Final Working Website
✩ 21/4/25 - 11/5/25 (Week 8 - Week 14)
✩ WONG MEI YEE 0367857
✩ Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University
✩ Final Project: Final Working Website
TABLE OF CONTENTS
Instructions
Final Project
Refine website → nctzenbasic.com
1. Introduction
This project involved redesigning the NCT fan support website “nctzenbasic.com,” with the goal of modernising its visual identity, improving usability, and enhancing user engagement. As a fan-driven platform, it plays an important role in sharing updates, events, and resources related to NCT. However, the original site lacked design coherence, accessibility, and clarity—issues that this project set out to address.
2. Design Evaluation & Research
The initial site had several visual and structural flaws, including inconsistent colour schemes, cluttered layout, and poor typography choices. I evaluated comparable fan sites and official group pages for inspiration. I also considered the aesthetic and digital branding of NCT itself—futuristic, bold, and highly visual—as a basis for the redesign.
3. Development Process
I began the design process by sketching low-fidelity wireframes to visualise page structure and user flow. Then, I created an prototype in Figma to explore layout possibilities, responsive behaviour, and navigation clarity. This helped me plan the placement of headings, buttons, images, and text blocks in a balanced way before jumping into code. During this stage, I prioritised clean typography, consistent spacing, and a neutral colour palette to keep the focus on content. I also applied a modular system to ensure every page followed the same visual rhythm.4.
4. Challenges Faced & Solutions
One key challenge was organising the content-heavy “Archive” page, which included numerous entries sorted by date. To maintain clarity, I created collapsible containers grouped by month and used CSS for hover effects and spacing. Another issue was aligning the navigation bar and footer consistently across all pages. This was resolved by creating shared CSS classes and using semantic HTML structure.
5. Design Choices & Justifications
The visual design uses a black-and-white colour palette with bold typefaces to reflect NCT’s edgy and futuristic image. Accent colours are minimal but used effectively in buttons or hover states. I maintained visual consistency through type scale, grid layout, and spacing. Member profiles use high-resolution images with clean alignment to highlight individual identities.
6. Final Outcome
https://wongmeiyee-finalproject.netlify.app/
google drive
→ https://drive.google.com/drive/folders/1V2zzD-OTPd6zSLgmBq4v-UZ2jILB9WQE?usp=sharing
Reflections
Experience
This project gave me the opportunity to redesign an existing entertainment website and improve its structure, usability, and visual clarity. I selected nctzenbasic.com as my subject due to its complex content and outdated interface, which made it a strong candidate for redesign exploration. I began by analysing the original site’s layout, identifying issues such as inconsistent styling, weak visual hierarchy, and cluttered page structures. After sketching wireframes, I developed interactive prototypes in Figma to test layout ideas. I then built the website using HTML, CSS, and JavaScript, creating separate pages for Home, Archive, Members, Events, and Contact. This process allowed me to practice end-to-end design — from research and ideation to prototyping and responsive front-end development.
Observations
Through this redesign, I noticed how design inconsistency — even in small elements like button sizes, type alignment, or margin spacing — can negatively impact user experience. The original website lacked clear structure, which made navigation confusing and reduced content readability. By applying consistent type hierarchy, grid-based layouts, and responsive principles, I was able to greatly enhance the flow and clarity of information. Prototyping in Figma also helped me explore layout balance and visual weight before jumping into code. Overall, this experience showed me that clarity and rhythm in UI design are key to guiding users through a content-heavy site.
Findings
I learned that effective web design requires balancing creativity with structure — especially when dealing with real content. Building a multi-page site from scratch improved my understanding of modular CSS, cross-device responsiveness, and file organisation. I also discovered how front-end development decisions (such as component reuse, padding consistency, or mobile layout adaptation) can strongly affect overall UX. While this was not a real client project, working with an actual existing site gave the redesign process more relevance and depth. This experience reinforced that strong UX doesn’t always require flashy visuals — often, simplicity, consistency, and thoughtful structure are what make a design feel polished and usable.
Comments
Post a Comment