This slide presents our user experience service design process for real world in DITLDESIGN. Three case studies from DITLDESIGN were adapted to illustrate our method, mindset, and results. There three projects won RedDot best of best, junior prize, and CHI SDC golden award.

2. DITLDESIGN beBit
VIDE UCAN

4. Awards
CHI
C R O S S I N G S
SEOUL KOREA
2015
Jobs

7. iCAN
UXDP of iCAN
•
•
•
• iOS -
•Android -

8. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Kids with Autism

10. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2010 -2012
iCAN Project
Design Process /
柳丁 炸雞腿 葡萄 薯條 奇異果
水 三明治 蘋果 餅乾 漢堡
Design Feature 1Design Feature 2 動詞
文具
食物
角色
交通
地點
副詞
娛樂
時間
情緒狀態
形容詞
日常用品
260
100

11. Iteration
UXResearch UXDesign UXTesting UXEntrepreneurship
UXDesign Process
Agile UX + Lean UX

12. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
The 1sthalf circle has completed. UXResearch

13. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /

14. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
1.
2.
3.
1.
2.
3.

15. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /

16. •
•
•
• (BURDEN of CAREGIVER)
ICAN UXRESEARCH

17. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / The 2ndcircle has completed.
iOS 5.0
UXResearch
UXDesign

18. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iPad
Mac - iWork Keynote

19. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
-
iPad
iCon

20. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan

21. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
- XCode
UI

22. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
2011/05/19-21
Working Prototype

23. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / The 3rdcircle has completed.
iOS 5.0 Android
UXResearch
UXDesign
UXTesting

24. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
Intelligent Communication Board for ASUS Eee Pad Transformer
Individuals with autism are often unable to use oral communication to express themselves comprehensively and thus suffered from many
communicational obstacles. Current solutions are heavy communication books where numerous pictures stored in order to prepare their oral
presentation skills.With clear interface, easy operations, and lightweight, iCan integrates sounds, figures, words to smoothen the learning process
for autistic children. Its functions include the help to pronounce words correctly, to structure sentences, and to collect personal database for
figures.Through the aid of iCan, hopefully autistic children can learn basic oral communicational skills.
iCAN
Android
Sapuz
http://www.sapuz.com/
* 更新內容：
1. 新增圖卡時容易誤按會跳出
2. 常用圖卡功能，大圖顯示
3. 播放具備 設定次數功能
4. 回覆預設功能鍵
5. 直覺性的播放按鈕圖示

25. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan - Android
分類顏色，以及圖文轉換的新功能
柳丁 柳丁
v1 v2
Android IOS

26. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process /
iCan - iOS
分類顏色的新功能
v1 v2 v3

27. National Taiwan University of
Science and Technology /
Department of Industrial and
Commercial Design
2011 NSC DESIDN
iCAN Project
Design Process / The 4thcircle has completed.
UXInnovation
UXResearch
UXDesign
UXTesting
iOS 5.0 Android

28. ICAN UXTEST FINDING
•
ACC
• ican

29. USER EXPERIENCE DIFFERENCE
• /
(ex. )
iCan (ex. )
• /
iCan

30. QUESTIONNAIRE RESULTS
• Burden ofTeaching for Caregiver
Significant difference in the gain scores.
M=3.73, STD=1.05 ; P-value=0.0054 (<0.01).
• Burden of Making picture card’s for Caregiver
Significant difference in the gain scores.
M=8.00, STD=1.59 ; P-value=0.0005 (<0.01).

31. 2010.10
&
2011.05
(iOS)
2011.10
IDA
2011.11
2011.03 2011.06
(iOS) (Android)
2011.10
Android
-
2010.10
• Working Prototype • Add more User Needs & Experiences• Concept Design
iCAN v1.1 iCAN v1.2 iCA
iOS 5.0 Android 3.0
2010.10 ~ 2012.10

32. HearMe
A Recording App for Visually Impaired People
DITL 國立臺灣科技大學
設計資訊與思考研究室
IUILAB 國立政治大學
創新使用者介面實驗室
。

33. 余能豪 助理教授
指導總監
TEAM
MEMBERS
Zen 張育涓
研究員、專案經理
Diona 林奕岑
資深互動體驗設計師
Afra 蔡宜璇
資深IOS開發工程師
唐玄輝 副教授
指導總監

34. HEARME DEMO VIDEO

35. THE PROCESS OF PROJECT HEARME
UXR UXD UXT
Observation&I
nterview
UXR 2nd
Observation&
Interview
UXR 1st
Design
Exploration
Design
Assumption
prototype1
HearMe1st
prototype3
1HearMe 3rd
prototype2
HearMe 2nd
HearMe
UXT 1st
HearMe
UXT 3rd
HearMe
UXT 2nd
5
12 2
7
10
36 72

36. THE PROCESS
UXR UXD UXT
User Experience Research
使用者經驗研究
User Experience Design
使用者經驗設計
User Experience Testing
使用者經驗測試

37. ...
... ...

38. THE PROCESS
UXR UXD UXT
User Experience Research
使用者經驗研究
User Experience Design
使用者經驗設計
User Experience Testing
使用者經驗測試

39. • 現有錄音裝置以數字編號命名，無
法立 得知 案的大 內容。
• 自行建立分類相當需要；根據時間、
名、地點等來搜尋也有 助。
• 把 案從錄音裝置傳到電腦，再
傳給別人步驟 麻煩。
• 期待能分享更多生活中資訊給家人
朋友，或是互相共享資料。
• 手機錄音軟體沒有設計重複播放片
段，只好接到電腦。
• 錄音帶要快轉、倒轉到想聽的部分
比較耗時間。
• 錄音筆的操作變化太多，介面太複
雜，操作要花時間。
• 在錄音中能標記出重要段落，方便
日後聽取。 播放錄音
整理 分享

40. Normal
Mode
Recording
HearMe
Mode

41. Normal
Mode
Recording
HearMe
Mode

42. THE PROCESS
UXR UXD UXT
User Experience Research
使用者經驗研究
User Experience Design
使用者經驗設計
User Experience Testing
使用者經驗測試

45. 第一版 第二版 第三版

46. HearMe APPHearMe APP
Features of HearMe
快速錄音
重點標記
清單整理
語音簡介
播放操作
分享檔案

47. 操作更敏捷，不再錯過重要時刻
雙指點兩下， 可開始錄音
“出去時可以很及時的錄製很特別很好聽的
聲音，或是街邊叫賣的聲音就可以馬上錄下
來。”—（P4）

48. 當下記錄，錄後 超方便
單指右滑，記錄重要段落
”學生上課標記重點時會很有用，
我以前光拉那個重點就拉了老半天，
還是找不到。”（P3）
Part 1

49. 輔助用的資料夾，增加搜尋效率
多款常用資料夾，歸 不費力
“在我錄完之後可以直接分類選擇，
可以幫助我記憶。對我來講是一個很
好的邏輯...” （P5）

50. 5秒個人化的簡介，協助辨識 案內容
雙指點兩下後長按，完成後放開
“自己聽音檔裡面的前面三秒就
會可以知道是什麼，加上聲音檔
名的輔助就又更清楚。”（P4）

51. 預先知道 案內容，提高搜尋效率
系統自動預播短音
“檔案名稱和檔案預覽的功能就
可以很快找到檔案，界面排列順
序也都蠻清楚。”（P6）

52. 不用擔心時空問題，也不用再帶傳輸線
E-mail 和 wifi 傳輸任君挑選
“連e-mail標題都已經預寫,附件
已經夾帶好了，如果這樣要分享
給同事，覺得不錯用，” （P7）

53. Design Testing Redesign
長按手勢 MagicTap手勢容易誤觸
認知錯亂
九月一日
九月二日
九月三日
九月二日
案A
案B
第一層 第二層
保留標題階層
九月一日
九月二日
九月三日
九月二日
案A
案B
第一層 第二層
省略標題階層

54. 錄音時標記重點段落 向右滑動，聆
聽時也一樣左右滑動來跳段落。
iOS中調整數 例如音量、語速的手勢
是上下滑動來增減，套用在快轉倒轉情
境中一樣上下滑動。
快速理解，學習使用

55. 節省搜尋時間，依個人選擇聆聽
錄音提示除了雙指雙擊開始錄音，後續可
再接續說明錄音時的操作手勢。
錄音 案的資訊有 名、長度、日期、地
點、 案大小、段落數量...都放上去，需
要可再細聽。

56. 減輕短期記憶負擔，符合心智地圖
預設的 單頁面，只要瀏覽上一項或下
一項來搜尋。

57. 獲得聽覺的空間感，不易迷失
例如到下一層時會瀏覽到該頁面的
標題，便知道已換到下一頁。
跳出通知視 時有相應的音效，提
示 面排列與先前不同。

58. 跨App操作一致性，空間記憶的可能
狀態列、巡覽列，從螢幕邊界快速摸到電池電
量或回上一頁按 。

59. THE PROCESS
UXR UXD UXT
User Experience Research
使用者經驗研究
User Experience Design
使用者經驗設計
User Experience Testing
使用者經驗測試

61. 學習型工作型 生活型

62. User
生活型學習型
Interaction
手打筆記
重點標記
歸 就刪
手打筆記
重點標記
歸 就刪
分享
錄完就傳
Objects
手機
電/筆電
手機
手機
電/筆電
Activities
會議記錄
學課程
廣播採訪
課堂筆記
溫習功課
生活記事
創作靈感
重要時刻
Environment
公司
住家
住家 戶外
變動環境
學校
住家
工作型
手機
電/筆電
手機
電/筆電
手打筆記
重點標記
歸 就刪
手打筆記
重點標記
歸 就刪
分享
錄完就傳
住家 戶外
變動環境

63. INSIGHTS
不同錄音族群的設計建議
• 數據化或大量的資訊有被紀錄的迫切性
• 案傳輸便利性
• 儲存空間
• 跨裝置的延續性
• 快捷操作
• 與社群平台的連結程度
工作型
學習型
族群共通處
生活型

64. Mobile Navigation for
Visually Impaired Smartphone User
BlindNavi

73. sequencing

76. sequencing

80. service blueprint

81. 4
2
3
1
touch point

84. 輸入目的地
搜尋
台灣科技大學
一號島廚房
cafe libro
Diary Bistro
WHERE
搜尋
Vino C WHERE
搜尋
Vino Cafe
台南市中西區福州街128
號1樓
Vino Cafe
搜尋結果
台北市大安區師大路80巷
2號1樓
02 2362 1167

85. 搜尋結果搜尋
現在位置
起點
輸入目的地
終點
搜尋
WHEREVino C
終點
現在位置
起點
Vino Cafe
終點
搜尋
起點
台科大校
面對基隆路
斑馬線前有石
過馬路後請左
請左轉
左轉後於基隆
朝羅斯福路方
人行道上有樹
1
2
路線細

87. 請左轉
確認號誌燈在九點鐘方向後
過馬路
過馬路後朝二點鐘方向找尋
下一個號誌燈
右手邊為車輛
出入口請注意
請繼續直行30公尺
請確認號誌燈在
九點鐘方向後
過馬路
過馬路後上人行道左轉進入
校園
小心人行道與斑馬線之落差
抵達目的地
2
3
4
路線細節

88. 辦公室到
VINO CAFE
2015 / 01 / 29
歷程
2015/01/20
2015 / 01 / 20
起點
台科大校門口
面對基隆路 請過馬路
斑馬線前有石柱可追跡
過馬路後請左轉
增加註記
增加註記
請左轉
左轉後於基隆路四段直行
朝羅斯福路方向前進
人行道上有樹枝垂葉請小心
1
2
歷程細節
WHERE增加註記
辦公室到
VINO CAFE
2015 / 01 / 29
歷程
2015/01/20
2015 / 01 / 20
歷程紀錄
起點
台科大校門口
面對基隆路 請過馬路
斑馬線前有石柱可追跡
過馬路後請左轉
增加註記
請左轉
左轉後於基隆路四段直行
朝羅斯福路方向前進
人行道上有樹枝垂葉請小心
1
2
歷程細節
起點
台科大校門口
面對基隆路 請過馬路
斑馬線前有石柱可追跡
過馬路後請左轉
增加註記
請左轉
左轉後於基隆路四段直行
朝羅斯福路方向前進
人行道上有樹枝垂葉請小心
1
2
歷程細節
Line Facebook Message Mail
Cancel
Copy
現在位置歷程紀錄
WHERE增加註記
歷程細節
Line Facebook Message Mail
Cancel
Copy
co-creation

89. 4
2
3
1
輸入目的地
搜尋
台灣科技大學
一號島廚房
cafe libro
Diary Bistro
搜尋
WHEREVino C
終點
現在位置
台北市大安區
師大路80巷
2號1樓
羅斯福路四段
台大正門
新生南路三段
台大校園
辛亥路二段
民權國小
基隆路四段
起點
台科大校門口
面對基隆路 請過馬路
斑馬線前有石柱可追跡
過馬路後請左轉
增加註記
請左轉
左轉後於基隆路四段直行
朝羅斯福路方向前進
人行道上有樹枝垂葉請小心
1
2
歷程細節

91. Books Books
NO.
54
56
COFFEE SHOP
2
3
1

97. +

101. evidencing

103. ?
VISUALLY IMPAIREDS on the TRAIN

104. !
+BEACON
BEACON on the TRAIN

106. Books Books
NO.
54
56
COFFEE SHOP
DAY TIME STREETS

107. Books Books
NO.
54
56
COFFEE SHOP
NIGHT TIME STREETS

108. Books Books
NO.
54
56
COFFEE SHOP
STREETS for VISUALLY IMPAIREDS

109. Books Books
NO.
54
56
COFFEE SHOP
+BEACON
STREETS with BEACON

113. WWW.DITLDESIGN.COM