Projects
- ALL
- WEBSITE
- GRAPHIC
- Project
- 綠杏健康力-健康量測、疫苗接種
- Team Members
- PM / DESIGNER / (APP) ENGINEER
- JD
- 競品分析、UIUX design、Icon design、Color system
- Visit Website
- https://www.dradvice.com.tw/aidradvice/
- Review
- 專案為App新增功能，產品主要是做健康量測紀錄
參與做競品分析將功能相近產品、不同產品競爭者全面分析找出差異和優劣勢、市場定位和旅程體驗...，將收集的分析資料較符合品牌和市場的功能試著將它(競品)優化讓它更貼近品牌使用者，使用雙鑽石設計流程討論，PM製作Flow Chart、設計師加入共同討論分析使用者情境，有了共同認知和方向先做出wireframe架構討論、調整 
- 解決過去紙本資料或手上無過往計錄，透過健康量測App做記錄讓數據一目了然身體變化
輸入量測項目時會透過數據提醒目前是否有高低標、標準範圍值內，了解自己身體健康狀況；也可設定權限將個人量測數據分享給親人朋友、醫療院所，親人朋友可近一步關心是否需陪同盡快就醫，而醫生可透過數據快速對症下藥。製作mockup初版設計時和PM討論，在調整上方向較前期作業更明確和快速 
- 針對專案設計一套Components，將元件做variant在UI Design不同情境下可快速切換，也設計一套Color system
- 在UI Design時也會發現能有更易用的行為模式
專案使用MVP模式開發，在設計後期時也會和工程師共同討論開發時程，在決定是否放入此次專案開發或產品後續優化；例如：使用者新增量測數據後，欲新增其他種類量測數據更快速的步驟。Mockup有加入Prototype示意操作體驗和方便討論 
- 在各量測輸入頁添加小提醒、量測紀錄頁可快速切換時間範圍相比較之前，如新生兒生長曲線透過衛福部提供的數據提醒是落在哪個範圍值內，這些各個測量範圍區間數據收集則是在專案前期做的整理
- 透過任務方式讓使用者習慣性使用App輸入量測紀錄、觀看健康狀態，獲得的點數可透過線上商城和實體門市購買商品折抵金額
- App開發最後階段做了內部做功能測試，在本專案中反覆討論來回調整，學習到很多UX思維像是產品市場分析、在不同情境下會遇到的狀況判斷能力、App開發流程和Api串接...，在下一階段優化和開發的功能也開始做競品分析、規劃。在專案中獲得最有成就部份在於找到使用者情境問題，試著想出解決的方法和跨部門的溝通能力如何在利害人關係中將需求上達成共識讓專案順利。
- Project
- 綠杏健康力-會員註冊/登入優化
- Team Members
- PM / DESIGNER / (APP) ENGINEER
- JD
- UIUX design、Icon design、Color system
- Review
- 專案主要為了註冊流程優化、新增第三方帳號功能，合併整合線上線下和App的新舊會員
綠杏健康力有線下門市、線上商城、綠杏健康力APP...集團事業逐漸擴大，早期會員未走過完整註冊步驟導至會員資料上無法辨認準確性，優化註冊流程可獲得更明確會員的輪廓透過數據對會員準確行銷和會員保持更長久關係...；舊會員資料會透過工程師篩選將閒置多年的帳號寄送簡訊、Email通知告知相關資訊和會員權利，專案前期PM花了較多時間做UX研究搜集、情境分析；設計師加入階段為Wireframe後，先透過Flow Chart了解各個會遇到的情境，在App UI Design發想時提出註冊/登入結合前導頁功能很快被認同 
- 因App有量測數據屬個資方面所以也需考量排除避免個資外洩可能性發生
UI Design時也遇到多種不同情境須了解的問題所以花了不少時間討論才完成初版畫面，在畫面上使用步驟狀態讓使用者有先被告知心態讓使用者感到操作是順暢，在input欄位加入Placeholder提醒另外增加一行說明文字提示代替紅色文字警示減少壓力，按鈕的預設狀態、位置和文字表達是否能讓使用者順利完成操作體驗也是重要的因素，在可能卡關的步驟加上連絡客服專線，盡可能讓使用者在操作當下不感到困惑或找到需要的協助 
-
另外還負責線上商城網頁版的會員註冊/登入RWD切版，使用js語法如：OTP填寫自動跳格、OTP重取倒數秒數、密碼顯示/隱藏切換...，
App專案開發完成後，內部進行功能測試﹑易用性測試...，在專案中學到多種判斷情境、釐清問題、工程師所遇到的問題討論...，開發中 待續。
- Project
- 內政部 - 海域資訊整合平台
- Team Members
- PM / DESIGNER / IT
- JD
- UIUX design、Icon design、Color system
- Visit Website
- https://ocean.moi.gov.tw/Map
- Review
- 專案開發主要是負責內政部海域資訊整合平臺
提供海域資訊整合平臺相關動態消息、各項活動記錄、重要事項公開等，可依據日期、消息類型及關鍵字查詢。有鑒於內政部已多年進行陸地上圖資資源整合，並有共同的資料標準、地圖平臺、資料更新、供應服務等平臺式的成果提供各業務相關單位資源整合，發揮流通互享之最大利益，讓人民對於我國週遭海域有進一步的認識 
-
專案前期研究大量資訊分析和規劃主要是PM團隊(約4~6人)負責，專案跨部門會議會有所有設計師和專案所有RD工程師加入
系統主要是以功能操作服務和RWD設計，較多專業資訊先花些時間了解產品架構，設計師提供不同的Referece和PM討論風格方向後PM製作Wirefrme和設計討論，設計師再從mockup接手先提供初版確認風格和UI design。為每個功能、工具選單製作icon design和以海洋大地色和對比色搭配一套color system 
- 為了讓地圖畫面呈現較為完整，UI design上方為選單、左側為次選單、右側為量測工具，左右功能列是可收和功能；RWD預設為收和狀態只顯示icon
- UI design頁面超過20頁還需同時規劃RWD設計，確認UI操作邏輯和風格一致，用較直覺減少學習讓使用者能順道完成資料查找
- 登入者如是管理者身分會多管理頁面權限功能，透過平臺可多人共編更新或新增資訊完成維護
- 大型專案中學習最多的有跨部門溝通，釐清專案需求協助完成設計部分和階段式需交付給RD的檔案格式和備註。還有重要的時程規劃，將每個功能釐清階段式完成在時間內和PM確認UI資訊再提供檔案給RD和說明，能在專案中更認識負責的窗口也能讓專案更順利。
- Project
- 經濟部 - 自然環境資料庫網站
- Team Members
- PM / DESIGNER / IT
- JD
- UIUX design、Icon design、Color system
- Review
- 專案開發目的：結合全國各種具有空間分佈特性之地理資料，將國土空間的組成物件表現在系統上，包括地上及地下的圖形（如：地形、地質、水文、地籍）及屬性（文字、符號）資料，使用者可依需要將相關的圖資加以套疊，進行資料存取、處理及分析。
- 專案有RWD開發，官網首頁以土攘層插畫風格設計搭配專案角色IP當主視覺，設計一套和水文、土攘相關icons分別有ON/OFF情境，色系以大地色為主，為了讓圖像能更組織化在左上角加上小圖標代表類別；選單icon以黑白/彩色當開關在地圖上切換圖層
- 在手機裝置時選單只保留五個工具，手機選單固定於底部利於操作讓地圖呈現最大觀看畫面，也可將頁面儲存於桌面會有系統專屬小圖示以便網後快速開起使用。 專案中最具挑戰性的部份是：選單工具每個icons設計由繁化簡+文字搭配讓使用者快速辨識。
- Project
- 昇恆昌免稅購物網 - Landing Page
- Team Members
- MARKETING / DESIGNER / IT
- JD
- UIUX design、Front-end design、GA
- Review
-
昇恆昌免稅宅配網-電商販促一頁式活動頁
由營運、行銷將本期主打商品資訊整理提供檔案給設計，先找幾款流行趨勢的reference提供給行銷參考確認風格(有時是行銷提供)，會先從KV設計確認在延伸風格色系製作UI Design，mockup確認後上產品資訊；RWD切版包含加上追蹤碼完成後上傳測試確認無跑版問題，當活動有會員登記機制將由IT串接程式，設計師最後檔案整併上傳發佈；大型販促檔期會包含EDM製作透過mailchimp系統發佈
- 在販促檔期中逐漸提昇了熟練度和時程規劃也透過GA分析看到追蹤的數據，包含跳出率、離開率、停留時間...在每季KPI指數也會由GA數據做考核指標之一
- Project
- 昇恆昌免稅購物網 - Landing Page
- Team Members
- MARKETING / DESIGNER / IT
- JD
- UIUX design、Front-end design、GA
- Visit Website
- https://www.everrichtohome.com/event/2021-CNY-Game
- Review
