CAYIN Index Page Redesign & Design System

設計改良-鎧應科技官網首頁及設計系統

此項專案是將舊有的鎧應科技首頁進行再設計,同時建立完整的設計系統。

負責內容 - UI/UX 設計、前端程式撰寫、設計系統建立

服務公司 - 鎧應科技股份有限公司

前往網站
UI/UX 設計 HTML / CSS javascript 響應式設計 設計系統

專案背景

CAYIN 鎧應科技是一家專注於設計數位廣告看板播放器、以及播放軟體的一家科技公司。
企業識別標誌在多年前便已修改、改用其他配色,但官網首頁仍持續使用原有設計,因此決定在公司即將推出新產品系列前進行改造,讓原先就認識或是未來新接觸的客戶都能在進入官網時有更好的體驗。

問題提出及假設

橫幅是對網站來說重要的宣傳工具,但在原設計中僅將文字及視覺元素做成一張圖片,不僅影響SEO,也缺乏明確的連結提示,無法有效引導使用者了解更多產品資訊。

客戶案例對於銷售上有十分大的幫助,為良好的廣告及實際應用展示,但是在原先的首頁不僅位於頁面下方、且只佔了畫面中 1/3 的份量,視覺上也跟兩側元件擁有相似的外觀,造成客戶案例在首頁中的醒目度不足,難以有效達到宣傳目的。

原設計採用黃色、灰色配色,與現有的公司 LOGO 配色的藍色、黃色不符,且設計風格無法使人聯想到數位產業。

* 下圖為原先的設計

專案目標

1. 優化首頁資訊架構及 UI/UX 設計

除了更改用色之外也希望優化資訊架構及 UI/UX 設計,希望更有效的推廣產品並讓使用者留下好的印象。

2. 完整設計系統

希望藉此機會同時建立設計系統,不只是首頁,而是讓整體官網擁有統一的視覺設計、強化企業識別。

設計提案

針對問題點及專案目標,最終產出了幾種設計提案與團隊及主管進行討論及決議,各個內容區塊通常會設計 2 種以上的提案。可以看到下圖中包含有「特色產品」以及「客戶案例」,「特色產品」最終以右側的設計做為定案,主要原因是: 1. 產品照片比例適中,2. 連結樣式特別,較能吸引使用者進行互動;而「客戶案例」最終也是以右側的設計做為定案,主要原因是: 1. 不對稱比例設計較能吸引使用者目光停留在此區域,2. 使用者在不用進入頁面的情況下,就能獲取較多的資訊。

設計系統

設計前後對比

設計展示

下一個 :

設計改良-鎧應官網選單