Interactive Design Final Project Websites Redesign Development

 Websites Redesign Development

December 2025 - January  2026

HE KEHUA (0379395)

Interactive Design

Website Link:https://hekehua0379395taylor.netlify.app/

GoogleDrive:https://drive.google.com/drive/folders/1gbCwKKnLJ-5DPHg1JVT4yaFuGPlY3ucX?usp=drive_link


Report

Website Redesign Development Report

Introduction

The objective of this assignment was to transform my approved website redesign prototype into a fully functional, responsive, and interactive website. As a second-year Interaction Design student, this project allowed me to apply design thinking, user experience principles, and front-end development skills in a practical and meaningful way. The final website consists of more than five pages and reflects the visual design, layout decisions, and interaction strategies established in the earlier stages of the project.

This report documents the website development process, key challenges encountered, solutions implemented, as well as testing and deployment. It also reflects on what I learned throughout the project and how it contributed to my growth as a designer.


Website Development and Implementation

The website was developed using HTML, CSS, and JavaScript, with additional support from Bootstrap and DaisyUI frameworks. These tools helped streamline the development process while ensuring structural consistency and responsiveness. The final website includes a Homepage, multiple content-focused pages, and a Contact page, each designed to support a clear user journey.

During implementation, I carefully translated my prototype into code to ensure the final website remained visually and structurally consistent with the approved design. Bootstrap’s grid system was used extensively to manage layout, spacing, and alignment across all pages. This helped maintain consistent margins and white space while adapting smoothly to different screen sizes.

To customise the appearance, I created additional CSS stylesheets to override default framework styles. Instead of overusing the !important rule, I mainly relied on more specific selectors to maintain clean and maintainable code. This approach allowed me to balance creative freedom with technical best practices.

Design Consistency and User Experience

Maintaining design consistency was a key priority throughout the project. Typography, colour schemes, button styles, and layout patterns were kept uniform across all pages to establish a cohesive visual identity. Reusable components such as navigation bars, cards, and buttons were styled consistently to improve usability and familiarity.

From a user experience perspective, the interface was designed to be clear and intuitive. Content was structured using visual hierarchy to guide users’ attention and improve readability. Interactive feedback, including hover states, transitions, and subtle animations, was added to communicate interactivity and enhance overall engagement without overwhelming the user.

Responsive Design and Accessibility

The website was designed to be fully responsive, adapting seamlessly to desktop, tablet, and mobile devices. Bootstrap’s responsive grid system was combined with custom media queries to fine-tune layouts at different breakpoints.

Some sections, particularly horizontally scrollable card areas, required manual adjustments to ensure usability on smaller screens. Font sizes, spacing, and interaction areas were refined through iterative testing to improve the mobile experience.

Basic accessibility principles were also considered. Semantic HTML elements were used to improve structure and readability, while sufficient colour contrast and readable font sizes were maintained to support accessibility and inclusive design.

Interactive Elements and Core Features

Several interactive elements were implemented to enhance user engagement and functionality. A clear navigation system allows users to easily access all key areas of the website. Interactive components such as carousels, horizontal scrolling cards, expandable content sections, and form inputs were included to create a more dynamic experience.

One of the key features is the horizontal scrolling card section, which allows users to browse content by dragging or using navigation controls. JavaScript was used to manage scrolling behaviour and interaction states, ensuring smooth performance across different screen sizes.

Forms were also implemented on relevant pages to collect user input. After submission, visual feedback such as pop-up overlays was displayed to confirm user actions, improving clarity and user satisfaction.

Challenges and Problem-Solving

One of the main challenges was implementing the horizontal scrolling card layout. This required combining CSS layout techniques with JavaScript logic to manage dragging behaviour, scrolling limits, and responsiveness. Initially, the interaction felt inconsistent across devices. Through research, experimentation, and refinement, I adopted a multi-column slider approach and adjusted the number of visible cards based on screen size, which significantly improved usability.

Another challenge involved customising framework components while maintaining design consistency. Some default styles conflicted with my intended design. This issue was resolved by refining CSS specificity and organising custom styles more effectively.

Responsive design also presented challenges, especially when adapting complex layouts for mobile devices. These issues were addressed through repeated testing and layout adjustments.

Testing, Performance, and Deployment

Testing was conducted throughout the development process, including responsiveness checks, usability testing, and cross-browser testing on Chrome, Firefox, Edge, and Safari. Identified issues such as layout inconsistencies and interaction bugs were documented and resolved.

Basic performance optimisation techniques were applied, including minimising unnecessary code, reusing components, and optimising asset sizes. The final website was deployed using Netlify, providing a stable public URL that meets the assignment submission requirements.

Reflection

This project was both challenging and rewarding. It strengthened my understanding of how design decisions translate into functional user experiences and improved my confidence in front-end development. Although there were moments of frustration, especially when solving interaction-related issues, overcoming these challenges significantly improved my problem-solving skills.

Overall, I am proud of the final outcome. While there is still room for improvement, this project represents an important milestone in my development as an interaction design student and has prepared me for more complex projects in the future.






Comments

Post a Comment

Popular posts from this blog

Interactive Design Exercise 1

Image
Exercise 1 Week 1 Website Analysis For this exercise, I have selected five websites to review and analyze. The focus is on examining their design, layout, content, and functionality, while identifying strengths and weaknesses that influence the overall user experience (UX). Each analysis highlights the site’s purpose, main color palette, visual presentation, and interactive features, followed by an evaluation of how effectively the website communicates with its intended audience. Finally, recommendations are provided to suggest potential improvements for usability, performance, and brand impact. 1. https://www.juice.agency 2. https://culinaryodissey.uprock.pro 3. https://joseph-san.com 4. https://atom.uprock.pro 5. https://xlncdigital.com 1.   Website: juice.agency  （https://www.csswinner.com/winners） Purpose and Goals Juice is a creative branding and digital agency. Its main goal is to showcase its capabilities in branding, web design, and marketing, while also attracting po...
Read more

Spatial 2 assignment 1

Image
Here are the project what we shuld do. 🧠 Assignment Overview: You are required to conduct a precedent study and analysis of two retail stores: One international (overseas) store – researched online. One physical store – that you can visit in person. This assignment is individual and counts for 20% of your final grade. 🎯 Objective: To apply design processes critically and creatively by analyzing real-world retail environments. You will propose innovative, context-specific solutions that improve spatial quality, customer experience, and brand identity. 📌 Analysis Areas to Cover: Store Overview Name, location, and type (e.g., fashion, electronics, lifestyle) Brief brand history or background Design Features Layout: Floor plan sketch; how the layout guides flow and interaction Materials: What materials are used and their functional/aesthetic effect Lighting: How lighting contributes to mood and experience Color Scheme: How color supports brand identity and ambiance Brand Identity How...
Read more

Spatial design 2 FINAL

Image
Starbacks Name:HE KEHUA Student ID:0379395 This is my spatial design. This is my sketch at the beginning. This is my initial modeling. The teacher asked me to modify it. Put the order area at the door. Add a little designed locker to the empty area. After the teacher gave feedback, I revised and improved the content. Light In the last class, the teacher continued to give me some feedback, asking me to continue to make changes on my existing basis, slightly increase the children's area, the bad material of the floor of the service area, and install a window at the gate, and put two small mats under my two apple core cabinets. Here are the final project i made
Read more