選單
GSS 技術部落格
在這個園地裡我們將從技術、專案管理、客戶對談面和大家分享我們多年的經驗,希望大家不管是喜歡或是有意見,都可以回饋給我們,讓我們有機會和大家對話並一起成長!
若有任何問題請來信:gss_crm@gss.com.tw
9 分鐘閱讀時間 (1786 個字)

你的產品也需要改版嗎? New Vital BizForm: 設計改版大小事

-2021-03-03-10.39.03

你有聽過 Vital BizForm 嗎?如果沒聽過,歡迎大家來查詢我們的服務試用看看,簡單來說,BizForm 是雲端表單簽核服務,歷經多次迭代與改名,從 Vis-à-vis 到 FormDoc 再到現在的 BizForm,每次的改版都是伴隨著新功能與需求,2020 年我們將釋出全新版本,這次改版主因是長期我們聆聽到的客戶需求與原先產品定位有些許出入, 在此差異下,我們重新定義產品客群與發展方向,再者,搭上 Vital 雲端家族產品識別改版「 Vital Design 2.0」,綜合以上兩點,我們將 BizForm 徹頭徹尾改版,並期待透過這 次變革能帶給客戶更優質的使用體驗。

成為使用者
肚子裡的蛔蟲

圖 1. BizForm 期望功能發想 workshop在重新設計產品前需要盡可能了解產品與客 戶,避免觸犯設計產品時最容易犯的兩種錯誤,「以為很了解產品」與「以為自己就是使用者」,我們需要大量的使用者資訊輸入,才能確保設計是站在使用者的立場去想,避免太多個人的偏見,為此,在設計之前我們做了兩次使用者訪談與發想。 第一次是內部進行產品期望功能發想 workshop(圖 1),透過彼此的使用體驗分享,能快速掌握產品目前最缺乏的功能,連 帶也能讓自己一起練習換位思考,有助於之後在不同的使用者角色中做切換。第二次是到使用量最大的客戶場域質性訪談,設計師鮮有機會與客戶坐下來面對面做交流,但透過拜訪客戶,能實際體會到客戶使用情境、需要解決的問題、遇到的困難與痛點等,我 們將訪談結果條列出來並分類,找出共同點 並反覆於之後設計時拿出來對照。

原版 BizForm 畫面解構

我們與競品的距離:競品分析

老話一句知己知彼,百戰不殆,這經典名句用在產品開發上更是管用,尤其在 B2B 雲端產業,從競品中找到的資訊遠比想像的更多,透過競品分析,我們可以了解到同樣性質產品的發展方向、產品功能、介面佈局甚至是品牌打 造方式,經過一系列比較,我們回歸探討自身產品在市場中的優劣項目,由此得知產品在市場上的定位,能觸及到哪些使用者,之後設計便能鎖定特點發展。

站在前人的肩膀,拆解現有產品

在一連串的探索後,接著就是對頁面大刀闊斧的時候,第一步需要著眼於現有的產品畫面, 我們將現有產品拆解成數個區塊,逐步分析每個區塊含有的項目與功能,試圖完全理解該 區塊背後的設計意圖與它是如何在產品中運作的,這樣做讓我們更加了解產品每個細節,腦海裡也會形成對產品的總體畫面,確保之後的設計中不會有遺漏。

拆解後的下一步就是對每個區塊嘗試定義現在遇到的問題並試圖去解決,定義的問題可大可小,例如操作易用性、識別性、擺放位置、 擺放層級或流程,你可以將這些問題一一記錄下來,並將想到的解決方法註記在一旁,並不是所有列出的問題都需要解決,根據 80/20 法則,百分之 80 的客戶僅用到產品百分之 20 的功能,設計時可依據問題的重要度與解決難易程度排列,優先處理重要且容易實作的項目。

原版 BizForm 問題定義

找尋解法,著手設計

清楚定義問題後,就可著手逐個擊破,大部分使用性問題可透過介面上的重新佈局與安排層級來取得更好的使用體驗,而有些問題,像功能尚未滿足需求或是原本就存在的 Bug,這些牽涉到工程端的項目,則需要在設計前就與工程師與產品經理討論,討論解決方案。

基於上述討論後,可先嘗試畫出心中所想的解法,用最快速的方式構築畫面,此階段我們稱為 wireframe,迅速用灰階的色彩、簡單線條或色塊大略呈現,這階段有兩個優點,一是能快速完成重構畫面並與他人討論、修正,另一個則是去除顏色後,更能聚焦畫面安排,避免不必要的干擾,待確定完大致畫面結構後,接著進入精稿 mock-up 階段,這階段會以團隊訂出的 Vital Design 設計準則為依據,將原本的草稿經過修改、填色和置換尺寸等,逐步繪製成正式上線畫面,這時需要注意元件的複用性、色彩對比度、畫面平衡、元件與字型大小等問題。

 BizForm prototype BizForm prototype 測驗結果統計分析

矛盾大對決:測試想法與驗證

此設計階段經常會有處於有多個方向無法拿捏的情況,除了可以跟團隊討論與拿出訪談資料比對外,施做簡易驗證模型也是一個很實用的方法,在此次改版上剛好遇到了按鈕擺放位置難以決定的情況,為此我們做了 A、B 兩個版本的驗證模型測試。測驗一共分為兩個階段,1. 給予任務並計時操作完 A、B 模型所消耗的時間;2. 訪談使用者用了兩版後的心得,可一次得到質化與量化資料, 有助於更加客觀的分析。

讓大家思維一致

設計稿完成後,緊接著為工程開發,設計師這時扮演的角色除了監督畫面細節完整度外,很多時候設計稿並不能如預期在工程端實現,需釐清目前的問題點,探討是否有技術上的限制又或著是否需要改變設計,這些問題都是在開發中很常遇到的情況,如何在種種限制下產出大家都能接受的結果,設計師最重要的課題是需與團隊大量溝通,並把每個人關注的點拿進來討論以獲得共識。

改版過後,我們有更多的事需要做

改版完成後才是開始,因為改版就是強迫客戶改變行為,現有使用者需要重新學習新的操作流程與介面設計,必定有些使用者會感到反感,建議可採部分用戶改版 (A/B Test) 或是新舊版本並存自由切換的形式,讓使用者有更大的適應期,而不是瞬間切換,接著透過 GA 來 追蹤改版成效,並可能需要再幾次的迭代才能讓新產品順利接軌,最後引用一段話共勉”改變不是一個事件,而是一個過程”,產品在改版後需要更耐心傾聽使用者聲音,期望產品能協同客戶一起走得更遠。

全新 Vital BizForm 改版

開展企業的 API 經濟規模前 請問你/企業準備好了嗎?
ASP.NET Core Cross-Origin Resource Sharing(CORS)

相關文章