2023 佛光盃國際大學籃球邀請賽

由三好體育協會主辦的「佛光盃」是聚焦在大學籃球的校際盃賽,每年都會邀請來自海外的隊伍一同參與。2010 年開始的佛光盃,曾因疫情的關係停辦了三年,終於決定在今年(2023)再度舉辦。

本次受到人間衛視的委託,協助設計 2023 佛光盃的官方網站。

研究階段

考量到這是首次設計體育賽事的資訊網站,加上專案時程及預算,決定先從「以往的官網」找出客戶(關係人)熟悉的設計規則,同時參考國內外籃球賽事的網站,找出有哪些是可以使佛光盃更進步的機會點。

背景研究

首先,觀察以往的官網,不難發現架構相對單純,通常為一頁是的 Landing page,且皆有包含「賽程表」、「賽事直播(回顧)」、「隊伍介紹」,而今年需求方更希望新增「關於我們」來介紹佛光盃的歷史,近一步替睽違三年的賽事做個介紹。

另外,以往大多數的網站皆是以桌面版的環境作為主要設計場景,因此,當 user 使用手機開啟時,網站整體設計(尤其是版面配置)相對來說,就沒有這麼友善,我認為這是一個今年可以改進的強力機會點。

裝置選擇上,手機與桌機(含平板)的使用時數比約為 55%:44%;事實上,2020 年時,手機仍以 43.7% 落後於桌機 50.3%,而後幾年逐漸翻轉。今年手機佔比較去年成長 3.7%,可見手機連網已是趨勢,數位佈局中行動裝置體驗將比桌機網頁版更重要

TenMax 騰學廣告科技(2023),台灣人愛滑手機、每天上網7小時都在看什麼?8大調查報告全公開,遠見雜誌

另外,雖然名為國際邀請賽,但官網上卻沒有以英文標示的資訊,這部分也可能讓海外選手感覺不太友善。

競品分析

這邊我們以「籃球」、「大學聯賽」作為關鍵字,找出了「NCAA(美國國家大學體育協會)」、「B.League(Bリーグ;日本職業籃球聯賽)」以及台灣的「UBA(大專籃球聯賽)」為主要的分析對象。

分析版面配置與視覺呈現後,我們找出了一些機會點提供參考,例如:「NCAA」在首頁上有最近賽程的瀏覽,能夠提供 user 快速了解今日賽程、「B.League」則是使用大範圍的使用「圓角」和白底作為設計語言,讓各式色彩的 Banner 都能夠得宜的呈現在網頁上;「UBA」則在某種程度上代表了台灣對於運動賽事的既定印象,主色調為黑白,加上代表不同性別的藍色和橘色。

另外,三個網站都有「賽程卡片」的出現,除了比賽隊伍和時間的基本資訊,也會附上完賽的分數,讓沒有追到比賽現場的球迷也能透過卡片得知勝負。

「NCAA」在首頁上有最近賽程的瀏覽,能夠提供 user 快速了解今日賽程。

定義問題與目標

結合客戶需求與上述分析,我們總結出以下幾點目標:

  1. 以 Mobile 裝置為主要設計環境,打造一個適合用手機觀看的賽事資訊網站

  2. 保留客戶習慣的 Landing page 形式,減少關係人的認知落差。

  3. 新增英文的文案內容,讓跨國來台比賽的外國選手們,也能從網站上獲取需要的資訊。

限制

考量專案時程與整體預算,整個網頁預計使用靜態網站呈現,而非從後台控制。另外,與前端討論後,認為時間不允許開發語系切換,因此中英文將會同步呈現。

設計成果

如上述目標與限制所示,Mobile 的呈現會是本次專案的重點,同時,因為沒有辦法執行語系切換,因此在考量 Mobile 版面大小的結果下,將以英文作為重點,比方說在 Header 的設計上,英文標題將優先於中文標題,下方的 Navigation 在 Mobile 頁面上也是只有呈現英文。

賽程卡片中區分了三種尺寸,Compact 用於頁面最上方的最近行程,用最小的範圍顯示最大程度的賽程資訊,Small 和 Large 則分別對應 mobile 與 Tablet+Desktop 的賽程表。

結語

因為在這次的專案當中分飾多角的關係,從前期的網站規格書、Wireframe、設計,一直最後的操作手冊,幾乎都由我產出,能夠完整的從前期跑到後期的結案,對我來說是一個寶貴的經驗。

非常感謝開發團隊和其他公司前輩的大力協助,以及客戶的信任,很開心能夠藉由這種方式參與這次的佛光盃(鞠躬)。

Next
Next

愛卡位 iCardway|出勤與辦公室座位預約系統