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