全新 Letstalk 桌機使用介面；為辦公族群打造最有效率通訊應用軟體
- 主要目標
由於桌機設計系統與功能跟手機相比沒那麼完善，讓辦公受眾群感到不便利進而影響到使用率，所以除了要把設計系統整合起來也要與手機平台做配合，建構一套完整體系，以利後面維護與開發。
- 過程中遇到的事
初期在做的時候是使用 Sketch 與 Zeplin 與工程師和另一位設計師做配合，後來發現 Figma 共同協作與交付等等...種種好處，所以著手開始研究學習也與工程師溝通做了一些調整包括怎麼看尺寸、間距與下載元件，使開發流程變得便利也讓設計稿逐漸變得更完整。
- 怎麼解決遇到難題
大量溝通縮短磨合期，當遇到需要做抉擇時，會提出為什麼會有這想法與有什麼影響，來與大家討論是否接近解決主要目標方向，再做調整與改善，讓功能推出能更接近使用者需求。
- 成果與影響
提升開發上速度、快速調整產品上細節、保持設計上一致性，幫助產品一年時間活躍使用率提升 26% ，並且團隊溝通效率也有顯著提升。
設計流程 | Design process
了解需求與改善目標
從使用者回饋或會議上討論，針對解決痛點目的制定需要哪方面協助與執行方向。
設計發想架構繪製
發散思考從各方案分析與討論出最能解決問題的方向配合 Wireframe 與團隊大家釐清專案架構。
實際執行與討論
設計稿完成後交付工程師討論細部細節，讓功能產出過程中更順利些。
發版前功能測試
當要上版時候會進行 QA 測試，確認功能與畫面上不會有問題。
建立桌機設計系統訂定規範、打造產品一致性，減少疊代上混亂。
從 Sketch 轉到 Figma 讓協作與溝通效率提高，建立好每個元件的 Auto layout 讓維護與 MVP 開發上更順利。
介面交付與 UI Spec除了設計稿呈現與標注外，會把會議上討論細節列在旁邊，方便提醒自己也讓工程師可以看到。
過程中遇到的困難
- 在開發過程中遇到目前沒有資源去實施設計稿的介面，如何溝通讓產品開發順利完成。
解決辦法：我會先了解遇到困難點是什麼，再一起討論怎麼改善這部分，並保留原本版本希望將來有時間或資源可以執行出來。 - 遇到設計圖上的尺寸實際跟工程師上調的不一致。
解決辦法：工程師在執行上雖然按照設計稿上尺寸去定義物件大小但實際程式執行出來看卻不一樣，我會坐在工程師旁邊一起討論，並細部調整些尺寸間距，讓誤差縮短有不好疑慮點也會調整設計稿。 - 在會議上大家對專案有許多想法，在討論過程中有時會無止盡延伸支點，困難於當下要記錄並適時提問把重點拉回來。
解決辦法：解決紀錄問題我會用 Notion 或 Figjam 來快速做重點整理，並建置模板之後可以根據哪位平台工程師說得再跟他詢問了解。 - 總結：「溝通」是團隊合作上最花費時間也最重要的，讓想法與實作能配合是我努力方向，好幾次我自己也陷入專案上的流程或介面糾結，這時有工程師或其他職員加入討論放入不同觀點，會讓難以抉擇情況趨緩很多。
Prototype
部分專案需要 Prototype 來輔助工程師了解怎麼呈現效果比較好。例如：這例子我點選搜尋後的聯絡人訊息，在聊天室會跳出提示框如此比較清楚要呈現多久怎麼呈現達到理想樣子。
建立桌機設計庫裡的元件
為了後續開發維護，每個元件都建立好 Auto Layout 加速開發流程。
這次最佳化版本在與團隊討論後也訂定各個狀態按鈕尺寸與樣式規範，讓產品整體更有一致性。
讓交付更順利，我會加註一些標注，幫助工程師瀏覽畫面狀態，與後期調整時也能更清楚知道有做了哪些調整與注意事項。
設計過程與產出
看板功能最佳化
在新版最大改變除了進入首頁，再來就是看板功能介面，他最主要是提供給辦公族群很好分派專案事項的功能，改變了幾個要點
1. Icon 最佳化並加上 Hint 顯示標註。
2. 每個列表都會顯示底下有多少張卡片。
3. 卡片裡的成員更好被清楚點選看到。
4. 建立好 Auto Layout 與工程師溝通相互了解實際產出產品最終成果。
1. Icon 最佳化並加上 Hint 顯示標註。
2. 每個列表都會顯示底下有多少張卡片。
3. 卡片裡的成員更好被清楚點選看到。
4. 建立好 Auto Layout 與工程師溝通相互了解實際產出產品最終成果。
設計品管 | Quality Assurance
工程師完成後會有發版測試，這時也會需要設計師來幫忙一起使用看看有沒有跟當初設計一致，會不會有閃退或其他原因造成不能操作狀況，當有問題就會（如上圖）做標示，改正後會再確認，確認沒問題會打勾標註。
專案回顧與反思
活躍使用率
26%
在桌機開發上帶給我更多不同觀點，也學到怎麼把手機操作帶入到桌機上，也參考不少 Material Design 上提供的資料，把它應用到實際產品再與工程師做討論，交互上也與團隊來回溝通做許多調整，過程中很多人意見與觀點需要整理內化再呈現出去，除了逐步建立規範，但也保持些許彈性，目的是讓成果達到美觀、直覺、一致性讓使用者喜愛這個產品，藉此讓自己生產力有所提升。除了在開發上有所收穫，再來就是對 Figma 熟悉度與疊代上的維護，也是看了許多 Figma 上的 community 裡大公司分享的文件慢慢去學習改進一些交付流程與設計稿，也讓我從中成長許多。
感謝您撥冗閱讀
