All work

Digital Ads Templates

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

CreativeUI Designer
Role
UI Designer
Duration
8 Months
Intro
Digital Ads Template Redesign
Digital Ads Templates 主視覺
01

About

這是一個附屬於 DSP 的支線專案任務,DSP 是用來設定詳細的廣告投放細節(例:設定出價、曝光受眾、追蹤轉換⋯⋯等),可以想像成是隊伍中的後排法師,而廣告版型則是實際曝光呈現在消費者眼前的廣告樣式,可以想像成是隊伍中的前排戰士,廣告樣式對實際點擊率和轉換有一定程度的影響。

所以在 DSP 系統越趨完善時,廣告版型的優化顯得更為重要,在此專案中,總共需優化 6 個廣告版型,其中面對 3 個主要問題:第一,各版型是由不同的人員、環境下開發出來的,所以並無考量未來的擴充性以及資訊共享性。第二,各版型開發目的或要解決的目標問題皆不一樣,所以造成各版型間的差異更大。第三,因為需透過 DSP 系統來上稿廣告版型,而同時 DSP 的上稿介面缺乏一致性與易用性,所以優化專案的過程也,必須考量更多方面(例:讓所有廣告版型的資訊可通用、上稿介面提高一致性、符合更多客戶需求、提高商業價值⋯⋯等)。

大致歷經幾個流程,第一步:團隊研究(例:市場主流、相關競品調查)、第二步:產品方向對焦(無數次的會議、動用大家的腦袋)、第三步:時程與順序安排(有限資源下產能最大化)、第四步:#開發#驗收#上線,最後在殘血的狀態下順利完成生產。

02

What's Problems

  1. 歷久未新

    • Ex. 支援尺寸已無法滿足行動載體環境投放廣告
  2. 內容資訊易用性低

    • Ex. 一組廣告內容訊息,無法通用於所有版型
  3. 素材規範一致性低

    • Ex. 每款版型所需求的素材不一致,學習成本高
03

Template A

  • LOGO:增加固定邊距,與文字資訊整併一區塊,規格統一為 4:1、1:1,對齊市場主流尺寸。
  • 資訊呈現:轉化為霧面玻璃質感,盡可能呈現完整商品圖,左上角加入折扣%數,並可多展示 1 件商品。
  • CTA:改為由 Coding 製成,符合正常系統趨勢,且不因圖片像素而有失真問題。
  • 備註:折扣%數,如有不主打價格的商品(例:訂閱制、僅可實體販售、Branding⋯⋯)可切換為文字,讓版型適用於多產業需求。
04

Template B

  • LOGO:增加固定邊距,增加品牌辨識度,規格統一為 4:1、1:1,對齊市場主流尺寸。
  • 資訊呈現:折扣改為與 Template A 同樣式。加入左右切頁功能展示更多商品。
  • 視覺柔順:直角改為圓角,整體空間與視覺更為舒適。
05

Template C

  • LOGO:統一規格為 4:1、1:1,對齊市場主流尺寸。
  • 資訊呈現:整理 Focus 時疊加的效果,將資訊清楚呈現於畫面,且不影響商品展示,提高閱讀性。
  • 版型視覺:填補留白縫隙,解決拼湊感強烈,提高版型精緻度。
06

Template D

  • LOGO:適度放大,統一規格為 4:1、1:1,對齊市場主流尺寸。
  • 資訊呈現:將 CTA 與折扣%數,獨立成為固定資訊,一是達成A~F版型間的資訊共通性,二更將 CTA 與「幾人在看、銷售數量」進行輪播,保留促銷彈性,盡可能滿足使用需求。
  • 版面視覺:調整資訊之間的距離、對齊方式、元件寬度,整體視覺上更穩定。
07

Template E

  • 設定機制:底部背景改為自動套用當前的商品(放大、模糊、壓黑),不用再苦惱色彩搭配,降低使用門檻。
  • 資訊呈現:「CTA、價格」同時呈現,滿足客戶需求。
  • 版面視覺:移除 Dots Bar,釋放空間,資訊適度放大,重新安排整體空間配置。
08

Template F

  • 資訊呈現:將價格與 CTA 獨立出來。
  • 版面視覺:文字資訊的層級壓低,讓整體視覺重心集中在商品圖。