設計背景

InfoBoom 訊苗科技為台灣新創之行動通訊軟體及應用服務開發公司,專注於個資保護、機密安全及加密通訊之行動應用,致力於保護客戶的商業機密及個人隱私,從體包括加密演算法及服務維護支持,皆自行開發維護。目標是建立一個跨平台的通用基礎加解密架構,並在之上開發各種新穎的資安保護及加密通訊之應用。期望能以更先進的資訊安全架構及更流暢的使用者體驗, 來幫助使用者在資安保護上更完善的日常通訊軟體工具。

此專案中我擔任首席設計師角色,在面向消費者的環境中,定義公司品牌整體網頁視覺形象,擬定網頁資訊架構及設計文案整合。 在團隊合作中,與行銷人員協調文案編寫方向,並與團隊設計師討論視覺素材呈現方式。繪製整體 Wireframe 及 Prototype,與工程師合作設計網頁互動方式及動態效果,並完整交付設計。

此專案核心目標為設計完整傳達公司服務項目的形象網頁,打造專業感以及可靠度,並建立明顯 CTA 使潛在客戶能快速的做出了解更多服務的行動。


DELIVERABLE

✔︎完成訊苗科技2.0網頁發布


ROLE

UI / UX 設計師 – 資訊架構規劃、網頁設計、原型設計


設計流程

資訊架構

我與文案人員合作,針對行銷人員提供的文字素材,將核心的文案內容進行分解及骨架重構為新的分類。在重新解構的過程中,我將網頁初步分為五個單元:

  1. 首頁概覽
  2. 產品介紹
  3. FQA
  4. 最新消息
  5. 聯絡我們

Wireframe

首頁同時也是潛在顧客與訊苗品牌初次接觸點,以一頁式的邏輯做公司整體的服務概念介紹。除了快速點出訊苗的特色及服務項目外,也使用簡短資安危機故事加深潛在顧客對於資安的重要性,再以插圖快速說明我們的服務架構方式。下方以知名品牌客戶的商標以及公司參與台灣資安大會的花絮及媒體曝光照片提升可靠度,增強潛在顧客的信任感。

產品介紹頁的目標在於可以使潛在顧客在瀏覽網頁的過程中迅速掌握要搜尋的產品詳細資料,並做出後續的聯絡客服及購買的行為。此處的產品說明以實際產品的系列重點資訊圖以及 Icon,搭配說明文字,減少過多文字運用,增加網頁趣味度。故我在單項產品的介紹頁面中設計了易於查找的 Call to Action 按鈕以完成這個目標。


Mockup

網頁主色設計採用公司品牌色:Kilamanjaro 灰,及紫色調的飽和藍 Paris M 作為輔色,沈穩可靠的暗色調打造形象科技感形象網頁,將整體視覺體驗融入訊苗科技的核心概念——專注於個資保護、機密安全的資安服務,並以高彩度帶有微紅色調的 Saffron 黃,作為點綴色系提升整體活力,使顧客訊苗科技充滿創新與活力的資安團隊提供最新技術及服務體驗。

品牌調性的呈現,選用充滿專業及信任感的商業照片圖庫,佐以科技智慧感的抽象底紋設計營造資安產業精密的氛圍,並加上生動的插圖及圖為嚴謹的資安產業加入趣味性,將產品特色生動呈現。