茂盛醫院新版線上掛號系統：
https://www.ivftaiwan.tw/appointment
茂盛醫院新版掛號系統，終於在 2026 年 9 月正式上線。
如果從我們最早承接這個專案開始計算，中間其實已經經歷過幾次調整。
2023 年茂盛醫院新版官網上線，2024 年再完成板橋院區的網路掛號功能，配合兩個院區不同的科別配置，調整掛號流程與頁面結構。
到了 2026 年，這次改動的幅度已經不是局部修正。
從掛號流程、院區切換、醫師篩選，到看診進度，我們幾乎重新把整套系統檢查了一次。
如果把我們在 2023、2024 年設計的版本算作 1.0，
這次的改動幅度，應該可以叫它「茂盛掛號 2.0」了吧（笑）。
這次有趣的地方，是我們回頭修改了幾年前自己做的設計。
01. 網站上線之後，設計其實沒有結束
第一版掛號系統正式上線後，我們陸續收到實際使用者的操作回饋。
有些在設計階段覺得清楚的選項與操作方式，交到不同使用者手上，仍然有需要調整的地方。
另一方面，這次也不只是處理既有問題。
隨著板橋院區未來可能增加其他門診需求，原本兩個有些微差異的掛號介面，也開始需要重新思考。
如果未來還有更多科別、更多服務加入，我們是不是應該趁這個機會，把整套系統重新整理一次？
這次的 2.0，從實際使用回饋與未來的門診需求出發，重新檢查整套掛號系統。
以下兩張圖片回顧先前的設計歷程，包含 2024 年版本與接手前後的介面比較，並非這次 2.0 的畫面：
02. 先統一規格，再開始談畫面怎麼改
這次有一個很重要、但從畫面上不一定看得出來的改變：
我們希望把原本有些微差異的掛號規格重新統一。
過去不同院區因為門診需求不同，在操作介面與系統邏輯上也存在一些差異。
短期來看沒有太大的問題。
但當院區、科別與服務持續增加，如果每一套掛號流程都各自發展，後面的管理與維護只會越來越複雜。
因此這次我們先從系統本身開始整理。
重新確認共用的掛號邏輯、操作流程與資料規格，再回頭處理畫面。
規劃上，也以官網與醫院 APP 共用 API 為方向，讓核心掛號規則能集中維護。
對使用者來說，不需要因為換了一個院區，就重新理解一次怎麼掛號。
對後續管理來說，也能減少不同系統各自為戰的問題。
在開始調整畫面之前，我們先確認這套系統如何支援接下來的門診與服務需求。
下圖是工作中的 Wireframe 流程規劃。
我習慣在線稿階段就填入實際內容，把欄位、文字長度與操作狀態盡量做清楚。
和客戶討論時，也比較容易發現缺少哪些資料、哪些情況還沒考慮進去。
03. 這次最難的，是修改自己原本的設計
接手既有系統時，通常有比較大的空間重新整理資訊架構、操作方式與視覺風格。
這次面對的，則是我們自己設計、也已經運作幾年的版本。
哪些操作已經被使用者熟悉，哪些地方需要調整，都得逐一判斷。
我們不希望為了讓新版看起來「改很多」，就把原本熟悉的操作全部推翻。
這次花時間的地方，就是分辨哪些設計值得留下，哪些地方已經不符合現在的需求。
視覺上也是如此。新版延續茂盛醫院原本的設計語言，重新整理資訊層級、按鈕狀態、操作回饋與手機版體驗。
04. 查詢方式從四種收斂成兩種，重新整理掛號入口
原本的掛號系統提供四種查詢方式：
依門診表查詢、依醫師查詢、依科別查詢，以及依日期查詢。
回頭看這四個選項，其實有些需求是重疊的。
找醫師最後還是要選日期，選了科別也需要查看門診安排。
使用者一開始卻得先決定，要從哪一種查詢方式進去。
這次我們把入口收斂成兩種，名稱也寫得更明確：
- 依科別找醫師：知道要掛哪一科，就從該科的醫師與門診安排開始找。
- 依醫師找診次：已經有指定醫師，就直接查看他的看診日期與診次。
日期選擇整合在後續的掛號頁面裡。原本分散在不同入口的查找需求，可以在這兩條路徑中接著完成。
在預約掛號的入口下方，也保留「看診進度查詢」和「掛號紀錄／取消」的快捷入口，方便已經掛好號的人直接使用。
我們也一起調整了最上方的頁籤。
以前的頁籤用來切換院區。新版將各院區與服務入口集中在掛號主頁，使用者可以直接選擇所需服務。
進入院區後，上方則保留預約掛號、看診進度、掛號查詢三個頁籤，方便切換功能。
這次整理的重點，是把每個入口的用途交代清楚，讓使用者比較容易決定下一步。
05. 從時間表格，改成一筆一筆看得清楚的列表
把原本的時間表格改成列表，是這次我很喜歡的設計之一。
以前的掛號介面，把一週的日期、科別和早午晚診放在同一張表格裡。
好處是可以一次看到整週安排，但要找到某一天、某位醫師的門診，就得在橫向日期與縱向欄位之間來回對照。
尤其到了手機上，同一張表格裡要容納這麼多資訊，每個格子能使用的空間就很有限。
這次我們把日期選擇獨立出來，下方依早診、午診、晚診分組，用列表呈現當天的門診。
每一筆都有自己的位置，可以放進醫師照片、姓名、診間與掛號狀態，也讓掛號按鈕更容易辨認。
已額滿、停診或代診等情況，也能直接標示在對應的門診上。
使用者選好日期後，就可以往下查看當天的安排，不用再沿著表格的行列找交叉位置。桌機與手機也能沿用相同的閱讀順序。
配合前面兩種掛號入口，列表也有各自的呈現方式。
醫師有自己專屬的掛號頁面，集中呈現他的門診安排；科別頁則列出該科在所選日期的醫師與診次。
同樣的列表結構，可以配合不同的查找需求使用。
這也是我喜歡這次調整的原因。從選擇入口到查看門診，前後的資訊可以順著接起來。
06. 看診進度：這次自己最有感的一個改動
這次自己最有感的，其實是「看診進度」。
以前查詢看診進度，最重要的通常只有一個數字：
現在看到幾號？
但真的坐在候診區等待時，使用者想知道的其實不只這件事。
前面還有多少人？
哪些號碼已經看完？
哪些人過號？
現在正在看誰？
我自己的號碼到底還要等多久？
所以這次我們把原本單一的進度資訊，改成比較完整的看診進度表。
透過不同顏色與狀態，可以直接看到：
- 已完成
- 過號
- 看診中
- 未看診
- 已報到
使用者可以查看自己的號碼與其他號碼的狀態，對目前的候診情況有更完整的掌握。
我們希望減少的，不只是操作步驟，也包括等待時那種「不知道現在到底輪到哪裡」的不確定感。
這也是這次改版裡，我很在意的一個細節。
07. 把自己的設計再做一次
這次專案花了不少時間，尤其是前置規劃，以及來回討論與實際操作後的修正。
有些我們認為合理的設計，交給沒有參與專案的人操作後，才發現還有沒說清楚的地方。
然後再改、再測、再討論。
某種程度上，這次的工作很像一直在打槍幾年前的自己（笑）。
但我其實滿喜歡這種工作方式。能持續參與同一套系統的調整，讓我們有機會回頭驗證當初的判斷，再把使用經驗帶進下一次設計。
好的介面不一定是第一次就把所有事情想對，而是上線之後，還願意繼續看、繼續改。
看到新版順利上線，我們自己都滿喜歡最後的成果。
還是會有小小的成就感，很滿足。
也希望實際來掛號、等待看診的使用者，可以感受到這些藏在操作裡的小小調整。
Project Information
專案客戶： 茂盛醫院
UX / UI Design： 超能力設計戰隊 Innovation Plus
專案內容： 網路掛號系統 UX / UI 優化、掛號流程整合、看診進度介面設計
正式上線： 2026 年 9 月
再次謝謝茂盛醫院行銷 Rita，可以和你一起挑戰這些困難的專案，我覺得超級滿足的。
