Internship

Talktec UI/UX 實習
Comma 音頻線上課程應用程式設計

2018 年加入 Talktec 聽說科技成為團隊內唯一的 UI/UX 實習生兼設計師。期間除了產品設計外,也一同參與了雜學校展覽,且與外聘顧問一同審視現有服務流程、協助外包程式團隊測試等。

項目總覽

  • 設計第三方登入註冊流程
  • 加入課程下載收聽功能
  • 行銷素材設計、協助設計測試
我的職位

UI / UX design Internship

任職期間

2018 July ~ 2019 July

About Comma

Comma 是一款在 2018 年至 2020 年於雙平台上架的應用程式,主打透過純粹的人聲來創造更多學習時刻,低成本入門更多「複業」領域。產品內提供各領域講師的短語音課程,每堂以不超過 30 分鐘的錄製方式呈現,用戶可以在 app 內購買代幣來兌換感興趣的課程。

設計任務 #1

為 Comma app 加入第三方登入、註冊方式,與優化現行登入註冊流程

背景

起初的 Comma 僅能透過邀請碼進行使用,沒有使用者註冊流程,在 Comma 逐步完成金流功能後,則需要加入註冊流程與更便捷的第三方登入功能

我做了什麼
  • 從使用者行為進行思考,規劃整體登入註冊流程
  • 使用現有設計規範完成註冊頁面、第三方帳號綁定頁面

step 1

前期研究分析參考

  • 使用者需求分析

    使用者在使用 Comma 時,最關心的還是課程講師內容,如果能讓使用者愈快到達核心頁面,越有機會增加他們進一步註冊和使用這個 app 的動機。

  • 競品流程參考

    參考了市面上的線上學習平台,無論是 web 或是 app,皆能夠讓使用者先瀏覽課程再進行註冊登入流程。

得到 app onboard 登入頁

step 3

介面設計與原型製作

登入頁註冊頁面

根據設計規範將註冊流程 UI 繪製完成後,繪製 prototype 確認頁面切換的動畫效果。

進入 Comma 的訪客,可以在個人頁面進行登入
設計任務 #2

加入下載課程功能,讓已購買課程使用者能夠離線收聽。

背景

為了更貼近品牌使用情境,所以我們希望提供離線收聽功能,讓使用者可以在各種環境聆聽課程學習,降低使用成本。

我做了什麼
  • 檢視目前課程頁面,規劃下載流程
  • 設計下載狀態動畫

step 1

釐清「下載」的操作情境

根據使用者的使用情境,我們推測出使用者在進行下載時,具備下列行為模式:

  • 在下載課程後不一定會做即時收聽

  • 可能會挑選單堂或整系列進行下載

step 2

規劃下載操作路徑

根據操作情境,我們讓使用者可以在課程列表或播放時下載課程,並提供他檢視已下載課程的頁面

課程列表、播放頁面皆提供下載課程
課程 > 下載頁面中管理已下載課程

step 3

設計具識別性的操作圖示

為了讓下載過程清晰顯示且可同時應用在不同場景中,我們設計將 loading 動畫與下載按鈕結合,並使用 Lottie 套件將未開始到下載完成的動態 SVG 呈現在 Comma 上。

其他設計產出

優化首頁課程卡片排列,加入收藏功能、評價分數

優化原有使用介面設計,建立操作流程原型

課程列表加入評論、討論區塊
加入收藏課程功能
品牌動畫設計

利用 AE 結合 lottie 套件,將品牌視覺製作動畫融合產品

Comma 啟動動畫
loading 動畫
設計文件產出

後續將 User flow 製作成 UI Flow,作為與工程師、PM 管理交付的文件

UI Flow(點擊圖片可以查看其他 user flow)

探索更多產品價值

Comma 的高光時刻

在 2019 年 8 月,我們取得了一個重要里程碑,Comma 成功地登上 App store #Today 當日主打應用程式。
獲得這項殊榮的後續,我們還發現有更多用戶下載使用並提供了回饋,這也體現了語音課程在市場上的價值,因此團隊更邀請外部體驗設計顧問公司一同尋找產品更多的設計點。

comma 登上 app store 當日主打
透過使用者訪談和腦力激盪,挖掘更多 TA 的使用情境與洞見

在我實習的後半期間裡,我們透過使用者訪談的方式,探索了使用者對語音課程產品的期望、使用習慣和行為,並與團隊進行腦力激盪,挖掘了許多未曾注意到的想法或是產品使用過程中可能發現的問題。
即便很可惜我沒有參與完整的過程,仍然獲得了許多寶貴的經驗,也更加認識到從使用者角度思考的重要性和力量

與團隊針對訪談結果進行親和圖分類與解決方法腦力激盪