該公司為數位廣告行銷公司,有官方網站,關鍵字廣告為公司的主要核心產品。
舊有頁面色調深藍色過重,加上有新產品要重新整合,為提供使用者完整的產品服務內容,與讓網頁搭配關鍵字優化,所以製成單頁式頁面做為廣告投放使用,獨立拉出產品重新規劃頁面設計。
與 PM 互相合作與討論,負責UI/UX設計與產出、整體風格與插圖設計,針對用戶體驗與安排交互設計,最終切圖交付給工程師。
將公司的核心產品業務,提供使用者完整的服務介紹與添增活潑感,所以重新規劃頁面及改變網頁風格。
希望展現專業與信賴感,有完整服務介紹及服務流程,特別設計線上報價系統,讓價格透明化與供用戶篩選需求的報價單設計。
保留官網少量插畫與深藍色元素,但又想添增活潑感,再依照服務內容設計新創插圖,又可以展示產品內容的重要性。
整體使用隔線系統 Grid system 與響應式 RWD 排版設計,給予設計師自訂整體風格。
PM 這次有在部分設計上提出明確需求與參考樣式,我的角色則是在每個區塊提供排版上的建議,與提供用戶好的體驗,並在設計上做決策。
一、首要主視覺:原本視覺較意象,文案不明顯,整體畫面偏黯淡,再重新調整整體設計,改較明亮帶點活潑感風格
二、服務特色:此區塊內容佔據主要範圍,在這裡我著重給用戶易讀性,並將眾多資訊歸納出統一性的呈現。換掉免費素材,改為更貼近內容說明的插圖;圖文不符,改為條列式說明與統一性圖標的 icon 呈現
三、附加服務:此區塊為企業附屬服務介紹,在這裡我根據資訊的重要性,減少大範圍版位設計,使用輪播圖方式呈現,為了整體內容更一致性,附加服務的插圖也重新設計
四、收費方式透明化:此區塊是企業網站重點設計之一,因此較大版面設計,方便讓使用者可以自行試算服務價格,依需求客製報價
五、增加客戶案例:設計滑鼠經過會顯示客戶心聲內容,考量手機用戶沒有Hover效果,在畫面添加箭頭指引,供手其他裝置用戶也能點擊後顯示內容
六、結尾FAQ:仍保留品牌原本識別色,優先顯示一項問題與解答,其餘項目則安排點選設計。
最後填寫表單:添加淡藍色背景滿版填色,作為重要資訊區塊的設計,以便使用者區分不同資訊內容。