訂單明細頁Redesign
重新設計 Agoda 訂單明細架構，透過資訊分層與視覺降噪提升閱讀體驗。
Year
2024
Feature
資訊結構重組
Type
App Redesign
Approach
提升閱讀效率
訂單明細頁Redesign
重新設計 Agoda 訂單明細架構，透過資訊分層與視覺降噪提升閱讀體驗。
Year
2024
Feature
資訊結構重組
Type
App Redesign
Approach
提升閱讀效率
為何選擇 Agoda 訂單明細頁的再設計呢？
本專案為工商場域使用的能源管理系統（EMS），協助使用者監控用電、管理儲能排程，並支援需量反應與節能分析，並規劃 MVP 功能與開發優先順序。
時間
4 Hr
目標
訂單詳細頁資訊排列再設計
版權
本案所有資訊、圖片、所使用的飯店範例均為Agoda和該飯店所有，icon均使用Feather Icons，未進行另外設計。
一、Agoda 訂單明細頁原設計分析
資訊分類分散
住宿資訊｜客房資訊｜住客資訊｜取消政策｜付款資訊
原本的設計是一頁式，透過Scrollable Tabs元件用錨點的形式連結滑到標題，並沒有分頁功能。這樣的設計可能是為了幫助使用者快速到達該資訊，但內容與內容之間篇幅不夠以至於頁面滑動的幅度不大，並不能一眼察覺已到該資訊頁面。
頁面資訊層級不清
字體：標題字體和部分內容均以同大小和粗體呈現。
顏色：Tabs元件 active 和 default 狀態太過於相似
元件：不同性質的元件間排列一起未分隔。
資訊：同性質資訊過於分散
二、再設計
開始設計前，先把畫面的所有資訊列出，再統整相似的類別進行歸納，將分頁按鈕default狀態改為黑色，與active藍色做區別。
➤ 資訊統整分頁為 ：住宿資訊｜訂單資訊｜線上留言
➤ 字體：Noto Sans TC
➤ 顏色：統一用原設計的藍色(#5E99F9)為主顏色，並維持只要是連結或是按鈕都是以主顏色為主
1.住宿資訊
訂房網站的住宿明細，我認為最重要的是住宿地址、時間等資訊，故明細的第一頁進來就會立刻看到這些資訊，並合併原本的住宿資訊和客房資訊；為了更清楚的顯示住宿資訊故刪除嵌入的google map，將查看地圖按鈕改以icon形式和聯絡方式放置同一區塊。
2.訂單資訊
將 住客資訊 | 取消政策 |付款資訊 統整在這一分頁。
2.1將可以編輯或其他需求的資訊統整至管理訂單按鈕並以button sheet方式呈現。
2.2付款狀態
2.3取消政策元件選定
取消元件一開始也想使用按鈕的形式呈現，但希望顧客能再多思考是否取消，故選用 Action Slider Button，來增加取消動作的時間。
3.線上留言
將 留言給住宿 和 聯絡Agoda客服中心 同樣性質整合在同一分頁。
三、結論
此次的再設計以小處著手，從透過觀察與使用Agoda App發現『訂單明細頁』存在一些可以再優化的地方，進而產生此篇做為練習的專案。
為何選擇 Agoda 訂單明細頁的再設計呢？
本專案為工商場域使用的能源管理系統（EMS），協助使用者監控用電、管理儲能排程，並支援需量反應與節能分析，並規劃 MVP 功能與開發優先順序。
時間
4 Hr
目標
訂單詳細頁資訊排列再設計
版權
本案所有資訊、圖片、所使用的飯店範例均為Agoda和該飯店所有，icon均使用Feather Icons，未進行另外設計。
一、Agoda 訂單明細頁原設計分析
資訊分類分散
住宿資訊｜客房資訊｜住客資訊｜取消政策｜付款資訊
原本的設計是一頁式，透過Scrollable Tabs元件用錨點的形式連結滑到標題，並沒有分頁功能。這樣的設計可能是為了幫助使用者快速到達該資訊，但內容與內容之間篇幅不夠以至於頁面滑動的幅度不大，並不能一眼察覺已到該資訊頁面。
頁面資訊層級不清
字體：標題字體和部分內容均以同大小和粗體呈現。
顏色：Tabs元件 active 和 default 狀態太過於相似
元件：不同性質的元件間排列一起未分隔。
資訊：同性質資訊過於分散
二、再設計
開始設計前，先把畫面的所有資訊列出，再統整相似的類別進行歸納，將分頁按鈕default狀態改為黑色，與active藍色做區別。
➤ 資訊統整分頁為 ：住宿資訊｜訂單資訊｜線上留言
➤ 字體：Noto Sans TC
➤ 顏色：統一用原設計的藍色(#5E99F9)為主顏色，並維持只要是連結或是按鈕都是以主顏色為主
1.住宿資訊
訂房網站的住宿明細，我認為最重要的是住宿地址、時間等資訊，故明細的第一頁進來就會立刻看到這些資訊，並合併原本的住宿資訊和客房資訊；為了更清楚的顯示住宿資訊故刪除嵌入的google map，將查看地圖按鈕改以icon形式和聯絡方式放置同一區塊。
2.訂單資訊
將 住客資訊 | 取消政策 |付款資訊 統整在這一分頁。
2.1將可以編輯或其他需求的資訊統整至管理訂單按鈕並以button sheet方式呈現。
2.2付款狀態
2.3取消政策元件選定
取消元件一開始也想使用按鈕的形式呈現，但希望顧客能再多思考是否取消，故選用 Action Slider Button，來增加取消動作的時間。
3.線上留言
將 留言給住宿 和 聯絡Agoda客服中心 同樣性質整合在同一分頁。
三、結論
此次的再設計以小處著手，從透過觀察與使用Agoda App發現『訂單明細頁』存在一些可以再優化的地方，進而產生此篇做為練習的專案。
為何選擇 Agoda 訂單明細頁的再設計呢？
本專案為工商場域使用的能源管理系統（EMS），協助使用者監控用電、管理儲能排程，並支援需量反應與節能分析，並規劃 MVP 功能與開發優先順序。
時間
4 Hr
目標
訂單詳細頁資訊排列再設計
版權
本案所有資訊、圖片、所使用的飯店範例均為Agoda和該飯店所有，icon均使用Feather Icons，未進行另外設計。
一、Agoda 訂單明細頁原設計分析
資訊分類分散
住宿資訊｜客房資訊｜住客資訊｜取消政策｜付款資訊
原本的設計是一頁式，透過Scrollable Tabs元件用錨點的形式連結滑到標題，並沒有分頁功能。這樣的設計可能是為了幫助使用者快速到達該資訊，但內容與內容之間篇幅不夠以至於頁面滑動的幅度不大，並不能一眼察覺已到該資訊頁面。
頁面資訊層級不清
字體：標題字體和部分內容均以同大小和粗體呈現。
顏色：Tabs元件 active 和 default 狀態太過於相似
元件：不同性質的元件間排列一起未分隔。
資訊：同性質資訊過於分散
二、再設計
開始設計前，先把畫面的所有資訊列出，再統整相似的類別進行歸納，將分頁按鈕default狀態改為黑色，與active藍色做區別。
➤ 資訊統整分頁為 ：住宿資訊｜訂單資訊｜線上留言
➤ 字體：Noto Sans TC
➤ 顏色：統一用原設計的藍色(#5E99F9)為主顏色，並維持只要是連結或是按鈕都是以主顏色為主
1.住宿資訊
訂房網站的住宿明細，我認為最重要的是住宿地址、時間等資訊，故明細的第一頁進來就會立刻看到這些資訊，並合併原本的住宿資訊和客房資訊；為了更清楚的顯示住宿資訊故刪除嵌入的google map，將查看地圖按鈕改以icon形式和聯絡方式放置同一區塊。
2.訂單資訊
將 住客資訊 | 取消政策 |付款資訊 統整在這一分頁。
2.1將可以編輯或其他需求的資訊統整至管理訂單按鈕並以button sheet方式呈現。
2.2付款狀態
2.3取消政策元件選定
取消元件一開始也想使用按鈕的形式呈現，但希望顧客能再多思考是否取消，故選用 Action Slider Button，來增加取消動作的時間。
3.線上留言
將 留言給住宿 和 聯絡Agoda客服中心 同樣性質整合在同一分頁。
三、結論
此次的再設計以小處著手，從透過觀察與使用Agoda App發現『訂單明細頁』存在一些可以再優化的地方，進而產生此篇做為練習的專案。
