網路事業的設計資源錯置與調整
網路事業的設計資源錯置與調整
2016.05.09 |

「想法錯了,資源就放錯了,連帶著整個產業都錯了」是我這段時間以來的體會,尤其是網路事業。

我發現很多企業主對於網站設計的方法與流程,與專業者的認知落差非常巨大。若是小型公司網站也就算了,但這個社會連創造新平台、大型商業網站也都如此想像時,這差距就會懸殊到徹底阻礙整個產業的進步。想一想,勢必要把它寫清楚。

傳統設計流程

一般公司,甚至包含現在的網路新創公司,對於網站設計的想像,就是請「網頁設計師」從平面設計開始,畫出這個網站的 look & feel(看起來、感覺起來如何),甚至要你多設計幾個樣貌、比稿之後,挑選中意的設計,再送給前端工程師切版、後端工程師套版,網站就上線了。我們暫時把這種流程稱為「傳統設計流程」好了。

那為什麼我們台灣的商業網站,多數設計還是不到及格邊緣呢?即使一開始設計不錯,但為什麼品質就是會慢慢向下變調呢?

其實問題就在於前面提到這種製作方法與流程,已經不符合時代了。一般大家認知的「傳統設計流程」也就是大概距離 15 年前、網路泡沫時代的「我的第一個 Homepage」的作法。當時的企業非常勇敢,我也參與其中,無論任何公司都要搭上 .COM 的潮流。作法確實是直接跳過 HTML 到 Adobe 軟體去製作所有的網頁。而其中 Adobe 軟體就包了好幾個項目:Photoshop、Dreamweaver、Fireworks、Flash 等等,主宰了大概快十年的網頁設計市場。

不過也因為這種「傳統設計流程」模式固定下來很久⋯⋯往往網頁設計公司經營到最後,變成專門供應廣告設計事務所製作「活動網站」,這種案例並不少見。也常常有人去應徵「網頁設計師」,搞到最後都在做線上 EDM 或活動網站,更慘一點還有幫忙做廣告 banner⋯⋯設計師自己感覺到連尊嚴都沒了。

更慘的是⋯⋯常看 104 徵才的內容就能知道,連現在 2016 當紅網路新創事業的公司還是一樣的狀況。如果這個市場環境裡的「網頁設計師」職位內容一直是混亂的,代表企業看待網站的層級就有根本上的問題:網站普遍在企業內既然被視為是次要的、替補的,企業對於網站設計的想法,就不會與時俱進。

這樣的流程早在 2010 之前就被淘汰了,而我們還在呼籲這件事。

時代改變後,如果「品牌、傳播媒體」或「平台」還使用「傳統設計流程」來製作,悲劇就會不斷的重複發生

首先,用「平面」來設計網站,就好像在一張紙上畫圖,既不能互動,又不能想像在各種不同寬度上的模樣。平面對我們的用途,僅能確認一個大概的方向。再來,如果一開始就在平面上模擬到最後的模樣,到最後切版、套版、上線之後,經營幾個月,風格一定會脫離一開始設計師模擬的畫面。然後過一季面臨各種文章更新、或新增功能、需求,整個風格就開始崩壞。

上面一段短敘,我們就能發現幾個現代要因應的問題:

  • 要求更豐富的互動操作
  • 面對多樣化上網裝置
  • 工程品質:永續營運、品質的一致性

1. 更豐富的互動操作

網站如果只是從平面設計搬到網路上,那就不叫網站,那只能稱做 EDM,就像是你在服飾網站訂閱的電子報一樣,那也是 HTML 寫成的,但完全不能操作。你頂多只能點選連到該去的地方而已。而台灣有許多網站就是這樣設計完成的,前端工程師必須讓互動成真,必須修改幾乎要砍掉重練的 HTML 原始碼。另外,我們現在的輸入裝置除了滑鼠以外,可能還有觸控版、滾輪、或是觸控螢幕等。這是平面設計階段完全體會不到的。

2. 多樣化上網裝置

在 2000 年的網站設計觀念,從桌上型電腦開始到筆記型電腦,就有著各種不同的大小,但還好這些裝置螢幕都還算大,如果視窗放的太小,無法看到網站的全貌,就算他活該。我們現在上網的方法變多了,在 2016 年,有平版電腦、手機電腦(其實現代的手機應該叫做隨身手持電腦附屬手機功能)、甚至還有全螢幕分割模式、TV 或其他物聯網瀏覽器等,你不可預期的各種尺寸大小。這也是平面設計階段完全體會不到的。

3. 工程品質:永續營運、品質的一致性

從平面思考的網頁設計,其結果再怎麼讓人「眼睛一亮、哇、不得了」,都是一時的激情。等到交給前端工程師開始切版、套版之後,就不再是那麼熱血的事。因為純平面網頁設計師不知道程式的限制在哪,而純前端工程師也不知道設計的限制在哪裡。都不知道,自然也無法突破障礙,雙方都只能打出最安全的牌:盡量不要出錯。


歸結上面三點,你就會知道到底為什麼公司會為了因應各種活動、專案,就得勞師動眾,把整個開發團隊、設計師的產能都吃光、產能都調度去做臨時的專案。加上 RWD 觀念興盛,這些工作難度又再度雪上加霜。這完完全全就是因為決策層缺乏系統觀念。可怕的是經過惡性循環、缺乏人力的情況下,也會誤認為設計一套系統是浪費錢。

我們需要的是「設計系統」本身,而不是只有設計頁面長相。這就是目前台灣商業網站設計品質遇到困境的主因。事前做了妥善準備,在有設計系統的狀況下,完成一個新專案就不再是那麼艱辛的事,也許還可以把重複浪費使用的精力,拿去挑戰更困難或更高收益的內容。

設計系統

做產品前,先做這個產品的系統。做一整套事業之前,先做這整套事業的系統。分子化元件之後,使用設計系統來完成你的前線產品,其中可能包含(不限於):

  • 跨媒體視覺識別系統(平面版、數位版)
  • 跨平台 UI 元件系統(HTML/CSS/JS/或其他平台相關格式之 Style Guide)
  • 商業邏輯分子化系統

設計系統本身確實需要額外的計畫、預算,企業主如何讓設計系統成為可能?

案例:

當想法對了,就會產出額外要做的事,也會省下事後不必要的浪費。不過⋯⋯若要問企業有沒有認真?從計畫與預算就能夠看出。

如果只是交代設計師、工程師在原有專案的壓力之下,剩餘時間又多做一個系統設計,相信只會提高離職率而已。

這必須是一個「認真的專案」,而不是「Side Project」之類的勵志成功小品。

調查規模

其實,只要先透過調查、診斷,先確認企業 1–2 年之內的野心、佈署、未來可能計畫,就能統整出適合自己事業的規模,需要做出的設計系統範圍。這步驟無論是內部主管自己多花來做、或請外部專業公司評估都可以。
不同規模的事業體、不同產業,製作設計系統的規模、範圍也就不同。我們不一定要花非常多的預算來做這件事,僅需求合理、合乎自己的需要即可。

下放資源

有了大致的範圍後,根據製作量的多寡,少至一個禮拜只挪週五來做,多至成立三個人的小組來負責做這件事,也都是比完全不做來的更好。而你投入的資源,可以是現成的人月時間,或是你的預算:例如產品的規模龐大,委託專業的設計公司來做,可能會比花現成的人力還要省時省錢。
若資源暫時不足,也沒有關係。其重點就在於真正的面對這件事,是高於第一線業務的層級,非做不可。必須安排企業中菁英的決策者來下定決心、計畫、安排未來的時間與確切預算下去執行。等待在企業最有能力承擔的時候,把底打好。

另外,設計系統也需要時俱進,當事業、產品線有擴展後,研發必須再回饋、增長自己的系統,長久以來就能夠發揮對產業的影響力。


唯有這麼做,網路事業才能呈現出品牌的樣貌,隨設計系統的累積不斷改進品質。面對設計人才的需求,也變為使用真正的高階人才。而前線業務的進行也變得更容易有規則,降低人事變動對企業的殺傷力。網路產業才會開始樂觀、令人嚮往了。

(5/10 2:35am 編修)

關鍵字: #UI/UX設計
往下滑看下一篇文章
終於出現「看得懂的保險」!國泰人壽以「保險視圖」引領資訊透明革命
終於出現「看得懂的保險」!國泰人壽以「保險視圖」引領資訊透明革命

在台灣,多數人的第一份保障來得很早,可能來自父母,或是出社會後自行投保。然而,直到今天仍有許多人即使手握數張保單,仍說不清自己到底保了什麼。條款繁複、名詞艱澀,導致投保當下似懂非懂,過一陣子就全忘了。保險資訊的不透明,讓風險管理變成了一場全憑印象、依賴業務員的信任遊戲。

自從國泰人壽推出 App 3.0,以「陪伴」重塑保戶與保險的關係,下一步,更要讓資訊變得透明、易讀、好上手。於是,「保險視圖」誕生了—由國泰人壽戰情室 diLab(Digital Insurance Lab)領軍打造的這個平台,試圖翻轉保單難懂的問題,將散落於規範、條款與系統的資訊重新整理、轉譯與可視化,讓保戶終於能「一圖看懂」保障全貌。

「我們希望做到的不只是查詢工具,而是讓保戶真正理解風險、開始做決定。」diLab 經理林蔚安說,這項專案從發想到上線歷時多年,可說是完成了連同業都不敢想像的艱鉅任務。這場透明革命如何開始?國泰人壽又如何讓這個看似困難的挑戰落地?

資訊透明:讓保險回到能被理解的語言

「保險商品本身就很複雜,很多人買了保險,打開保單還是看不懂。」林蔚安指出,國泰人壽累積 800 萬保戶,團隊在梳理客戶旅程時發現,即使擁有多年的資歷與服務經驗,卻未能讓保戶更清楚自己的保障;大多僅在與業務員討論時略有概念,事後又陷入陌生感。因此,「保險視圖」的構想,就是要讓保戶能在同一平台掌握所有保障與資產資訊。

數位時代
diLab 經理林蔚安與團隊歷時打磨領先業界的保險視圖,幫助保戶一次看懂保障。
圖/ 數位時代

第一步,是處理「看不懂」這件事。diLab 從資料盤點開始,依照生涯階段與保障屬性,將保單內容重新分為「我的健康照護」、「我的保險資產」、與「我的壽險傳承」三大方向,讓保戶以更貼近日常的邏輯理解保障結構,例如「住院時有哪些保障?」。

「調研時發現,國內幾乎沒有成熟案例可參考,國外雖有概念但差異極大。」林蔚安表示,圖表複雜,反而增加理解負擔,因此團隊反覆推敲呈現方式,「要放什麼、怎麼放、放到什麼程度,光這個架構就討論了數個月!」每一個看似微小的改變,背後都是無數次的反覆測試與訪談,「我們帶著不同版本的草稿詢問保戶,在沒有業務員引導下是否看得懂。」最終,團隊定調以金字塔結構建構視圖基礎,從保戶自己的健康保障,到未來可運用的累積資產,最終到照顧家人的壽險傳承。沒有看似花俏的圖表,只希望讓多數保戶好理解的簡單呈現。

但挑戰不只在前端設計,還有保險條款轉譯。傳統保單以商品邏輯分類,與使用者思考「何時會用到」的方式完全不同。為了讓資訊更貼近生活情境,「保險視圖」不再以條款分類,而以場景情境作為基準。例如保戶生病住院時,介面會按照基礎醫療、意外、癌症、重大疾病、長照與壽險等六大結構分層呈現,先呈現核心,再逐層深化,視覺化整體保障全貌,並同步提供現金價值與現金流資訊,形成一套完整的理解脈絡。

風險洞察:AI協助人們看清保障缺口

國泰人壽
視覺化保障達成率,一眼了解保障缺口。
圖/ 國泰人壽
國泰人壽
提供熱門推薦與更加個人化的AI推薦,喚醒補強意識。
圖/ 國泰人壽

當保險資訊透過直覺式的設計變得透明,下一個挑戰就是讓保戶理解「自己目前的保障夠不夠」。

因此「保險視圖」也導入保障目標試算功能,保戶只需回答幾題簡單問題,如:住院希望住單人房或雙人房、對疾病治療的費用承受度等,系統即可推算個人的保障目標。接著,AI 會即時計算保障達成率與缺口比例,將複雜的理賠與條款結構轉換成直覺的百分比。「醫療保障達成率 60%」、「癌症保障達成率 45%」,藉由直觀的數字圖表呈現,讓保戶能一眼看出自己保障的完整程度。

此外,平台不只呈現差距,還會以情境推估可能的支出。例如住院五天、手術一次的費用與實際理賠差異,讓保戶真正感受到風險的具體樣貌。「保戶不再是聽到『癌症住院很貴』這種抽象說法,而是看得到具體數字。」透過以場景為基礎的推算,使保戶終於能對模糊的風險概念有畫面,並對理賠內容有更直觀的理解。

平台也提供「熱門推薦」與「 AI 推薦」兩種建議模式。前者以性別、年齡作為分析基礎,後者則依個人資料與既有保單做更客製化的配置。保戶可在平台初步理解現況後,再與業務員討論,透過數位賦能、與有溫度的人性服務建立互補機制,也讓業務溝通更聚焦、更有效率。

領航轉型:戰情室以創新實踐「以人為本」

保險視圖歷經多次迭代上線,雖仍在推廣階段,但初步成效已浮現。以今年 4 月關稅議題為例,資產型保單查詢需求明顯攀升,保戶登入次數從每週平均 4 萬次提升到 5 萬 6 千次,大幅成長40%。以往查詢保單價值需透過業務員協助或臨櫃辦理,如今登入平台即可取得資訊。

國泰人壽
保險視圖一次呈現保戶的整體保險資產,建立更清晰的財務健康圖像。
圖/ 國泰人壽

此外,視覺化呈現保障缺口後,有保戶回饋「看到達成率 70%,就想補到 100%」,顯示視覺化真正促進了主動管理的行為轉換。

數位時代
diLab 戰情室跨商品、設計與數據協作,以使用者為中心反覆驗證,用心設計保險資訊呈現方式。
圖/ 數位時代

能完成一份視覺化介面不難,但能把 60 多年累積的保險商品結構、條款邏輯與資料系統重新整合再轉譯,背後極度仰賴組織文化。尤其,保險視圖的誕生,從構想到落地,專案歷時 4 年,期間國泰以「區塊化堆疊」的方式逐步發展服務功能,包括資產總覽、健康與壽險視圖、缺口試算與 AI 推薦,每一步都需要長時間協作與反覆推敲。

林蔚安形容:「戰情室就像加速器。」其角色是串聯商品、數據、數位、UI與UX設計、開發工程與行銷等多個團隊,以使用者中心作為共通語言,讓跨部門能在同一個目標下推進。「大家的專業不同,但只要目標一致,就能共同前進!」

數位時代
專案歷時多年,團隊成功以敏捷方式快速迭代,實現保險資訊透明化。
圖/ 數位時代

展望未來,透明化只是起點。林蔚安指出,下一步是讓更多保戶願意使用平台,使行為軌跡形成數據基礎,再透過個人化推播與 App 串接,發展國泰人壽保戶更完整的數位體驗。「這條路很難,但值得做。」他分享,有一次泰國人壽數位團隊來台交流,第一眼看到保險視圖就說:「這真的很不容易。」但也因此,更突顯國泰人壽勇於創新、以人為本的服務精神。同時,保險視圖也不會是終點,卻會是打開未來保險模式的一把關鍵鑰匙。國泰人壽以具體行動落實「Better Together 共創更好」,在每一項細節中重塑保險服務的日常價值。

保險視圖:https://cathaylife.tw/VoeoOdb

登入數位時代會員

開啟專屬自己的主題內容,

每日推播重點文章

閱讀會員專屬文章

請先登入數位時代會員

看更多獨享內容

請先登入數位時代會員

開啟收藏文章功能,

請先登入數位時代會員

開啟訂閱文章分類功能,

請先登入數位時代會員

我還不是會員, 註冊去!
追蹤我們
進擊的機器人
© 2025 Business Next Media Corp. All Rights Reserved. 本網站內容未經允許,不得轉載。
106 台北市大安區光復南路102號9樓