為什麼要做吉時保？
傳統的保險又臭又長，保障內容繁複冗長，很容易不清楚自己的保障內容。
「保險可以很簡單，更好懂。」
吉時保碎片型保險網路投保平台，推出快速、小額、短期，以貼近使用需求的保險為主，合理的保障時間不浪費錢。
品牌風格
在風格上選擇藍綠色來當代表色，並以插畫風格呈現，搭配繪製代表人物「Chubby」，以情境說明方式來跟保戶溝通，在品牌印象上保戶看到這樣的藍綠色配上 Chubby ，馬上就知道是吉時保。
吉時保品牌代表色以及吉祥物。
UI 執行目標
傳統保險過於複雜的內容及投保流程，吉時保將內容簡單清楚化，更將流程簡單化，保戶可以隨時隨地、透過任何裝置，快速在 5 分鐘內用完成投保。
手機就可以完成更快更簡單。
UI 一致性
傳統保險公司在不同的商品頁面風格，以及投保流程操作的落差，在吉時保不同商品的 UI 視覺上，保持了一致的風格呈現方式，在 UI 操作上，設計了一致的操作邏輯，降低使用者在瀏覽或投保不同商品時，重新學習或記憶的時間。
一致性的品牌視覺風格及介面操作邏輯，降低使用者在瀏覽及操作體驗上的落差。
UI 操作體驗
平台 UI 設計以手機瀏覽為出發，並為了符合各種裝置的閱讀瀏覽，設計了 5個 Breakpoint，元件設計及操作也盡量符合各裝置，例如：日期的輸入，為了讓手機更好操作，選擇手動輸入，或者以下拉呈現，捨棄在行動裝置上難以操作的 Datepicker 套件，也省去前端在不同裝置上修改 Datepicker的時間。
平台 UI 設計以手機瀏覽為主。
UI Library且模組化
為了頁面設計的一致性與便利性，將元件整理成Library(元件庫)，且將重複性會使用到的組合建立成模組，並與前端工程師討論確認使用情境，不僅是設計元件模組化，在前端的開發上，會重複使用到的組合一併模組化，縮短開發時間。
建立 UI Library 且元件模組化。
Design Guideline
為了維持平台網站風格，以及操作體驗的一致性，訂定一了份 Design guideline。
投保流程優化
平台與第一個商品上線後，投保流程大面積的綠色背景，在視覺上看幾久了會疲乏，流程的文字上雖然想以口吻的方式，讓使用者在操作過程中不會覺得制式化，但也拉長了使用者在投保流程時的閱讀時間，也考慮到往後會有許多不同的商品，在投保流程上，若每一個商品都有自己的文案，使用者必須重新學習以爲，工程師也需要花時間重新開發，於是將投保流程重新設計成清爽的畫面，以及未來在不同商品上都一致的流程畫面。
優化具有一致性及復用性的投保流程。
新保戶與既有保戶分流
隨著平台以及第一個商品上線後，此階段的投保流程，已投保過的保戶需點了登入再進行投保，若未登入狀態在商品頁點了立即投保，會直接以新保戶進入投保流程。
經過使用者訪談後，發現操作上並不直覺，已投保過的保戶並不知道需要經過登入才能夠進行投保，於是決定在進入投保流程前，將新既有保戶的投保流程進行分流。
為了告訴使用者明確流程，將登入口分成上下兩塊來作引導，將新保戶投保層級向上拉，放在畫面的上方，然後將登入畫面放在下方，並告訴既有保戶需登入後才能進行投保。
提供線上理賠服務
為了提供更好的服務體驗，除了投保超方便外，理賠也要更快速、便利，於是提供了線上理賠的服務。
在製作線上理賠流程的時候，考慮到使用者已經操作過投保流程，為了不讓使用者花時間重新學習新的流程，因此在設計線上理賠流程時，以相同的元件以及操作體驗設計 UI 。
與投保流程一致性的 UI 設計及操作。
新增OTP登入
為降低使用者經常忘記密碼，或輸入錯誤密碼被鎖住的機率，提供OTP登入方式。
在保留帳號登入的功能下，要讓使用者可以快速切換登入方式，又不佔版面，並可在手機上好操作。
使用者反饋優化
在投保流程上填寫個資的生日是以西元年做填寫，但因身分證上的出生年是以民國年為主，年紀較長的使用者也不習慣記西元出生年，以致於經常有使用者投保後發現出生年填錯，向客服反映，這時候必須要走批改流程，不只造成使用者不方便，也造成客服的不便，決定將生日欄位優化調整。
在設計上，想要與使用者有互動感及趣味性，採用膠囊按鈕的切換形式，將西元年與民國年分開，不論使用者填寫西元年或者民國年，只要做切換就會自動幫使用者換算年份，優化後的確也降低了使用者填錯的機率。
金檢的規範
原本在同意事項上是以頁籤的形式呈現，無法確認使用者是否有真的閱讀完，在參考過許多呈現方式，為了符合手機操作體驗，且方便操作，不要跳出過多的彈跳視窗，決定在頁面上設計滾動閱讀瀏覽，將所有的同意事項放在同一個框裡，以標題段落方式，讓使用者往下滾動，並判斷使用者目前閱讀到的同意事項以綠色呈現，尚未閱讀的以灰色呈現，全部閱讀完後，下方的同意事項才亮起，此時才可以打勾，並繼續進行投保。
因應金檢要求，使用者在投保時，一定要完整閱讀完同意事項才可進行投保。
設計工具
與產品經理協商需求，討論需求的可行性和執行方向，確認後使用 Sketch 繪製UI Mockup。
以 Sketch 繪製 UI Mockup。
Prototype
利用切版技能，製作 RWD 的 HTML Demo Site(Prototype)，以演示UI Mockup，提供PM與需求端做確認，並與前端工程師進行 UI 可行性討論，這不僅讓非專業的需求方更容易理解UI在不同裝置上的呈現，也可降低頁面開發後的落差。
與前端的交接
UI 確認後，再將 UI Mockup 匯至 Zeplin 交付給前端切版。
透過 Zeplin 與前端做交接。
檔案管理
在執行專案的過程，也很注重檔案管理，會對頁面做編號，用Google Sheet做清單應對，還會針對每次交付出去的 UI 做 Git 版控，並紀錄說明當次執行內容。
檔案做編號，並利用 Google Sheet 依檔案編號做頁面與檔案的應對列表。
使用 Git 做版本控管，並將每次交付的內容一併同步到 UI 清單，確保 Demo Site 與 Git 版本相同。
品質掌控
頁面開發進入測試階段時，會進行頁面QC，將頁面與 UI Mock 落差的部分，列表至 Google Sheet 表單，並附上Zeplin與開發頁面的對比截圖，讓前端更清楚要調整的地方。
利用 Google Sheet 做與前端溝通QC的工具。
使用者訪談
在商品開發階段，會邀請使用者來做訪談，這階段會幫助 PM 製作使用者訪談時的 Prototype ，並一同參與訪談旁聽，觀察使用者能否透過商品頁面理解吉時保所要溝通的商品，以及使用者在平台操作上是否有遇到難。
平台及商品推廣
上線後，行銷會進行廣告投放，或抽獎活動，以增加平台與商品的曝光度，此時會與行銷討論廣告投放內容，並繪製線上或線下廣告投放物，如 FB 貼文、IG限動廣告、廣編稿、印刷文宣，或大型戶外廣告等。
吉時保 Facebook 常態性貼文圖片繪製
台東火車站出口大型看板視覺設計。
花蓮火車站出口燈箱視覺設計。
吉時保聯名白沙屯媽祖聯名附身符視覺設計，及 Facebook 抽獎貼文圖片繪製。
吉時保各類印刷品設計。
LOGO 重新設計
吉時保原先的 LOGO 設計的線條不在同一個水平線上，視覺上會有種雜亂感。
未調整前的 LOGO 視覺上雜亂比重不一致。
重新調整了視覺上的比例上，讓視覺上比重一致，消除視覺上的雜亂感。
調整後的 LOGO 視覺上比重更一致舒適。
在這版的重新調整，同時也設計了 LOGO 的比例，並定義了了 LOGO 的 Guideline。
完整的吉時保
在平台的設計過程中，不只將建立的吉時保 UI 的 Library 且模組化，還建立平台的 Design Guieline，在 Logo 重新設計時，一併建立了 Logo 的 Guideline，完整了整個吉時保的設計，也讓吉時保變成一個有完整的品牌設計的投保平台。
完整的品牌設計。
＊作品版權屬 新安東京海上產物保險股份有限公司 所有＊