RHINOSHIELD 犀牛盾網站改版的起點

嗨，大家好，我是 RHINOSHIELD 犀牛盾 Experience Design 使用者體驗部門的主管 - Milu。在過去的十年裡，RHINOSHIELD 專注於產品開發，包含循環設計與材料永續再造等這些別於他牌的信念。但我們發現，縱使我們貫徹堅持，卻忘了創造舞台，使產品的光芒無法確實的綻放。

該如何讓消費者了解我們正為了什麼努力？該如何讓產品光彩被看見？我們決定從公司角度出發，檢視公司官網設計、價值與定義，重新規劃，讓每項產品的獨特閃耀。

先來說說官網做了什麼改變？

團隊最喜歡的RHINOSHIELD 犀牛盾全產品頁面

還記得有一位設計師剛進入團隊時說：「犀牛盾應該要有一個全產品頁面，這樣大家就可以好好的認識犀牛盾有哪些產品。」就因為他的這句話，我重新檢視我們的網站。的確，以前我們產品數不多，所以可以很簡單，但隨著公司的成長，產品也越來越多。一直依賴選單其實對消費者並不友善。所以我們開啟大膽的設計，提供了一頁以往沒有的全產品頁面，好好地將每一個產品線做一個簡單的介紹，並讓消費者可以輕鬆的瀏覽我們所有的產品。

裝置地圖，滿足你親朋好友的型號選購

可能還是有很多人不知道，犀牛盾的品牌與型號數量真的超多。Andriod 裝置數量更是不在話下。如果你問說哪一個手機殼品牌最Andriod-Friendly (Android友善)，我覺得犀牛盾一定是第一名。在這次的改版，我們也把型號名稱默默地改成了“型號地圖”。原因很簡單，其實就是想讓消費者炫耀我們的型號多到需要用地圖的方式來展示。將支援的品牌與型號條列式的在同一頁呈現，希望消費者能在這個頁面更快速的尋找自己的型號裝置外，更是自信的向你們展現我們支援了那些品牌與型號。

產品介紹頁面與選購頁面的拆分

犀牛盾的手機殼有SolidSuit、Mod NX、Clear Case與CrashGuard，這每一款手機殼產品都有他的設計理念，我們想提供獨立的頁面來訴說其產品價值與故事，並拆分選購頁面，讓想看故事的用戶，能有一個完整的空間瀏覽，也讓想購買的消費者，可以好好選購產品。接下來我們也會逐步的讓選購頁的操作介面，同時運用在設計系列產品的介紹頁面中，讓行為與互動一致。

(圖：SolidSuit產品介紹頁)

(圖：SolidSuit產品購買頁)

最後再補充一個小小的設計心意，看上面兩張圖的時候你們有沒有發現，我們將重要的行為像是「立即購買」、「客製化手機殼」或是「加入購物車」等固定在網頁下方？這樣的方式可以讓消費者不用上上下下尋找這些按鈕，更方便你們的選購體驗！

這樣的成果並不是單點完成，在開始改變網站時，我們盤點了幾個在互動體驗上的問題點：

當然還有許多問題，但我們必須先開始第一步。因此在改版的過程中，我們分為幾個動作與方向：

改變，只是冰山一角

在開始之前我們可以知道，改版並不是件很容易的事。我很喜歡用 UX iceberg 來檢視每次接手的專案。

(圖片取自網路)

大眾消費者接觸到的就是最上方的 Surface (Visual Design)，而使用者體驗設計師則需要再往 skeleton/ structure/ scope & strategy 等深處探討。從冰山理論我們可以了解，改善不是單點，而是從根本到接觸點，都需要被逐一檢視與調整。改版只是我們起點的第一步，現在只是改版的冰山一角，旦我們可以讓這一小角，發揮無限的影響力！

調整設計可能會有使許多人不習慣，但是用久了，你們會逐漸發現我們的設計心意。未來我們也期待從數據洞察上，得到更多改善的機會，逐步讓我們的官網更與時俱進！

希望你們喜歡我今天的分享，歡迎你們來體驗我們這次為網站改版的努力，更歡迎來信與我們分享你使用新網站的心得感想，成為我們持續進化的養分：https://rhinoshield.tw/