Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

User experience service design innovation for real world

4,263 views

Published on

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.

Published in: Design

User experience service design innovation for real world

  1. 1. DITLDESIGN beBit VIDE UCAN
  2. 2. Awards CHI C R O S S I N G S SEOUL KOREA 2015 Jobs
  3. 3. iCAN UXDP of iCAN • • • • iOS - •Android -
  4. 4. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / Kids with Autism
  5. 5. 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
  6. 6. Iteration UXResearch UXDesign UXTesting UXEntrepreneurship UXDesign Process Agile UX + Lean UX
  7. 7. 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
  8. 8. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process /
  9. 9. 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.
  10. 10. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process /
  11. 11. • • • • (BURDEN of CAREGIVER) ICAN UXRESEARCH
  12. 12. 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
  13. 13. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / iPad Mac - iWork Keynote
  14. 14. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / - iPad iCon
  15. 15. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / iCan
  16. 16. National Taiwan University of Science and Technology / Department of Industrial and Commercial Design 2011 NSC DESIDN iCAN Project Design Process / - XCode UI
  17. 17. 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
  18. 18. 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
  19. 19. 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. 直覺性的播放按鈕圖示
  20. 20. 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
  21. 21. 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
  22. 22. 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
  23. 23. ICAN UXTEST FINDING • ACC • ican
  24. 24. USER EXPERIENCE DIFFERENCE • / (ex. ) iCan (ex. ) • / iCan
  25. 25. 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).
  26. 26. 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
  27. 27. HearMe A Recording App for Visually Impaired People DITL 國立臺灣科技大學 設計資訊與思考研究室 IUILAB 國立政治大學 創新使用者介面實驗室 。
  28. 28. 余能豪 助理教授 指導總監 TEAM MEMBERS Zen 張育涓 研究員、專案經理 Diona 林奕岑 資深互動體驗設計師 Afra 蔡宜璇 資深IOS開發工程師 唐玄輝 副教授 指導總監
  29. 29. HEARME DEMO VIDEO
  30. 30. 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
  31. 31. THE PROCESS UXR UXD UXT User Experience Research 使用者經驗研究 User Experience Design 使用者經驗設計 User Experience Testing 使用者經驗測試
  32. 32. ... ... ...
  33. 33. THE PROCESS UXR UXD UXT User Experience Research 使用者經驗研究 User Experience Design 使用者經驗設計 User Experience Testing 使用者經驗測試
  34. 34. • 現有錄音裝置以數字編號命名,無 法立 得知 案的大 內容。 • 自行建立分類相當需要;根據時間、 名、地點等來搜尋也有 助。 • 把 案從錄音裝置傳到電腦,再 傳給別人步驟 麻煩。 • 期待能分享更多生活中資訊給家人 朋友,或是互相共享資料。 • 手機錄音軟體沒有設計重複播放片 段,只好接到電腦。 • 錄音帶要快轉、倒轉到想聽的部分 比較耗時間。 • 錄音筆的操作變化太多,介面太複 雜,操作要花時間。 • 在錄音中能標記出重要段落,方便 日後聽取。 播放錄音 整理 分享
  35. 35. Normal Mode Recording HearMe Mode
  36. 36. Normal Mode Recording HearMe Mode
  37. 37. THE PROCESS UXR UXD UXT User Experience Research 使用者經驗研究 User Experience Design 使用者經驗設計 User Experience Testing 使用者經驗測試
  38. 38. 第一版 第二版 第三版
  39. 39. HearMe APPHearMe APP Features of HearMe 快速錄音 重點標記 清單整理 語音簡介 播放操作 分享檔案
  40. 40. 操作更敏捷,不再錯過重要時刻 雙指點兩下, 可開始錄音 “出去時可以很及時的錄製很特別很好聽的 聲音,或是街邊叫賣的聲音就可以馬上錄下 來。”—(P4)
  41. 41. 當下記錄,錄後 超方便 單指右滑,記錄重要段落 ”學生上課標記重點時會很有用, 我以前光拉那個重點就拉了老半天, 還是找不到。”(P3) Part 1
  42. 42. 輔助用的資料夾,增加搜尋效率 多款常用資料夾,歸 不費力 “在我錄完之後可以直接分類選擇, 可以幫助我記憶。對我來講是一個很 好的邏輯...” (P5)
  43. 43. 5秒個人化的簡介,協助辨識 案內容 雙指點兩下後長按,完成後放開 “自己聽音檔裡面的前面三秒就 會可以知道是什麼,加上聲音檔 名的輔助就又更清楚。”(P4)
  44. 44. 預先知道 案內容,提高搜尋效率 系統自動預播短音 “檔案名稱和檔案預覽的功能就 可以很快找到檔案,界面排列順 序也都蠻清楚。”(P6)
  45. 45. 不用擔心時空問題,也不用再帶傳輸線 E-mail 和 wifi 傳輸任君挑選 “連e-mail標題都已經預寫,附件 已經夾帶好了,如果這樣要分享 給同事,覺得不錯用,” (P7)
  46. 46. Design Testing Redesign 長按手勢 MagicTap手勢容易誤觸 認知錯亂 九月一日 九月二日 九月三日 九月二日 案A 案B 第一層 第二層 保留標題階層 九月一日 九月二日 九月三日 九月二日 案A 案B 第一層 第二層 省略標題階層
  47. 47. 錄音時標記重點段落 向右滑動,聆 聽時也一樣左右滑動來跳段落。 iOS中調整數 例如音量、語速的手勢 是上下滑動來增減,套用在快轉倒轉情 境中一樣上下滑動。 快速理解,學習使用
  48. 48. 節省搜尋時間,依個人選擇聆聽 錄音提示除了雙指雙擊開始錄音,後續可 再接續說明錄音時的操作手勢。 錄音 案的資訊有 名、長度、日期、地 點、 案大小、段落數量...都放上去,需 要可再細聽。
  49. 49. 減輕短期記憶負擔,符合心智地圖 預設的 單頁面,只要瀏覽上一項或下 一項來搜尋。
  50. 50. 獲得聽覺的空間感,不易迷失 例如到下一層時會瀏覽到該頁面的 標題,便知道已換到下一頁。 跳出通知視 時有相應的音效,提 示 面排列與先前不同。
  51. 51. 跨App操作一致性,空間記憶的可能 狀態列、巡覽列,從螢幕邊界快速摸到電池電 量或回上一頁按 。
  52. 52. THE PROCESS UXR UXD UXT User Experience Research 使用者經驗研究 User Experience Design 使用者經驗設計 User Experience Testing 使用者經驗測試
  53. 53. 學習型工作型 生活型
  54. 54. User 生活型學習型 Interaction 手打筆記 重點標記 歸 就刪 手打筆記 重點標記 歸 就刪 分享 錄完就傳 Objects 手機 電/筆電 手機 手機 電/筆電 Activities 會議記錄 學課程 廣播採訪 課堂筆記 溫習功課 生活記事 創作靈感 重要時刻 Environment 公司 住家 住家 戶外 變動環境 學校 住家 工作型 手機 電/筆電 手機 電/筆電 手打筆記 重點標記 歸 就刪 手打筆記 重點標記 歸 就刪 分享 錄完就傳 住家 戶外 變動環境
  55. 55. INSIGHTS 不同錄音族群的設計建議 • 數據化或大量的資訊有被紀錄的迫切性 • 案傳輸便利性 • 儲存空間 • 跨裝置的延續性 • 快捷操作 • 與社群平台的連結程度 工作型 學習型 族群共通處 生活型
  56. 56. Mobile Navigation for Visually Impaired Smartphone User BlindNavi
  57. 57. sequencing
  58. 58. sequencing
  59. 59. service blueprint
  60. 60. 4 2 3 1 touch point
  61. 61. 輸入目的地 搜尋 台灣科技大學 一號島廚房 cafe libro Diary Bistro WHERE 搜尋 Vino C WHERE 搜尋 Vino Cafe 台南市中西區福州街128 號1樓 Vino Cafe 搜尋結果 台北市大安區師大路80巷 2號1樓 02 2362 1167
  62. 62. 搜尋結果搜尋 現在位置 起點 輸入目的地 終點 搜尋 WHEREVino C 終點 現在位置 起點 Vino Cafe 終點 搜尋 起點 台科大校 面對基隆路 斑馬線前有石 過馬路後請左 請左轉 左轉後於基隆 朝羅斯福路方 人行道上有樹 1 2 路線細
  63. 63.
  64. 64. 請左轉 確認號誌燈在九點鐘方向後 過馬路 過馬路後朝二點鐘方向找尋 下一個號誌燈 右手邊為車輛 出入口請注意 請繼續直行30公尺 請確認號誌燈在 九點鐘方向後 過馬路 過馬路後上人行道左轉進入 校園 小心人行道與斑馬線之落差 抵達目的地 2 3 4 路線細節
  65. 65. 辦公室到 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
  66. 66. 4 2 3 1 輸入目的地 搜尋 台灣科技大學 一號島廚房 cafe libro Diary Bistro 搜尋 WHEREVino C 終點 現在位置 台北市大安區 師大路80巷 2號1樓 羅斯福路四段 台大正門 新生南路三段 台大校園 辛亥路二段 民權國小 基隆路四段 起點 台科大校門口 面對基隆路 請過馬路 斑馬線前有石柱可追跡 過馬路後請左轉 增加註記 請左轉 左轉後於基隆路四段直行 朝羅斯福路方向前進 人行道上有樹枝垂葉請小心 1 2 歷程細節
  67. 67. Books Books NO. 54 56 COFFEE SHOP 2 3 1
  68. 68. +
  69. 69. evidencing
  70. 70. ? VISUALLY IMPAIREDS on the TRAIN
  71. 71. ! +BEACON BEACON on the TRAIN
  72. 72. Books Books NO. 54 56 COFFEE SHOP DAY TIME STREETS
  73. 73. Books Books NO. 54 56 COFFEE SHOP NIGHT TIME STREETS
  74. 74. Books Books NO. 54 56 COFFEE SHOP STREETS for VISUALLY IMPAIREDS
  75. 75. Books Books NO. 54 56 COFFEE SHOP +BEACON STREETS with BEACON
  76. 76. WWW.DITLDESIGN.COM

×