茂盛醫院官方網站：
https://www.ivftaiwan.tw/
一個醫療網站真正困難的，往往不是畫面怎麼設計，而是當醫師、科別、掛號、看診進度、交通資訊與上千篇衛教文章同時存在時，使用者到底該從哪裡開始？
2023 年，我們花了約十個月完成茂盛醫院官網改版。
從 Wireframe、資訊架構、網站視覺，到約 1400 篇既有文章的資料移轉，這也是超能力設計這幾年做過時間最長、資訊量也相當龐大的一個網站專案。
這篇文章最早寫於網站上線的 2023 年。
2026 年重新整理文章結構與部分文字，但仍保留當時的專案背景、設計判斷與紀錄。
01. 從《未來媽媽》到茂盛醫院
第一次對茂盛醫院有印象，是因為台劇《未來媽媽》。
加上周遭有不少朋友考慮凍卵，或是因為工作壓力、人生規劃等因素接受不孕治療，所以在製作這個專案的時候，我們特別留心一些實際求診者可能會遇到的操作情境。
我們希望在真正接受治療以前，使用者可以先比較輕鬆地從網站獲得資訊。
不要被制式的醫院網站結構影響，也不要因為資料量太大，一進網站就不知道該從哪裡開始。
02. 醫療網站最大的問題，是資訊太多
醫療網站和一般品牌網站很不一樣。
除了醫院介紹之外，還同時包含科別、醫師、門診時間、網路掛號、看診進度、交通資訊、療程內容，以及大量衛教文章。
茂盛醫院原本累積的內容尤其龐大。
單是舊網站需要整理與移轉的既有網頁文章，就大約有 1,400 篇。
所以這個專案一開始真正要處理的問題，不是「網站要長什麼樣子」，而是：
這麼多資訊，要怎麼整理成一般使用者看得懂、找得到，而且知道下一步該去哪裡的網站？
這也是為什麼整個專案不是從視覺開始，而是先從網站架構與 Wireframe 進行討論。
03. 從 Wireframe 開始，先整理資訊再設計
從 Wireframe 規劃、資訊分類，到後面的視覺設計與程式開發，整個專案歷時大約十個月。
對大型網站而言，Wireframe 並不是單純把灰色方塊排在畫面上。
更重要的是先釐清：哪些資訊應該優先出現、哪些內容可以收合、使用者會從哪裡進站，以及在不同需求下，應該怎麼快速找到下一步。
尤其醫療網站的使用者目的通常非常明確。
有人要找醫師、有人要掛號、有人想查目前看到幾號，也有人只是第一次接觸療程，希望先理解相關資訊。
這些需求如果全部放在同一個層級，資訊越完整，反而越容易變得難用。
因此，我們決定先整理內容，再開始設計。
04. 首頁：讓醫療資訊變得比較容易接近
首頁視覺刻意柔化邊緣線條，加入曲線與插畫色塊，讓不同資訊單元之間有比較清楚的區隔。
這次我們並不希望網站只是做成另一個看起來很「醫院」的網站。
醫療內容本身已經有一定的專業門檻，所以在視覺上，我們反而希望降低距離感，讓第一次接觸相關資訊的人比較容易開始閱讀。
品牌原本的色彩也繼續延伸到網站，搭配後來平面設計追加的醫師 Q 版插畫，逐漸形成可以延伸到官方粉絲團與網站的整體視覺識別。
網站首頁提案很順利，一次就通過。
05. 掛號與看診進度：真正需要快速找到的資訊
網路掛號
網路掛號是醫療網站最重要的功能之一。
我們將不同分類與不同院別重新整理，讓使用者可以比較直覺地找到自己需要的掛號入口，而不是先理解醫院內部的組織方式才能操作。
當時網站於 2023 年 8 月上線時，板橋院區的線上掛號仍在準備中。
這也成為後續網站第二階段優化的起點。
2024 年板橋院區加入後的掛號系統優化
看診進度
看診進度也是這次我們很在意的一個區塊。
不論是在大型醫院或一般診所，使用者查詢看診進度時，常常會先看到大量文字、門診名稱與數字。
資訊本身沒有錯，但當所有內容同時出現，真正需要的資訊反而很難一眼找到。
因此我們重新整理資訊層級與畫面呈現方式，希望使用者打開頁面後，就能快速辨認目前的看診狀況。
06. 交通、醫師與快速選單：減少大量資訊造成的負擔
醫院位置與交通資訊
舊網站的醫院位置與交通資料其實非常完整。
問題不是內容不足，而是所有資訊全部集中在同一頁，因此閱讀負擔比較高。
新版網站將主要交通資訊重新分類。
使用者只需要選擇自己需要的交通方式，再展開對應內容即可。
這類調整看起來不大，但對資訊量很大的網站而言，常常比增加更多功能更有效。
常駐快速選單
這也是我們自己很喜歡的一個設計。
因為全站內容量非常大，我們透過常駐快速選單，把使用頻率較高的重要功能留在使用者隨時找得到的位置。
各科別與醫師選單也改成比較明確的色塊入口，減少大量文字選單帶來的閱讀負擔。
對我們而言，資訊架構並不是把所有內容藏起來，而是決定：什麼時候應該讓什麼資訊出現。
07. 1400 篇衛教文章：舊內容不是丟掉，而是重新整理
這次改版另一個非常大的工作，是既有網站內容的移轉。
舊站累積了約 1,400 篇既有網頁文章。
對醫療網站而言，這些內容本身就是長時間累積下來的重要資產，所以改版並不是把舊網站全部丟掉重新開始。
真正困難的是如何在新的網站架構下，把既有內容重新整理、移轉，並且盡可能維持原本累積的搜尋價值。
這個過程並不輕鬆。
所幸有完整的設計、程式團隊，以及 ARNO 網路行銷 SEO 研究室協助提供 SEO 修正建議，最後仍然順利完成大量內容移轉。
在衛教專欄的視覺上，我們也移除列表原本較複雜的真實照片，改以插畫與文字標題作為封面。
讓大量文章放在一起時，整體視覺可以維持比較乾淨、一致的閱讀節奏。
08. 十個月之後，網站終於上線
從 Wireframe 規劃討論，一直到最終正式上線，整個專案歷時大約十個月。
也是我們這幾年做過時間最長的專案之一。
當時真的很像一個寶寶終於要出生的感覺。
醫院特別選在 8 月 8 日父親節上線，也意外讓這件事情多了一點特別的意義。
回頭看到新舊網站比較，還是很想替當時所有參與的人拍拍手。
這些資料量真的大得嚇人。
但是我們真的辦到了，順利上線。
一個複雜的網站可以順利完成，絕對不是一、兩位設計師就能做到。
從資訊架構、Wireframe、視覺設計、前端、後端、主機，到 SEO 與大量資料移轉，都需要不同專業一起協作。
設計不是最後把畫面做好看，而是讓不同專業一起把問題解決。
Project Information
專案客戶：茂盛醫院
專案窗口：Rita Hsieh
Wireframe / IA：Genie Chen / Cully Wang
主站視覺設計：Genie Chen
影片動畫設計：QQ Hung
網站內頁設計：A-Bao Wu / Chara Su
前端程式：Hiking Chen
後端開發：Jessica Chen
主機及程式溝通支援：Chiu Ti Khai / K.K.
SEO 顧問：ARNO 網路行銷 SEO 研究室
Special Thanks：我最愛的海姐，王海欣。
後記. 從 2023 到 2026，網站持續演進
這篇文章記錄的是 2023 年茂盛醫院新版官網正式上線時的第一階段。
但網站並沒有在上線之後停止改變。
2023｜茂盛醫院官網全面改版
重新整理網站資訊架構、Wireframe、視覺設計、掛號與看診資訊，以及約 1,400 篇既有內容移轉。
2024｜板橋院區加入，掛號系統進入第二階段
隨著板橋院區正式加入線上掛號，原本以台中院區為基礎的掛號系統，也必須開始處理不同院區、不同科別配置所產生的新問題。
茂盛醫院板橋院區掛號系統優化紀錄
2026｜新版掛號系統重新規劃
網站持續實際營運幾年後，我們再次重新檢視掛號流程。
這一次不只是增加院區，而是從使用者實際操作的角度，重新思考院所選擇、會員與非會員、掛號紀錄，以及手機操作等完整流程。
新版掛號系統目前仍在持續進行。
待正式上線後，我也會另外整理成一篇完整的設計紀錄。
網站設計不是一次性的完稿，而是一套會跟著真實使用、營運需求與時間持續調整的系統。
回頭看這個從 2023 一路持續到現在的專案，我反而更確定一件事。
對超能力設計來說，茂盛醫院也是很重要的一個案例。
它讓我們更確定，面對資訊量龐大、功能複雜的網站時，比起先決定畫面應該長什麼樣子，更重要的往往是先把問題整理清楚。
