使用者體驗設計
手作課程
Side Project
10 週 (2022/6-2022/9)
介面設計 - Jiun
全端工程 - Vic
瀑布式開發
專案溝通、UX 設計、UI 設計、原型製作、工程交付
Figma、Xmind、Adobe Illustrator
小紅花手作地毯 是提供 DIY 體驗課程的品牌，消費者可以從官方網站 ( 以 Wix 製作 ) 或 Pinkoi 報名一日課程，製作屬於自己的地毯。
雖然 Wix 和 Pinkoi 都有提供商家管理後台，但兩個平台的資訊各自獨立，導致資料的整合十分不容易。在剛創立品牌，且資源和時間都相當有限的情況下，客戶選擇使用 Excel 人工彙整、管理資料。
然而，隨著品牌不斷成長茁壯，原先由 Excel 運作的管理方式開始出現諸多侷限和不便。希望藉由這次專案，打造一個易於使用、提升效率的後台管理系統，讓客戶能更專注於品牌的拓展。
.jpg)
整體架構的呈現將以清楚、簡單為目標，不做繁複的分類，以節省找尋、理解的時間，讓客戶能更有效率的完成每個操作。規劃功能流程時，也將參考客戶過去的使用習慣，降低學習成本，幫助客戶快速熟悉新系統的運作方式。
點擊圖片放大觀看
在著手開始規劃系統前，我們檢視了客戶用來管理資料的 Excel 檔案，也詢問他們一些使用上的習慣和細節。以下是我們在調查、分析的過程中，發現的五大問題：
點擊圖片放大觀看
將「登入 / 註冊」、「寄送信件」等主要操作流程製成 Flow Chart，除了確保每個步驟都能順暢運作，也為後續的畫面建構提供思考依據。
點擊圖片放大觀看
點擊圖片放大觀看
點擊圖片放大觀看
透過繪製 Wireframe 建構出系統雛型，除了和工程師討論頁面構成能否被實踐，也用來和客戶確認功能流程等設計是否符合他們的需求。
由於品牌開設的課程種類不多，在課程名稱大多相同的情況下，容易使人在查找資訊時，感到眼花撩亂。為了改善這個狀況，我們為每堂課程增加了狀態標籤，用「報名中」、「已額滿」、「已結束」三種標籤，幫助使用者快速辨別課程當下的狀態，並節省找尋的時間。我們也讓系統保有一定的彈性，使用者可以調整如何呈現介面與資料，減少多餘的干擾。
可收折的選單，擴大可視範圍、減少干擾
標籤協助辨識課程狀態，也可用來排序資料
自行決定每頁顯示的資料數量
我們提供了兩種增加資料的方法，除了手動加入外，也能透過 XLS 檔大量匯入既有資料。此外，使用者也可將資料匯出成 PDF 或 XLS 檔，方便進行列印或分享給外部人士等操作。
手動新增單筆資料
從 XLS 檔匯入資料
為了讓使用者能更方便的進行管理，我們針對管理學員和付款時最困擾使用者的部分，設計了四項解決方案：
透過建立可多次使用的信件模板，使用者可以針對指定學員發送課程通知，或向全部學員寄送活動促銷信。我們也設計了「排程寄送」功能，系統會自動在指定時間發送信件，幫助使用者更靈活、有效地運用時間。
簡單建立信件模板，透過測試信確認是否能成功寄送
可選擇在指定時間寄送信件給學員
由於我和工程夥伴都是在職接手這個 Side Project，時程十分緊湊，加上夥伴比較擅長後端、不太熟悉前端，讓製作過程充滿了挑戰性。為了減輕他的開發負擔，我們做了很多討論，像是：有些元件是不是能用現有套件來改，節省重刻的時間？這個功能雖然可以帶給客戶很大的方便，但會不會因此大幅增加開發成本？雖然過程中不免有一些摩擦和撞牆期，但我們透過借助彼此的專業，讓專案變得更完善。
後台管理系統的使用者是品牌員工，因此使用者對於產品的需求和解讀都與一般平台不同，像是更重視資安，不能讓使用者隨意註冊帳號；或是比起介面美觀，更在乎是否容易操作。我藉由大量瀏覽相似類型的產品、換位思考和詢問客戶過去的管理方式，一步步建立專案的架構和雛型。
回頂端
