UI/UX

運動筆記

網站 ver.3 

入口、會員、賽事

相簿、網誌、紀錄

2017年至今

APP​

2021年至今

角色

UI/UX 設計師

使用者研究、流程規劃、原型開發

視覺設計師

設計系統、視覺設計

運動筆記 2011年成立後迅速成為台灣最大運動平台,十年來都在台灣百大網站中;主要目標是傳遞新聞、知識,提供賽事資訊和照片服務,也是運動愛好者用文字、圖像分享互動的平台。

 

大瑜​自 2017 年起擔任運動筆記使用者介面 / 經驗設計師,參與專案超過廿項,除了優化既有網站各功能介面和流程,並以符合時下使用者習慣開發新功能,串連不同功能創造新的運動平台使用經驗;2021年起投入開發 APP,讓運動愛好者有更便利的體驗,拓展平台的廣度和商機。

google_play_icon.png
apple_store_icon.png
BIJI_HP_mockup.png
任務 X 挑戰
開發/優化流程 ​
數據分析
定義 ⇆ 架構 ​
流程設計 ⇆ 原型開發
​設計系統 ​
首頁
賽事列表 ​
賽事影像
年度大賞

純粹的想法、熱血的行動
創造串連社群、故事、時刻、服務的運動平台

​導覽選單






















​任務 X 挑戰

運動筆記於2013年發展出成熟的版型,經過兩個版本的更迭,2017年我進入筆記網路擔任網站使用者介面/經驗設計師時,運動筆記已經是台灣百大網站,日瀏覽量平均約十萬(介於五到廿萬),在龐大使用量下,各種功能和服務如賽事列表資訊、賽事相簿、文章、網誌等,需要高節奏維護和優化,以符合使用者的需求、順暢使用流程和新裝置效能,並且要開發新功能創造更多使用經驗,提高產品的競爭力和商機,因此開始第三版的開發。

 

入口首頁

Ver.1 2013年

2013年發展的版型,已經具備主要單元如賽事、新聞、相簿等,後台資料庫建立和前台串接為優先開發部分,介面和視覺為非優先部分,皆套用模板、圖庫。

入口首頁

hp_2013_1.png

賽事列表

race_2013_1.png

賽事頁面

race_2013_2.png
 

Ver.2 2015年

2015年主要單元的資料結構已大致成形,後台資料庫建立和前台串接也已建立出完整架構,可以滿足賽事、相簿再輸入和搜尋等需求,介面、使用流程和視覺也有優化的需求,此階段主題色系已確定,但介面仍未正式開發。

入口首頁

hp_2015.png

賽事列表、賽事頁面

race_2015.gif
race_2015_3.jpeg

賽事相簿

photo_2015_1.png

Ver.3 2017年至今

優化項目

各種資料、元素重新排列,力求簡潔明確、有效率傳達資訊,操作流程更流暢直覺。
​使用者經驗
在前版的基礎上,優化操作流程,讓使用者更有效率達成目的、滿足需求。
設計系統
由於網站的使用量劇增並逐漸商業化並建立形象,需要建立設計系統增加品牌識別度。

開發功能

手機版介面
有鑒於手機瀏覽量劇增,桌機版網頁已經不符合大多數使用者瀏覽裝置的需求。
網誌功能
讓使用者自由新增網誌,建立跑友提供內容的平台。
紀錄功能
讓使用者自由上運動紀錄,增加使用者自產內容的多樣化,並產生大數據統計。
​使用者介面
 

開發/優化流程

process.png
 
link_icon.png
background_gradient.png

使用者研究

​我們規律使用 Google Analytic 囊整網站瀏覽量、不重複訪客、外部來源、點擊率等數據,作為內容和設計成效的依據,也用以分析出使用者習慣和需求的趨勢,是每個階段優化和開發新功能不可或缺的部分。

截圖 2022-01-30 下午1.41.19.png
截圖 2022-01-30 下午1.51.52.png
截圖 2022-01-30 下午1.42.01.png
截圖 2022-01-30 下午1.46.36.png
 

定義 ⇆ 架構

數據經過分析整理後,團隊的工程師、產品經理和設計師(我)會一起討論,先從發散式的假設和推理來定義解決問題的方向,逐步歸納出一個有架構性的使用經驗流程;定義和架構之間往往也要有數次來回修正。

 
prototyping_pic.png

​流程設計 ⇆ 原型開發

方向和架構確定後,進入流程設計,並勾勒線匡稿和開發原型,這三個步驟會時常是來回交叉進行,確定開發方向的一致性和目標達成的準確率,直到原型 prototype 有完整性。

 
工作區域 38_4x.png
link_icon.png
link_icon.png

​設計系統

線匡圖確定的同時,網站的設計系統也按照需求進行開發和優化,以套用在新版網站中。

 
 

​首頁

link_icon.png

優化開發項目

  • Header 重新設計
    放置新品牌 LOGO,以新的設計系統 icon 簡潔呈現主要功能、動作、會員功能

  • 資訊區塊新排版
    訂定資訊優先順序,以區塊方式重新進行排版

  • 手機介面
    ​開發適合手機等螢幕較小行動裝置的呈現排版介面

全站總瀏覽量 447,025,417

2015年 3/2 - 2022年 1/21

全站平均日瀏覽量 177,743/日

HP.png

賽事列表

link_white_icon.png

​台灣最完整路跑、鐵人三項賽事列表,列表首頁重要資訊、數據,並有篩選功能;賽事頁面除了詳細資訊,使用者可以藉由收藏、參賽登陸等功能,做個人化的管理,也有完整的評分、互動介面,讓運動愛好者在找比賽時,以有效率方式達到瀏覽比賽的目的。

收錄國內外賽事超過 1,000場/年

總瀏覽量 66,400,789

2015年 3/2 - 2022年 1/21

 

平均日瀏覽量 26,401/日

race_calendar.png
 

​賽事影像

link_icon.png

優化開發項目

  • 入口首頁、項目、照片介面
    按照市場分析、GA 數據、使用者回饋,按照設計系統介面全面更新

  • 優化流程
    設計選擇時間、地點、搜尋號碼簿機制,增加使用者搜尋、下載、購買照片的效率。

  • 加強互動
    在不同流程中增加分享、收藏、留言等互動功能。

總瀏覽量 212,466,650

2015年 3/2 - 2021年 12/31

平均日瀏覽量 84,479/日

photos.png
 

賽事列表

link_white_icon.png

​優化開發項目

  • 列表首頁介面
    按照新設計系統重新設計排版和視覺,並按照 GA 分析數據和使用者意見,規劃呈現資訊、數據。

  • 互動功能
    使用者可以藉由收藏、參賽登陸等功能,做個人化的管理,也有完整的評分、互動介面,讓運動愛好者在找比賽時,以有效率方式達到瀏覽比賽的目的。

  • 手機介面
    重新設計手機的介面,讓使用者在裝置之間無障礙瀏覽、分享和互動。

收錄國內外賽事超過 1,000場/年

總瀏覽量 66,400,789

2015年 3/2 - 2022年 1/21

 

平均日瀏覽量 26,401/日

race_calendar.png

網誌

link_white_icon.png

 Ver.3 版本新功能

  • 網誌手頁
    以入口網站概念設計,分類依次呈現熱門、最新和不同類別網誌。

  • 社群機制
    以社群網站的方向,呈現點閱、讚數、留言等資訊,增加平台的社群互動效應。

  • 會員個人形象
    加強會員資訊區塊,讓使用者更快互相了解,並加速社群成長。

平均新增網誌數 103 篇/週

總瀏覽量 17,291,130

2015年 3/2 - 2022年 1/21

 

平均日瀏覽量 6,839/日

blog.png
 

紀錄

link_icon.png

Ver.3 版本新功能

  • 上傳紀錄
    提供使用者將自己運動紀錄保存的方式

  • 數據分析
    日、月、年里程、配速分析

  • 社群功能
    留言、點讚等功能增加跑友互動

  • 排行榜
    針對不同時間範圍進行排行,並以點數獎勵增加使用動機。

總瀏覽量 531,560

2018年 11/15 - 2022年 1/21

平均日瀏覽量 452/日

log.png
 

年度大賞

(2017-2022)

link_white_icon.png

運動筆記的年度整理的主題網站,有國內外新聞重點回顧,賽事、跑友分享、照片等排行和票選,六年來每年度主題網站在功能和視覺上都有優化和新設計。

總瀏覽量 1,775,794

活動期間為每年1月(2017年起)

活動期間 平均日瀏覽量 10,865/日

2021_annual_review.png
 

APP

Ver.1 新開發版

2020 年尾運動筆記投入 APP 開發,2021 年底上線,第一階段為建立網站主要內容,未來會針對手機 APP 開發出有別於網站的功能如照相、攝影、衛星定位、計時等,在主要內容發展出 APP 的專屬用途。

  • 入口

  • 賽事列表

  • 文章、網誌

  • 漢堡選單

  • 會員管理

  • 內容搜尋

  • 配速計算機

總下載量 5,325

2021年 10/1 - 2022年 1/21

app_screens.png

每位跑者有各自的里程
每個時代有流行的平台

不變的是   
串連、傳遞、服務的使命感