UI/UX
Web
RWD排版
主視覺設計
整體設計
價格表設計
插圖設計
色彩規劃

G Suite 產品頁

2018年

01. 專案概況

為馬來西亞分公司產品建立產品頁,藉由台灣的主打商品,拷貝已經成熟與成功的商業模式,製作單頁式網站,提供馬來西亞企業用戶一站式導入 G Suite 的服務介紹。
並將網頁作為廣告投放用,推廣服務給想使用 G Suite 產品的企業,能找到解決方案與專業服務,快速啟用雲端辦公。

專案角色

PM 規劃內容架構,並提供文案 Wireframe,我負責規劃整體介面風格,排版設計產出到切圖,交付給工程師,最後驗收與測試。

專案目的

已經了解並想使用 G Suite 產品的企業,提供更快速與專業一站式導入服務,引導下載簡介資料,申請試用與諮詢。

專案目標

收集潛在用戶名單,提供中小企業三天內即可快速導入雲端辦公服務,並且交給專人協助設定與解決問題即可。

專案挑戰

藉由詳細產品介紹,主要提供用戶下載資料,後續寄送產品免費試用流程,提升轉換率。

02. 設計流程

03. 設計產出

PM 提供完整架構及明確文案內容。我則在 Wireframe 協助提供整體排版,確保用戶能有好的瀏覽體驗,參考相關品牌用色,規劃整體設計,選擇有科技感的藍色系,給人理性與信任感作為基底色來延展設計細節。

痛點發現

  • 身為企業用戶,如何加快啟用雲端辦公套件
  • 身為企業用戶,卻不知如何開始與設定
  • 不是IT人員,花費許多時間研究,有問題不知找誰詢問?
  • 如何快速設定、正常啟用、問題有專人解答?

解決方法

  • 將不同的使用對象最常碰到的困擾標示出來
  • 提供企業最快速又安心的導入服務,交由專家設定,清楚歸納四大項目,強調重點
  • 完整一站式服務,將方案價格+內容介紹+附加服務,用比較表方式提供企業參考與挑選
  • 進階設定詳細介紹,考量使用者體驗,手機頁面應縮短長度

一、在一站式四大核心服務:首要區塊幫助用戶瀏覽內容快速抓到重點,選用產品相關顏色,使用色塊與icon搭配文字,讓一站式服務服務內容變得更具象化,更聚焦核心服務

二、如何提供企業用戶挑選適合的版本:使用比較表方式的卡片設計,完整呈現一站式服務內容,企業可依照所需人數與規格,選擇想要的版本,近一步得到專人聯繫或報價

三、進階設定詳細介紹:考量使用者體驗,有針對手機頁面設計不同方式瀏覽畫面,避免頁面內容過長

四、次要區塊設計:可以隨時與專家取得聯繫,給予安心與值得信賴的服務,也可下載簡介資料瞭解更多

手機版設計

考量到使用者體驗,查看手機頁面會過長,有在一站式服務方案比較及進階設定多項內容,特別針對手機版設計第五項內容後,使用淡化內容+點選按鈕後才展開所有內容

G Suite 產品頁

- RWD排版
- 整體設計與配色
- 主視覺與插圖設計
- 價格表設計

查看作品

Valuecard 產品頁

- RWD排版
- 整體設計與配色
- 插圖設計

查看作品

稻吉數位 服務頁

- RWD排版
- 主視覺設計
- 插圖設計
- 表單設計

查看作品

說明會產品頁

- bulma樣板架構
- 主視覺設計
- 手繪風格
- icon設計

查看作品

田中系統 官網

- menu navigation
- footer
- 手繪風格

查看作品

富泰旅行社 官網

- RWD排版
- 整體設計與配色
- 主視覺與插圖設計
- 價格表設計

查看作品

田中系統 官網

- 手繪風格圖片
- menu navigation design
- footer design
- form design

查看作品

獨角獸 MVP

- 圖片設計
- Guideline
- Components
- UI Kit

查看作品

回應式廣告投放

- Google多媒體廣告
- FB廣告

查看作品

固定式廣告投放

- Google多媒體廣告


查看作品

電子報

- 封面設計
- 內容排版
- 活動宣傳

查看作品

簡介資料

- 下載簡介資料
- 排版設計
- 圖片設計

查看作品