我與產品經理合作，在共同會議統整完業務和上級的需求後，先由產品經理提出改版大方向，接著討論出問題的解決方法，最後由我負責完成整個專案的UI設計和視覺設計。
我們選擇和客戶第一線接觸的利益關係人 — 業務人員進行集體會議，搜集他們的回饋。
在搜集完回饋之後，對於目前客戶使用上的問題有了初步認識。我們決定先從改善操作流程和重新設計UI介面下手。等待新版本上線，再根據真實用戶的回饋做更新迭代。
因為篇幅有限，這裡僅展示影響核心體驗的部分－UI介面的改版、首頁的呈現，以及容易令人困惑的重要功能－「促銷設定」的流程及介面優化。
1. 設計使用框架，呈現方式太過死板
後台網站的UI介面皆是使用Bootstrap的框架開發，沒有經過設計。因此排版十分單調呆板，例如：大部分的頁面皆是將資訊放置於Table表格中，但並不是所有資訊都適合以Table的形式做呈現。
之外，在視覺風格的部分，不但沒有品牌的特色，元件的形狀、顏色也不統一。
所有的資訊都是以Table的樣式作做呈現
2. 首頁的重要空間被浪費
身為網站一進來的入口、在進行所有操作之前的必經路線，此頁面在當天尚未有銷售紀錄時是空白的，不但造成了使用者困惑，也浪費了重要的空間。
空白的頁面沒有傳達任何資訊，也讓使用者感到困惑
在有了銷售紀錄之後，會以圓餅圖的方式呈現。但是圓餅圖並非是一個理想的呈現方式，當商品數量一多，無法明顯看出各個商品的銷售排行。
有了銷售紀錄之後的介面
3. 操作邏輯不直觀，使用者體驗不佳
以客戶設定促銷的流程為例。
促銷設定外層頁面
看不出來促銷的活動狀態
過期的活動依然會存在於促銷之內，在外層頁面沒有任何地方顯示促銷的時間或狀態，導致使用者要花很多時間尋找過期的促銷，一一修改或刪除。
搜尋流程不夠順暢
有時使用者需要尋找特定商品被設定在哪個促銷內。在右下的搜尋區搜尋出商品之後，無法直接點進該促銷的設定頁面，必須自行從左側找出該促銷，點按編輯才能進行後續操作。
搜尋出來的結果無法直接點選操作
促銷設定內層頁面
標題的名稱令人困惑
「群組」、「小群組」及「自訂商品」傳達的意思並不明確。
操作順序不明確
使用者一開始進來時，不知道該從哪個區塊開始操作。
每個區塊都可點選，看不出操作順序
1. 建立一致的視覺風格
改善網站的UI介面，重新設計元件和排版。
2. 建立直觀、符合邏輯的使用者體驗
讓客戶能在沒有業務指導的情況下也能快速上手。
網頁架構
首先團隊討論了要增減哪些功能及頁面，哪些頁面可以合併在一起，重整網頁架構。
後台網站的頁面架構，紅色代表有所改變或增減
促銷設定頁面
客戶來到這裡的目的是為了設定前台POS的促銷活動，使用者的情境和流程如下：
我和產品經理來來回回討論了多次，參考競品和其他後台設定的網站，一開始先以能將所有步驟在一個頁面完成為方向去做設計。
最後我們決定改變列表的樣式，並且盡可能縮減大區塊數量，使畫面看起來更簡潔。
第一個版本的定版設計
後來和團隊討論過後，發現這樣的設計有兩個缺點
查詢商品功能不夠明顯
因為使用此功能的人除了設定促銷之外，也常常需要查詢商品在哪個促銷之內，此版本設計將查詢商品功能藏在一個🔍符號裡面，顯得重要性不高，且容易被人忽略。
所有功能一次展現，太多雜訊
在進入促銷頁面時，預設出現的促銷和商品不一定是使用者想查詢的，或者是他們單純是要查詢某樣商品在哪個促銷內。這樣一次展現所有功能會讓使用者看到太多雜訊，整個頁面能操作的地方太多，也容易使使用者困惑，無法專注在當下要做的任務上。
首頁
根據業務的回饋，讓客戶在一開始進來時就能看到營業額圖表和列表，於是我們製作了一個展示銷售狀況的dashboard放在首頁。
營業狀況比較
以視覺化的方式呈現各門市的當月銷售額比較，若滑鼠Hover到當日的時間，會顯示該日的銷售資料。
銷售前十名
呈現該月的銷售排行，讓用戶能根據銷量改變行銷策略或調整進貨量。
自訂捷徑
因為不是每個用戶都會使用到所有的功能，此功能能讓用戶根據自己的使用習慣設定快速按鈕，增加操作效率。
促銷設定頁面外層
最終我們決定維持原本分成兩層的設定，減少單一頁面的資訊，讓用戶更能夠專注在當下要完成的任務上。
搜尋商品更加便利
使用者能夠文字搜尋或是雙擊選擇，尋找想要的商品在哪個促銷頁面，搜尋出來之後可以直接點進該促銷進入內頁。
促銷狀態一目了然
在外面顯示促銷狀態的標籤，解決了先前在外層頁面無法查看過期促銷的問題 （註）當初有想過是否讓過期促銷自動失效，但考量到有些促銷是週期性或可能會重複使用，還是與予保留。
不用擔心沒設定到收銀台
在活動名稱的部分，使用者能夠一目了然哪些促銷設定了哪些收銀台，在新增活動名稱時也能同時設定收銀台，降低失誤。
編輯活動名稱的流程
促銷設定頁面內層
操作順序更明確
改版之後用*（必選）和提示（請先設定促銷類型）來引導使用者設定的操作順序。
2. 促銷類型選單的優化
將新增促銷時的下拉式選單移至內層再選擇，並且將原本一次展開的選項分門別類，拆分為兩步驟進行，解決促銷類型選項太多超出螢幕高度的問題，同時減少一次要選擇的選項，也能加快使用者操作的速度。
Before
因為項目太多，超出螢幕高度，導致要用滑鼠滾輪滑動才看得到全部選項
After
將選項拆分為兩個選單，避免一次跑出太多選項，導致眼花撩亂的問題
3. 套用類別/商品的優化
Before
意義不大的右側標籤
當用戶需要將商品加入促銷時，點選商品的同時也會將標籤顯示在右側。一開始的用意是為了讓用戶在跨頁選擇商品時，不被分頁影響，能在同個地方看到所有商品。 經過業務回饋，他們在操作時不會看右側標籤，資料少的話不需要顯示標籤，資料多的話有標籤也沒用。
視窗高度超出螢幕，要往下滑才看得到確定按鈕
若商品顯示的數量很多，在選完商品後，必須使用滑鼠滾輪滑到頁面最下方才看得到確定按鈕，體驗不佳。
After
我們拿掉了原本放右側標籤的空間，並且推測使用者使用類別當作篩選條件的頻率會很高，所以將類別篩選拉出來做成獨立選單，讓使用者可以快速縮小範圍，加快在茫茫商品海中尋找目標商品的效率。
套用商品的modal
設定完商品後的樣子
Nav Bar的優化
Before
原本的Nav bar在選項數量很多時，會出現視窗卡在螢幕一半，需要上下滑動的尷尬情形。
After
重新設計後，將Nav bar改為放在側邊，並且添加icon，增加識別度。若該選項的內容比較多，會以多層級的方式展現，避免一次出現太多選項，導致搜尋困難。
UI Kit
設計元件
顏色&字體
1. B2B後台設計挑戰：平衡功能需求與使用邏輯
這是我第一次設計這麼龐大、擁有上百個頁面的後台系統，相較於前台形象網站重視動態效果和品牌特色的傳達，後台系統（尤其是B2B）更重視功能性和使用邏輯，所有功能都是來自於客戶的硬性需求，不能任意刪減。如何在這樣的前提下讓網站視覺煥然一新，是個很大的挑戰。
另外，因為內部人員並不是客戶，對於商家設定促銷、套餐、口味等功能的邏輯不太了解，還要考量和前台的POS系統相互配合的部分，團隊在過程中花好了幾個月的時間，來來回回釐清客戶的真實使用情境和底層需求，是這次專案比較困難的部分。
2. 產品優化之路：發掘未被察覺的客戶痛點
目前的改版是基於和第一線客戶接觸的業務人員回饋，或許客戶有些隱性痛點是我們尚未發現的。希望在產品發布後，能根據真實客戶的回饋慢慢修正，讓產品更貼近客戶的使用邏輯。
更多專案
