Tseng Tzu Yu 2017-2016 UX Portfolio

User Experience / Product Design 2017-2016 Portfolio

1994/08/11 User Experience / Product Designer 2017-2016 Portfolio

2

'' Realize the continuous and holistic improvement to reach perfection.''

Education National Taiwan University of Science and Technology Institute of Design (First year) National Yunlin University of Science and Technology Bachelor of Industrial Design

Experience Design Information & Thinking Lab, NTUST (2016-present) China NetDragon Websoft Inc. Industrial Designer Intern (July-Aug.2015) ADA International Student Design Workshop (2014)

Award 2017 INDEX Award National Runner Up 2017 Cross-field Caring for The Environment Design Competition Silver Award 2016 UXD Award Bronze Medal 2016 James Dyson Award National Runner Up 2016 Young Pin Design Award Winner 2016 LEXUS Design Award Selected for Finalist 2016 Reddot Award Design Concept Selected for Finalist

Personality I am enthusiastic about exploring the insight and brainstroming with team members.Keeping fresh in everything gives me a push in my life. I believe that holistic experience thinking is the essential way to innovation.

4

About me

Optimistic

Ambitious

Lively

Keep Enthusiastic in Life

5

RESEARCH Contextual Inquiry

Contextual Analysis

Interview Feild Observation Literature Review Competitor Analysis

Work Activity Affinity Diagram Persona Storyboarding Scenario Walkthrough

DESIGN Industrial Design

Interaction Design

Idea Sketching

Design Framework

Prototyping mockup

Functional Map

3D Modeling

Prototyping

TESTING Usability Testing

Questionnarie Survey

Multiple Devices

SUS ASQ QUIS NPS

Scenario Task-testing Heuristics Evaluation

6

Requirement Analysis Brainstorming Insight Exploration Design Goal

Service Design

Software

Customer Journey Map

illustrator

Sketchbook Pro

Service Blue Print

Photoshop

DSS CATIA V5

Stakeholder Analysis

Indesign

Keyshot

Sketch

OTHERS Business Strategy

Teamwork

Value Proposition Canvas Business Model Canvas

Agile Development Workshop

7

CONTENT

User Experience / Product Design 2017-2016 Portfolio

8

Industrial / Product Design 2015-2012 Portfolio

MAPPIN

Innovation Service Plaform for Travel

OPTIWATCH

Wearable Device & App for the Visually Impaired User

VR-Project

User Experience Innovation Process in Virtual Reality

USABILITY TESTING

UX Research and Testing for Brand EC / Startup

OYSFLOATER

Oyster Breeding Raft Concept Design

NETDRAGON Internship Smart Education Pad Design

9

MAPPIN

Innovation Service Plaform for Travel Mappin 結合旅遊「資訊彙整」及「行程規劃」類似競品的特色及價值主張： 廣泛瀏覽並 彙整資訊、操作簡便迅速、推薦景點、以地圖作為資訊呈現方式。並用這些特色補足兩大 類產品各自的體驗缺口，並且從中做出市場區隔。

Bronze Medal

WHAT I DID

Contextual Inquiry & Analysis Requirement Analysis Interaction Design Framework

10

Co-design with Lin Pei-Ying, Chen Hung-Ling, Chang Jia-Hao Collaboration with Programers Hsiu Min-Chieh, Su Shang-Yu

Link to watch the Mappin vedio :

11

PROJECT FRAME 我參與本專案前期研究的質性訪談、需求分析與部分交互框架的設計執行，同時反覆迭代於測試階段亦 透過目標用戶的訪談，藉著讓受訪者操作原型，來驗證前期研究的假設、繼續挖掘新的機會點。

RESEARCH

iteration

DESIGN

iteration

TESTING

RESEARCH Contextual Inquiry / Analysis Interview

前後共進行了 24 場訪談，針對曾經有自由行、規劃自助旅遊的目標族群進行質性訪談

Work Activity Affinity Diagram

將訪談結果製作成工作活動筆記並進一步作工作筆記親合圖歸類分析，進行流程化思考，梳理出情 境、驗證假設、挖掘出 insight

Event Flow

根據使用者在規劃自由行前中後的情境脈絡，整理歸納出旅遊前中後情境的 Event Flow 去不段挖掘 使用者的行為、痛點、機會點

Requirement Inquiry Insights

資訊來源管道複雜

旅遊資訊彙整不易

共同討論行程困難

旅遊途中變動性大

旅人的資訊取得管道十分多 元，從網路、親友，到實體 的旅遊書都有。

與旅伴討論行程時，常會因 對於彼此景點的認知落差， 以及地理位置的不熟悉而產 生障礙。

12

因為資訊管道來源相當龐 雜，如何尋找、匯整、並在 旅遊當下使用資訊，變成旅 人極大的挑戰。 旅行中的變動極大，需要有 多個備案，並習慣將之前查 好的資料存進手機中，以應 付突發狀況。

期待個性當地行程 旅人大多習慣及希望能安排 專屬於自己的行程，並且盡 可能的希望能獲取當地資 訊。

Conversion

跨裝置的旅遊體驗 迅速收藏景點資訊 輕鬆回顧收藏內容 規劃行程直覺操作

Design Feature

直覺收藏 輕鬆回顧 愉快分享

13

DESIGN FEATURES WEB/Plug-in

MAPPIN 網頁版的體驗主要聚焦在 旅遊前期 準備的過程中，透過瀏覽器插件與文字、圖片的選取工具，建 立流暢的旅遊資訊瀏覽搜集體驗。 旅遊前

瀏 覽

旅遊中

蒐 集

規 劃

分 享

MAPPIN 瀏覽器插件

掌 握

安裝 MAPPIN 瀏覽器插件，讓用戶在任何網頁都可使用 MAPPIN 的功能 並且點擊後進入 MAPPIN 網站

文字選取工具

把文字框選起來時，就會出現 MAPPIN 文字選取工具

圖片選取工具

當滑鼠箭頭移到圖片上時，就會出現 MAPPIN 圖片選取工具

14

應 變

瀏覽

蒐集

創建地標 - 選擇地標

點擊 或 將跳出小視窗，讓用戶 快速瞭解所選地標的位 置，並可選擇創建地標 或選擇加入地標中，蒐 集多樣化的信息

瀏覽

我的地圖

蒐集

從「我的地圖」可查看 用戶所蒐集的旅遊資 訊，以地圖為主要呈現 方式讓用戶可快速瞭解 每個景點的位置與關係

規劃

我的旅程

分享

用 戶 可 透 過「 我 的 旅 程」進行旅程規劃，以 地圖為主要的呈現方 式，幫助用戶快速釐清 景點間的關係與位置， 讓平時蒐集來的旅遊信 息發揮最大效用

15

DESIGN FEATURES Mobile/APP/Plug-in

MAPPIN 手機版的體驗則著重在 旅遊途中 的掌握及隨機應變，但考量到用戶日益強烈的移動瀏覽需求，因 此在移動端也有開發瀏覽插件。 旅遊前

瀏 覽

旅遊中

蒐 集

規 劃

分 享

掌 握

應 變

瀏覽

蒐集

MAPPIN 手機插件

安 裝 MAPPIN 手 機 版 後，用戶瀏覽網頁時可 使用插件功能。點擊後 進入 APP 儲存網頁資料

瀏覽

蒐集

創建資料 - 創建新地標

點擊創建資料後可以文 字或圖片方式建立地標 資料，輸入地標位置後 能快速建立新的地標資 訊，亦可編輯現有地標 加以附註旅遊資訊

16

瀏覽

蒐集

以圖片創建新資料

以網頁截圖或書本資料 等圖片創建，快速框選 想辨識的文字內容，經 由程式辨識成文字檔之 後並儲存到地標裡

瀏覽

蒐集

我的地圖

MAPPIN 手 機 版 首 頁 從 「我的地圖」可查看用 戶所蒐集的旅遊信息， 以地圖方式呈現讓用戶 能快速瞭解每個景點的 位置與關係

規劃

分享

我的旅程分享共編

可透過「我的旅程」進 行旅程規劃，以地圖為 主要呈現，釐清景點間 的關係與位置，且能與 好友共同編輯旅遊資 訊，旅途中可開啟路線 提醒，幫助用戶掌握旅 途中的行程

17

OPTIWATCH

Wearable Device and App for the Visually Impaired User 本計劃案為臺灣科技大學電子工程團隊與設計團隊合作，利用設計團隊以往在視障者極端用 戶的設計經驗，去優化工程團隊提出的既有裝置，進行新版裝置的產品設計與輔助 APP 設計， 並反覆進行使用者經驗測試，提出策略化的設計建議

WHAT I DID

Contextual Inquiry & Analysis Requirement Analysis Industrial Design Interaction Design UI Flow Design 18

Co-design with Yang Tsai Ni, Chen Hung-Ling Collaboration with NTUST Dep. Electronic Engineering Lee Meng Han

19

PROJECT FRAME 基於工程團隊現既有裝置之技術，專案前期進行產品之工業造型機構設計，中期整合輔助 APP 進行使用者 經驗測試，後期分析測試結果進行設計修正與使用者需求情境脈絡分析。

DESIGN

iteration

TESTING

iteration

RESEARCH

DESIGN FEATURES Wearable Device

思考如何利用工業設計與交互設計的框架，將使用者之行為與兩大功能：紅外線測距、顏色辨識，結合應 用到造型上。裝置搭配視障輔助 APP 語音報讀系統，回饋視障者偵測物品之顏色等功能細節。

搜尋手機鈕 / 返回鈕

中央面板部件咬花處理

紅外線測距啟動按鈕

紅外線測距發射區域 藍芽連線顯示

顏色辨識功能區域 矽膠錶帶

20

顏色辨識啟動鈕

21

TESTING Functional Map-Device

在測試前分別先梳理穿戴裝置、視障輔助 APP 的 Functional Map，確認每一個功能層級、操作流程

初始模式

測距模式

辨色模式

Functional Map-APP

22

Device Usability Testing

實際找視障朋友張小姐，針對第三版功能原型進行產品裝置功能上的易用性測試，接下來再規劃搭配 APP 軟 體做視障者情境上的實驗測試，去驗證工程端技術初始的功能應用假設。

23

RESEARCH Contextual Inquiry / Analysis

針對視障者實驗後的回饋進一步詢問在生活上辨識顏色與或尋找物品 之情境需求、原因脈絡，作為後續設計修正的依據。

Requirement Analysis Insights

生活穿搭購物配色

極端用戶特有行為

若比較正式的場合就需要其 他顏色，搭配需要找人幫忙

手勢方向呈現手背觸物品， 順應危險時的反射收回方向

用戶習慣選擇比較百搭的顏 色服飾 ( 如牛仔褲 )

經由測試訪談發現，視障朋 友在桌面上找尋物品

事先熟悉陌生環境

當用戶獨自到一個新陌生的 地方時會想先熟悉所在環 境、障礙物、空間安全感

Design Modification

將使用者敘述轉化為未來階段設計修正之元素，並重複迭代驗證

Conversion

Design Feature

Next Step

快速辨色

功能模組

回饋依照情境而變

在戶外環境下鳴聲回饋或震 動回饋用戶皆可以接受，但 在室內希望是震動的回饋， 以防逼逼聲太頻繁太吵雜

隨意變化功能形式

用戶解下穿戴裝置直接手 拿 著， 把 距 離 偵 測 的 功 能 當作『手持小探索器』大範 圍得偵測附近環境之障礙物

24

省心安全 近物測距

多感回饋

25

VR-Project User Experience Innovation Process in Virtual Reality 本計劃案是與臺灣大學、交通大學與 DITL 共同合作，整合資訊工程團隊的技術力與 設計團隊的創新力，試圖提出一加強體感與視覺體驗之混合實境技術與設計，不只優 化視覺體驗，更搭配觸覺、壓覺和溫覺等體感刺激，提升整個場域體驗的豐富度與互 動性，亦期望創建一套虛擬實境之使用者經驗設計、測試流程。

WHAT I DID Feild Observation Literature Review Storyboarding Customer Journey Map

26

Co-design with Tsai Xsin Chi, Yang Yi Sin Collaboration with NTU, NCTU Department Information Engineering

27

PROJECT FRAME

本專案正為在情境發想階段中，思考如何將體感技術與視覺技術，利用硬體力回饋組套件或是空間混合 實境場域的空間規劃，讓使用者的遊戲沉浸感更高。

RESEARCH

iteration

DESIGN

iteration

TESTING

DESIGN 除了發想多感官之技術情境應用外，也透過實際體驗、場域觀察後，發現使用者在體驗前中後的某些行 為機會點，去設想如何讓 VR 體驗者與旁觀者也有互動之情境。

Customer Journey Map

以三創 VIVELAND 虛擬實境體驗園區作為場域，進行 VR 體驗的實地觀察，根據第一次體驗後的結果， 進行流程上前中後的問題整理，從行為、動機、痛點、機會點、找出服務缺口，與延伸其他情境上互動 的機會點。

Storyboarding

情境發想方向轉變為『探索人類未知的領域』( 右圖以太空為例 )：

星球拓荒遊戲 Discover V-Planet

主要特色是透過實體介面壓覺與力回饋互動工具組結合到虛擬實境遊 戲中，強化現有遊戲之體感回饋，並延伸發想遊戲時的互動情境。

讓旁觀者穿戴上含有感應器之套件，在遊戲畫面上可以同步裝扮成外 星人，感應器且與旁觀者的動作同步，此情境轉化自旁觀者喜歡嚇體 驗者的行為，讓 VR 遊戲體驗玩家和旁觀者同時能有互動，減少等待 的空閒無聊感。( 如右頁下圖 )

28

USER DEVICE

TECHNOLGY

SCENARIO

29

USABILITY TESTING UX Research and Testing for Brand EC / Startup 本專案為設計資訊與思考研究室 (DITL) 分別與國內知名電腦公司、購物網站、新創教育 平台進行網站、跨裝置行動版的易用性測試，並透過團隊進行質量化測試與用戶體驗分 析，找出現有網站在跨裝置上如介面、流程、互動 ... 等用戶體驗缺失，幫助企業提升其 網站之易用性與線上服務之體驗。

WHAT I DID Heuristics Evaluation Usability Testing Questionnarie Survey

30

Co-work with Design Information & Thinking Lab

31

TESTING FRAME 本專案我參與到易用性測試前的實驗規劃、執行實驗到結果分析，前期規劃部分為研究室團隊共同討論 網站歷程研究，選定關鍵歷程，進而研擬出易用性測試的實驗任務，最終進行後期的質量化的檢核分析。

PLANING

iteration

實驗前規劃準備

TESTING 用戶易用性測試

關鍵歷程擬定

前測 / 正式測驗

實驗任務設定

任務式情境實驗

實驗場域準備

主持人 / 紀錄室

iteration

ANALYISIS 實驗結果分析

測後摘要結論

實驗質量化分析 量化問卷分析

RESEARCH Heuristics Evaluation

以 Jakob Nielsen. (1994). Usability Engineering 之 10 Usability Heuristics for User Interface Design 作為問題檢核基礎，根據現有企業網站與 APP 進行啟發式評估，進行第一次用戶體驗檢核量表，進行數 次會議共同討論。

Problem Define Discussion

並 以 問 題 分 類 定 義 出 網 頁 或 軟 體 介 面 中 的 問 題 (IA-Content / IA / Layout / UI / Flow / interaction/ Offline)，在易用性實驗結果後亦以此問題定義進行分類，並附上螢幕紀錄之截圖，分析實驗結果。 問題類型定義 問題嚴重程度分級 問題主要簡述

螢幕截圖紀錄

問題細節描述 受測者引言

32

33

WHAT I DID

Contextual Inquiry & Analysis Requirement Analysis Idea Sketching 34

Prototyping mockup 3D Modeling

Co-design with Chang Chin Hsu, Lee Chuan En Link to watch more content :

35

NETDRAGON Internship Smart Education Pad Design Industrial Designer Intern (July-Aug.2015)

China NetDragon Websoft Inc. Internship / UCD Workshop 36

Link to watch more about internship content : 37

THANK YOU

User Experience / Product Design 2017-2016 Portfolio

38

Industrial / Product Design 2015-2012 Portfolio

39

User Experience / Product Design 2017-2016 Portfolio