中國醫
APP Redesign
2020 - 2021 Case Study
中國醫藥大學附設醫院 APP Redesign 的 Case Study 是我自發性執行的案子。這個案子從執行發想、前期研究、使用者調查和設計執行皆由我一個人執行。案子聚焦在改善掛號系統的流程，再透過設計的執行，提供一個更好的使用者體驗。對我而言，這是個寶貴的經驗。首先，這是我第一個從頭到尾完成的專案；再者，該怎麼在白天還有工作的狀況下，在晚上把時間安排出來持行，也是個不容易的挑戰。
以下的案子簡述分為三大主題，依照製作的時間順序排列：
01.前期研究 競品分析 /Lean Ux Canvas/ 使用者訪談 / Persona / User Journey Map
02.解決方法 How Might We / Moscow / Funcational Map / IA / User Flow
03.設計執行 Wireframe / Visual / Mockup / Prototype / User Test
04.結論
接下來，就邀請您，一起來往下看案子執行的過程與脈絡陳述吧!
發想起源
為什麼做
身為台灣公民的我，一直很感謝台灣的健保制度，使我可以在相對沒有金費的壓力之下，使用醫療資源。因此希望有機會能有所回饋。
中國醫藥大學附設醫院 是一間位於台中的醫院，設備十分地完善。然而，在使用他們的APP系統後，發覺在APP的使用體驗上，有可以改進的地方，因此構思出這次Redesign的設計執行，希望能讓使用者更快速、更優質的完成任務。
產品定位
我的挑戰
定位和目標
- 協助使用者完成看醫生的流程，這些流程代表著不同的階段目標，包含：掛號、等待、看診、領藥、開刀、健康檢查...等等。
- 協助使用者了解自身與醫療的資訊，例如：就醫指南、衛教資訊、用藥服務...等等。
- 對於個人就診做到紀錄、提醒。
客群是誰
- 18-70歲，有就醫需求、擁有手機能完成就醫行為的使用者。
- 22-50歲，更為主要使用的客群。
客群尋求
要完成就醫的這整件過程，減少等待和尋找（醫生和掛號）的時間。
增加醫療的認知。
能夠了解過去就診和掛號的紀錄。
01.
Research
前期研究
競品分析 /Lean Ux Canvas/ 使用者測試 / Persona / User Journey Map
前期研究
競品分析
為了讓這個產品能符合市場，我用競品分析將本來產品和其他的產品做比較。打開App store 我選了市面上下載率較高的五個產品，從功能層面和使用者體驗上作出分析。使用的工具包含分析比較、功能比較、異同點分析與向量分析。得到以下的結論。
🔎 在這些APP中，最主要的的功能之一，就是掛號的功能。每家醫院的APP相同的是：使用者需要的功能。不同的是：每家醫院因設備各有不同的功能。
🔎 資訊層級較少的APP，能提供較好的使用流程
設計發想
Lean UX Canvas
我透過Lean Ux Canvas 來幫助我完成問題的聚焦。(可以點選下方的圖來看細節內容）。
前期研究
使用者測試
為了更客觀地了解目前APP所遇到的問題，我找了年齡分佈於25-40歲，一共5位的目標族群，對原有的 APP 做出使用者測試。每一項測試，測試出每項任務所需的時間與過程中的意識流。測試的內容包含最常使用以及最核心的幾個功能：1. 掛號系統的使用。 2.查詢/取消 掛號內容。 3.最新消息/衛教資訊查詢
" 需要跳到google去查詢這位醫生的簡介 "
" 需要到google去查詢目前的症狀，要看哪一科，才能進行掛號 "
從中發現在進行掛號時，會遇到最多的困難。最常遇到的問題是，掛號的使用流程上，無法查詢到醫生的相關資訊；當遇到自己不知道要掛哪一科時，就先先了解症狀要看哪科後，才能進行掛號。
前期研究
Persona
我使用 Persona 將目標族群勾勒出來。宜君是一位工作忙碌的上班族，希望能減少看醫生所需的時間。她會遇到的痛點是：
1.不確定性：不知道症狀要看哪一科
2.資訊透明度：不確定醫生的學經歷背景、評價
3.掛號資訊確認：掛號資訊會載入過長時間、需要截圖來記錄已掛號的資訊
4.等待時間：知道就診時要等待多少人，但無法了解等待的時間
5.遺忘：遺忘自己已經掛號了。
前期研究
User
Journey
Map
在測試之後，發現掛號流程，會產生較多的不流暢，同時也是使用者最常使用的功能。因此針對掛號流程，製作出使用者歷程（User Journey Map)。
遇到的痛點：
1.搜尋科別：不知道要看哪一科，需要先去搜尋。先掛一個大概的科別，再調整。
2.搜尋醫生：跳到google搜尋、看評價。
3.查看掛號記錄：忘記掛號的細節、需要查詢。
02.
Solution
解決方法
How Might We / Moscow / Functional Map / IA / User Flow
解決方法
How Might We ?
針對上述發現的問題，提出解決的發想方式。利用ＨＭＷ的方法，將以下三個問題做出解決的提案。
該怎麼幫助使用者能夠在掛號選出適合的醫生呢？
該怎麼幫助使用者了解他的症狀要看哪一科？
該怎麼幫助使用者記得他已經掛號的科目細節呢？
解決方法
MOSCOW
接著，我使用moscow的方法來將以上解決法的功能做出分類與篩選。其中需要的功能放置在：must have；可以有的功能放置在：should have
解決方法
Functional Map
針對原有的設計功能和建議加入的，所列出的功能。
解決方法
IA
我將functional Map 中的功能列表，分類到IA 當中。在規劃上，綜合之前的研究，我設計成層級較少，扁平的方式，讓使用者可以比較快找到資訊。
依照使用者的需求，主要為5的大項目為：掛號、診間進度、訊息、延伸服務與更多。
解決方法
User Flow
將 IA 中掛號的分類列別：依照歷史紀錄掛號、依照醫生掛號、依照科別掛號、依照症狀掛號、電話掛號。將這些 放置到 UI Folw 中，將掛號的流程做出梳理。
03.
Design
設計執行
Wireframe / Visual / Mockup / Prototype / User Test
設計執行
Wireframe
在先前的易用性測試上，發現有以下兩點，是使用者不滿意之處（詳情請見下列表格）。我針對這兩點，進行Wireframe 的繪製，並透過Wireframe做出Mi-Fi Prototype 給使用者進行測試，並從中得到反饋。
使用者不滿意的 2 種掛號情境
情境 1.
使用者知道自己要掛哪個科別，但不知道是要掛哪一位醫生。
平均花費時間 ： 4 分鐘
80%的使用者認為這個功能不好用，使用時中途需要跳轉至google查詢，導致花費更多時間。
情境 2.
使用者知道個人症狀，但不確定要掛哪一科和哪一位醫生。
平均花費時間 ： 4 分鐘
100% 的使用者 都覺得不好使用。使用中找不到醫生的詳細資料，需要去搜尋引擎尋找。
Mi-Fi prototype 使用者給的回饋
將Mi-Fi Prototype 給2位使用者進行測試，並請他們給予的回饋。以下是其中幾項主要使用者的回饋：
設計執行
Visual
我使用本來中國醫VI的顏色，來進行視覺設計。除此之外，我加入輔助的插畫，讓使用上增加視覺的愉悅感。
設計執行
Mock up &
使用者測試
請試試看右邊（手機版則是在下方）的使用者流程吧！此次是透過In Vision 請使用者做測試。
測試的主要內容為：情境 1 知道要掛哪科，但不知道要掛哪一位醫生；情境 2 使用者知道自己要掛哪個科別，但不知道是要掛哪一位醫生。
除了以上的功能外，我也優化了掛號頁面中大部分的功能，就請您一起順著藍色的點擊區域，一起來探索吧！
情境 1：知道要掛哪科，但不知道要掛哪一位醫生。
改善前
平均花費時間 ： 4 分鐘
80%的使用者認為這個功能不好用，使用時中途需要跳轉至google查詢，導致花費更多時間。
改善後
平均花費 時間：1分 36 秒
100%的使用者表示，相較於原本的設計，掛號的分類更清楚，更易於找尋掛好資訊
100%的使用者表示，相較於原本的設計，掛號的分類更清楚，更易於找尋掛好資訊
掛號情境 1 前段
依照科別尋找醫生
點選依照科別掛號後，會進入科別分類的頁面。在科別分類的頁面中，選擇好科別後，可以透過時間的選單，選出自己希望的時間。時間的選擇可為週、月、日（上午/下午/晚上）。最後，是該怎麼知道醫生的資訊呢？在選擇的流程中可以查看醫生的資料，以利做出掛號時的判斷。
掛號情境 1 前段
確認醫生後，進行掛號
選擇好醫生後，會在確認頁面中顯示，並且加入可以調整時間的功能(先前在Mifi-Prototype的回饋)。接著Key-in個人的身分證字號，即可進入掛號的流程。掛號成功後，可以立即確認掛號的細節(先前在Mifi-Prototype的回饋)，並存放在手機的資料當中，以利日後做確認。
情境 2：使用者知道個人症狀，但不確定要掛哪一科和哪一位醫生。
改善前
平均花費時間 ： 4 分鐘
100%的使用者都覺得不好使用。使用者表示，找不到這一項功能的位置。
改善後
平均花費時間 ： 47 秒
100% 的使用者覺得好用 ，都覺得改善了原本的痛點，。本來這個功能隱密和不完整，但在改善後，使用者回饋能直覺使用。
掛號情境 2 前段
不知道要掛哪一科
使用者可以透過掛號頁面上 不知道要掛哪一科 的選單，直接去查詢自己的症狀。從這些症狀中，去了解自己可以要掛哪一科別，並且在掛號的流程中選出適合自己的醫生和時間。當使用者選擇好醫生後，接著會進入掛號的頁面，順著掛號頁面輸入身分證字號，即表示完成。補充說明：因為掛號的頁面與上方情境1-後段是重複的，因此在這個影片中，就不詳加以錄製。
情境 3：查詢資料的優化
掛號情境 3
查訊掛號資料
將資訊的層級向前調整。使用者可以利用掛號畫頁面中，位於上方的卡片，向右邊滑動，來檢視自己的掛號細節，並且透過點選，來看到掛號的細節。當沒有掛號時，會在卡片上顯示沒有掛號資料的訊息。
04.
Conclusion
結論
在這一段設計的流程後
結論
首先，先謝謝您看到這裡。在完成這個專案後，達成了先前所設定的目標：包含使用者的流程優化（掛號系統）、設計視覺的優化，並進行了使用者的測試。使用者在使用後，減少了掛號所需的時間，並加入掛號中所需的資訊，達成掛號的體驗。這對我而言是一段難得的體驗。
可優化的地方
未來規劃
1. 將首頁的顯示頁面，位於上面的掛號訊息卡片（可向右邊滑動的卡片）做視覺階層的調整。會試著將頁面中，醫生資訊利用字體的顏色和粗細更他更加明顯，讓使用者更能一眼看到要尋找的訊息。
2. 完成每一個頁面的設計，使整個Redsign更加的完整。
3. 製作一個Ios 系統的 APP，讓Ios 的使用者能用更順暢的完成任務。
👋 Hi ! Let's chat 謝謝你來瀏覽，來聊天吧！
copyright © 2024 Weidan lu. all rights reserved