五倍紅寶石程式教育機構 – 網站設計到開發

• 時間：2020/10-2021/03
• 角色：網站設計師、前端工程師(部分)
• 執行內容：需求與功能訂定、Wireframe、Prototype

Goals

• 網站設計與延伸品牌視覺，建立 Design System，維持品牌視覺一致性，易於更新與維護。
• 確立 TA 與專業品牌形象吻合。
• 與行銷合作埋設相關追蹤，找出頁面可調整的部分。

Project flow

人物誌

初期我們就學員過去的樣態，歸納出三個主要的人物誌，再從三個人物誌想他們遇到的困難、需求。

Wireframe

經歷過人物誌後找出初步的功能。其實相較功能，更改幅度更大的是品牌的視覺形象，它需要更專業、簡化，讓每個課程都當成小產品線，建立出識別度、區隔。

在 Wireframe 階段，與團隊成員討論每一頁的功能區塊，以及上線階段：

課程卡片設計

在課程卡片上可以明顯在看到課程的透過不同的色系，提高辨識度與區隔性。

Page Design & Components Design

最後一階段進入設計，並建立頁面的 Design System 、建立 Components 等，讓整體形象更一致。

總結

這次的網站改版除了視覺形象更新外，還與行銷合作找出未來可以優化頁面的數據，除了單純的 GA PageView 埋設外，也包含全站的按鈕、點擊區域的追蹤，例如透過 GTM 抓到所有按鈕後追蹤後，發現使用者最常點的按鈕是課程大綱收合；又或是透過 Hotjar 看到使用者在課程頁面到某個區塊時瞬間流失 20~30% 瀏覽量，這些都幫助我們有依據的優化課程頁面，我們調整課程區塊順序、調整區塊文案及內容等改善。

接著當課程銷售頁面調整兩次後，我們發現頁面優化只是促使轉換的一環，其他還有包含內容、廣告行銷的範疇都需要兼顧，才會讓轉換提高。

總結，這次專案學到了如何使用工具、人物誌、易用性測試等工具去了解使用者行為，然後不斷優化頁面。