Portfolio 2015 ui

1

CON T E N T S

03

HiStory 歷史課程學習 App

Huntit 捷運尋寶 App

27

19

JONKER MALLACA 馬來西亞導覽 App

2

高中歷史課活動 App，透過劇本懶人包進行課間臨時趣味活動， 提高學生的專注力與學習動機，創造師生間雙向且良好的互動。

U X S D W o r k s h o p 2 015 . 0 5 用戶體驗 X 服務設計 X 創新

金獎

金獎 共同參與 / 林子虹、王亦方、湯士賢、吳宜芳、李佳軒 參與分工 / 使用者經驗研究、介面設計、視覺設計

3

「嗨！歷史」

HiStory

4

01

HiStory UI/UX Design

HiStory 團 隊 成 員 有 六 位， 背 景 分 別 有 程 式 設 計、 電 機、 心 理， 和 三 位 設 計， 在 工 作 坊 中 根 據 用 戶 體 驗 流 程， 在 五 週 的 時 間 提出一套翻轉高中歷史課的設計概念。

User Experience Research 議題

1

訪談

高中生

深度訪談 15 位學生及 4 位老師 透 過 前 期 訪 談 發 現 問 題 與 需 求， 設 定 預 期 目 標 市 場， 再 根 據 目 標 市 場 挑 選 適 合 的 受 訪 者 進 行 二 次 訪談，並歸納出洞察。

2

記憶科目 二次訪談受訪者 高中生 4 位

單向教學無法引起學生動機。 文 科 在 學 習 上 須 大 量 的 記 憶， 繁 瑣 的 細 節 令 許 多 高 中 生 頭 痛， 以 歷 史 為 例， 年 代 與 人 物 交 織 而 成 的 歷 史 事 件，平鋪直述的教學 無 法 引 起 學 生 興 趣 。 因 此， 如 何 提 供 師 生 在 歷 史 課 上 有 更 良 好 的 互 動 及 學 習成效是我們想探討 的 主 題 。

5

高中老師 2 位

6

01

HiStory UI/UX Design

User Experience Research

訪談

使用者輪廓

Peter 高二理組 成 績 中 間， 不 擅 長 史 地 、 英 文 等 背 誦 科 目 ， 總 是 在 考 前 猛 背， 但 很 快 就 忘 了 。 喜 歡 化 學 ， 因 為 做 實 驗 有參與感。 P e t e r 喜歡模仿老師給同學看。 覺得自己為考試讀書，不清楚學習意義。

「 歷 史 課 就 是 在 睡 覺 ，反 正 都 是 要 背 ，那 回 家 背 就 好 了 。」

期待

老師認真準備教材與否，

活動若能結合學科知識，

會 影 響 學 習 的 意 願 。

會增加學習動機。

希望跟老師雙向互動。

學生喜歡參與課堂的體驗活動。

師生間的互動受限於教育體制與教學方式 利 用 訪 談 內 容 設 計 出 兩 款 使 用 者 輪 廓， 分 別 是 高 中 生 與 高 中 歷 史 老 師。 我 們 認 為 最 主 要 的 痛 點 是 因 為 老 師 容 易 因 為 趕 課 需 求， 難 以 與 學 生 互 動， 而 學 生 對 不 活 潑、 沒 有 參 與 感 的 教 學 不 感興趣，失去學 習動機。

7

台南一中歷史老師 隨堂小考督促學生複習，課堂間的互動多以念課文 搭配抽問方式進行。放學後老師會利用通訊軟體協 助進度落後學生。 擔心教學現場中時間較緊迫，並以考試主導教學。

「升學壓力與創新教學間的平衡是相當困難的事。」

期待

老 師 在 體 制 下， 有 一 定

老師認為設計課堂活動較費時

的規範及限制必須遵守。

且難掌握。

老師想知道學生學習成果。

老師想改善卻苦無良方 特 別 設 計 課 堂 活 動 非 常 費 時， 且 較 難 以 掌 握 時 間 與 狀 況， 現 有 的 利 用 到 網 際 網 路 或 手 機 應 用 程式的方法，多 數過於複雜，必 須花更多時間學 習。

8

01

HiStory UI/UX Design

User Experience Design

顧客旅程地圖

利 用 洞 見 與 訪 談 內 容， 排 列 出 使 用 者 的 行 為 地 圖， 時 間 從 上 課 前 到 下 課 後 回 家 複 習， 我們把情緒的最 低點列出，並一 一檢視需要改進 的痛點作為設計 方向。

設計方向

9

1

促進師生間雙向互動

2

師生皆不需花太多時間準備活動

3

課程緊湊，無法花太多時間活動

4

簡單預習和複習，提升學生能力

上課前

上課中

預習進度

老師

下課後 複習進度

隨機抽取演員

老師課前推播本週進度

下課後學生進行經典題填 答，成績回傳給老師

學生

我們將 app 的使用過程分為三個主要脈絡，上課前、課中和課後，從課前老師可以透過推 播功能傳送本週進度或通知給學生進行預習的動作。然後在課中可以藉由剛剛介紹的三種 模式進行 創 新 式 的 趣 味 教 學 ，到 課 後 學 生 可 以 填 答 與 課 程 有 關 的 經 典 例 題 進 行 複 習 的 動 作 。

10

01

HiStory UI/UX Design

登入

班級管理

課前

選擇進度

選擇教材

課中

課後評量

課後

11

課前推播

抽選學生

學生端通知

劇本提詞機

12

01

HiStory UI/UX Design

特點

班級搭配進度

廣播系統

一 個 老 師 會 同 時 教 許 多 班 級， 並

透 過 廣 播 系 統， 老 師 能 讓 學 生 預 先 知 道 上 課 內 容 並

且 橫 跨 不 同 年 級， 管 理 班 級 進 度

事先預習，上課時學生較能快速進入課程。

就非常重要。 老 師 登 入 後， 所 有 班 級 和 進 度 便 能一目了然。

13

快速活動 我們設計 三 個 簡 短 的 小 活 動 ， 讓 老 師 能 夠 搭 配 課 程 內 容 進 行 。 1/ 逢場作戲：隨機抽取學生擔任歷史課本中的角色，利用提詞機進行即 興演出。 2/ 集思廣 益 ： 抽 取 學 生 ， 由 老 師 主 導 詢 問 歷 史 問 題 。 3/ 抽絲剝 繭 ： 抽 取 學 生 擔 任 歷 史 人 物 ， 由 其 他 學 生 提 問 推 想 此 角 色 。

14

01

HiStory UI/UX Design

隨機抽取學生扮演歷史人物 老師挑選 好 課 程 範 圍 與 模 式 後 ，抽 出 學 生進 行 三 到 五 分 鐘 的 活 動 ， 幫 助 學 生 快 速 進 入 主 題， 由 於 上 課 時 間 有 限 ， 快 速 簡 短 的 活 動 能 夠不佔用 太 多 教 學 時 間 ， 並 能 讓 學 生 學 習 獨 立 思 考 。

15

提詞劇本

歷屆考題測驗

被 抽 選 到 的 學 生 要 找 著 簡 短 的 劇 本， 利 用 提 詞 功 能 即

課程結束後出現此範圍得考古題，能夠

興 演 戲， 不 需 要 特 別 花 時 間 準 備， 也 能 增 進 獨 立 思 考

讓學生更快速瞭解大考出題方向並且幫

的能力。

助記憶。

16

01

HiStory UI/UX Design

Value Proposition 我們的價值主張主要有四點，分別是： 1/ 增進學生的學習動機 2/ 改善師生間的互動模式 3/ 幫助老師具備創新多元的教學方式 4/ 培養學生獨立思考的能力。

Business Model Canvas 商業模式的部分，app 是免費的，但只提供核心腳本供老師免費試用，如果老師喜歡， 可以透過內建購買進行關卡的購買，除此之外，老師也可以把自己撰寫的劇本上架，分享 給其他進行創新教學的使用者。我們也會跟出版商合作，由他們提供教材的內容，並透過 這樣的合作方式互惠互利。 Key Partners

出版商

Key Activities

全國 歷史老師

教材設計

介面設計

Value Propositions

程式設計

系統維護

增進 學習動機

增進學生 獨立思考 能力

Customer Relationships

教學 創新多元

推播功能

Ratings

教育與 學習間的 正向交流

Key Resources

Channels

歷史老師

APP STORE

google play

口耳相傳

官網

設計師 工程師

Cost Structure

Revenue Streams

App設計 維護費

17

上架費用 教材整理

內建購買 新內容

出版商 合作

學校 購買授權

Customer Segments

高中 歷史老師

高中生

18

HUNTIT 「 搭 乘 台 北 捷 運 尋 找 寶 藏！」 外地遊客到了台北常需要不斷上網搜尋景點和交通，而台北捷客除了 通勤或固定的景點以外還能去哪呢？ 捷運藏寶冒險 App，幫助外地旅客遊台北，也讓在地台北人發掘捷運 新去處，當小海盜成長的同時，旅人們也將擁有更多台北口袋名單。

2 015 台 科 設 計 週 展 出

19

20

02

Huntit UI/UX Design

議題 台 北 捷 運 尖 峰 時 期 塞 滿 上 下 班 的 民 眾， 但 其 他 時 段 搭乘的比例卻相當低，除了通勤方便之外，期望透 過其他方式吸引民眾 使 用 大 眾 運 輸 。 許多長期居住臺北的人經常抱怨不知道能去哪裡， 網路上的旅遊地圖多是給外來旅客的景點推薦，對 於臺北人而言沒有吸引力，對於外地的旅客更是需 要知道捷運能到達的 旅 遊 景 點 。

21

22

02

Huntit UI/UX Design

概念 遊戲化旅遊資訊，利用尋找藏寶地圖，並以對戰獲得領地 的 方 式， 激 起 玩 家 的 好 勝 心 ; 與 店 家 結 合， 使 獲 勝 者 能 夠 得到優惠券等實體獎品，增進玩家對戰慾望。

等級提升後裝備也升級，

從小水手到大海盜。

01 選 擇 一 個 尋 找 任 務 的 篩 選 方 式 三個篩選任務的方式，自由選擇，由左至右： 地點緣盡 / 時間快結束的 / 獲得獎勵多寡 最右邊的則是特別通知。

02 選 擇 一 個 任 務 進 行 對 戰 當玩家的等級越高，便能看見星星數越高的任務， 星星是每次拿到的獎勵，能夠換取獎勵。

23

。

03 進 行 對 戰 !

04 獲 勝 ！

規 則 一 / 找 到 照 片 上 的 店 家， 定 位 後 解

獲得餐廳折價券以及

鎖進入對 戰

悠遊卡加值點數

規則二 / 三 戰 兩 勝 24

02

Huntit UI/UX Design

Introduction Vedio

25

26

JONKER MALACCA 此專案為開發一款介紹馬六甲當地文化街的旅遊指南 App，幫助馬 六甲申請上世界文化遺產，此 App 已贈與世界文化遺產局。 共同參與 / 陳柏全、黃致嘉 參與分工 / 資料收集、攝影、介面設計、視覺設計

27

2014 Gap Time for Dream chasers in Asia 國際體驗學習計畫

28

03

Jonker Malacca UI Design

目的 此趟行程與馬六甲的獨立華文中學培風中學合作，和當地師生一起探 訪馬六甲地區的老街，透過 App 的方式介紹在地文化，藉由雙方合 作的方式深入了解在地文化及民俗風情，建立二校學生的友好情誼， 更透過本次的機會培養國際觀，增長見聞。

我 們 和 馬 六 甲 世 界 文 化 遺 產 局 於 20 1 5 年 2 月 1 4 日 在 馬 六 甲 文 化 街 上 舉 行 了 發 佈 會 ， 正 式 發 表「Jonker M ala c c a - 旅 遊 指 南 A pp」 。

29

導覽列 導覽頁有三 個 類 別 ， 分 別 是 美 食 主 題 、 文 化 景 點 ， 和 A p p 的 製 作 緣 起 。 每 個 類 別 裡 介 紹 的 店 家 都 是 當 地 學 校 推 薦 與 認 定 的 ，A p p 的 主 色 則 是 我 觀 察 到 當 地 最 常 出現的色彩 ， 即 是 當 地 紅 磚 牆 與 燈 籠 的 紅 ， 選定 這 個 顏 色 讓 人 更 有 身 在 當 中 的 感 受 。

30

03

Jonker Malacca UI Design

店家介紹 每個店家 展 開 後 ， 都 會 有 店 家 介 紹 、 相 片 ， 與 G o o g le M a p 導 航 。 參 考 Goog l e M at er i al Des i g n ， 適 時 收 納 資 訊 ， 點 選 圖 片 向 下 展 開 ， 使 頁面不至 於 過 長 ， 內 嵌 地 圖 導 航 功 能 ， 讓 觀 光 客 直 覺 操 作 。

31

店家導航 第四項功能為所有店家在地圖上的確 切位置，可以選擇類別，或者全部顯 示，讓使用者一目了然。

32

33

面對面，看見使用者內心的長相 做出直指人心的好設計

34