銀行登記機制頁

專案簡介

讓同仁可以更快速且方便的設定有關銀行的優惠內容,只需設定相關內容,就能在網頁顯示,以因應多元的銀行優惠。

我的角色

除了擔任UI設計外,還肩負研發與PO和需求端之間的橋樑。

我在此專案做了
  1. 收集及分析參考頁面
  2. 與研發及PO溝通資訊架構、使用者流程
  3. 設計整體視覺頁面及色彩規則,並交付設計稿
  4. 製作前台設計說明及後台上稿規則PPT
專案介紹
  1. 項目背景
  2. 因應銀行多元的活動,且每個活動都有不同的條件和時間,而現在操作的同仁必須將需求整理好後,統一由研發花時間跟人力來設定在頁面之中,而且是每次變動或者調整一個「卡片」的內容,都需經過一次研發,流程非常的冗長且麻煩。
  3. 延伸問題
  4. 因此畫面年久未維護,造成資訊混雜、文字階層不明確,用色意義不明,也在此次規劃中一併調整,並更新設計系統。

線上頁面

相關研究及參考
  1. 競網研究及分析
  2. 觀察各家操作流程,幾乎都大同小異,另外UX Writing卻都不盡相同,大致有以下幾點:
    1. 文案利用文字大小區分階層明確
    2. 畫面整體用色較為簡單
    3. 文案資訊之間的空間較為寬鬆
    4. 項目分類呈現清楚

競品參考分析紀錄

  1. 現有產品問題
  2. 經過研究和整理後才發現自家的文案常會過於冗長、資訊也會過於擁擠,文字的階層不明確,再加上用色較重,可能會導致使用者的視覺無法集中。
資訊架構
  1. 建立使用者流程(User Flow),確認資格符合與否的操作流程、時間內外的判斷等等
  2. 需求端、設計、研發三方來回確認需求項目、開發內容及操作上想要達到的效果
  3. 與工程師討論並迭代驗證資訊架構及操作流程的完整性
  4. 與需求端來回討論文案的內容,確保文案清楚又不會過於冗長

使用者操作流程

  1. 操作使用流程概要
    1. 點擊當下的判斷:
      1. 是否符合時間
      2. 會員身份
      3. 是否有符合資格的訂單、是否還有「名額」
      4. 會主動記取用戶的信用卡資料或是傳送部分資訊給銀行端(momo登記頁下方有寫明會要求該資料)
    2. 以上流程圖的狀態為「登入中」,且在登記時間內的情況下
    3. 希望使用者只要點擊按鈕即可完成登記(以上流程可參考momo現行登記方式)
設計系統
  1. 設計畫面及操作原型
  2. 提供設計畫面,並與研發討論設計細節
  3. 交付設計標注檔案及設計說明ppt

更新後的設計元件示意

各種狀態示意

結果
  1. 這個專案雖然看似簡單,卻是我目前碰過牽扯前、後端最多的一個專案之一,主要是前、後台的資料對應,在規劃前台介面時,就要設想到後台是如何設定該區塊,另外操作邏輯也是十分複雜,雖然看起來只是單純的頁面,但背後的判斷卻非常龐大,例如你是否符合資格,符合資格後是否有登入,有登入的情況下應該要顯示什麼資料,另外還有時間,是否在活動時間...等等以上總總的邏輯判斷。
  2. 再來就是頁面的呈現,因為屬於RWD畫面,所以在不同裝置底下,各卡片資訊的排列組合,Banner尺寸的大小縮放,以及其他種種可能因不同裝置而產生的問題,都要一併先考慮清楚,並且寫出邏輯規範來對應,經由這專案,可以感覺到自己有所成長。