設計的驅動力——網站重新設計案例研究

什麼時候進行網站重新設計最合適？

誰沒有遇到過看起來過時和被遺棄的網站？ 就像被遺棄在沙漠中的一輛破卡車的外殼，多年來顯然沒有動過。

網站因各種原因而改版。 遺憾的是，許多企業沒有意識到他們的網站需要重新設計，當競爭對手通過改進他們的網站獲得競爭優勢時，他們就會落後，從而提高他們的轉化率。

企業經常犯的一個錯誤是沒有儘早考慮如果他們的網站需求變得更加複雜會發生什麼，因此，當他們需要擴展它時，他們會發現自己處於困難、可能代價高昂的境地。 此外，搜索引擎優化 (SEO)、SSL（影響排名和安全性）和移動友好性（影響排名和轉換）等重要因素往往最終會被忽視。

新的網站設計經常發生，因為高層領導發生了變化，制定了新的品牌方向和新的品牌營銷人員加入。 在評估該公司的網站時，他們驚恐地發現它的用戶體驗很糟糕，並發現缺少大量理想的內容。 得出的結論是，它只是一個糟糕的“宣傳冊網站”，沒有提供“品牌的聲音”或公司正在尋找的轉換，共識是改變的時機已經成熟。 是時候進行網站改造了。

一家汽車公司的網站改版

值得一提的是，這個汽車網站重新設計案例研究不是官方委託的重新設計。 我沒有任何關於公司、他們的數字戰略或整個汽車行業的內幕消息。 我只是將汽車行業用作網站重新設計案例研究的測試案例。

在本案例研究中，我們將介紹克羅地亞汽車品牌 Rimac Automobili 的網站重新設計流程。 Rimac 是一個從簡單的汽車概念開始的品牌，後來發展成為一家大型零部件製造公司。 像許多初創公司一樣，該公司最初的想法最終演變成不同的東西。 這種擴展影響了網站結構，整個用戶關注點發生了變化。 市場需求將公司帶入另一個方向，因此網站的重點也需要轉移。

為了實現出色的網站設計解決方案，需要考慮許多不同的方面和角度。 儘管之前的網頁設計師可能沒有足夠的資源或時間來進行用戶體驗研究、線框圖、原型製作和用戶測試，但就設計的整體質量而言，即使是最小的早期設計決策也會產生重大影響負面影響和不太理想的網站質量最終將導致在兩三年內重新設計網站。 這樣做的結果是，從長遠來看，客戶為網站支付的費用比他們意識到的要高。 定義明確的內容策略和信息架構對於新網站設計至關重要。

在設計大型企業網站、新聞門戶網站和其他內容密集型網站時，我是原子設計的忠實粉絲，這是一種靈活的設計系統，旨在製作所有 UI 組件，這些組件將在開始時適用於多個屏幕和不可預見的情況的一個項目。 即使這個特殊的案例研究不是針對大型新聞門戶網站的，但如果設置一個原子設計元素的設計庫（一組經過仔細考慮和明確定義的設計組件）來使用它，它將使過程變得容易得多之後。

只有在網站擁有適當的內容策略和信息架構後，才應將重點轉移到用戶體驗上。 沒有適當的網站結構，用戶體驗設計就沒有效力。 也許乍一看網站看起來不錯，功能也很好，但如果沒有內置足夠的靈活性，公司不可避免地需要考慮重新設計網站。

為什麼要重新設計這家汽車公司的網站？

Rimac Automobili 正在擴張，據官方消息稱，一款名為“Concept_One”的新概念車已經投入生產。 在這個未經委託的網站重新設計時，他們的網站只展示了一輛汽車， “C_Two”。 沒有視覺變化——該網站是由兩個模板創建的，所以每個頁面看起來都非常相似。 該設計專注於汽車的大而有吸引力的圖像，沒有太多其他內容來說明C_Two汽車的質量——引導網站訪問者做出購買汽車決定所需的基本信息。

俗話說，“你永遠沒有第二次機會給人留下第一印象。” 使用出色設計的影響力來有效說服遊客（在這種情況下主要是高性能汽車愛好者）購買價值接近一百萬美元的汽車至關重要。 這樣的高端網站需要達到令人難以置信的高標準。 他們必須表現出品質感和魅力，並提供高水平的銷售技巧和引人注目的風格。

偉大的網站設計必須在類似網站的海洋中脫穎而出

汽車行業的一個大問題是該領域的大多數網站看起來都一樣。 除了不同的配色方案和英雄圖像之外，它們幾乎看起來好像使用的是相同的網站模板。

汽車公司的網站設計決策背後有許多因素，但需要明確區分 100 萬美元和 25,000 美元的汽車以及它們的呈現方式。

在高端汽車領域，法拉利、蘭博基尼和阿斯頓馬丁擁有過於簡單的典型企業網站（在我看來）並不能真正提供出色的用戶體驗。

中等消費範圍（大眾、豐田、標致等）的網站內容結構與上述更高端的示例非常相似。 高端和中端消費汽車品牌之間最大的區別在於價格——因此人們會期望 Rimac 擁有一個出色的網站，以反映這種差異並展示其昂貴的品牌。

訪問這些超昂貴的汽車品牌網站時，客戶期望很高； 這是一項巨大的財務承諾，很自然，他們希望確保他們能買到他們的錢能買到的最好的汽車。

為什麼 Rimac 比豐田好？ 查看他們的網站，這兩個非常不同的品牌之間沒有太大區別。 這不應該從他們網站的質量上看出來嗎？

以出色的網站設計瞄準高端汽車買家

任何網站都必須考慮其用戶。 這類車的目標受眾是誰？ 他們在找什麼？

Rimac 的汽車售價約為 850,000 美元，而且只會生產少數幾輛，因此有資格獲得“限量版”標籤。 雖然我們無法準確確定有興趣購買這些汽車的客戶類型，但我們可以假設大多數客戶將來自富有的精英。 Rimac 的網站是否有效地針對這些客戶？

分析信息架構

在我們的示例網站上，我們可以看到第一個導航項是“Concept_One” （當時，它是公司唯一的產品）。 真正的網站已經更新。 第二個導航項是公司的演變，汽車是如何生產的，而第三項是公司的產品和服務。 第四個導航項是另一個公司產品（Greyp 電動自行車）。 最後兩項是“新聞”，包含新聞稿，以及“博客”，這兩者都不是特別有用，因為它們的大部分新聞都是在社交網絡上發布的。

另一個問題是，職業鏈接被隱藏為次要的、不太重要的導航項目，並且鑑於公司的巨大擴張，它代表了一個重要的問題。 如果我們將用戶視為公司關注的焦點，我們會看到在大多數公司網站（典型的例外是公司/超大型網站）中，擁有一個突出的“職業”鏈接或 CTA 非常重要。

網站重新設計過程

主頁 英雄形象之前和之後

最初，其目的是打造一款更黑暗、更強大的汽車版本。 我在網上找到了一些Concept_One汽車的圖片，並用一些“Photoshop 魔法”為主頁創建了第一張英雄圖片。 下一個想法是讓動畫慢慢展示汽車，首先是背景，然後是汽車的輪廓，然後是完全渲染的圖像。

主頁設計

對於主頁，概念是定義兩個主要的視覺區域：頂部導航和汽車英雄形象。 而已。 為了使其簡約而引人注目，任何不必要的東西都被刪除了。 一眼看去，所有重要的東西都是可見的——其他所有東西都被移到了網站的子頁面中。

內容策略與設計

對於此類網站改造項目，設計內容也很重要，而不僅僅是網站的結構和視覺美學。 由於這是一個未經委託的網站重新設計，它提供了更多的實驗自由，以及審美靈活性，讓我們有充分的機會做出自己的設計決定。

過程很簡單：

1. 準備將出現在網站上的正文。
2. 通過圖標或交互式動畫傳達一些設計元素——例如，關於加速度、馬力和最高速度的引人注目的細節。

通過這樣做，用戶界面中不需要輔助詞，並且將注意力吸引到對網站訪問者更重要的區域。

網站導航重新設計

網站的導航結構現在根據重要性等級重新排列。 我們將車輛作為導航中的第一個下拉菜單，這為設計提供了靈活性，因為它允許公司在未來添加更多車型。

為了提供從主頁立即訪問二級產品頁面，為了提高效率，決定將產品及其子類別作為下拉區域合併到主頁中，而不是創建另一個產品列表頁面（在另一個網頁上），並使其成為導航。 當訪問者在導航中單擊產品時，下面的設計顯示了在主頁上呈現為圖標的各種產品。 對於Products下表示第二層的 3D 產品效果圖，我推薦 Three.js、WebGL、Canvas 和 Greensock，因為它們是眾所周知的標準化工具。

網站重新設計中的輔助頁面

與Homepage相比， About和Service頁面等輔助頁面使用不同的 Z 形網格。 不同網格佈局的目的是在瀏覽這些頁面時為訪問者提供更有趣和動態的環境。

中心思想仍然是盡可能少的文字視覺極簡主義。 人們來這類汽車網站不是為了閱讀大量文字，而是為了快速、直觀地獲取信息。 這就是頁面標題上大而粗的字體和使用不同字體樣式的想法。

需要注意的是，這種“公司宣傳冊”網站重新設計不同於服務重新設計。 “公司手冊”網站更多地是關於營銷產品。 面向服務的網站重新設計更傾向於將點擊轉化為轉化，並最終獲得利潤。

結論

還有其他幾篇設計博客文章推薦了為什麼設計師參與非委託設計項目是一個好主意。 如果您想設計一個非常酷的項目，請選擇一個想法——它可以是網站、應用程序、企業 SaaS 產品——並為它解決設計問題。

Dribbble 充滿了不請自來的概念重新設計項目，數字設計師有機會展示他們的設計能力。 除了給你一個很酷的設計，向世界展示一個創造性的解決方案，解決一個“實際的”產品問題將向潛在的公司和客戶展示你的想法、你的過程和你的專業知識。

就我而言，處理高端汽車網站是一項很棒的練習，因為對於該領域的網站設計而言，滿足極高的標準尤為重要。

但是，請注意：在潛入並開始設計之前，具有前瞻性並考慮任何特定網站在三年內需要看起來如何，不僅從設計美學的角度，而且從內容的角度來看，這是一個好主意，功能和結構。 內置的靈活性是一個嚴肅的設計考慮因素，這一點至關重要。 當網站或子頁面正常工作且可擴展時，進行小的調整以適應未來的需求會更容易、更高效且痛苦更少。

有時，很難說服潛在客戶進行網站改造。 由於缺乏資源、資金或時間，客戶通常不願意承諾。 然而，一個不請自來的網站重新設計是向世界展示您的網站重新設計過程的好方法。 誰知道呢？ 您的網站重新設計很可能會給不情願的客戶留下深刻的印象，足以讓他們為“真正的”項目開綠燈，作為額外的獎勵，設計師會得到報酬！

• • •

進一步閱讀 Toptal 設計博客：

• 網站重新設計的基礎——案例研究
• UX 的真正投資回報率：B2B 重新設計案例研究
• 將宜家從其盒子中取出並為 16 億用戶重新設計它
• 讓我們重新設計 Facebook：讓您入門的 10 個靈感
• CrunchBase 應該如何設計