醫學檢索庫

保存心臟臨床案例,提供完整且易於搜尋的病例檢索平台

封面圖
專案背景

團隊成員

專案經理 -1 位
UI 設計師 -1 位
後端工程師 -1 位

參與項目

需求訪談、UI 介面設計、切版、工程交付

時間

2023.05 — 2023.12(八個月)

專案背景

先天性心臟畸形和結構性異常的診治本就不易,加上這類病症罕見,能參考的案例越來越少,讓醫師在診斷和治療上更具挑戰。隨著醫療技術進步,許多先天性心臟病的發生率降低,但也意味著過去累積的寶貴經驗正在流失。為了讓這些知識被保存並傳承下去,台中童綜合醫院兒童心臟醫學中心黃碧桃執行長,決定將她近五十年累積的上百則研究案例,從 PPT 轉為網站教材,幫助醫師與醫事人員更方便學習與應用。

醫學檢索庫網站

成果亮點

成果亮點

完成系統前後臺,完整轉移 200+ 案例,提升醫學資料價值與應用彈性

成功轉移並串聯現有的 PPT 檔案,使用者可在前台瀏覽與搜尋案例,亦可在後台更新以及維護資料,透過更有系統的管理來擴大資料的使用價值,並進行更廣泛與靈活的應用。

前台

後台


需求訪談

需求訪談

系統主要會有兩類使用者:案例提供者以及案例閱覽者

透過訪談深度了解使用者的行為,以及希望透過檢索平台達成什麼任務。

使用者
使用者

設計策略

設計策略

同時滿足兩方使用者的需求,達成病例上架與閱覽都流暢的使用者體驗

為了達成這個設計目標,訂出三個設計策略:

快速搜尋

使用者可以快速地找到特定案例,或是有關聯的其他案例,並確認其內容是否符合所需。

易於閱覽

使用者可以清楚且快速的閱覽特定單一教案的內容,了解其大綱,獲取所需資料內容。

導航性佳

呈現清晰的網站架構,簡化階層,在流程設計上要讓使用者容易回到案例列表頁,且確保導航清楚明顯。

設計策略

設計策略 1:快速搜尋

將搜尋欄位的資訊層級提高,對病例標題與關鍵字進行模糊搜尋比對

  • 將搜尋欄位置於導航欄

  • 資料庫為每個病例設定關鍵字

  • 模糊搜尋比對,擴大匹配範圍,更快找到病例
設計策略

設計策略 2:易於閱覽

案例的閱讀載體從原本的 PPT 轉移到網頁,我們如何提供好的閱讀體驗?

提案一

解構原有的 PPT 資訊架構,區分層級,呈現於側邊導航欄

提案二

ppt 線上閱讀器

設計決策

最後選擇提案二 ppt 線上閱讀器,主要原因有:
1. 每個案例的階層與內容並不一致,差異性大,會造成側邊選單的層級與標題不一致。
2. 承上,在後台維護與新增案例時亦容易造成混淆,也不易定義欄位。
3. 考量到主要使用者之一 : 案例提供者的操作習慣,維持 ppt 的載體可降低學習曲線。

設計策略

設計策略 3:導航性佳

透過關鍵字串聯相關的案例,將這些原本獨立的案例連結成更全面的知識網絡

關鍵字串聯

視覺設計

視覺設計

從關鍵字到情緒版,發展出三種風格提案

情緒版
moodboard
Mockup
moodboard
情緒版
moodboard
Mockup
moodboard
情緒版
moodboard
Mockup
moodboard

最後選擇提案三的風格,並經歷三次設計迭代優化:

第一版

版本一

第二版

版本一

第三版

版本一

視覺準則

視覺準則

專業穩重且清晰易讀的設計,打造兼具權威感與高效查閱的醫學網站

專業感且明亮的整體色系

因為網站內容與醫學相關,希望網站給人的感覺呈現的是專業、沉穩但不死板嚴肅的視覺氛圍。

清楚的視覺階層

資訊架構上清晰不複雜,不會有過多階層,讓使用者在查閱相關案例時可以快速取得所需內容。

方正的元件輪廓

不採用過多的圓角,避免讓人有過於活潑而有失專業感。

設計系統
設計系統
設計系統
thanks
專案成果

專案成果

成果一

上架兩百個以上的案例至網站,建構清晰的資訊架構,提供醫療人員完整檢索。

成果二

新增模糊搜尋功能,更快更準確的查詢案例。

成果三

新增站內留言機制,對於案例有疑問或建議可以反饋給管理者,建立雙向互動,讓案例資料即時更新。


團隊影響力

團隊影響力

主動驅動專案,跨部門協作,精準落地設計與需求

主動參與需求訪談,推動專案進展

在需求遲遲無法確定的情況下,我主動與 PM 共同主持客戶訪談,親自展示設計原型,說明功能與操作,確保需求精準落地。

跨部門協作,確保設計與技術銜接

負責前後台設計,與工程師在各階段緊密溝通,確認技術可行性、資料結構與頁面邏輯,確保系統順利串聯與落地。

深入使用者需求,提升設計決策

透過設計思考與精準提問,釐清核心需求,避免無效設計。同步線上會議展示原型,確保客戶理解專案進程,推動專案順利執行。