雙和醫院：官網改版專案

Overview

Led the complete redesign of the official website, rebuilding the homepage visual language and information hierarchy. The site evolved from a purely functional portal into a clear, modern, and distinctive public‑facing entry point.

Background

During the Omicron surge, the hospital’s legacy website struggled to deliver critical information and no longer reflected a modern public‑facing image. This became the starting point for a multi‑year redesign and ongoing optimization.

At the time, COVID information lived inside quick‑link buttons on the homepage, but users reported they couldn’t find what they needed, didn’t understand the labels, and found the flow hard to use. These insights drove a restructuring of the homepage and content hierarchy.

The COVID‑19 screening and vaccination buttons were placed directly above the “Latest News” section as quick links. This ad‑hoc placement bypassed basic UX considerations and created confusion, which highlighted the need for a clearer information structure.

Context

The work unfolded in three waves: first during the pandemic, then through the sustainability initiative, and finally the accreditation preparation—each triggering a significant round of updates.

Research

Rather than simply “making a new website,” the goal was to build a reliable public‑facing entry point for high‑stakes medical information.

We reviewed hospital websites across Taiwan and abroad to understand how they structure critical content, prioritize information in urgent contexts, and communicate trust. Those insights guided the new hierarchy and interaction patterns for Taiwan’s medical context.

Key Updates

1. Hero Section

   Replaced the announcement-style banner with a hospital‑focused hero carousel to strengthen credibility and first impressions, while redesigning the quick‑link buttons to be more visible and scannable so critical tasks are accessible from the homepage.

   

2. Public Service Hub & News

   Added a dedicated “convenience” area for high-demand links like vaccination and screening. The .alert system was re-implemented as a high-visibility CTA tool, ensuring critical emergency updates remain prominent at the top of the news hierarchy.

   

3. Doctor Promotion

   Created a new spotlight area to feature doctors and specialists, helping patients find the right care providers while promoting the hospital’s expertise.

   

4. Social & Media Sections

   Added social and video content blocks to broaden communication channels and keep updates more engaging.

   

5. Gratitude Section & Footer

   Introduced a warm “thank you” area to highlight patient appreciation and humanize the hospital’s public presence, while redesigning the footer to include quick links, contact information, and social media icons for easier navigation and improved accessibility.

   

6. Subpage Templates

   Refined default department page layouts to improve consistency across units and simplify ongoing maintenance.

   

   Adjusted the backend editing structure to reduce friction for content updates and improve long‑term manageability.

   

   Created a user guide to help staff navigate the new CMS and update content more efficiently.

   

7. Sustainability Microsite

   Launched a dedicated ESG microsite to showcase sustainability initiatives, progress, and related resources in a structured, standalone section.

   

   The microsite highlights sustainability initiatives, progress metrics, and stakeholder resources with clear navigation and engaging content presentation to showcase impact and drive transparency.

   

Impact / Results

The redesigned website successfully transformed the hospital’s online presence, enhancing user experience and strengthening brand identity. The new structure and visual language improved information accessibility, making it easier for patients and visitors to find critical updates and services.

• Established a clearer hierarchy and navigation logic, improving first impressions and readability
• Standardized content presentation to reduce information gaps across departments and improve collaboration
• Built modular page templates to support long‑term content updates and rapid project launches
• Strengthened brand recognition and became a reference case for other medical centers
• Shifted the site from an “announcement board” to a communication and brand gateway
• Lowered the barrier for public inquiries, indirectly reducing repetitive front‑desk and customer‑service requests

Learnings

1. Bridging Modern Design with Technical Constraints

   Working within legacy frameworks (Bootstrap 3/4) taught me how to achieve a modern visual language without compromising system stability. I learned that professional UI isn’t just about aesthetics, but about balancing brand consistency with technical accessibility, such as fine-tuning color depths to ensure legibility across all digital touchpoints.

   

2. Designing for Scalability and Systematic Maintenance

   Over the course of this two-year project, my focus shifted from “fixing pages” to “building systems”. By centralizing code and creating modular subpage templates, I established a sustainable architecture that allowed the hospital to scale efficiently—from urgent pandemic updates to the rigorous requirements of Medical Center Accreditation.

3. Prioritizing Clarity in High-Stakes Environments

   In a healthcare context, I realized that clarity is the highest form of empathy. I learned to restructure information based on user intent rather than internal hospital departments, ensuring that critical services remain accessible during high-pressure periods while maintaining a trustworthy and human-centered brand image.