方案價(jià)值

金融行業(yè)UI設計方案價(jià)值
  • 功能新增

    增加協(xié)作流程的功能,增強全局菜單、全局搜索等跨系統功能,增強不同角色的協(xié)作和業(yè)務(wù)流轉針對金融細分行業(yè)的創(chuàng )新功能。

  • 產(chǎn)品體驗改進(jìn)

    一致性全局菜單導航,更好的操作定位,設置高頻操作的快捷入口及每日任務(wù)匯總,增強符合用戶(hù)習慣的信息查找檢索,所見(jiàn)即所得的頁(yè)面顯示和編輯,方便用戶(hù)操作,更多的提醒和顯示,減少操作錯誤,提升業(yè)務(wù)效率流程化的信息顯示, 增加操作步驟和動(dòng)線(xiàn)提示,幫助連貫操作,考慮不同角色的使用和操作簡(jiǎn)便性,去除不必要的操作和界面。

  • 新價(jià)值輸出

    從單一經(jīng)辦變成一站式業(yè)務(wù)工作站,將數據的在線(xiàn)瀏覽編輯變成所見(jiàn)即所得的編輯操作,將記錄報送變成業(yè)務(wù)流程的融合工作空間,針對金融細分行業(yè)提供關(guān)鍵場(chǎng)景應用創(chuàng )新。

  • 金融行業(yè)用戶(hù)研究
    • 用戶(hù)研究
    • 1、代入典型用戶(hù)角色進(jìn)行討論,圍繞業(yè)務(wù)場(chǎng)景流程,明確角色權限,梳理業(yè)務(wù)規則
    • 2、梳理操作任務(wù)和使用流,梳理系統交互操作和用戶(hù)交互操作,并進(jìn)行區分
    • 3、體系化梳理已有交互體驗和易用性問(wèn)題,討論并補充新問(wèn)題
    • 4、提出新的設計建議
  • 金融行業(yè)交互優(yōu)化
    • 交互優(yōu)化
    • 1、了解軟件業(yè)務(wù)及功能,從整體信息架構上梳理整合菜單及功能
    • 2、梳理系統平臺首頁(yè)不同角色所用業(yè)務(wù),針對用戶(hù)需求取舍內容,概要展示
    • 3、畫(huà)出全流程頁(yè)面交互原型,優(yōu)化操作流程,提升用戶(hù)體驗,提高用戶(hù)的工作效率。
    • 4、滿(mǎn)足目標用戶(hù)的需求和習慣,建立人性化的交互引導。
  • 金融行業(yè)UI視覺(jué)優(yōu)化升級
    • UI視覺(jué)優(yōu)化升級
    • 1、系統UI視覺(jué)要符合主流設計審美趨勢、符合行業(yè)特性、具備品牌特色
    • 2、需要支持國際化,符合國際化UI設計規范
    • 3、整個(gè)系統需要形成一套完整的UI設計規范
    • 4、布局靈活,適配不同布局要求
  • 金融行業(yè)UI設計規范沿用
    • 規范沿用
    • 1、后續的UI規范更好的沿用到其他子系統
    • 2、提升優(yōu)化用戶(hù)體驗的方法論和知識
    • 3、系統風(fēng)格沿用至少5年不被淘汰
    • 4、開(kāi)發(fā)中建立對應的組件代碼庫和主題庫

工作方法

  • 準備階段
  • 開(kāi)始
  • 中期
  • 成果
  • 交付物
  • 節點(diǎn)確認
用研 了解系統及構思用研方式
1.熟悉系統
2.梳理訪(fǎng)談內容
3.確定訪(fǎng)談方式
4.確定邀請人選 進(jìn)行用戶(hù)研究
1.邀請用戶(hù)訪(fǎng)談
2.了解用戶(hù)使用過(guò)程中痛點(diǎn)難點(diǎn)
3.進(jìn)行業(yè)務(wù)場(chǎng)景歸類(lèi),了解不同業(yè)務(wù)場(chǎng)景用戶(hù)使用習慣 根據用研結果驗證交互可行
針對用研階段的問(wèn)題,進(jìn)行交互驗證,查驗是否解決用戶(hù)問(wèn)題。 校驗交互設計稿,對比提出修改意見(jiàn) 1.用研問(wèn)題清單
2.系統存在問(wèn)題清單
3用研報告
用研報告確認函
交互 成為系統用戶(hù)
1.熟悉系統
2.梳理系統架構
3.參考競品
4.??體發(fā)現的問(wèn)題
5.初步構思解決方案
1.協(xié)助用研同事進(jìn)行用戶(hù)訪(fǎng)談
2.記錄用研過(guò)程中的問(wèn)題
3.將記錄的問(wèn)題與準備階段發(fā)現的問(wèn)題進(jìn)行交叉對比驗證,找出哪些是共性問(wèn)題,哪些是新增問(wèn)題,為交互設計提供支撐。
1 設計交互原型,先進(jìn)行關(guān)鍵模塊的設計。
2. 聯(lián)系客戶(hù)進(jìn)行原型測試,并收集測試反饋。
3.依據用研反饋問(wèn)題和用戶(hù)反饋問(wèn)題,進(jìn)行迭代修改。
4.重復此過(guò)程完成全部。
分批確認交互原型至確認 1.補充問(wèn)題清單
2.需求分析文檔
3 關(guān)鍵節點(diǎn)的交互設計圖
4全流程的交互設計
交互設計確認函
視覺(jué) 1.熟悉系統、目標用戶(hù)
2搜集相關(guān)軟件資料
1.搜集相關(guān)設計風(fēng)格圖片、競品設計 依據原型圖進(jìn)行視覺(jué)設計 分批確認視覺(jué)稿至確認 視覺(jué)設計 視覺(jué)設計確認函
開(kāi)發(fā) 了解系統技術(shù)前端開(kāi)發(fā)框架,做好技術(shù)選型 和設計師溝通,熟悉設計稿的交互跳轉方式操作邏輯 依據視覺(jué)設計稿進(jìn)行前端開(kāi)發(fā),進(jìn)行視覺(jué)走查,保證良好的復原度和良好的使用 接入數據、對好接口和聯(lián)調,后端寫(xiě)好功能,通過(guò)綜合測試 軟件代碼 前端開(kāi)發(fā)確認函
階段目標 1.消除對系統的陌生感
2.找出當前系統在交互和信息架構上存在的問(wèn)題
對齊認知,消除認知偏差,深入了解用戶(hù)需求完善場(chǎng)景劃分,了解現在系統和用戶(hù)期望之間的差距,確定優(yōu)化方法。 對用研反饋的問(wèn)題進(jìn)行針對性的改進(jìn),并落地形成可視化解決方案。 依據交互設計,提供完整的視覺(jué)設計方案,前端開(kāi)發(fā)接近設計稿,完成最終開(kāi)發(fā)功能及測試

協(xié)作機制

  • 時(shí)間:根據調研訪(fǎng)談?dòng)媱?
  • 參與人:藍藍設計、訪(fǎng)談對象
  • 主要溝通內容:相關(guān)需求
  • 成果:訪(fǎng)談紀要、調研反饋與總結
  • 時(shí)間:每周二
  • 參與人:雙方項目組負責人
  • 主要溝通內容:工作完成情況,設計方案、資源協(xié)調、風(fēng)險預案。
  • 成果:項目周報(界面及交互設計展示)
  • 時(shí)間:交互設計和UI設計節點(diǎn),開(kāi)發(fā)節點(diǎn)
  • 參與人:雙方項目組
  • 主要溝通內容:對交互設計和UI視覺(jué)設計做評審及開(kāi)發(fā)效果走查 培訓
  • 成果:評審結果、修改意見(jiàn)
  • 時(shí)間:交互設計和UI設計節點(diǎn)
  • 參與人:雙方項目組
  • 主要溝通內容:對交互設計和UI視覺(jué)設計做評審
  • 成果:評審結果、修改意見(jiàn)

方案亮點(diǎn)

01 十年積累,對征信系統、數據報送、反洗錢(qián)、1104、east等軟件業(yè)務(wù)的理解

藍藍設計持續關(guān)注征信系統、數據報送、反洗錢(qián)、1104、east等軟件的細分領(lǐng)域,通過(guò)和多家公司合作此類(lèi)項目的經(jīng)驗,對業(yè)務(wù)功能及用戶(hù)喜好有一定了解。
      參加金融、銀行的各種工作坊,關(guān)注國外行業(yè)領(lǐng)先者產(chǎn)品,不斷學(xué)習和提升,形成先進(jìn)的方法論,并在項目中已驗證落地。
可以整合系統架構,畫(huà)出軟件整體全流程頁(yè)面交互原型,合并或展開(kāi)任務(wù)步驟頁(yè)面,優(yōu)化操作流程,提升用戶(hù)滿(mǎn)意度和工作效率。

金融行業(yè)UI設計經(jīng)驗
02 專(zhuān)業(yè)的研究設計和研究方法

從用戶(hù)體驗設計的角度
了解現有用戶(hù)對系統的日常使用情況及使用習慣,梳理產(chǎn)品體驗和系統可用性問(wèn)題,用戶(hù)對系統的使用場(chǎng)景和需求。

  • 提問(wèn):您通常使用哪些功能?為什么這些功能對您很重要?
  • 詢(xún)問(wèn):您認為目前軟件哪些方面做得好?哪些方面可以改進(jìn)?
  • 探討:使用中是否遇到了任何困難或挑戰?有什么建議?
金融行業(yè)UI設計研究方法
03 邀約最終典型用戶(hù)和內部用戶(hù),傾聽(tīng)洞察用戶(hù)的觀(guān)點(diǎn),開(kāi)展工作坊

內部用戶(hù)條件

來(lái)自咨詢(xún)部、交付中心的工作同事

熟悉業(yè)務(wù)場(chǎng)景要求,熟悉任務(wù)操作流程要求

熟悉界面功能以及用戶(hù)操作,了解典型性問(wèn)題和代表性問(wèn)題。

代表系統的典型用戶(hù),分角色參與討論

每個(gè)參與者有一個(gè)指定的身份(分別以操作員、審查員的身份)代入參與小組座談會(huì )+工作坊討論。

外部用戶(hù)條件

來(lái)自終端銀行的業(yè)務(wù)部門(mén)的典型用戶(hù),熟悉業(yè)務(wù)場(chǎng)景要求,熟悉任務(wù)操作以及流程要求

為日常高頻使用系統的用戶(hù),熟悉系統/子系統,熟悉界面功能以及系統操作,了解典型性問(wèn)題和代表性問(wèn)題

操作角色(以數據錄入和上報等操作為主),審查角色(以業(yè)務(wù)審批、業(yè)務(wù)管理設置等操作為主) = 1:1

金融行業(yè)ui設計焦點(diǎn)小組方法討論
金融行業(yè)ui情景訪(fǎng)談
04 全流程交互原型設計,對關(guān)鍵及復雜任務(wù)場(chǎng)景創(chuàng )新改變原有布局和工作流程

對關(guān)鍵及復雜任務(wù)場(chǎng)景,進(jìn)行內部及外部用戶(hù)的調研,了解用戶(hù)期待和使用時(shí)的痛點(diǎn)后,結合對產(chǎn)品的理解,專(zhuān)業(yè)的設計積累,顛覆性改變原有布局和工作流程,創(chuàng )新改變交互方式,使軟件更易用。

金融行業(yè)UIUE案例
金融行業(yè)UIUE案例
05 用儀表盤(pán)搭建管理駕駛倉,讓用戶(hù)秒懂整個(gè)平臺工作運行情況

全局首頁(yè)主要功能地位為讓用戶(hù)了解整個(gè)平臺工作運行情況,當天任務(wù)情況;并將用戶(hù)分流引導至關(guān)注的子系統中。
      用多維表格儀表盤(pán)快速搭建了豐富的管理看板,它可以幫助管理者快速查看業(yè)務(wù)數據,管理者也可以根據自己的需求自定義配置圖表,隨時(shí)、全面地從多維度了解業(yè)務(wù)進(jìn)展狀況,及時(shí)調整業(yè)務(wù)策略,提高業(yè)務(wù)效率和業(yè)績(jì)。

金融行業(yè)全流程原型設計
06 微動(dòng)效信息折疊收納,界面空間利用更合理

金融業(yè)務(wù)的復雜性直接影響了產(chǎn)品設計中的信息量和展示方式,這對設計師提出了嚴峻挑戰,在有限的視覺(jué)空間內如何高效、清晰地傳達關(guān)鍵信息。以便攜式筆記本為例,一屏看到的內容有限,往往導致頁(yè)面布局擁擠,影響用戶(hù)體驗。
      面對這種信息過(guò)載的問(wèn)題,我們提出了“折疊收納”的設計策略。通過(guò)合理的信息層次劃分和交互設計,將大量信息進(jìn)行有序的組織和隱藏,使得用戶(hù)在需要時(shí)能夠方便地展開(kāi)獲取,而在不需要時(shí)則保持頁(yè)面的簡(jiǎn)潔和清晰,實(shí)現信息與美觀(guān)的雙重優(yōu)化。

金融行業(yè)UI設計微動(dòng)效
07 多維表格解決表格內容過(guò)多,打破舊有表現形式,直觀(guān)生動(dòng)傳達數據

所見(jiàn)即所得的頁(yè)面顯示和編輯,用戶(hù)不用跳出頁(yè)面和尋找其他入口包括結構化的數據展示,表頭篩選,表格嵌套結構,主子表結構設計,高級篩選-選項顯示等功能。

金融行業(yè)UI表格設計
金融行業(yè)UI表格設計
08 優(yōu)化卡片內容,尋求每個(gè)場(chǎng)景下的極致體驗

卡片式設計包含圖片以及文案并且有明顯邊界的信息區塊,本身可以是一個(gè)完整的信息區塊,也可以作為更多具體內容的一個(gè)入口,同時(shí)也能承載豐富的互動(dòng)方式。同時(shí)卡片的里面內容的層級關(guān)系,以及信息的主次在設計時(shí)是要特別注意的,否則會(huì )讓信息顯得雜亂。所以卡片設計作為一個(gè)獨立的容器,可以在內容上進(jìn)行良好的布局組織,將信息分塊,突出重點(diǎn),讓用戶(hù)快速找到感興趣的內容,避免在繁雜的信息集中浪費時(shí)間。需要展示給用戶(hù)的第一要素是『這是什么應用』,每個(gè)獨立卡片中承載的圖標和名稱(chēng)可以以最生動(dòng)形象的感知傳達給用戶(hù)。 注重功能化導向設計,讓用戶(hù)愉悅的完成任務(wù),注重感知和情緒設計會(huì )讓用戶(hù)更加喜歡。

金融行業(yè)UI卡片設計
金融行業(yè)UI卡片設計
09 輸入表單的美觀(guān)提升,易用增強

在金融數字中臺產(chǎn)品設計中,由于業(yè)務(wù)體量龐大、信息復雜。對于信息的準確性也要求非常高。那么,對于承載信息錄入的表單來(lái)說(shuō),表單的設計就變得尤為的重要。如何快速的讓用戶(hù)在最短的時(shí)間內錄入好正確的信息。是我們在設計表單時(shí)常常值得思考和深究的問(wèn)題,為用戶(hù)減負為目標,在完成數據采集任務(wù)的時(shí)候盡量給用戶(hù)帶來(lái)最小的操作負擔;表單效率是衡量表單設計優(yōu)劣的重要指標,通過(guò)合理的信息輸入組件與頁(yè)面布局和交互方式可以使用戶(hù)快速完成表單頁(yè)的信息填寫(xiě)任務(wù)。

金融行業(yè)輸入表單UI設計
金融行業(yè)輸入表單UI設計
10 更多的提醒和顯示,減少操作錯誤,提升業(yè)務(wù)效率
金融行業(yè)彈窗提示UI設計
11 情感化引導,增強用戶(hù)引導流程

更多的提醒和顯示,減少操作錯誤,提升業(yè)務(wù)效率。增強用戶(hù)引導流程,分別為增加設計全局性的首頁(yè)和子系統首頁(yè);增加頁(yè)面提示引導信息。

金融行業(yè)用戶(hù)引導流程UI設計
金融行業(yè)用戶(hù)引導流程UI設計
金融案例

內容調查