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

Simon Asika
Oct 15 · 5 min read
Image for post
Image for post

1號課堂是遠見推出的線上學習平台,特色是擁有大量的名師課程,除了名師親自錄音授課之外,旗下出版書籍也都有專人導讀分享知識,以及定期的談話錄音節目可以收聽,是乾貨非常多的一個網站。

來自APP的課程架構

一開始,遠見表達想考慮製作獨立的網站平台,但考量到會員整合問題,會導致重複帳號。因此我們提供了幾種選擇:

  • A 直接串接原本資料庫與金流API,網站提供上課與購買功能
  • B 網站另外開發會員系統與Web金流,但與app做自動同步
  • C 兩邊會員帳號不整合,金流分開獨立,但課程內容同步
  • D 課程不整合,但會員同步

最後在多方考量下,討論出來的架構是A,盡量以不重複造輪子為主。因此網站端是以App會員為基礎,取用App伺服器的會員身分做認證,但額外提供更多功能與好用的操作介面。如此盡可能保留原有會員的已購課程與權益。

在製作過程中,最大的挑戰就是要與原有的App團隊做好API串接整合。由於app介面與網站介面的不同,許多api可能要改寫或新開。並且盡可能接上原本已經運作順暢的LINE與Facebook登入功能,務求讓消費者獲取速度最高。

介面設計

Image for post
Image for post
按鈕製作成書的造型
Image for post
Image for post
紙卡樣式,與Footer微微的紙張紋理

雖然嘗試加入一些實體素材元素,但我們非常的節制,並沒有將網站設計成擬物設計風格,依然保留了現代化扁平視覺風格,在閱讀的體驗上依然保有舒適感。

影音播放器

Image for post
Image for post

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

Image for post
Image for post

不過這次同樣在多方考量下,沒有採用全站 CSR 輸出,所以瀏覽其他頁面時會造成收聽中斷。

至於影片播放器由於環境較為單純,我們採用一般常見的影片播放器功能。不過還是特別做了播放進度監聽,讓下面章節的播放進度背景條可以與影片同步。

Image for post
Image for post
跟著跑的進度條

搜尋與收藏

Image for post
Image for post

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

Image for post
Image for post

更多貼心的小功能

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
Image for post
Image for post

總結

非常感謝遠見在多方考量後,信任我們團隊針對客製化開發的技術能力,1號課堂這個網站目前也在逐步提昇其他功能,未來還會陸續推出電子書等服務。

若您有需要尋找廠商做量身訂製的客製化網站開發服務,歡迎聯繫夏木樂

Image for post
Image for post

夏木樂網頁設計-分享空間

NEW HORIZONS AND BEYOND

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store