壹壹柒柒科技商店管理後台

UI 設計

2B 後台

Redesign

背景

壹壹柒柒科技提供第三方代收服務,使商家能在自己的開店平台中讓客人使用信用卡、超商代收、虛擬帳號轉帳的服務。我在此公司職位為 UI Designer ,負責設計給不同類型的商家查詢訂單與營收的後台系統。

目標

提案並建立新的 Design Guideline,及針對全系統頁面易用性優化。

專案流程

1

提案優化項目

2

製作全新 Design Guideline

3

討論 Wireframe

4

製作 Mockup

提案優化項目

後台系統資訊量多,因此如何將資料有條理地呈現,讓使用者能快速找到想用的功能,是我們優化的目標。

重新分配畫面佈局

舊版本將功能選單垂直排列與畫面左側,然而後台資料量多且亦為垂直排列,視覺呈現過於類似,容易誤以為同一資訊層級。因此新版本將功能選單移至上方,且增加陰影與改變底色,將此與頁面內容區隔出來。

明細頁改變資料排列方式,讓使用者不再無盡下滑滾輪

舊版本資訊單行垂直排列容易造成頁面過長,且右半邊畫面多為空白,因此我們將資訊分行並根據資料長度制定換行規則,以確保視覺上的整齊舒適性。我們也將明細頁調整成 popup 形式,讓使用者能更輕鬆於多筆明細間交叉比對。

收整表單填寫頁

原先表單填寫頁將步驟條顯示在左側,壓縮到表單內容的寬度,因此將步驟條改為可展開與收合的結構,讓使用者能快速展開想填寫或修改的特定欄位

💡

除了整體畫面,細節設計上,也新增各填寫項目視覺提示,讓使用者更能掌握填寫進度與狀態

製作全新 Design Guideline

根據視覺提案結果,我製作了一份給團隊間共享的設計元件庫,確保在不同系統之間能維持設計的一致性。

討論 Wireframe

透過 Wireframe 與產品經理討論元件的使用與畫面呈現

製作 Mockup

使用 Sketch 製作畫面,並上傳到 Zeplin 與前端交付設計

產出全系統介面

- Thank YOU -

回首頁