BizPro 台大商學研究社官方網站設計與開發

專案背景與目標

本專案為 BizPro 台大商學研究社的網站重設計專案，為我於擔任幹部期間的個人專案。因社團網站為 2014 年建立，隨著社團人數的增多與課程的修正，許多內容已不符合現在的狀況，一頁式網頁也使得歷屆人員列表過長閱讀體驗不佳。

近年來，隨著台大其他商業社團的興起，傳遞社團價值與實際授課內容的差異化變得更加重要。因此，我在專案中擔任 PM、UIUX Designer 和 Front-end Engineer，負責翻新網站的內容與設計。希望透過資訊的呈現，強調社團的優勢與資源，以提高潛在申請者對於社團事務的了解程度，最終轉換為增加申請社團的人數。

使用者定義

潛在社團申請者（在校學生）

申請者們為了自己未來職涯考量與學習需求，希望找到適合自己的社團。目前校內有許多相似的商業社團，經過訪談後發現學生們在選擇社團時，所注重的要素包含以下幾項：

［商管學生］歷屆社員的履歷與能力是否豐富
［商管學生］是否有機會可以獲得職涯相關人脈
［商管學生］社團內部社群活躍程度
［非商管學生］授課內容是否紮實且符合自身需求
［非商管學生］是否有相關心得文作為參考

社團新進社員

新進社員在社團的課程中，需要尋找合適的歷屆學長姐作為指導業師，但目前網頁的呈現方式冗長，難以查找與比對合適的人選。

視覺設計

符號

BizPro 是一個以「社群連結」作為主要優勢的社團，因此以相互連接的圓點作為主要視覺樣式，每一個圓點皆代表 BizPro 社群中的學長姐們，交織成社群資源強大的社團。並以此延伸出重疊圓環、點狀紋理... 等其他樣式。

顏色使用

以 BizPro logo 所採用的紅色作為主色調，搭配灰色與白作為占比最大的色系做視覺的呈現。

網站架構與設計

根據兩類使用者對資訊的需求，發展四句 HMW Statement（我們如何能...？），進行網站內容與架構發想：

我們如何能凸顯歷屆社員背景強大的優勢？
我們如何能凸顯新進社員人均資源集中的優勢？
我們如何能讓學生如親身經歷一般了解在社團內能獲得的效益？
我們如何能凸顯以人的互動為核心的形象？

首頁

作為登陸頁，希望使用者在閱讀完首頁之後可以初步了解社團內容，因此安排以下的區塊與閱讀順序

社團起源、社團願景、社群影響力：初步了解社團的性質、願景與影響力，建立社團形象。
能力訓練、人脈連結：簡介社團的兩大核心「課程」與「社群」，並附上相關連結導引至更詳細的說明頁面。

透過快速簡介讓瀏覽者可以初步了解社團內容，亦建立社團形象。

學習旅程頁

將 BizPro 中三個社員身分：Junior、Senior 與 Alumni 用 Tab 進行分類，分區詳細說明各身分會經歷的課程、專案與學習資源。

將各身分所能獲得的學習資源羅列並說明各學習點，也能明確說明與其他相似台大商業社團的差異。

歷屆成員頁

將過去瀑布流式的展示方式，替換為換頁展示並搭配搜尋工具輔助瀏覽。另製作點擊後才呈現的歷屆成員自介卡清楚展示各成員的經歷與抬頭，同時降低列表頁的資訊複雜度。

讓瀏覽者可以根據自身需求透過搜尋工具找到對應的學長姊，清楚展示學長姊經歷以展示社團社群強大的實力

成員心得頁

整理過去曾於臉書分享過的心得文，並提供搜尋工具來篩選不同科系與背景的學長姊所寫的文章。並以彈窗的形式展示心得文。

讓非商管學生可以透過心得分享的形式來了解社團對於自己的職涯與學習的幫助，也方便尋找非管院背景的學長姊。

後臺設定頁

本網站每學期皆需要更新歷屆成員資料與心得內容，考量到並非每一屆的幹部都有程式能力，因此設計用於更新資料的後台以利幹部交接。

網站成果

本網站開發由我負責前端與伺服器架設，由羅義鈞負責 api 與資料庫架設，並透過 github 進行專案管理