遠通電收

uTagGO 網頁設計

uTagGO 網頁設計

uTagGO 網頁設計

提升 App 的下載轉換率與實際使用率

提升 App 的下載轉換率與實際使用率

提升 App 的下載轉換率與實際使用率

Year

2020

Sector

資訊與科技

Service

商業策略

體驗創新

Year

2020

Sector

資訊與科技

Service

商業策略

體驗創新

Year

2020

Sector

資訊與科技

Service

商業策略

體驗創新

Background

以創新互動,打造一頁式產品體驗,精準傳達品牌價值

隨著行動裝置普及與用戶操作習慣的改變,越來越多服務型產品選擇以 App 作為主要互動介面。遠通電收(FETC)推出的 uTagGO App,整合了高速公路通行費查詢、停車費繳納、行車紀錄等多元功能,為車主提供一站式的智慧用路解決方案。為了提升 App 的能見度與下載轉換率,品牌方希望建置一個具有吸引力的產品網頁,快速傳達服務價值,並鼓勵用戶主動下載。

本次合作,遊石設計團隊協助規劃設計 uTagGO 的 RWD 一頁式網站,除了對應不同裝置的瀏覽需求外,更致力於在有限篇幅中,以創意互動與故事化敘事方式呈現 App 特色。透過視覺節奏安排與動態效果的運用,引導用戶理解核心功能,並強化品牌印象,最終達成提升下載率與使用率的目標。


Background

以創新互動,打造一頁式產品體驗,精準傳達品牌價值

隨著行動裝置普及與用戶操作習慣的改變,越來越多服務型產品選擇以 App 作為主要互動介面。遠通電收(FETC)推出的 uTagGO App,整合了高速公路通行費查詢、停車費繳納、行車紀錄等多元功能,為車主提供一站式的智慧用路解決方案。為了提升 App 的能見度與下載轉換率,品牌方希望建置一個具有吸引力的產品網頁,快速傳達服務價值,並鼓勵用戶主動下載。

本次合作,遊石設計團隊協助規劃設計 uTagGO 的 RWD 一頁式網站,除了對應不同裝置的瀏覽需求外,更致力於在有限篇幅中,以創意互動與故事化敘事方式呈現 App 特色。透過視覺節奏安排與動態效果的運用,引導用戶理解核心功能,並強化品牌印象,最終達成提升下載率與使用率的目標。


Background

以創新互動,打造一頁式產品體驗,精準傳達品牌價值

隨著行動裝置普及與用戶操作習慣的改變,越來越多服務型產品選擇以 App 作為主要互動介面。遠通電收(FETC)推出的 uTagGO App,整合了高速公路通行費查詢、停車費繳納、行車紀錄等多元功能,為車主提供一站式的智慧用路解決方案。為了提升 App 的能見度與下載轉換率,品牌方希望建置一個具有吸引力的產品網頁,快速傳達服務價值,並鼓勵用戶主動下載。

本次合作,遊石設計團隊協助規劃設計 uTagGO 的 RWD 一頁式網站,除了對應不同裝置的瀏覽需求外,更致力於在有限篇幅中,以創意互動與故事化敘事方式呈現 App 特色。透過視覺節奏安排與動態效果的運用,引導用戶理解核心功能,並強化品牌印象,最終達成提升下載率與使用率的目標。


Strategy

聚焦裝置情境與內容節奏,精準設計讓產品價值一目了然

為了解決用戶在資訊理解、操作體驗與品牌認知上的多重痛點,團隊在專案初期即針對目標族群的瀏覽行為與內容期待進行分析,並回應企業提升 App 下載與使用轉換率的核心訴求。透過聚焦在「裝置適配、內容節奏與互動溝通」三大面向,我們擬定出一套兼顧品牌一致性與用戶體驗的一頁式網站設計策略,藉此在有限篇幅中,傳遞出清楚、有感的產品價值。


目標族群、訴求要明確。

要從用戶的角度去思考,當他們使用不同裝置瀏覽網頁時的地點、目的不同時,在設計上,也能夠配合不同裝置,並呈現重點功能,並在有限的頁面中,提供目標族群們想看的內容與有效的資訊。

創造視覺吸睛的體驗與互動。

在網頁上重點內容加入一些動畫特效,與故事性的敘述,場景轉場、連貫性的動畫效果,讓網站的瀏覽體驗更加有趣及精彩,也能讓使用者留在網頁上,降低用戶的跳出率。

考量不同螢幕尺寸上的適配體驗。

在瀏覽網頁時,要能夠對應不同裝置尺寸與解析度,在畫面能自動調整成適合的排版呈現,讓使用者獲得良好的瀏覽體驗。

Execution

提供用戶所需的產品特色,呈現清楚理解服務內容,吸引使用者下載並使用 APP

在 uTagGO RWD 網站的設計策略上,我們依循七大使用體驗設計原則,作為規劃與執行的核心依據。



1. 網站目標族群、訴求要明確

在進入設計之前,需思考用戶的痛點以及他們最想看到的的內容有哪些?將使用者需求與一頁式網站的特性一併考量,其在網頁操作上,使用行為較單純,當用戶點擊選單分頁時,不會被轉址,網頁會直接往上或往下切換到該分頁,所有內容在一頁就會完整呈現。因此,網站不同區塊所提供的訊息,必定要能滿足使用者所需,否則會讓用戶覺得這是一個無法提供有效資訊的網站。



2. 貫徹品牌策略、維持品牌的一致性

不同的產業,在網頁設計的使用與呈現也就不相同,其取決於網頁的目的、功能和品牌調性,而網頁設計同時也會影響到整體品牌與後續行銷時的呈現,所以在網頁設計上保持品牌的一致則非常重要。而這次的設計是以介紹APP產品特色為主的網站,所以網站使用的顏色、插畫的風格以及文案敘述的口氣,都要能夠與APP一致,來維持企業品牌的整體調性。



3. 故事性敘述,從情境中引導用戶快速理解產品特色

在一頁式網站中,加入動態故事敘述的呈現方式來引導使用者瀏覽,並運用連續的動畫、場景變換等效果,引導使用者更好理解與閱讀完整產品特色,另外也增加使用者在瀏覽網頁的體驗上,更加豐富精彩!



4. 豐富的動畫特效,增加互動體驗,抓取用戶目光與注意力

加入一些滾動視差、滑鼠懸停效果、載入條、開機畫面等效果,都會讓網站充滿了更多的互動體驗。且在一頁式網站使用可互動的動態元素對是很重要的,放動畫效果、影片都是可以吸引用戶停留的方法,能將使用者留在網頁上,降低跳出率。


5. 透過選單加強導覽功能,提升瀏覽效率

當瀏覽一頁式網頁時,很容易發生從最後一個區塊回到最頂端,要花費一點時間,將滾輪不停向上滾動,才能回到頂端的狀況,因此,讓選單主題或是內容分類清楚好查找外,透過加強導覽功能,運用像是懸浮的主選單,或是網頁側邊的電梯等功能,提供用戶點擊,同時也能知道自己目前停留的內容其所屬的相對位置,幫助用戶減少捲動畫面的次數,避免使用上不耐煩的情緒發生。此外,在「回到首頁」的引導操作上也很重要,必須要讓用戶能清楚且容易的去點選。



6. 設計時需考量不同裝置螢幕大小的適配體驗

網站設計時要能依據電腦、手機、平板等不同裝置的大小與操作行為,調整成適合的排版呈現。除了文字、按鈕、卡片尺寸的大小調整外,動畫物件與場景的位置配置也會有所不同,例如上方選單列在手機及其他行動裝置觀看瀏覽時,會變為漢堡選單按鈕展開式,而網頁的內容也會改轉換為適合閱讀的排版。



7. 強化手機原生的功能

比起電腦,手機更方便繫帶於外出移動時使用,因此,越來越多的用戶是透過手機裝置來瀏覽網站。在設計手機使用介面時,除了將資訊重新排版在合適的畫面尺寸外,也應該將產品特色,透過介面設計強化優勢,在隨處可瀏覽的手機裝置埋入商機。例如:

  • 手機和平板有打電話撥號的功能,介面按鈕可一鍵撥號,或是一鍵開啟地圖,透過類似的手機原生服務功能,可以加快使用APP時問題處理的速度。

  • 下載專區點擊後,直接連到 App 下載頁面,讓用戶直接下載並在手機上使用,提高下載與使用率。

  • 必要時可網站安裝套件,讓網址可以即時分享到Facebook、Line或其他社群媒體,便利用戶為品牌或網站做口碑行銷。


Conclusion

針對專案目標,明確擬定一頁式網站設計策略,提升使用者瀏覽網頁的體驗

在一頁式網站內,因為使用者介面操作精簡化了,網站的內容都在一頁裡,操作時行為比較簡單,網站只要往下滑就可以很直覺的觀看全部內容。對於資訊整合精準的網頁來說,節省了很多查找與搜尋的時間,也方便用戶分享網頁,網站的點擊率與瀏覽數也會比較高。此外,總結以下三點,做為網頁設計策略考量的重點: