Bellroy入境頁網頁設計解秘

bellroy_cover

Bellroy入境頁網頁設計解秘

入境頁(Landing Page)是訪客經由搜尋引擎或網路廣告登陸企業品牌的第一頁,既然是第一頁,你希望訪客看到什麼訊息?做什麼動作?如何體驗你的品牌?在瞬息萬變、人心善變的今天,若你的入境頁網頁計能在第一時間抓住訪客的胃,那麼你就大大提昇將訪客轉換為顧客的機會。

之前在 facebook 廣告點到 Bellroy 這個澳洲皮件品牌網站的入境頁"Slim Your Wallet“,馬上就引起了我的注意。調查發現 Bellroy 在台灣知名論壇中已出現不少開箱文及評價(看這裡,正面居多),從這些口碑來看,Bellroy 提供台灣消費者免運費的優惠,並能在兩天內送到台灣消費者的手上,另一方面,也在台灣網購、實體通路上架,數位與實體的虛實整合,全面進佔台灣皮夾市場。

我相信這也是許多台灣品牌的夢想:站穩台灣,行銷全球。

入境頁就是全球市場「搶攤登陸」的好用工具,Bellroy 就是一個很好的例子,究竟它使用的網頁設計元素,背後有那些策略意圖?它的內容舖陳是如何引起訪客注意、並且一見鍾情立馬下單?

-> 前往 Bellroy Slim Your Wallet 入境頁

1. Slim Your Wallet – 喚醒人們心中的小確幸

bellroy1

一進到這個網頁,眼前的標語 Slim Your Wallet 立馬喚起了我心中的小確幸,我的皮夾真的就是TMD超厚的,擁有一個超簿皮夾是我畢生的夢想啊!!(當然大家都希望荷包厚一點沒錯,不過此厚非彼厚) 以這樣的標語作為視覺動線的起點,加上厚簿對比,不難想像大多數人都會順著標語以及插圖,一路往下走。引導線幫助訪客移動眼球及段落之間彼此銜接,讓訪客可以照著品牌想說的故事方向走。

從品牌誕生的那一刻起,釐清自己的品牌價值,制定一個打中人心的訊息,作為給消費者的承諾與海誓山盟,是與消費者「發生關係(?)」的開始。

這方面的技術可參考獲利世代一書作者Alexander Osterwalder在部落格的發表: “Achieve Product-Market Fit with Our Brand-New Value Proposition Designer Canvas“。

2. 試圖引發觀者的羞恥感

bellroy2
他很認真的告訴你,拿著一個爆肥的皮夾在櫃台付帳是一件多麼羞恥的事,為什麼你的手機、電腦都是那麼輕簿短小,但錢包卻?我笑了。中間這個「看看羞恥名人堂」的按鈕 “view the hall of shame",舉出各種爆肥皮夾的真實案例,我又笑了。(笑就對了!)

這裡他引發訪客的情緒(羞恥心),讓訪客關心、在乎、正視一個議題,在內容設計中,情緒是段落之間的接著劑,引爆觀者的情緒讓他投入到你的故事之中。

一本精典的行銷書 「創意黏力學 Made to Stick: Why Some Ideas Survive and Others Die」,教你幾個引發情緒黏著力的大絕招,行銷人必學。

3. 很正經的想解決我的問題

bellroy3
這裡用一個 slide box,告訴你三個「可以馬上試試看」的方法,立馬將你手邊那個爆肥的皮夾瘦身。如將卡片按使用頻率分開、將發票收據數位化、把零錢存在撲滿裡…,這個看似小題大作的駭客精神,讓哥真格的不自覺的跟著照做…

bellroy4
太開心了!我的皮夾瞬間瘦身了不少!一個輕飄飄的皮夾在那飄浮,然而你以為一切這樣就結束?其實不然,這個舖陳是為接下來的品牌登場舖路。

如果可以,不仿在網頁上邀請訪客來一場簡單的「動手做」吧!讓訪客 DIY 實際操作,互動感瞬間加分,也能讓訪客感受到你是真心想為他解決問題,而不只是銷售。

如果是你,你會怎麼表現變輕盈的皮夾?

4. 品牌登場,提出 Bellroy 的解決之道

bellroy5

故事一直到這裡才真正提到品牌 Bellroy,這裡是品牌的 showtime。他花了一點心思向訪客解說它的設計理念、如何創造一個更好的皮夾體驗。

以消費者為中心的敘事原則就是:消費者永遠是主角,而品牌只是幫助主角變強的外掛而已。

網頁設計案例 BELLROY 入境頁設計 內容互動

有趣的是這個,這個互動遊戲讓訪客自己去體會,在同樣塞了10張信用卡的情況下,Bellroy 的皮夾就是比較瘦,它告訴你什麼才是「激瘦有型的錢包」…

即使不使用厲害的技術也要想辦法與訪客進行更多互動。前面的「請你一起做做看」就是一個不錯的方式,這個小遊戲也不會很高科技(?),創意總是能補救科技的不足。

互動內容是內容行銷的未來,混搭文字、圖像、影音、資訊圖表及互動內容,提高訪客的涉入感。

5. 最後才是產品

bellroy6
終於看到 Bellroy 的皮夾了!是不是有種醞釀了這麼久終於等到你的感覺?

人們在乎的不是你是誰,而是你可以讓他變成誰。這篇文章"People Don’t Buy Products, They Buy Better Versions of Themselves“幫助你理解這個概念(Inside中譯在此)。

你可以帶走:3個Bellroy的內容設計秘訣

品牌必須聚焦的三個本質問題:What, why, how,而這些問題分別對目標族群來說,代表什麼樣的意義?Bellroy 正用這樣的邏輯來說服你相信。它先是告訴你,你的煩惱是什麼(Why)?你該怎麼解決這樣的煩惱(How)?最後才告訴你,我們有更棒的解決方案(What)。沒有激起心中漣漪的 Why 與 How,怎樣讓人愛上你的 What? (除非你很帥……) 運用 Why -> How -> What 的說服邏輯、引發情緒、讓人發笑的幽默圖文、要你馬上動手試試看…等等,這些內容設計的技法,就是讓人一見鐘情愛上這個品牌的秘密。

Tip1: 運用 Why -> How -> What 產生強大說服力

回顧 Bellroy 的內容設計脈絡,他充份把握「 Why -> How -> What 」的原則,設計整個內容的架構。
1. Slim Your Wallet – 喚醒人們的小確幸:賦于清楚的願景 (Why)
2. 不斷引發我的羞恥感:攻擊痛點,讓人不得不正視這個問題 (Why)
3. 很正經的想解決我的問題:然後告訴你這不是你的問題,是產品設計不良的問題 (How)
4. 品牌登場,提出 Bellroy 的解決之道:品牌Showtime! (How)
5. 最後才是產品:召喚行動,選擇一個適合你的產品帶回家 (What)

Tip2: 引發情緒、讓人發笑的幽默圖文

刺激羞恥心的 Hall of Shame、對比的錢包、從1988年就爛在你錢包裡的發票、這不是你的問題,是產品設計不良的問題…等等,這些幽默在網頁中俯拾即是,把握「笑就對了」的原則,引發的情緒累積會轉化成對品牌的喜愛。

Tip3: 要你馬上動手試試看

強烈建議你馬上拿出皮夾,把它變瘦、可以拉來拉去的產品比對…等等,這些跳脫網頁只是用來「看」,更邀請訪客一起動手「做」的內容設計,是讓人深陷其中的秘密。

趨勢:精準打中需求的內容設計

「如何說,比說什麼重要。」這個經常用在演說表達的一項原則,在網頁設計同樣重要。站在訪客、觀者、消費者的立場,洞察他們的需要,安排好故事節奏,表演給他們看,激起他們的情緒,讓他們深陷你的劇本之中無法自拔的愛上你。一個好的網頁設計如同一場好的演說,但網頁更容易被潛在客戶找到。因此,越快投資你的品牌內容,就越能即早建立長久不墜的品牌資產。