Interactive design: Final Project
23.06.2025 - 27.07.2025 / Week 10- Week 14
Muhammad Baihaqi Desya (0377271)
Interactive Design / Bachelors Of Creative Media / Taylor's University
Final Project
Instruction
Final Project Report: RS Awal Bros Website Redesign
This report details the process and outcomes of my final project, which involved redesigning the RS Awal Bros website.
Project Overview
The core objective of this final project was to develop a functional and responsive five-page website prototype. Key requirements included a consistent design, cross-platform compatibility, clear navigation, interactive elements, performance optimization, and robust technical considerations. The project culminated in a final testing phase before deployment to a web hosting platform.
For this final project, I chose to redesign the website for RS Awal Bros, a prominent hospital group.
Rationale for Choosing RS Awal Bros Website
I decided to redesign the RS Awal Bros website for several compelling reasons:
Prominent Healthcare Provider: RS Awal Bros is a well-known and significant healthcare institution in Indonesia, serving a large patient base. A well-designed, user-friendly website is crucial for such a vital service.
Opportunity for Enhanced User Experience: While the existing website provides necessary information, I identified opportunities to significantly enhance the user experience, particularly concerning ease of navigation, information accessibility, and overall aesthetic appeal.
Improving First Impressions: For many potential patients, the website is the first point of contact with the hospital. A modern, professional, and intuitive design can build trust and confidence even before a physical visit. I aimed to create a more welcoming and efficient digital gateway for their services.
Bridging Information Gaps: My goal was to streamline how information about services, doctors, appointments, and general health resources is presented, making it easier for users to "Reach Us Fast, Understand Your Condition Sooner."
Demonstrating Responsive Design & Modern UI/UX: The healthcare sector can greatly benefit from cutting-edge web design. Redesigning RS Awal Bros allowed me to apply principles of responsive design, clear navigation, and engaging interactive elements to a real-world, high-stakes context.
The goal of my redesign was to make the website look more professional, modern, and user-friendly, ensuring a seamless experience for patients seeking information or services.
Website Development Process
The website development process commenced with the foundational HTML structure. I began by creating the index.html file, serving as the homepage for the RS Awal Bros website redesign.
Initially, my focus was on constructing the primary navigation bar. This navigation was designed to provide clear pathways to essential sections: the Home page, About page, Services page, and Contact page. To enhance brand identity and user recognition, the RS Awal Bros logo was strategically placed on the top left of the navigation bar. For mobile responsiveness and improved user experience on smaller screens, a "bars" icon (often used for a hamburger menu) was incorporated on the top right.
Crucially, I integrated visual indicators for every page to ensure users are always aware of their current location within the website, improving overall navigability. Furthermore, a key interactive element was added: a dropdown menu for the "Services" button. This dropdown expands to reveal additional sub-pages, including specific medical "Services" offered, "Doctors" profiles, and potentially a "Patient Resources" section, allowing for a more organized and detailed presentation of information.
Following the completion of the HTML structure, the next critical step involved styling with CSS. I meticulously crafted the CSS to format the entire navigation bar, ensuring a clean, professional, and consistent appearance. This included implementing hover effects for navigation links and dropdown items, as demonstrated in the provided CSS snippet (similar to Fig 1.1, which shows styling for .dropdown-content a:hover), to provide visual feedback to the user. The style.css file was then linked to the index.html file to apply these design specifications.
This systematic approach ensured a robust, user-friendly, and aesthetically pleasing navigation system for the redesigned RS Awal Bros website.
 |
| Css for the drop down menu |
 |
| this is the result of making the drop down menu |
index.html). This section was designed to clearly showcase and highlight the various excellent services available at RS Awal Bros, providing visitors with a quick overview of the breadth of care offered by the hospital. This allows users to promptly see how many and how diverse the specialized services RS Awal Bros possesses are. |
| this is the html |
 |
| This is the result |
After completing the design and development of the homepage, I proceeded to create the individual service pages to provide detailed information to users. An example of this is the "Alarm Center" page, which I developed to specifically elaborate on RS Awal Bros' 24-hour emergency medical services, including the Emergency Department (IGD) and the comprehensive care provided across its various branches.
 |
| This is the Html |
 |
| This is the Result |
After making all of that i continue to make the footer.
Reflection on the RS Awal Bros Website Redesign Project
Developing the RS Awal Bros website prototype has been a comprehensive and incredibly insightful journey, bringing together various aspects of web development from conceptualization to deployment.
Recap of Objectives: The primary goal was to create a functional, responsive, five-page website with a consistent design, cross-platform compatibility, clear navigation, interactive elements, and optimized performance. My decision to redesign the RS Awal Bros website stemmed from a desire to enhance its professionalism, modernize its appearance, and significantly improve the user experience for a crucial public service.
What I Learned and Achieved: This project reinforced the importance of a structured development process, from initial planning and HTML markup to detailed CSS styling and ensuring full responsiveness. I gained deeper experience in:
HTML Structure: Building a robust and semantic HTML foundation for multiple pages, including the homepage (
index.html) and individual service pages (like the "Alarm Center").CSS Styling and Responsiveness: Mastering CSS to transform a basic structure into a visually appealing and professional interface, adapting seamlessly across various devices. The implementation of dropdown menus, in particular, was a valuable exercise in combining HTML structure with precise CSS positioning and hover effects.
User-Centric Design: Consistently thinking about the end-user (patients seeking medical information) guided design choices, such as clear navigation pathways, prominent call-to-actions, and easily digestible content for featured services.
Content Organization: The process of breaking down the hospital's vast services into manageable, dedicated pages (e.g., "Featured Services" on the homepage and detailed service pages like "Alarm Center") was crucial for information architecture.
Deployment: The final step of deploying the website to a live platform like Netlify provided hands-on experience with making the project accessible to a wider audience, solidifying the entire development cycle.
Challenges and Overcoming Them: One of the key challenges was ensuring that the design remained clean and minimalist while still conveying the extensive information a hospital website requires. Balancing visual appeal with informational density, especially in areas like "Featured Services" and detailed individual service pages, demanded careful attention to layout and typography. Ensuring smooth and intuitive navigation across five pages, particularly with the implementation of dropdowns, required meticulous planning to avoid clutter and maintain usability. Optimizing performance, despite incorporating images and interactive elements, was another area that required careful consideration to ensure quick loading times.
Overall Reflection:
This project has been a significant learning experience, consolidating my understanding of full-stack (front-end focused) web development. Seeing the project evolve from a concept to a fully functional and publicly accessible website at
.png)
Comments
Post a Comment