UI/UX 設計

網頁設計

臺北市立聯合醫院掛號系統提案

在於公共數位創新空間小組 (PDIS) 的實習中與聯醫相關部門協作,將以使用者為本的服務思維落實於數位服務中,打造更簡單易用的線上掛號服務。

01|專案目標

此次於 PDIS 的實習專案與臺北市立聯合醫院協作、為其重新規劃數位服務,並於最後產出可運作的仿真原型,供部會未來改版參考。

02|擔任角色
此次專案團隊由來自不同領域的夥伴組成。我主要負責 UX 及 UI 的設計流程與產出,包括定義問題到交付最終設計給工程師。
03|專案挑戰
起初在與部會溝通上面臨些困難,加上醫療領域限制條件非常多,數位服務之創新有可能會影響用戶看診前的決策,我們在將結果回饋給部會的同時也必須進行許多額外任務以確保相關資訊的正確性。
04|成果與影響
最終團隊產出線上與線下版的測試原型,此次改版也提升了服務的相關指標,其中 SUS 量表分數較舊版有超過 20 分的提升。也從使用者上收到了許多正面的回饋。
TOC
專案背景

聯合醫院由多個院區組成,其中部分院區有分部,而各院區都有其個別網站資訊 (內容架構大同小異)。服務內容包括線上掛號、衛教專區與廠商徵才等,面向相當廣泛。

而掛號系統作為一般民眾最常使用的功能,其核心價值為降低市民就診所需成本、提高醫療服務品質,同時院方也希望透過服務達到提供醫療資訊、降低客服成本等需求。但我們在訪談中發現:面對老舊的系統,使用者在操作時產生不少困擾,反而需要花上額外的時間才能解決這些問題。

受訪者操作掛號系統畫面

因此在與部會人員討論後相關需求後,我們決定以民眾使用率較高的服務為目標,將專案聚焦在網路掛號系統。

研究流程

過程團隊配合PDIS提出的「六步殺」,確保我們對於訪談、研究的掌握度,並奠基後續設計和原型產出的基礎品質。

‧瞭解使用者

在專案前期,我們透過訪談蒐集使用者對服務的看法,並進一步定義核心議題。

我們列出不同條件,篩選出各種情境下網站的使用者進行訪談。後續統整訪談的結果,我們將使用者大致分成三種類別,分別是:
01

注重醫師名氣,希望可以從頁面查看醫師資訊的「名醫派」

02

專注於搶號,盡可能快速預約到自己想要的醫生,結束掛號流程的「效率派」

03

需要額外資訊來協助規劃行程的「旅程派」

不同的類別使用者在對電腦熟悉程度、過往網站使用上經驗都有不少差異,這些發現幫助團隊描繪出更鮮明的使用者形象,使我們得以深入使用者遇到的問題。而為了進一步幫助團隊聚焦該為誰設計、該著重於何種問題,我們也將訪談得到的結果,轉化成不同的人物誌。同時透過這些不同使用者的樣貌,向部會人員分享我們得到的回饋。

我們也透過使用者研究的成果,繪製了不同需求的民眾在各種情境下的掛號旅程地圖,幫助團隊梳理使用者在掛號前後的行為以及痛點。

透過這些對使用者的研究,團隊得以識別目前使用者的痛點並了解其根本原因,更進一步制定能夠幫助改進網站操作體驗的策略。

洞見及回答

綜合目前的成果,我們將目前發現的問題總結為以下幾點:

01
資訊呈現問題

我們發現系統中資訊的呈現缺乏統一的架構,因此對使用者造成認知負擔並且不方便瀏覽。很多人需要花更多時間尋找他們需要的資訊。

02

狀態回饋不明確

掛號流程中系統給予回饋不足,加上部分訊息宣導與完成掛號通知皆是以彈出視窗呈現,使用者容易忽略。狀態可視性欠佳導至使用者不清楚任務是否結束。

03

使用者對關鍵字不熟悉

系統中部分功能命名或操作模式不符合使用者過往操作經驗,導致部分使用者必須從錯誤中嘗試出正確的操作步驟。

綜觀上述問題,院方為了提供完整的資訊給民眾,在系統不同頁面都加上了對應的說明文字,但這些額外的資訊加上不明確的說明反而造成使用者的困擾,與民眾對於掛號的需求背道而馳。至此如何平衡院方資訊呈現及民眾接收時的負擔,成了團隊設計時的一大課題。

嘿!我們該如何確保民眾在接收必要訊息的同時可以簡單快速地完成掛號程序?
‧我們的回答

我們整理了目前頁面上的元素,並依據使用者訪談得到的回饋對其進行分類歸納。並針對每個部分產生的問題進行討論,建立團隊對於核心問題的假設:

01

透過改善使用介面以及排版設計,呈現更清楚的資訊,可以減少使用者負擔並更快速的達成其掛號需求。

02

提供互動性更高的掛號方式,若使用者能依據自身狀況完成掛號,可以降低院方客服成本。

我們向部會說明使用者研究的成果、思考問題解法,並開始繪製測試原型。團隊以提高易用性為原則,繪製了新版本的掛號系統頁面,在不大幅更動服務流程的前提下修正網頁現有問題。我們也嘗試加入新功能,透過互動式的選項引導使用者掛號,達成院方為線下分流、減少客服成本的需求。

在有了一致的方向後,團隊採用線上共作的方式,開始繪製草稿及線框圖,以下是主要的改版內容:

01

清楚的資訊版面設計

透過「強化字體層級」、「資訊區塊分明」、「加強掛號按鍵」等重整方式,讓整體的瀏覽效率提升,加速使用者完成掛號任務。

02

強化線上線下的資訊整合

透過「同步現場等候資訊」、「新增過號看診原則」、「連結個人查詢與看診進度」等設計,提高資訊直覺程度,增加使用者安排就診時間的彈性。

03

人性化的互動式掛號

透過「條列易混淆之重要症狀」、「人體圖像取代文字敘述」等手法,提高症狀瀏覽的易讀性、理解力,並於建議科別的結果頁面推廣相關知識,結合民眾方與醫方的兩面需求。

在這階段我們產出了許多的想法。我們將其中可行的方案統整,進入下一階段的測試。
設計產出
經過多次迭代,最終我們產出可操作的原型,你也可以開啟連結試試看我們的線上測試版 (部分功能未開放),而以下是關於改版的細節。
‧優化資訊版面設計

團隊重新規劃資訊的呈現方式,包含視覺動線、資訊提供等,藉以符合使用者真正的需求。並在科別增加篩選功能,方便使用者更快找到適合他們的選項。

在醫師班表方面,我們依據內容的重要性去創造了更清楚的視覺層級、給與每個欄位統一的架構同時強化掛號按鈕CTA,提升瀏覽效率。

不變更掛號系統簡單的線性操作流程,我們希望透過規劃更明確的資訊分級,幫助使用者更輕易的找到目標功能。

‧線上線下資訊統合

我們針對個人掛號紀錄詢做了一些更動,讓它能展示當前線下進度。而關於全院進度查詢,使用者現在可以在進入詳細資料頁面前得到初步的訊息,操作上更快速自由。

透過統整關於看診進度的頁面,強化即時線下資訊呈現,幫助使用者安排看診時間。同時調整頁面中的文案,提高資訊的直覺程度。
‧明確的掛號完成頁面

過去完成掛號的通知是由彈出視窗呈現,容易造成許多使用者忽略,也不容易紀錄需要的訊息。在新的版本中我們以完整頁面顯示完成掛號的通知以及必要訊息,增強使用者對任務狀態的認知,同時設計不同的方式供使用者儲存這些資訊。

我們重新安排完成掛號通知上的資訊,並嘗試提供不同方式供使用者紀錄,減少使用者的不安定感。

‧新的掛號體驗
在與醫師諮詢後,我們列出較常見的症狀,並依照聯醫提供的就診科別查詢提供掛號。讓不知道該掛號什麼科別的使用者能依據自身情況完成掛號。

針對找不到推薦症狀的使用者,我們提供了更詳細的篩選功能,可以使用點選的方式從身體部位找到對應的病狀完成掛號。

我們試著提出不同解法來應對院方所提出的要求,同時賦予掛號系統一點親切感,讓線上掛號過程不再那麼冰冷沒有溫度。

結語 / 心得
專案結束後回顧發現有仍許多可以改進的地方,但過程中為了確保我們的改版對使用者有良好的影響,新版本的每一項改動都是經過使用者研究及多次迭帶得出的結果。成果來說,我們的新版原型從使用者上得到良好的回饋,SUS指標也從舊版的63.5分提升至88.5分。

另外這次專案進程相當緊湊,如何找到時間、資源、限制和目標之間的平衡點是一個非常重要的事。團隊成員都非常清楚的了解目標及自己的角色定位,讓我們在專案初期便快速完成磨合,團隊間得以保持開放的心態,大大提升開發速度並專注在對使用者有幫助的事上。