CHIAH CAI JUN 0365352
Bachelor of Interactive Spatial Design / Taylor's University
Interactive Design / Sept 2025
Week 11 - Week 14
---------------------------------------------------------------------------------------------------------------------------
FINAL PROJECT: WEBSITE REDESIGN PROTOTYPE
Instructions
In this project, we are required to bring our website redesign to life by developing a fully functional website with a minimum of 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:
We are required to develop the final working website based on the redesign proposal and prototype. This website should be fully functional, demonstrating our ability to implement web design principles, front-end development techniques, and best practices in user experience (UX) and accessibility:
We are required to develop the final working website based on the redesign proposal and prototype. This website should be fully functional, demonstrating our 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 framework (e.g., Bootstrap).
- Design Consistency: Ensure that the final design remains consistent with the approved prototype, including typography, color 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.
Introduction
RJ Clinic's redesigned website is a high-fidelity project developed to improve the current RJ Clinic's website, continuing the goal of translating medical aesthetic expertise into a professional and seamless user experience. Structurally, the project is composed of five distinct HTML pages: Home, About Us, Aesthetic Treatments, Locate Us, and Book Consultation, each serving a specific purpose in the patient journey. The site's visual identity is crafted using CSS to style every detail, and some JavaScript is used to assist with basic animations and functional logic.
Figure 1 index.html coding screenshot in Dreamweaver
Design Consistency
The website closely match the Figma prototype in both layout and style. For the typography, I used a consistent type scale throughout the website, with Montserrat applied for Heading and DM Sans for body text to remain brand consistency and readability.
As purple is the colour that represents RJ Clinic's brand identity over different platforms (their logo, social platform profile, uniforms of the doctors), I remained to use the colours but made minor changes on some of hues. Besides, purple, I also used coral pink to represent CTA buttons throughout the website to attract user's attention while remaining colour consistency for carrying a familiarise function of extended reading. The colours used in developing the website is carried from the previous prototype made. Here are the main colours that I used:
- #522662 (Dark Purple) Header
- #A394B4 (Purple) Section & Footer
- #E6E0E9 (Light Purple) - CTA Banner
- #F4A5A0 (Coral Pink) - CTA Buttons
- #FFFFFF (White)
Figure 2 Figma Prototype Overview
Responsive Design
The website was developed using a desktop-first approach, prioritising the user's view on larger screens for an optimal layout and design experience. Media queries are needed to scale the components for fitting into a mobile view. Initially, the transparent navigation bar was designed for the impact on desktop, but it was then transitioned to a solid purple background in mobile views to ensure text readability without being hidden by the hero image. Besides, having floating WhatsApp buttons and Book A Consultation CTAs were repositioned to remain accessible without obstructing the main content flow during vertical scrolling.
Navigation
The website features a transparent background that allows it to sit directly on top of the hero layout. This creates an airy feel that makes the hero layout bigger. The active page link text on the navigation bar is always pink and underlined, whereas if users hover their cursor on the navigation bar, the other page link texts will be highlighted as well. Unlike other link texts, the most important CTA, which is booking a consultation, is being styled in a white, rounded button, making it stand out.
I also added hyperlinks to the buttons and text links at the footer, allowing users to read more on another webpage, or directing them to one of the five redesigned website pages that I created.
Interactive Elements
I added a modal pop-up after submitting the enquiry forms and booking consultation forms. This is used to tell users that their submission is being confirmed and the clinic staff will get back to them as soon as possible.
Besides, animated hover effects on buttons are applied to show visual feedback. When the cursor is located on the buttons, the buttons will change their current states by either showing a border (pink Read More CTA buttons turn into white buttons with pink borders), changing the colours of the texts (purple text in white Book A Consultation CTA button turn pink) or even a darker colour being replaced (pink Submit button turns into purple). Differentiating the colours and hover effects for each button tells that they all serve different purposes.
Performance Optimisation
updating in progress
Testing Process
updating in progress
Challenges
One of the specific challenges encountered was organising the navigation buttons on the Aesthetic Treatment page, particularly as they required functional anchor links that remained accessible to the user. Initially, I used absolute positioning to keep the buttons at the bottom of the hero section, but on mobile devices, this caused them to overlap with the text as the screen height decreased. To solve this, I had to "unstick" the fixed positioning in the media queries and transition to a relative Flexbox layout, ensuring the pink "pill" buttons followed the content flow naturally rather than floating independently.
Hyperlinks
Experience
Developing the RJ Clinic website was a journey of translating medical professionalism into a functional digital experience. The experience allowed me to put my front-end development and design skills into real practice, moving beyond my previous work with game assets and interactive art to create a high-fidelity business site. Throughout the process, I learned how to translate a visual design into functional, responsive web pages while maintaining a consistent brand identity, specifically through the use of a unified colour palette and professional typography. One of the key takeaways was understanding the importance of layout structure and responsive design; although I started with a desktop-first mindset, I later adapted the layout for smaller screens using media queries and flexible units to resolve stacking errors and spacing issues.
Observation
My observation was that design choices developed from the purple-themed colour palette to specific component reuse directly affect user perception and usability. I faced technical challenges like avoiding horizontal scrollbars and ensuring that elements like the "ZigZag" rows and treatment carousels scaled correctly. Overcoming these obstacles, it deepened my understanding of HTML and CSS.
Personal Thoughts
Although it's a challenging process to develop my design from Figma to a real website, as I need to consider the information placement and transform each section into multiple different <div> boxes. Organising the website content took the most time. However, it helped me grow not only as a designer but also as a problem solver. Overall, this project highlighted that professional web development requires constant refinement of the hierarchy between desktop and mobile views to ensure a seamless experience across all platforms.
Comments
Post a Comment