← UI/UX

AI 輔助批閱

AI EssayGo 南一作文批閱

配合行銷期,快速以 MVP 上線並分三階段陸續迭代。
作文批閱流程設計、結合 AI 產出個人化分析報告。

AI 批改 文件上傳 報告設計
南一 AI EssayGO 主視覺:桌機畫面顯示上傳作文與批改設定,手機畫面顯示批改結果的總分與等級

專案背景

01

作文批改極度耗時,老師一篇篇批改並寫評語,負擔重。

02

因應行銷期所需,同業已有 AI 批改,南一手上沒有對應產品,業務缺乏可談的題材。

產品目標

01

以 MVP 形式先上線,讓產品在行銷期就有可展示、可講的完整流程。

02

AI 的評分與建議要能被老師理解,而不是給一個無從判斷的分數。

03

分階段擴充,讓後續的多篇批改與批改紀錄能接在同一套流程上。

團隊資訊

專案期間
〔待補〕
產品團隊
〔待補〕
擔任角色
〔待補:競品分析、流程設計、介面設計、驗收⋯⋯〕

上線節奏

先以 MVP 上線,再分兩階段視需求補齊功能

Roadmap | 三個階段的取捨

第一階段

MVP 上線

  • 檔案上傳批改
  • 文字批改
  • 批改結果報告

第二階段

擴充批量批改

  • 多篇批改
  • 一次下載多篇批改結果
  • 作文縮圖預覽

第三階段

讓成果留得住

  • 批改紀錄
  • 使用額度限制

Phase 01

第一階段:設計作文批改核心流程,最小可行即上線

背景
行銷期將至,競品皆有 AI 作文批改產品,我們需先以 MVP 上線,讓業務可以向老師展示及介紹。
核心功能
與 PM 進行競品分析,先確保三段重要流程:
1. 上傳作文及批改設定 2. AI 批改 3. 產出/下載批改結果
上傳作文頁面:上半部為單篇/文字批改分頁與檔案上傳區,下半部為學制、作文標題與進階設定的批改資訊表單;右側手機畫面顯示已上傳的作文檔案清單

01上傳作文

可選擇文字/檔案上傳。

02批改資訊

針對小中高三個學制,制定不同的批改標準,符合各學制所需。

等待畫面:畫面中央為獎章動畫,下方顯示「AI 正在批改作文中…」

03等待狀態動畫設計

AI 批改需要數十秒,以動態的「AI 批改中…」明確告知系統仍在運作,並以動態減少乏味的等待。

等待動畫:獎章周圍有星光與彩帶循環閃動
中斷提醒彈窗:批改途中離開時跳出「確定要離開此頁嗎?」提示,提供確定離開與停留此頁兩個選項

04中斷提醒彈窗

在 MVP 階段中,還沒有製作留存批改紀錄的功能,若中途離開將找不到批改結果,於是特別注重彈窗提示,防止使用者不小心離開。

批改結果頁面:上方為作文總分 86/100 分與作文等級「甲」,下方整體評語分為亮點分析、核心建議、亮點句型/修辭等分區;右側手機畫面以可展開的區塊呈現同一份報告

05批改結果

確保 AI 分析報告的易讀性,將 AI 內容分區列出,讓老師可以快速理解批改結果。

Phase 02

第二階段:新增多篇批改功能,因應老師需批改整班作文的情境

問題情境
為了讓老師可以更有效率地批改整班作文,需新增多篇批改的功能。
新增功能
1. 多篇批改功能及結果列表(由同事完成)
2. 新增作文批改狀態
多篇批改結果列表頁面:上方為班級基本資訊與成績總覽環圈圖,下方為每篇作文的檔名、等第、分數與『查看』按鈕的列表

01多篇批改結果列表

讓老師快速了解全班作文狀況,並可點擊「查看」進入單個學生的批改結果。

作文批改狀態一覽:同一列作文在 Default、Hover、AI 批改失敗、重批中四種狀態下的呈現方式

02作文批改狀態

補齊作文批改失敗及重新批改流程。

Phase 03

第三階段:新增批改紀錄讓作文評語留下來,老師可隨時回顧

問題情境
身為老師,我會與學生檢討作文並在學期末重新回顧學習狀況,希望可以在批改作文平台上找到過去的成績和評語。
新增功能
新增完整批改紀錄列表,內含作文批改的完整資訊,並可導向該次批改結果。
批改紀錄列表頁面:頂部導覽新增『批改紀錄』入口,主區為可依批改類型、時間範圍篩選並搜尋的作文紀錄列表,含批改狀態、學制、時間與查看操作

01批改紀錄列表

迅速查找作文:

  • 依批改類型、時間範圍
  • 搜尋作文標題、班級

可清楚了解作文批改狀態及資訊:

  • 作文標題、時間、學制等細節
  • 可直接前往查看作文批改結果
批改紀錄列表的時間範圍篩選:展開的雙月月曆日期選擇器,左側有本週、過去 1/3/6 個月的快速鍵

02時間範圍快速鍵

考量老師所需,預設 6 個月內的快速鍵,加快篩選過程。

Behavioral Analytics

透過 GA 與 Clarity 觀察使用者行為,提出優化建議

01埋設 GA 追蹤數據

GA 圖表:三個學制(J/E/H)的上傳事件計數橫條圖
參數
學制
目的
了解三個學制使用量,可作為與業務部討論成效之依據,以及下一步方針。
GA 圖表:批改類型(file/text/batch)的事件計數橫條圖
參數
批改類型
目的
了解老師最常使用哪一種批改方式,進而判斷優化優先順序。
GA 圖表:上傳檔案類型(jpg/pdf/jpeg/docx/png/txt)的事件計數橫條圖
參數
檔案類型
目的
了解老師習慣保存的作文檔案類型,用於優化老師上傳作文的流程。

02透過 Clarity 分析使用者行為及提出優化建議

Clarity 點擊熱區圖:批改列表右側每一列的『查看』按鈕聚集了大量點擊

查看學生作文結果

觀察

老師會連續進入不同學生的作文結果頁,花太多步驟來回於單個結果頁與列表之間。
目前流程:點擊查看進入結果頁 → 返回批改列表 → 點擊下一位學生查看。

優化建議

於單個結果頁新增「上一位學生」及「下一位學生」按鈕,讓瀏覽學生批改結果更加順暢。

Clarity 點擊熱區圖:列表底部的『展開列表』按鈕聚集了最多點擊

展開列表按鈕

觀察及假設

展開列表按鈕點擊率位居第一,假設使用者高機率會查看完整列表,是否能減少點擊次數讓體驗更流暢?

原先設計用意

當初為了維持表格不過高而選用這個方式。

優化建議

固定可視 6~8 筆資料,以滾動方式閱讀,並確保進入查看單篇結果並返回時,可維持上次的滾動位置。

反思

〔待補:一句話收尾,例如「MVP 讓產品先活下來,但也留下了債」〕

〔待補:兩到三條誠實的檢討,以及若有更多資源會做什麼〕

NEXT

0-1 OneBoard 課中互動遊戲設計 →

課中遊戲化測驗