
Aralia官網最主要的功能為介紹產品並引發使用者興趣進而註冊使用,然而原先網站的設計風格與產品的太空神秘形象有不小落差,為了符合產品的新穎視覺感受,以及提高使用者的更清楚、有效的資訊傳達,因此公司決定改版。在提供相同的功能為前提下,優化動線和翻新視覺。
◈ 釐清需求,制定方向與策略
原先網站的頁面較少,但隨著產品日漸成熟需要的頁面與功能也隨之增加,除了補齊需要的頁面之外,也考慮使用者進入網站時的目的,以目的為導向梳理不同的情境後,歸納出主要功能入口(主頁探索 / 星球列表 / 文件下載 / 聯絡)
◈ 設計探索|制定設計原則
基於 Aralia 產品本身的視覺設定,我們訂定了以下原則
01
宇宙神秘
對於網頁的介面,必須設計出符合主產品的視覺氛圍,讓使用者有探索的慾望與進一步開啟產品的熱情。
02
互動順暢
在每個頁面都要隨時注意元件的狀態與互動行為,用互動效果激起點擊慾望。
03
清晰明確
如頁面指引與操作流程需保持足夠的易讀性及閱讀空間,讓使用者能輕鬆的理解產品。
◈ 以產品色系出發,加強視覺感受力
Aralia 灰藍色調為基底搭配藍綠色系的主色,營造太空儀表板的分為,我選擇以這個角度出發並將其加強,讓太空的感受在網頁中更為顯著,並搭配整體環境的插圖,除了將產品概念貫穿空間來強化企業形象、營造神秘有趣氛圍,也能夠更引發使用者探索不同數據星球的興趣。
◈ 大量使用插圖,創造沈浸感受
首頁的全幅 Banner 以宇宙星球的插圖作為基底,搭配光暈與漸層的應用營造航行與探索的意向,並將探索按鈕位置規劃在螢幕高度 1/2 處方便點擊,利用文字和鼠標懸停的效果引導使用者點擊探索。
◈ 優化網頁索引
原先版本架構零散,將資訊重新統合規劃,並與行銷部門協作,將用戶常用的頁面整合於頁首,也同時在頁尾增加索引功能,方便用戶快速在各個頁面穿梭。
◈ 統一整體插圖風格
為維持產品一制性,將網頁的插圖風格與主產品對齊,包括使用色系與畫面邏輯,讓畫面更為統一和諧,加強產品印象並產生視覺連結。
◈ 困難與解方|初次使用 Wordpress,執行不易
在重新設計網頁視覺的過程中,因為主要使用網站去開發客戶的是行銷部門的同仁,因此我們需要來回確認需求並進行文字與畫面上的調整。
此次網站從設計到搬運上架的過程都是由設計團隊處理,我們需要將設計稿畫完後實踐在WordPress上,但團隊在這之前都沒有使用過這個架站工具,因此實行上遭遇到諸多困難。
來回溝通,盡力找到最佳解方
有些需求經討論並畫上設計稿之後,卻在實作上發現限制以至於無法順利執行,例:設定SEO,埋GA分析,跑馬燈顯示等等。面對諸多挑戰,我與團隊建立了一套解決方案,幫助我們在發現問題時能夠有脈絡的處理。
01
先找尋插件和社群教學,盡力找方法實現
遇到編輯器無法實現的版面或功能,先網路上爬文尋找解決辦法或學習插件的運用。
02
尋求工程師協助,用程式碼調整版面
若找不到合適的插件,或是遇到插件本身有限制的情況,上網搜尋可能的程式碼並且尋求工程師的協助,用程式碼做調整。
03
集中問題後再次溝通,找尋折衷辦法
若找不到插件或是工程師需要趕產品開發所以無力支援的情況發生,我們會將這些無法解決的問題彙整,與行銷團隊討論,說明目前的困境以及討論是否有需求調整的可能。若需求真的非常必要(例如CEO或重點客戶指定功能)則將需求開單排入工程師的開發行程中,請求跨部門的支援。
◈ 響應式設計
不論大螢幕電腦或者小尺寸手機,都確保視覺面和操作面的一致性、留意易於點擊的觸控範圍,表單頁面採用單欄格式,安排方便瀏覽的直線型閱讀動線。
◈ 多語系
因應產品的三個語系,在網站上也支持多種語言可以吸引來自不同國家的客戶,增加潛在市場,讓用戶能夠以母語使用網站並了解產品,增強理解和滿意度。
◈ 學習與反思
能力範圍盡力解決,但適時尋求跨部門協助
在這個專案中遇到的最大困難就是技術上的熟悉度,這次在面對不熟悉的平台和架站軟體很常會碰到實作上無法實現設計的情形,或是沒有辦法直接實現行銷部門的需求,因此建立問題解決的流程非常重要。此次設計專案中也深刻體認到「跨部門協作與溝通」的重要性,且在每個階段彼此知會工作進度與問題能大幅降低重工的可能,以最好的效率去完成工作進度。