遠見1號課堂:案例分享 — 名家薈萃的線上學習平台

1號課堂是遠見推出的線上學習平台,特色是擁有大量的名師課程,除了名師親自錄音授課之外,旗下出版書籍也都有專人導讀分享知識,以及定期的談話錄音節目可以收聽,是乾貨非常多的一個網站。
來自APP的課程架構
原本的1號課堂是2018年推出的APP,沒有網站端的功能介面。為了有效進行網路行銷,遠見團隊認為需要製作網站版作為第一線的集客與著陸頁。由於我們擁有豐富的客製化課程網站製作經驗,因此從初期就提供了許多的製作與整合選擇。
一開始,遠見表達想考慮製作獨立的網站平台,但考量到會員整合問題,會導致重複帳號。因此我們提供了幾種選擇:
- A 直接串接原本資料庫與金流API,網站提供上課與購買功能
- B 網站另外開發會員系統與Web金流,但與app做自動同步
- C 兩邊會員帳號不整合,金流分開獨立,但課程內容同步
- D 課程不整合,但會員同步
最後在多方考量下,討論出來的架構是A,盡量以不重複造輪子為主。因此網站端是以App會員為基礎,取用App伺服器的會員身分做認證,但額外提供更多功能與好用的操作介面。如此盡可能保留原有會員的已購課程與權益。
在製作過程中,最大的挑戰就是要與原有的App團隊做好API串接整合。由於app介面與網站介面的不同,許多api可能要改寫或新開。並且盡可能接上原本已經運作順暢的LINE與Facebook登入功能,務求讓消費者獲取速度最高。
介面設計
課程網站的重心在課程本身,網站設計其實不應該宣賓奪主,我們盡可能以非常簡練的風格設計網站元素。但為了呈現一間大型出版集團的特色,我們在介面中加入的「書」與「紙卡」的概念,例如許多按鈕採用左方右圓角,就像書本的側面一樣,這樣的巧思讓整體設計跳脫出一種特別少見的樣貌:


雖然嘗試加入一些實體素材元素,但我們非常的節制,並沒有將網站設計成擬物設計風格,依然保留了現代化扁平視覺風格,在閱讀的體驗上依然保有舒適感。
影音播放器
與加點播播相似,1號課堂的音頻播放器為了一些特別的專屬邏輯,是採用獨立編寫的,沒有用上市面上的播放器程式套件。為了使操作過程流暢,播放器特地縮到頁面下方,使用者可以隨時暫停或跳轉下一章節。每個章節播放結束後,也會自動照順序往下播。非常適合忙碌的通勤上班族或家庭主婦邊忙邊收聽,在日常生活中吸收滿滿的知識。

蓋版的播放器雖然已經縮在下面,但為了不影響版面閱讀,有需要的話還可以手動縮到頁面下方,釋放更多閱讀空間。

不過這次同樣在多方考量下,沒有採用全站 CSR 輸出,所以瀏覽其他頁面時會造成收聽中斷。
至於影片播放器由於環境較為單純,我們採用一般常見的影片播放器功能。不過還是特別做了播放進度監聽,讓下面章節的播放進度背景條可以與影片同步。

搜尋與收藏
搜尋是課程網站非常基本應該要必備的功能,我們嘗試讓搜尋與瀏覽的過程更流暢,網站採用不跳頁的方式做過濾篩選。

收藏自己喜歡的課程,也是輕鬆的點擊就可完成

更多貼心的小功能
已購買的課程,會以「章節」為預設頁面,方便消費者立即開始觀看。而尚未購買的課程則會預先顯示簡介,介紹課程資訊。

替客戶準備了功能完善的部落格,可以編寫大量行銷資訊與SEO文章。這是網站版額外獨立開發的。

內建強大的SEO與SMO引擎,自動產生Metadata資訊,強化網站的搜尋與分享導流能力。管理員不用自行編寫 Description或Open Graph,網站會幫忙自動抓取填入,節省大量操作時間。


總結
一號課堂算是一個中等規模的網站,視覺上的吸引力是非常重要的元素,而網站應用功能因為早期在App後端已經開發完成的關係,不需要著墨太多,反而要注重網站的操作體驗與感受,才能作為行銷上的重要入口。
非常感謝遠見在多方考量後,信任我們團隊針對客製化開發的技術能力,1號課堂這個網站目前也在逐步提昇其他功能,未來還會陸續推出電子書等服務。
若您有需要尋找廠商做量身訂製的客製化網站開發服務,歡迎聯繫夏木樂。
