All work


Digital Ads Templates
Creative or Optimize ad's template layout style and Digital ads assets submission interface.

About
這是一個附屬於 DSP 的支線專案任務,DSP 是用來設定詳細的廣告投放細節(例:設定出價、曝光受眾、追蹤轉換⋯⋯等),可以想像成是隊伍中的後排法師,而廣告版型則是實際曝光呈現在消費者眼前的廣告樣式,可以想像成是隊伍中的前排戰士,廣告樣式對實際點擊率和轉換有一定程度的影響。
所以在 DSP 系統越趨完善時,廣告版型的優化顯得更為重要,在此專案中,總共需優化 6 個廣告版型,其中面對 3 個主要問題:第一,各版型是由不同的人員、環境下開發出來的,所以並無考量未來的擴充性以及資訊共享性。第二,各版型開發目的或要解決的目標問題皆不一樣,所以造成各版型間的差異更大。第三,因為需透過 DSP 系統來上稿廣告版型,而同時 DSP 的上稿介面缺乏一致性與易用性,所以優化專案的過程也,必須考量更多方面(例:讓所有廣告版型的資訊可通用、上稿介面提高一致性、符合更多客戶需求、提高商業價值⋯⋯等)。
大致歷經幾個流程,第一步:團隊研究(例:市場主流、相關競品調查)、第二步:產品方向對焦(無數次的會議、動用大家的腦袋)、第三步:時程與順序安排(有限資源下產能最大化)、第四步:#開發#驗收#上線,最後在殘血的狀態下順利完成生產。
What's Problems
歷久未新
- Ex. 支援尺寸已無法滿足行動載體環境投放廣告
內容資訊易用性低
- Ex. 一組廣告內容訊息,無法通用於所有版型
素材規範一致性低
- Ex. 每款版型所需求的素材不一致,學習成本高
Template A
- LOGO:過於貼近邊緣,且尺寸規格為 243x30、184x45、156x60、150x150,不具通用性與統一性。
- 資訊呈現:商品易被下方資訊區塊遮蔽,文字資訊行距太緊密,無法呈現折扣%數,整體對點擊率有一定影響。
- CTA:是透過上傳圖片放入廣告中,對使用者而言學習與理解成本很高,對系統業務商來說更提高溝通成本(例如:和客戶溝通素材時,需另加解釋,常導致簽約時程拉長⋯⋯等。
- LOGO:增加固定邊距,與文字資訊整併一區塊,規格統一為 4:1、1:1,對齊市場主流尺寸。
- 資訊呈現:轉化為霧面玻璃質感,盡可能呈現完整商品圖,左上角加入折扣%數,並可多展示 1 件商品。
- CTA:改為由 Coding 製成,符合正常系統趨勢,且不因圖片像素而有失真問題。
- 備註:折扣%數,如有不主打價格的商品(例:訂閱制、僅可實體販售、Branding⋯⋯)可切換為文字,讓版型適用於多產業需求。
Template B
- LOGO:過於貼近邊緣,且尺寸規格為 200x34、127x60、70x80 不具通用性與統一性。
- 資訊呈現:折扣資訊易遮蔽到商品,最多僅能展示 2 件商品。
- 視覺生硬:商品卡片的直角較生硬,對於視覺靈敏的消費者可能會有生硬感。
- LOGO:增加固定邊距,增加品牌辨識度,規格統一為 4:1、1:1,對齊市場主流尺寸。
- 資訊呈現:折扣改為與 Template A 同樣式。加入左右切頁功能展示更多商品。
- 視覺柔順:直角改為圓角,整體空間與視覺更為舒適。
Template C
- LOGO:過於貼近邊緣,且尺寸規格為 228x55、150x150 不具通用性與統一性。
- 資訊呈現:Focus 商品時,畫面疊加過多效果(如圖二:商品放大且覆蓋色塊、文字資訊、價格及 CTA),閱讀性低。
- 版型視覺:商品與商品間的縫隙,導致整體拼湊感強烈,較不精緻。
- LOGO:統一規格為 4:1、1:1,對齊市場主流尺寸。
- 資訊呈現:整理 Focus 時疊加的效果,將資訊清楚呈現於畫面,且不影響商品展示,提高閱讀性。
- 版型視覺:填補留白縫隙,解決拼湊感強烈,提高版型精緻度。
Template D
- LOGO:過於貼近邊緣且呈現過小,且尺寸規格為 228x55、150x150 不具通用性與統一性。
- 資訊呈現:依據選擇可呈現「CTA(立即購買)、幾人在看、文字方塊、折扣%數、銷售數量」五擇一,看似彈性又有促銷功能,但只能擇一,常無法滿足約 80% 客戶期望的資訊需求。
- 版面視覺:資訊之間的對齊方式,拼貼、區塊感強烈,視覺感受上較凌亂。
- LOGO:適度放大,統一規格為 4:1、1:1,對齊市場主流尺寸。
- 資訊呈現:將 CTA 與折扣%數,獨立成為固定資訊,一是達成A~F版型間的資訊共通性,二更將 CTA 與「幾人在看、銷售數量」進行輪播,保留促銷彈性,盡可能滿足使用需求。
- 版面視覺:調整資訊之間的距離、對齊方式、元件寬度,整體視覺上更穩定。
Template E
- 設定機制:底部背景的設定方式門檻過高,需要對顏色敏銳且具有配色能力,不友善使用者。
- 資訊呈現:「CTA、價格」只能擇一,不滿足客戶需求。
- 版面視覺:商品、資訊文字偏小、間距過大導致版面留白過多,浪費展示空間,整體廣告吸引力低,底部的 Dots Bar 缺乏存在意義,其一不具有互動效果,其二即使得知商品數量或順序,並沒有實質效益。
- 設定機制:底部背景改為自動套用當前的商品(放大、模糊、壓黑),不用再苦惱色彩搭配,降低使用門檻。
- 資訊呈現:「CTA、價格」同時呈現,滿足客戶需求。
- 版面視覺:移除 Dots Bar,釋放空間,資訊適度放大,重新安排整體空間配置。
Template F
- 資訊呈現:價格被限制在商品圖片中,更受限於商品圖片的色調,導致閱讀性低,不易調整。
- 版面視覺:文字資訊區塊的視覺稍嫌強眼,與商品的層級關係不明確,且又包覆 CTA,整體版型資訊權重、閱讀順序凌亂。
- 資訊呈現:將價格與 CTA 獨立出來。
- 版面視覺:文字資訊的層級壓低,讓整體視覺重心集中在商品圖。