歸納設計系統提升使用體驗的一致性
- 主要目標
達到老闆期望能增添些品牌色讓 App 更鮮明，所以重新制定些規範，還有從 Sketch 轉移到 Figma ，建立設計架構。
- 過程中遇到的事
與團隊夥伴在溝通時候，了解之前較缺乏 Wireframe 的設計安排可能會對之後討論方向會過於發散，讓 MVP 開發上時程延後，了解後我把 Functional Map 與 UI Flow 加進團隊討論，讓專案方向與團隊執行上會更順利，朝目標問題去解決。
- 怎麼解決遇到難題
在執行專案時工程師有時會反饋意見或是設計稿某些間距不太好設定，我會先了解遇到什麼困難，再一同討論解決辦法達到共識，到目前合作上也都是靠團隊溝通來讓專案順利執行下去。
- 成果與影響
手機也做了元件上整理（建立好 Auto layout 與 Variants ）提升開發上速度、快速調整產品上細節、保持設計上一致性，幫助產品一年時間活躍使用率提升 26% ，並且持續增加中。
設計流程 | Design process
了解需求與改善目標
從使用者回饋或會議上討論，針對解決痛點目的制定需要哪方面協助與執行方向。
設計發想架構繪製
發散思考從各方案分析與討論出最能解決問題的方向配合 Wireframe 與團隊大家釐清專案架構。
實際執行與討論
設計稿完成後交付工程師討論細部細節，讓功能產出過程中更順利些。
發版前功能測試
當要上版時候會進行 QA 測試，確認功能與畫面上不會有問題。
建立桌機設計系統訂定規範、打造產品一致性，減少疊代上混亂。
從 Sketch 轉到 Figma 讓協作與溝通效率提高，建立好每個元件的 Auto layout 讓維護與 MVP 開發上更順利。
介面交付與 UI Spec除了設計稿呈現與標注外，會把會議上討論細節列在旁邊，方便提醒自己也讓工程師可以看到。
過程中遇到的困難
- 執行新功能開發時設計稿範圍龐大，交付畫面在磨合期時也討論許多方法解決找介面問題。
解決辦法：開始看 Community 裡文件從裡面學習別人怎麼把每個介面或元件整理井然有序，把好的 Handoff 建立起應用在設計稿上，再與工程師討論有什麼不清楚或可以更好地方，此外專案要交付前都會開一個小會讓大家知道流程，有什麼介面需要再改進，也建立起每個細部功能介面大概在哪個位置可以看到，後續慢慢走出了磨合階段。 - 行銷與工程師派的專案時程安排。
解決辦法：在這學習到自己掌控專案進度，並回報給主管們，但一開始時候面臨行銷與工程師需求時，時程掌控沒那麼得心應手，行銷派下來工作得到反饋比較主觀，花的時間就稍微多一些，為了改善這情況會提前把圖再分成幾階段去討論，算好執行所需時間並準時完成交付。 - 想定義好元件相關規範，但經驗與時程關係還未有個基本架構。
解決辦法：2022 年初向公司提想把元件整理成規範，一方面有清楚架構好讓之後執行新功能更順利，另一方面也是新的學習，把元件清楚有條理整理好是不太容易的事，目前最大困難還是在於新功能持續開發，時程不易安排，元件使用隨著另一位設計夥伴離開怕會漸漸變得零散。 - 總結：手機考量的事比較繁雜，畢竟觸及率也比其他裝置還高很多，雖然溝通解決專案實作問題，但許多細部問題有時還需要時間與人員互相配合與長時間調整溝通，才能達到好的狀態。
建立手機設計庫裡的元件
為了後續開發維護，每個元件都建立好 Auto Layout 加速開發流程。
建立設計架構
在執行新專案前我會先把 Functional map 做出來，跟團隊夥伴討論後才會執行 Wireframe 製作，經過這次經驗幫助團隊更能理清開發上需要做些什麼，也不會到後期突然再加些額外功能。
設計方法
把元件設定好後，以利後面會議與反覆調整修改介面縮短時程，並減少畫面出錯機率，工程師與專案主管也可以立馬得到回饋做出最終決定。
Prototype
加快大家對新功能開發完成認識，也溝通頁面怎麼出現與消失，產出共識減少認知落差。
設計過程與產出
貼文列表/新增功能最佳化
聊天室裡的貼文列表做一些改版調整，吸收了使用者後的建議讓列表架構與呈現更清楚傳遞出去，並為新功能（主題投票）做入口 Icon ，讓新功能更容易被看到與使用。
舊畫面太多相同元素，且相同功能卻有不同樣式讓使用者使用起來非常困惑，最佳化版本使用 Tooltips 來提示用戶可以增加些什麼，並指引點選。
有元件樣式。
新增 Skeleton loader，當使用者網路不佳時也能先知道頁面呈現樣子。
看板 / 卡片介面改版
經過使用者訪談，手機使用偏向瀏覽方式，另一位設計夥伴與大家一同討論把卡片資訊重新安排與呈現，讓最重要資訊顯示出來方便查找。
發現問題：
1. Icon 顏色與樣式不清楚
2. 開啟貼圖功能點擊率不佳
3. 通話功能在一個畫面有兩個點選入口（經過點擊率調查拿掉其中一個入口）
解決問題：
1. Icon 調整了樣式讓整體更圓潤並更加清楚傳遞功能意思，另外還加粗了線條並統一粗度讓 Icon 更清楚與一致感。
2. 原本貼圖功能做在上方功能欄，但使用後不容易點選且點擊率也不佳，放到輸入框裡改善問題並也增加使用者點選意願。
3. 通話功能經過了解是老闆覺得蠻重要功能，所以想有兩個點選入口，但經過點擊率統計分析拿掉效率不好那一個，讓後續或其他功能更能被使用到。
1. Icon 顏色與樣式不清楚
2. 開啟貼圖功能點擊率不佳
3. 通話功能在一個畫面有兩個點選入口（經過點擊率調查拿掉其中一個入口）
解決問題：
1. Icon 調整了樣式讓整體更圓潤並更加清楚傳遞功能意思，另外還加粗了線條並統一粗度讓 Icon 更清楚與一致感。
2. 原本貼圖功能做在上方功能欄，但使用後不容易點選且點擊率也不佳，放到輸入框裡改善問題並也增加使用者點選意願。
3. 通話功能經過了解是老闆覺得蠻重要功能，所以想有兩個點選入口，但經過點擊率統計分析拿掉效率不好那一個，讓後續或其他功能更能被使用到。
專案回顧與反思
活躍使用率
26%
2020 進入 Letstalk 那時的我只對 (Sketch) 軟體熟練，但對介面觀念沒那麼熟悉，到後期慢慢接觸到實際專案與介面最佳化改版設計、翻閱 material design 一點一點學習與應用，再與產品負責人、工程師討論，盡可能貼近使用者解決使用上痛點，對介面敏銳度也越來越高慢慢得到成就感與鼓勵。反思：過程中不斷想把交付做得更好，讓開發流程更順調整速度更快，與安排元件整體規範跟細節，不管疊代上或之後交接都能保持產品一致性，而為元件建立規範與細節也正隨著產品開發過程中慢慢執行出來。開發一個好產品有許多細節要顧慮也持續不斷精進學習，包括文案處理與工程師溝通等等...都讓我獲取非常多經驗，我會繼續努力累積更多軟 / 硬實力並保持開放學習心態，讓使用者都能使用到好用的 App。
感謝您撥冗閱讀
