Webflow 官方出品 eBook - A Better Site Experience說明重新建構一個網站,從觀念到實作的各方面,如何考量設計、使用者體驗、品牌故事、開發進程的完整流程與經驗分享。本篇文章將協助讀者了解書中的精華與重點,一起學習如何創造出一個更好的網站!

前言:網站也有第一印象

就如同剛開始認識一個人,我們會從肢體語言、談吐去了解對他人的感覺,初次交流的第一印象絕對起到重大作用。而一個網站如果要讓人能夠記得,第一印象也有極大的重要性。

你或許會問,要如何才能打造出令人印象深刻的網站呢?

** 答:好的設計。**

在無遠弗屆的網路世界中,一個好的網站設計絕對是可以向全世界傳遞自身價值的管道。尤其是在現今社會,網站已經不只是行銷的核心,甚至包含多種功能,也是與使用者直接連結的品牌體驗之一,因此更須考量重新建構符合當前需求、現代審美、使用者體驗優化的網站,才能與時俱進並維持品牌的成功。

而如今一個設計得好的網站,除了美感上的調整之外,背後的維運邏輯也需經過設計安排,讓各部門的相關人員能夠共同合作,才能把網站的潛能發揮到最大。

第一章:重新定義你的品牌形象

強烈的品牌識別有助於幫助品牌提升大眾認知度,像是 Google、Apple、Nike 等等知名品牌在消費者心中都已經有很鮮明的形象。而對於現在百家爭鳴的品牌戰場,要如何突破重圍?第一步是了解你的品牌要如何被呈現給市場,包含品牌視覺、傳遞訊息、網站設計都是不能忽視的細節。

創造強情感連結(strong emotional connections)

數位時代的消費者變化多端,選擇也多樣,因此如何找到潛在客戶並快速提供他們所需資訊就能逐步建立起與客戶端的情感連結。

如何透過網站找到潛在客戶?

如果想讓潛在客戶自行搜索到品牌,就需讓品牌保有被搜尋到的優勢。搜尋引擎會針對網路上的重要資訊進行檢索,讓使用者快速找到想要的資料。而在網站的搜尋優化方面,我們的策略就是提升 SEO。要達到良好的 SEO 成效,創建一個精簡、實用的 UI 介面是首要,將人流導入網站後,如何留住訪客得要由頁面內容、視覺設計、動態、瀏覽選單等元素讓人產生共鳴,因此事先了解目標客群並精煉出如何對外呈現品牌是非常重要的。

好好經營數位買家、用戶

在行銷團隊要執行品牌形象再精煉的時候,還有一點必須納入考量:現代消費者已經逐漸數位化,而數位科技已是客戶體驗的一環,因此業務、行銷都必須符合「數位優先」的策略,且功能化的網站更有許多系統工具可以追蹤分析使用者行為,並利用數據提升品牌服務。

自己品牌自己傳達

品牌傳達並沒有一定的路數,而是要靠設計、內容、網站架構三者一起平衡來傳遞品牌精神並獲得成長,因此網站呈現的內容也要協調才行。

  1. 文字表達 Messaging:品牌敘事、用字遣詞、標語、內容呈現都是文字表達的一環,除了準確傳達品牌精神,也必須與消費者產生共鳴。
  2. 視覺設計 Visual Design:品牌的主視覺以及帶給觀者的感覺絕對是品牌識別中最重要的,其中包含網站版面、圖像設計、影像排版、顏色、字體等等。
  3. 互動瀏覽 Interactions and Navigation:為了讓訪客能流暢的瀏覽網站獲取資訊,瀏覽動線的設計也需注意。這會牽扯到動態設計、清楚的選單目錄等等操作方面的設計。

第二章:5 種「你該更新網站了!」的時機

網站是會與時俱進的,雖然平時做一般網站維護都只會處理小細節的調整,但也會有網站需要徹底翻新的時候,讓我們一起來看看什麼時候適合考慮重新規劃設計網站吧!

品牌形象重塑

品牌視覺是受眾的第一印象,也是品牌具象化的表達。一個好的視覺應該要能清楚向受眾傳遞品牌的價值與原則。而要重塑品牌形象,也仰賴整個組織的動員,去重新審視每種管道的行銷力度,針對潛在客群進行溝通。

品牌形象重塑跟網站翻新是分開的兩件事,但在做形象重塑時必須同時考量到網站的呈現方式。有些快速成長的公司往往會趁公司達到新目標時進行品牌重塑,這時也可以順邊推動主機流量升級等規劃,讓使用者的體驗更加完善。

使用者體驗優化

部分團隊在進行網站翻新時,主要考量的點是使用者的體驗,這可能是因為他們的目標受眾有更動,或是網站的資料查找困難。可以思考的是,要如何整體性的規劃網站的瀏覽動線、功能、資訊取得、以及版面,來引導使用者得到他們想要的結果。

增進網站互動率

網站翻新的必然目標是要能夠改善關鍵的經營問題,行銷團隊的主力也放在提升營運數據,例如開發潛在客戶、提升網站使用時間等等。以下這些數據目標可以作為提升網站使用的目標:

  • 增加網站訪問率
  • 減少網站跳出率
  • 增加網站訪問時間
  • 提升網域權威性
  • 增加業務轉換率
  • 提升總體銷售額
  • 加強現有 SEO 關鍵字排名

強化網站表現

如欲強化網站的數據表現,首要目標也是釐清網站運作的方式。網站重構或許可解決部分企業去加快網站載入、優化手機使用者體驗等問題,但更深一層則仰賴內容管理系統、外部插件、追蹤碼等等的運用。如有因為以上問題而影響到網站速度,網站搬遷也可能是一個必要的措施。

掌握更多網站主控性

大部分企業會做網站重構的最主要原因其實想控制更多網站上的細節。過往在建構網站的工具因為門檻高,也間接限制了可以操控、更新網站的人選,使得網站維護困難有阻礙。而在利用新工具重塑網站後,行銷、設計團隊也能夠輕鬆上手數位內容的更新,甚至是簡易地維運網站,網站的使用更即時便捷。

第三章:設計師該如何看待網站重建?

在開始網站重建專案之前,有許多問題須事先釐清,針對這些疑難雜症,網站設計師該採取什麼態度面對?本章節請到了 Dani Balensom(獨立藝術總監)、Michael Rossi(Hubilo 資深 UX/UI 設計師)、 Kyle Benson(Webflow 品牌設計師)一起來為我們解答!

網站重建需要解決當前的問題

現在的網站已經與過去單純的網頁發展不同,是企業最主要的行銷資產之一。而網頁的快速發展也促使大眾去思考網站視覺與功能的必要性。Michael 與我們分享曾經的經驗:「很多品牌可能會以為重新蓋網站就等於 rebrand,但其實我們只是重新設計,並不代表每件事都要被改變。」Dani 表示認同,在她看來,網站重構只是做到翻新,很多功能、感覺、設計都是可以沿用的,只是再讓這些設計更符合消費者期待:「設計是一種溝通的服務,透過設計我們可以傳達給新受眾,也可以淘汰不合時宜的舊有習慣。」只要團隊有了這樣的認知,就可以從目標定義、預估結果,往前回溯該採取的行動。

確保所有利害關係人的目標一致

為了讓網站重建這件事能順利進行,事前確保所有相關利害關係人都清楚明暸這麼做的原因很必要。不只是原因,而是往後的規劃、預期的結果也需事前溝通。Kyle 將「設計」分為兩個層面,一個是設計的策略與終極目標,另一個則是視覺、感覺上的處理。第一個層面的重新設計是核心,是涉及最多利害關係人的,也影響著整個重建專案的目標與規劃。不同形式的組織裡,推動網站重建的單位也可能不同,有些以行銷團隊去主導、有些則是設計團隊,但三位設計師都同意主導的單位,必須要全面考量規模、規劃、期程等各種執行面上都取得大家的共識才能著手進行。

專案規劃需帶領團隊走向成功

一但團隊對於網站翻新目標、責任等等有了共識,下一階段進入規劃,而 Dani 跟我們分享,規劃通常從一個創意概要(creative brief)開始,這份概要將清楚定義專案的背景、執行專案的理由、想達成的目標、網站的受眾、溝通模式、以及參考方向。Michael 也補充事前做過全面的分析與規劃是他的創意過程,也很注重翻新的各項細節來釐清專案目標。另外,利害關係人之間的階層也要清楚,誰是相關人士、以及他們的職位都要清楚。規劃中的每個死線日期都會逐一引領到最終完整的成品上線日期。Kyle 補充當設計師總是專注在微小的細節上時,這時需要有一個 VP 或是管理階層的人來確保大家都還在準時完成的道路上。而若是與外部設計事務所合作,在這個階段也可以拉著他們進來一起做規劃,聽取專業經驗,來確保大方向是沒有問題的。

在計畫的同時準備好適當的工具

計劃過程中的另一個至關重要的要素是執行方面的考量。Michael 當時做 Hubilo 的案子只有兩個半月的時間進行重新設計,而使用像Webflow這樣的網站開發工具進行重建使得團隊能夠快速構建頁面、互動和動態效果、做內容管理,並且在除錯時也更加有效率。時間因素往往是很多企業推遲執行網站重建的原因之一,但使用適當的工具可讓開發到後續的網站維運都更簡單,也更彈性。而對於 Dani 來說,Webflow 最棒的是可以協作,與其他設計師來回優化設計與建置,一起同時進行修改,十分方便。

以上內容是 Webflow eBook - A Better Site Experience 的重點節錄內容,有關策略方面的要點以及前輩大師的分享,下一篇章我們會繼續進行實際案例的拆解!一起了解 Ramp 網站是如何在六週之內完成網站翻新!

【Webflow 書摘】一個更好的網站體驗:Ramp 案例解析
繼上一篇談了有關優化網站體驗的方法論,ebook 的最後一個章節以 Ramp 的實際案例分析,拆解如何運用 Webflow 在六週之內完成網站翻新,以及使用 Webflow 之後,對於經營團隊帶來哪些優勢。以下就來看看 Ramp 這家提供公司卡及管理企業現金流的軟體工具公司的經驗分享吧! 前情提要 Ramp 是一家總部位於紐約的金融科技公司,旨在透過財務方面的自動化,協助企業節約時間與經費。作為 2022 年最具創新的金融公司之一,Ramp 的服務項目也包山包海,從公司卡、支出管理、帳務管理、各類貸款都照顧到了,平均使用的第一年就能為客戶節省 3.3% 的支出。 為了加速公司的成長目標…

Check out the eBook: https://webflow.com/resources/ebooks/website-redesign#read

Share this post