Page 1

何 宇欣 User Experience Design 2013-2018


006

012

Introduction Autobiography

Linked Bicycle

About

Contents

Internet of Things SWD

040

Application Design LoveKeeper Easyo

068

Service Design eaTKD


Industrial Design User Experience Design User Interface Design Service Design User Experience Testing Market Testing


Hello, Tencent!


I'M HE, YU-XIN.

June.21 1995 ¦ Taichung, Taiwan


何 宇欣

He, Yu-Xin

EDUCATION

Phone / +886. 975826765 E-mail / m84062133@gmail.com WeChat / yuxin840621

2017.09 - present

2013.09 - 2017.06

SKILL

國立臺灣科技大學 設計研究所 - 工設組 國立臺灣科技大學 創意設計學士班 - 工業設計組

Photoshop / Illustrater / Indesign / Premiere / Microsoft Office Sketch / Keynote / Autocad / Pro Engineer / Rhino / Keyshot

7


EXPERIENCE 2018

uP!ck x uTaipei iOS App 第二屆跨專業合作課程 - 課程助理

2017

uP!ck x uTaipei iOS App 第一屆跨專業合作課程 - 參與 uP!ck x KKTV 設計分享聚 - 活動籌備 36th 新一代設計展 YODEX - 臺灣科大設計系畢業展出

2016

NTUST x Fablab Taipei Arduino Workshop - 參與 台灣科技大學設計週《異胎化》 - 參展 Inspire 意念圖誌 6 月號 校園新星設計師 - 專訪刊登 神達電腦集團 Comismart 設計案 - 產品動畫設計 潘諾理得有限公司 VR 手機鏡頭夾設計案 - 量產產品設計 DIA 中國設計智造大獎 51 Entries - 作品產業轉化

2015

台灣科技大學設計週《忐忑子女》 - 展場組 UWOOD 優渥實木產學合作案 - 原木產品設計 TTRI 紡織綜合所《Smart Textile Workshop》- 參與

2014

台灣科技大學設計週《終端極體》 - 參展 台灣科技大學工商業設計系 - 工廠管理 第三屆創意設計營《歿日遊戲》 - 器材兼影音組長

8


AWARDS 2018

2018 奇想設計大賽 - 美化人生組 金賞獎 算術天平

2017

第二屆遠傳物聯網應用開發大賽 - 優等獎 Linked Bicycle 第一屆遠傳物聯網應用開發大賽 - 亞軍 SWD IF Design Talent Award 2017_01 - Finalist Linked Bicycle

2016

第三屆人因工程設計競賽 - 金獎 Shark & Whale IF Student Design Award 2016 - Top 300 Hello Buttons IF Student Design Award 2016 - Top 300 Fruit Soap 第十三屆育秀盃創意獎 工業設計組 - 佳作 WeHelp Red Dot Award Design Concept 2016 - Finalist WeHelp Red Dot Award Design Concept 2016 - Finalist Smart Paper Weight

9


Autobiography 求學經過︐「主動不斷地翻新自我︒」 我目前就讀於臺灣科技大學設計所︐大學在學期間︐用心鑽研本科系的必修課程︐包含產品設計︑設計方法等 課程︐榮獲書卷獎外︐也積極的參與國內外設計競賽和接案實務經驗︐豐富的經歷讓我對產品設計有了充分瞭解︔除 此之外︐由於本身對用戶體驗設計知識充滿高度興趣︐因此研究所選修了產品設計創新︑使用者導向創新設計等課程︐ 並利用課餘參加 Upick 社團的講座與課程籌備︐不但對用戶體驗設計知識有充分瞭解︐也有把握在工作中應付自如︒

生活體驗︐「永遠保持對生活的熱情︒」 我是充滿十足好奇心的人︐對於任何感到一點興趣的事物都樂於去實際體驗和感受︐更因此我也是個熱愛旅遊 的人︐尤其特愛自助旅遊︐去深入體驗未知的事物︐認識旅途中周遭新的人事物︐從中更學到了資料蒐集︑時程規劃 與危機處理等能力︐而且我也堅信好的設計源自於對生活的體驗︐人生不能太單純︐應該是要充滿意外才能讓腦子激 盪出新想法︐所以我依舊會持續地挑戰不同經歷︐並接受一切隨之的改變︐成為自己人生的養分︒

10


團隊經驗︐「培養傾聽與溝通的能力︒」 在校期間︐我選擇課業之餘︐把握機會去和不同科系背景的同學一起合作專案︐從概念發想︑使用者研究︑ 產品設計︑系統架設︑行銷影片與商業模式等各方面的合作︐將設計構想實際的執行出來︐從中學到溝通︑協調和執 行的能力︐對於自己與人溝通及組織管理的能力深具信心︐也深知組織中團隊合作的重要性︒同時因執行專案而學會 專案規劃及簡報能力︐對於未來工作所需要的簡報技巧及專案管理具有一定的自信及把握︒

動機意願︐「突破自我︐發揮影響力︒」 我是一個熱於接受挑戰的人︐大學四年與研究所期間︐學會設計工具︑設計思考和原型開發測試︐同時透過 社團︑接案和競賽︐訓練並培養自己解決問題︑團隊合作和溝通協調等能力︒在用戶體驗興起的互聯網時代︐我對於 交互設計一職感到非常有興趣︐希望騰訊能給予實習的機會︐未來我希望在用戶體驗設計領域能有進一步的學習和發 展︒

11


Internet of Things


Linked Bicycle Linked Bicycle 為即時自行車溝通系統 , 通過串連起車隊中每名隊員的騎行資訊 , 一旦有路線變 動︑隊員脫隊︑人員事故等狀況發生︐系統會分析數據做出判斷︐再透過合適且直覺的方式將訊 息傳遞給用戶︒讓用戶減少不必要的訊息干擾︐增加騎乘時的體驗︐使騎行旅程更順暢︑安全︒

Award / IF Design Talent Award 2017_01 - Finalist Award / 第二屆遠傳物聯網應用開發大賽 - 優等獎 Category / Internet of Things Date / 2017-12 Co-worker / 何宇欣︑孔博雯︑朱千慧︑秦暐峻︑王韋庭︑楊東昇︑蔡維軒︑楊博洋 Personal Contribution / Brainstorming, User Interview, Requirement Analysis, Product Research, Personal Contribution / Wireframe, UI Design, Prototyping, Mockup, Product Vedio

分析研究 Research

設計提案 Design

可行性模擬 Prototyping

使用者調查訪談

使用者需求定義

雲端資料庫建立

人物誌設計

使用情境定義

應用軟件模擬

用戶旅程地圖

技術規格分析

網站模擬測試

相關技術研究

應用軟件設計

技術可行性模擬

產品影片設計


Issue

Interview

Persona

專業車友 專業車友 X 5

休閒車友 X 5

騎行單車能享受速度的快感︐欣賞周遭的人事物︐

針對參與團體騎行的目標使用者進行質性訪談︐透過了解用戶最

我很享受騎行單車帶來的速度快感及過

也能帶來無汙染的交通便利性︐因此越來越多人

近一次騎單車的過程和經歷︐了解用戶騎車的動機︑騎乘中遭遇

程中去欣賞周遭的人事物︒

開始騎自行車代步或出行︒但在騎行過程中隊員

的困難︐並分別收集團體騎乘裡前︑中︑後所遭遇的問題和不便︐

間訊息溝通的問題其實沒有受到很好的關注︐目

以及記錄騎車的流程︐從中了解可能可以改進的機會點︒

年齡︓ 32

前仍存在著許多不便與危險︐因此如何改善騎乘 時的訊息溝通為此計畫的動機︒

16

Insight 1

多數車友反應在團體騎乘中經常發生溝通上

Insight 2

騎行不熟悉的路線時︐經常會需要反覆停車

Insight 3

騎行途中需要注意路況︐而導致經常漏掉手

的困難︐造成有人跟丟或車況未知等情況︒

確認路線方向︐造成騎行的不順暢︒

機的來電或重要通知訊息︒

騎行頻率︓每週 3 4 次 騎行經歷︓五年以上 挫折 : 「拿手機查看路線造成騎行不便」 「無法得知後方同伴的騎行狀況」

「騎行中容易錯失手機的重要訊息」


Customer Journey Map

出發前

休閒車友

同伴脫隊

同伴迷路

發生事故

規劃行程 騎行過程

我喜歡和 家人或朋友一起騎車出遊︐增

進彼此的感情︐創造更多的回憶︒ 年齡︓ 26

停下車查看路線

不知道同伴狀況

錯失同伴的訊息

到達後

騎行頻率︓每週 1 次 騎行經歷︓一年內

分享紀錄

挫折 : 「擔心體力不足而脫隊落後」 「對於路線不熟悉而容易迷路」 「同伴間的訊息溝通很不方便」

Touch Point 1

停車使用手機查看路線︐感到很麻煩且有危險性︒

Touch Point 2

不了解其他同伴的騎行狀況而感到擔心︒

Touch Point 3

注意路況或周圍吵雜而錯過手機來電或重要訊息︒

17


Conclusion

Design Feature

Pain Point 1

Need 1

對於路線不熟悉而容易迷路︐若

清楚︑直覺的得知騎行路線︒

路線提示

拿手機查看路線則造成騎行不便︒

Pain Point 2

Need 2

在騎乘時受到過多訊息干擾︐專

避免騎乘時過多的訊息干擾︒

訊息分類

Functions of Product

注力受到干擾︐降低對周圍的敏 感度和安全性︒

Pain Point 3

Need 3

無法得知後方同伴的騎行狀況︐

關注每位隊員的騎乘狀況︒

Before

雲端分析

覺得同伴間的訊息溝通很不方便︒

Pain Point 4

Need 4

騎行中容易錯失手機的重要訊息

直覺︑簡單的得知重要訊息︒

或需要反覆停下車查看手機︒

18

呈現通知

Linked Bicycle 通過單車作為溝通的主 個內部的網絡︒最終設計出智慧車手把︐

的功能︒而在旅程中︐為了不打破騎行的

訊息內容︐同時另有搭配手機應用程式來


Notification Mode

隊伍路線導航 隊伍成員可通過裝置的綠燈方向和聲音來掌握 正確的即時路線方向︒

After 距離實時監控 當隊員發生脫隊時︐前方隊員的裝置會閃橘燈和聲響來 提醒減速並傳送信息至 App 供用戶檢視脫隊狀況︒

主體︐串連起每個隊員的騎行狀況︐把團隊中的人們聯結成一

︐內部安裝物聯網技術部件︐使車把具有感測︑分析︑和傳輸

的順暢感︐部分信息由車把呈現︐以及為了讓用戶得知詳細的

來做訊息的補充︐以期望用戶在合適的時候停車檢視︒

隊員事故通知 當隊員發生事故時︐裝置會通過閃紅燈和聲響來警示所 有隊員並傳送信息至 App 供用戶檢視事故狀況︒


Technology Architecture

Vibration Motor Respery Pi

UI Flow

MPU6050

LED

Request

Reply

Condition

Data Fusion

Bike ID, Sensors Data Direction, Notification

Linked Bicycle 智慧車把︐通過內裝 LED 燈︑ Raspberry PI3( 處理器 ) ︑震動馬達以及 MPU-6050 六軸感測器組成︐ 透過六軸感測器來分析騎行狀況︐若有事件發生︐會將訊號透過藍芽與手機溝通︐再將用戶位置及騎行狀況經由手機上傳 Thingworx 平台︐並將經緯度傳至 Google Maps API 進行資料分析來規劃路線︒最終回傳控制指令至車把處理器︐經由分 析指令內容後︐控制馬達及 LED 做相應動作︐讓重要資訊呈現於車把上通知使用者︒

20

A-0 騎行


A-3-0 隊員脫隊狀況

建議調整車速提示

A-3-1 隊員事故狀況

變更路線前往事故點

查看隊員騎乘狀況

輸入目的地

開始規劃路線

查看連線狀態

B-0 藍芽連線設定

查看隊伍成員

C-0 隊伍成員清單

A-1 隊伍騎乘路線

搜尋藍芽裝置

A-2-0 提示隊伍騎行方向

抵達目的地

A-2-1 通知請回報脫隊狀況

輸入後回報脫隊狀況

A-2-2 通知請回報事故狀況

輸入後回報事故狀況

藍芽裝置已連接 藍芽裝置未連接

行首頁

C-1-0 新增隊伍成員

C-1-2 隊伍邀請通知

查看更多項目

D-0 個人帳戶頁面

D-1 個人化設定

輸入帳戶名稱

接受

送出隊伍邀請

C-2 新隊伍成員清單

拒絕

調整通知燈號 調整通知音量

21


Wireframe Linked Bicycle 的介面設計著重在隊伍騎行時的狀況通知及路線應變︐所以將介面功能 盡量簡化︐讓使用者能輕鬆︑快速的找到所需的功能頁面︒另外也運用不同色塊來表示不 同的隊伍狀況︐例如黃色為脫隊通知︐紅色為事故通知等等︐來達到更有效的車況區分︒

A-0 騎行首

D-0 個人帳戶頁面

22

D-1 個人化設定

A-1 隊伍騎乘

B-0 藍芽連線設定

A-2-1 通知請回報脫隊狀況

A-2-2 通知請回報事故狀況

A-2-0 提示隊伍


首頁

乘路線

伍騎行方向

C-0 隊伍成員清單

A-3-0 隊員脫隊狀況

A-3-1 隊員事故狀況

C-1-0 新增隊伍成員

C-1-2 隊伍邀請通知

C-2 新隊伍成員清單

23


Scenario

1. 手機與智慧車把進行配對

3. 與同伴一同進行群組連結

2. 輸入目的地後創建騎乘

4. 開始騎行後提供路線方向提示

5. 後方成 的車把與


成員脫隊時︐前方同伴

與 App 將通知減速

Name / Linked Bicycle vedio Size / 1920x1080 Footage / 00:02:49

6. 有同伴發生事故時︐團隊成員 的車把與 App 將通知警示

7. 體驗安全︑順暢的騎乘感受

Date / 2017.01

41


Prototype Prototype

26 39


本系統使用手機 App 與 Thingworx 互聯︐ Thingworx 可以傳送 json 格式的資料並利用 HTTP 的 Requests ︐手機獲得資料後解碼在進行使用︒手機主要所傳遞的資料例如 GPS 位置︑倒車警告︑ 連線狀態等訊息︒手機上的圖形化界面則是另外使用 android studio 等開發軟體進行設計︒

Thingworx 平台在收到手機所發出欲到達目的地後︐會向 Google Maps 要求導航規劃資訊︐而 Google Maps 有提供 Directions 的專屬 API ︐因此 Google Maps 會回傳多組路線規劃︐讓使用 者自行選取後︐在騎行的過程中會在使用者轉彎前發出聲響及燈號︐提示使用者騎乘方向︒

Name / Linked Bicycle Demo Size / 1920x1080 Footage / 00:02:21 Date / 2017.12

27


SWD 常規飲水機是固定的運作模式︐這會耗用更多的電力且對環境並不友善︒由於用戶行為通常會隨 時間不斷改變︐若採用自訂計時器仍無法保證可以解決問題︒ SWD 是一個創新的飲水機服務︐ 通過建立一套整合性系統來自動偵測飲水機運作狀態︐提供更有效的維護並透過收集飲水機數據 來分析用戶行為︐調整飲水機運作流程︐進而達到省電節能的功效並改善用水狀況︒

Award / 第一屆遠傳物聯網應用開發大賽 - 亞軍 Category / Internet of Things Date / 2017-01 Co-worker / 何宇欣︑邱冠期︑蔡維軒︑吳旭康︑李金輝 Personal Contribution / User Interview, Requirement Analysis, Wireframe, UI Design, Prototyping, Personal Contribution / Business Model

分析研究 Research

設計提案 Design

可行性模擬 Prototyping

使用者觀察

使用者需求定義

資料與數據收集

人物誌設計

使用情境定義

網站模擬測試

用戶旅程地圖

通訊技術分析

技術可行性模擬

相關技術研究

硬體規格分析

統計分析與評估

網站介面設計


Background & Motive

Hot water : 1100 Watt

Warm water : 750 Watt

Persona

Customer Journey Map

Cold water : 245 Watt

飲水歷程 飲水機用戶

早餐

飲水機運作

5.99 kWh each day 一般家庭電器用電排名中︐飲水機排名第二僅次於電冰箱︐而飲水機

「飲水機運作模式固定︐導致電力浪費」

在任何時間提供熱︑溫和冷水︐機器會隨著時間不斷地進行加熱和冷

「無法了解飲水機用水狀況來做出調整」

卻︐ 這固定的運作模式會耗用更多不必要的電力︒

30

「飲水機故障時要主動聯絡廠商安排維修」

固定運作模式 造成電力浪費

加熱 冷卻


p

Pain Point

Pain Point 1

多人同時用水 時常造成缺水

上班

運動

加熱

加熱

冷卻

冷卻

睡前

廠商無法 得知故障狀況

Pain Point 2 Pain Point 3

飲水機無時無刻都在運轉︐會 耗費不

必要的電力 ︐導致用電花費高︒

飲水機的儲水 系統不夠人性化 ︐ 經常於裝水時發生缺水問題︒

飲水機故障時︐ 需要自己主動聯

繫維修商 ︐排定維修時間︒

31


Design Feature

System

根據 User pain point︐導入物聯網技術的核心︐提出產品的四大功能︒

User Behavior Analytics

Predictive Maintenance

SWD 系統將會學習用戶的習慣︐根據用戶行為提供偏好模 式︐並可以預測有效的運作方式︒(例如什麼時候用戶醒來

SWD 通過智慧感測器︐提供預警通知系統︐讓用戶可以在 出現異常情況(如功耗過高︑水位異常 ... 等)時收到通知︐

喝水︑用戶習慣喝茶的時間或運動中心內的飲水機傾向提供

且系統可以根據當前狀況和歷史資料來判定機器是否需要維

更多的冷水等)

護︐這也讓廠商對顧客的飲水機能進行預測性檢修︒

Gate

Dispenser 1

Sensor 1

Predictive Analytics

Sensor 2

Inter-Machine Communication 通訊技術架構

SWD 系統會收集過往數據並進行分析︐來控制未來飲水機 加熱與冷卻的排程時間︒ 不僅如此︐系統也會考慮不同時間

當每台飲水機連接到同一伺服器時︐就可以在一定的範圍內

的差異在每季調整熱和冷水的儲水量與睡眠時間的排程︒

來節約能源並同時滿足用戶的需求︒

32

實現機間通信︒透過即時數據的共享︐讓飲水機間相互協作︐

在後端︐每台飲水機會安裝感

而群組中的多台飲水機則是根

後傳送到 Thingworx 平台進


eway 1

Water flow Sensor

Cloud

Gateway 2

Dispenser 2

Dispenser 3

Sensor n

Water level Sensor

Gateway n

… Sensor 1

Temperature Sensor

Dispenser n

Sensor 2

Sensor n

Water quality Sensor

Smart plug 硬體零組件

感測器︐這些感測器所收集的實際數據會利用 LoRa 來把資料傳輸到網關︒

每台飲水機有 3 個水箱︐分別為熱︑溫和冷水箱︒所有溫度感測器都會放在相應的水箱內︐

根據位置︐將其歸入於同個網關下︒ 最後網關會將資料傳遞至雲端運算並隨

水位感測器︑水流感測器與水質感測器也會安裝於內部︐以檢測水溫︑水位︑水流與水質︐

進行分析以及顯示結果於 Web 中︒

並同時控制進入水箱的水流︒此外︐系統通過遠端控制智慧插座來有效執行排程︒

33


UI Flow

A-0 廠商首頁

B-0 系統首頁

Wireframe

查看客戶機台檢修資料

切換管理場域 選擇飲水機台 瀏覽保養紀錄

C-0 即時顯示

查看故障狀況

C-1 檢修管理

填寫檢修資料

選擇飲水機台 D-0 設備管理

E

新增網關 查看已連線機台

D

D-0 設備管理

選擇檢視日期 E-0 智慧管理

機台參數設定 瀏覽管理日誌 新增管理項目

F-0 報表分析

G-0 帳戶管理

34

選擇水量分析時間範圍 選擇用電分析時間範圍 查看系統訊息 瀏覽操作日誌

E-1 參數設定

返回智慧管理 切換 冰 / 溫 / 熱水模式 自訂參數

D

新增網關

E

查看已連線機台


B C

A

A-0 廠商首頁 A

B-0 系統首頁 B

查看客戶機台檢修資料

上下切換管理場域

C

下拉選擇飲水機台 J

G

K

I

L

F H

C-0 即時顯示 F

查看故障狀況

G

瀏覽保養紀錄

E-0 智慧管理 H

新增管理項目

I

選擇檢視日期

F-0 報表分析 J

瀏覽管理日誌

K

選擇水量分析時間範圍

Q

O

M

C-1 檢修管理 填寫維修資料

選擇用電分析時間範圍

P

N

M

L

E-1 參數設定 N

自訂參數

O

切換冰 / 溫 / 熱水狀態

G-0 帳戶管理 P

查看系統訊息

Q

瀏覽操作日誌

35


User Interface Design SWD 的 Web 系統是基於 Thingworx 平台來開發︐網頁版的體驗主要聚集在管理飲水機的系統 中︐藉由提供多個模塊︐包括監控︑警示和調度任務︐來建立智慧化的飲水機管理體驗︒在未來 的發展中︐考量到用戶日益強烈的移動瀏覽需求︐因此計畫移動端也將開發瀏覽插件︒

A-0 廠商首頁

36

B-0 用戶首頁


C-0 設備管理

D-0 即時顯示

E-1 參數設定

F-0 報表分析

37


38


Prototype Testing 實際將感測器安裝於校內飲水機︐並將數據收集後傳送至雲端︐系統在根據前兩週的用水數據透過 程式運算調整原本的運作機制︐經過測試後比較前兩週與調整後兩週的用電量數據︐統計結果用電 量從平均每日約 6 度電下降至每日約 3.8 度電︐整體達到了約 37% 的電力節省︒

Before

5992 Watt / day

Save 38% After

3754 Watt / day

NT$ 753 / month

Save NT$ 281 NT$ 472 / month

39


Application Design


遠距情侶 AR 互


互動 APP 及服務

LoveKeeper LoveKeeper 是針對遠距情侶所設計的專屬服務與 App ︐包含應用 ar 科技的三大功能︐並將其 整合於遠距專屬日中︐提供遠距情侶一同體驗獨特的服務︐最終讓彼此的距離也能變成溫度︐在 遠依然心繫彼此︒

Category / Application, AR Date / 2018-01 Co-worker / 何宇欣︑李知芸︑邱政凱︑陳子權︑ Pond ︑ Bliss Personal Contribution / Brainstorming, User Interview, Requirement Analysis, Interaction Design, Prototyping

探索需求 Discover

定義需求 Define

構思方案 Develop

解決方案 Deliver

資料收集

人物誌設計

腦力激盪

原型設計與開發

使用者調查訪談

用戶旅程地圖

故事板

應用軟件模擬

相關技術研究

HMW

商業模式

技術可行性模擬

用戶需求定義

設計構想

產品影片

技術規格分析


Background

1. 空間挖走的會用時間和心力來彌補

2. 許下承諾產生希望及安定

3. 遠距戀愛裡的束縛與自由 隨著社會變遷︐科技的發展︐人們的生活產

伴侶分離與在相聚的循環過程︐即因物理距離︐僅

生了變化︐人們不再侷限於某個地方發展︐

有少數幾天能相聚︐相聚過後又需再次分離一段時

而是離開自己的家鄉至異地求學︑工作︐然

間︐而目前在有戀愛經驗的大學生中有 25-40% 曾有遠距離戀愛︒

而︐科技發達卻也提高了遠距戀愛的可能性︒

44

4. 選擇性溝通


User interview

我們採用半結構式訪談的方式︐訪談了六位正在或曾經有過遠距離戀愛經驗的使用者︐ 再將訪談結果製作成工作活動筆記( Work Activity Notes )︐並進一步執行工作活動 親和圖表( Work Activity Affinity Diagram )將其歸類 分析︐進行流程化思考︐ 梳理出情境︑驗證假設︑挖掘出 insight ︒

Insight 1

訊息或語音會因為看不到表情或肢體而造成溝通困難︐視訊因為因為

Insight 2

遠距關係因為空間上的限制︐而讓雙方缺乏實體的物理感受︒

Insight 3

想要在兩人生活中留下痕跡︐並創造回憶︐而樂於紀錄兩人生活中的

必須要投入而導致時間浪費缺乏有效溝通及傳遞情緒的方式︒

點點滴滴︒

45


Persona

User Journey M

“好希望有男友就在身邊陪伴的感覺︕︕”

目標 : 1. 希望聊天過程中能知道對方想傳達的事情及情緒︒

Life Goal (Be)

4. 不想要遺漏任何兩人的回憶︒

End Goal (Do)

2. 希望能知道對方的狀態︒ 3. 想要在對方的生活中留下記號︒

維持情侶關係

保持聯繫 / 留存回憶 / 建立互動 23 歲 / 設計系學生 / 台北 - 高雄遠距 交往一年 /

46

挫折 : 1. 分開兩地時實在很難調適心情︐時常很寂寞︒ 2. 總覺得遠距情侶的互動缺乏了更直接的感受︒ (實體物理感)

Experience Goal (Feel) 安心 / 親近 / 陪伴


Map

根據使用者在交往過程前中後的情境脈絡︐整理歸納出交往日常前中後情境的使用者 旅程圖去不斷挖掘使用者的行為︑通點︑機會點︒

HMW 我們如何讓遠距戀人分開時維持溫度

Objective 1

增進陪伴感減少寂寞

Objective 2

有效溝通與傳達情緒

Objective 3

創造兩人生活的回憶

47


Brainstorming Idea

Story board

除了發想不同情境之技術應用外︐也透過故事版( Storyboard )︐發現使用者在體驗前中後的 某些行為機會點︐去設想如何讓遠距情侶彼此之間互動之情境︒

48

Business


s Model

Conclusion Function 1 「 AR 互動通話」︐ 增強陪伴感︒

Function 2 「 AR 互動遊戲」︐建立互動性︒

Function 3 「 AR 點點滴滴」︐創造兩人回憶︒

49


Information Architecture

Task Flow

「 AR 互動通話」︐ 增強陪伴感︒

50


「 AR 互動遊戲」︐建立互動性︒

「 AR 點點滴滴」︐創造兩人回憶︒

51


Scenario

AR互動通話 _就像你在我身邊

AR互動遊戲 _一起一起這裡

營造相同場景下︐增加對方的陪伴感

增進雙方遠距的同步

AR 互 動 通 話 營 造 在 相 同 環 境 下 的 感 受︐ 透 過語音辨識情緒關鍵字或傳送情緒貼圖來強

透過同步射擊愛心的

化 對 話 中 的 情 緒 表 現︐ AR 人 物 也 能 適 時 反

成關卡︐增進遠距情

映對方真實的情況︒

52

物理接觸的感受︐並


裡那裡

AR點點滴滴 _我們生活的痕跡

步互動

留下兩人足跡的回憶照片

的遊戲︐讓遠距情侶能擁有

並搭配語音辨識關鍵字來完

情侶的同步互動體驗︒

AR 及影像辨識技術讓遠距情侶能將訊息藏 在 物 品 中︐ 使 回 憶 跟 生 活 間 的 連 結 更 加 緊 密︒

Name / LoveKeeper Video Size / 1920x1080 Footage / 00:03:30 Date / 2018.01

53


Prototype

AR Emoticon

VoIP

Synchronous Movement & R

Coherence Relative Transfor both player

54


Rotation

rm for

3D ARGame

VoIP

Synchronous Movement

Speech recognition gameplay

Name / LoveKeeper Demo Size / 1920x1440 Footage / 00:03:10 Date / 2018.01

55


Easyo Easyo 是針對家教學生︑學生家長與家教老師所設計的家教服務平台︐透過加入個 性︑興趣的媒合因素︐使家教老師與學生間有共同嗜好︐來增加學習動機︐提升教 學效率︐讓家教與你亦師亦友︐並建立家教進度功能︐記錄每次家教的課程進度與 考試成績︐並視覺化教學成效︐讓進步回饋感具體化︒

Category / Application Date / 2017-09 Co-worker / 何宇欣︑石羽︑張芷菱︑劉良瑋︑劉子添 Personal Contribution / Brainstorming, User Interview, User Journey Map, Requirement Analysis, Interaction Design, Personal Contribution / UI Flow, Wireframe, Visual Mockup, Prototyping

探索需求 Discover

定義需求 Define

構思方案 Develop

解決方案 Deliver

資料收集

人物誌設計

腦力激盪

原型設計與開發

使用者調查訪談

用戶旅程地圖

故事板

應用軟件模擬

HMW

設計構想

用戶需求定義


Background

為了緩解經濟負擔或償還學貸︐許多大學生都會規劃工讀家教︐在 2017

年 1111 人力銀行的調查中顯示︐有 20.3% 學生有家教計畫︐因此如何 協助這些經驗不足的新鮮家教老師找到適合的職缺和提升家教品質︐為 此計畫的動機︒

58

User Interview


我們針對曾經有家教經驗或目前家教中的大學生進行質性訪談︐將訪談結果歸納分析 後︐整理出目前應徵家教和開始家教過程的 insight ︒

Insight 1

家教職缺選擇因素中︐時薪待遇和交通距離是考量重點︒

Insight 2

家教平台上的資訊雜亂︑模糊︐容易導致雙方有不適合的狀況發生︒

Insight 3

家教授課上的經驗都是透過朋友或同學的分享中獲得到而來︒

59


Persona

User journey map

王大明 / 20 歲 / 理工科 / 擅長數理科目 挫折︓缺乏教學經驗︐時常在應徵家教時遇到瓶頸︒ 挫折︓多數家教工作都是透過系上學長姐介紹︐缺乏其他有信賴的管道︒

60

目標︓希望即時得到家教職缺資訊︒

我們依照實際家教老師家教授課的流程製作了體驗旅程地圖︐同時根據得出的

目標︓想要找到值得信賴且適合的家教職缺︒

現在家教過程中的應徵媒合階段是最需要被改善的︒


HMW

我們可以如何透過校內家教的供給和需 求進行即時性的推播與合適的媒合︒

Pain Point 1

Objective 1

現有的家教資訊過於分散︐多半的職缺應

建立清楚的家教資訊︐平衡家長︑學生︑老師三方的需求︒

徵還是透過朋友和同學介紹︒

Pain Point 2

Objective 2

現有平台上的職缺︐家教學生資訊都不夠

讓學生和家長能夠具體地看到家教老師的教學成效︒

詳細︐導致資訊不對稱︐而降低家教成效︒

Pain Point 3

Objective 3

現有家教方式的資訊不夠透明︐學生家長

查詢方便且建置完善的家教職缺資訊︒

經常質疑家教老師的教學方式︒

的使用者體驗︐將痛點與機會點標示︐發

61


Brainstorming

62


Conclusion Function 1

Function 2

Function 3

主動即時地推薦職缺資訊︐讓合適的家教職缺從不溜

藉由加入個性︑興趣的媒合因素︐使家教老師與學生

記錄每次家教的課程進度與考試成績︐並視覺化教學

走︒

間有共同嗜好︐來增加學習動機︐提升教學效率︒

成效︐將進步回饋感具體化︒

即時推播

精準媒合

家教紀錄

63


點擊查看職缺詳情

UI FLOW

推薦職缺清單 滑動頁面切換不同科目

收藏這筆職缺 查看收藏職缺

查看以應徵職缺

應徵中對話紀錄清單 對話訊息記錄 家教中對話記錄清單

查看詳細課程內容 課程進度規劃 檢視單一學生課程規劃

個人家教資訊

編輯頭像

選擇照片

輸入個人姓名 選擇家教科目及年級 選擇期望待遇 選擇可家教地點 選擇家教時段 選擇個性特質 64

選擇個人興趣


職缺詳細資訊

送出應徵職缺

Wireframe 收藏職缺清單

已應徵職缺清單

雙方對話紀錄

雙方對話紀錄

傳送訊息 接受應徵成功 傳送訊息 查看課程進度

詳細課程內容

單一學生課程規劃

編輯課程內容

詳細課程內容

編輯課程內容

65


Visual Mockup

首頁 訊息

個人資訊

66

課程


2 03 PM 1 53 PM 1 54 PM

2 05 PM

3 22 PM

0 14

67


Service Design


70


eaTKD 台嗑大 eaTKD 是台科大校園餐廳的服務平台︐提供台科大學生最優良的餐廳服務︒三 大服務特點︓線上預約點餐不用等︑每日抽卡遊戲附贈優惠︑綁定學生證悠遊卡輕鬆 支付︒心動嗎︖還不快加入︕

Category / Service Design, Application Date / 2018-01 Co-worker / 何宇欣︑楊瑞欣︑趙虹涵 Personal Contribution / Brainstorming, User Interview, Questionnaire Survey, Requirement Analysis, Customer Journey Map, Participatory Design, Personal Contribution / Interaction Design, Service Blueprint, Business Model, Prototyping, Facebook Fan Page

洞悉需求 Exploration and Analysis

創新主張 Concept Transformation

設計產出 User Interface Design

市場測試 Market Testing

資料收集

創新設計構想

介面設計

臉書粉專經營

使用者調查訪談

價值主張

易用性測試

廣告投放測試

問卷調查

服務藍圖

功能結構圖 V2.0

統計分析與評估

人物誌設計

功能結構圖

應用軟件設計

用戶旅程地圖

商業模式

產品影片設計

用戶需求定義


Background

Interview

調查台科大學餐的店家經營類型︐收集分類後將其分為三種不同餐點服務類型︒

分別針對三種類型的店家︐從中各選出一間作為訪談對象︐透過訪談法了 解經營者所遇到的餐廳現況和經營困境︒

快餐 ( 可選菜 ) / 6 間 三餐滷味 雞同ㄚ講 日和 藝素佳 上品排骨 教餐燒臘

丼太郎老闆 工作經驗五年 點餐 / 叫貨 / 收銀

72

點餐 ( 固定配菜 ) / 13 間 豪享來 一餐早餐店 三餐早餐店 八方雲集 蔥抓餅 溫州大餛飩 四海遊龍 中式早餐 鐵板燒 一日三餐 丼太郎 甘味廚房 地中海 ( 現點現拿 )

自助餐 ( 自夾菜 ) / 3 間 一餐自助餐 三餐自助餐 教餐自助餐

教餐老闆 & 員工 工作經驗九年 點餐 / 收銀 / 排班 / 記帳

地中海老闆娘 工作經驗兩年 點餐 / 做餐 / 環境清潔

Insight 1

有系統的接單方式︐提升結帳效率︒

Insight 2

會想了解菜色或味道合不合學生口味︒

Insight 3

目前缺乏推銷餐點的廣告平台︒

Insight 4

若採用預約點餐︐會方便準備食材︒


Questionaire Survey 針對臺灣科技大學的學生進行線上問卷發放︒ 發放時間 2017/10/21-2017/10/24︐共收集 70 份有效問卷︒

Insight 1

餐點不好吃︑吃膩了︑等候時間長為主要導致意願降低的原因︒

Insight 2

發現受測者主要優先考慮餐點風味︐其次在意點餐的等候時間及餐點的價位︒

Insight 3

發現有將近三成學生對等候時間過長感到不悅︒

Insight 4

近九成學生有意願購買優惠餐點︔且偏好免費及贈送的優惠︒

Insight 5

將近九成的受測者對線上預約功能有極高需求︐其次為餐點折價訊息告知︒

73


Persona

台科學餐店家

Customer Journey Map

台科學生

目標︓減少虧損

18-24 歲 目標︓想省錢

目標︓增加收益

目標︓不想等

目標︓餐點回饋

目標︓多樣化

快餐︑自助餐︑點餐

74


75


Define 學生調查小結

店家調查小結

Pain Point 1

Need 1

等候餐點時間過長

縮短等候時間 快速結帳

Pain Point 1

預約免等

缺乏推銷管道

線上預約點餐

Need 1

特餐優惠廣告 新餐點曝光

線上菜單瀏覽 個人化調整取餐時間

Pain Point 2

Need 2

無法得知每日店家的優惠活動

手機即時推播 不錯過優惠

抽卡附加優惠 每日一吃優惠 打烊前優惠推播

Pain Point 3

Need 3

看不到餐點的評價而不敢嘗試

即時分享 給予評價

Pain Point 2

獨享優惠

輕鬆支付 學生證綁定

Functions of Product

無法掌握學生餐點評價

Need 2

了解學生口味 開發新菜色

Pain Point 3

結帳流程費時費力

Need 3

系統化接單方式 點餐 POS 機整合

悠遊卡支付 結帳安全碼

Pain Point 4 點餐排隊總是造成走道擁擠

Need 4 餐點數量更新 菜色透明化

76

評價機制 店家服務評價 店家餐點評價

Pain Point 4 每日都有剩食浪費

Need 4

提前準備食材 預先訂製餐點


Value Proposition

廣告宣傳 推廣新餐點

提供一個應用軟件平台︐讓學生獲得整合移動端的新用餐服務︐並有效提升店家的收 益及流程優化︒

特別優惠獨享 特餐活動宣傳

評價機制 餐點口味評價 餐點透明化

Functions of Product

Functions of Product

新點餐系統 出餐順序統計 悠遊卡結帳

預定點餐 提前預訂餐點

線上餐點預約

優惠餐點訊息

快速結帳支付

店家宣傳推廣

縮短等候時間

手機即時推播

悠遊卡支付

推薦餐點

掌握取餐時間

提供餐點建議

快速結帳

菜色透明化

隱藏餐點預定

77


Service Blueprint

智慧型手機 個人電腦

智慧型手機 個人電腦

智慧型手機 QR code看板

智慧型手機

智慧型手機

學生證 智慧型手機

智慧型手機

智慧型手機

智慧型手機

發現台嗑大

了解服務

下載eaTKD app

了解app

開啟eaTKD app

註冊帳號

瀏覽主畫面

選擇餐點

調整餐點

台科社團貼文 同學推薦 粉絲專業廣告 看到店家宣傳 臉書Po文分享 Line分享

懶人包 粉專貼文 App Store介紹

掃描QR code 逛App Store Line分享 臉書分享

朋友使用心得 粉專貼文

App引導畫面

填寫學號/密碼 設定頭貼

每日優惠 新菜上市

抽卡Game 餐點優惠卡片 瀏覽分類/店家 評價/時間/內容 加入最愛 分享FB/Line

加點/Special

台嗑大FB粉專

台嗑大FB粉專

eaTKD app開發

FB貼文發布系統 FB廣告管理系統

FB粉專懶人包 FB貼文發布系統

程式撰寫工具 餐點資訊資料庫 UI介面設計工具 App原型測試工具

實體證據

顧客活動

前台系統

取餐

後台系統

支援系統

78

Android系統 Facebook IOS系統 LINE

Android系統 IOS系統

Android系統 IOS系統 台科大學務處

An I


智慧型手機

智慧型手機

智慧型手機

智慧型手機

餐廳店家

美味餐點

智慧型手機

智慧型手機

確認餐點

設定付款方式

結帳完成

收到取餐通知

到店家取餐

享用餐點

收到評價通知

再次訂餐

輸入卡號/安全碼

貼心提醒

App推播提醒

出示手機畫面

討論菜色

給予評價

回到訂餐首頁

餐時間/序號

ndroid系統 IOS系統

店家POS系統

eaTKD app開發

餐點資訊資料庫 程式撰寫工具 處理訂單/送餐 廚師製作

程式撰寫工具 餐點資訊資料庫 UI介面設計工具 App原型測試工具

POS系統

Android系統 IOS系統

79


UI Flow_Version1.0

80


Business Model

81


UI style

Prototyping

實際找來校內學生︐針對 app 初版原型 功能配置︑操作流程︑介面設計︑整體

對受測者進行半結構式訪談︐最終收集

#ff6700

#09t2b53

APP prototype 實測

符合受測條件的對象

瞭解實際操作 APP 的問題

圓體 粗體 Arial Rounded MT Bold

82

基本 背景填寫

Insight 1

隨機推薦餐點遊戲很有趣還能拿優惠︐值得一試︒

Insight 2

建議有加入餐點評價分享的機制︐吃過推薦不易踩雷

Insight 3

期待能推薦學校附近餐廳及新店家的加入︒

Insight 4

可與個人學生證悠遊卡結合綁定結帳功能︒


UI Flow_Version2.0 針對受測者的回饋進一步分析操作問題和需求︐並作為第二版介面設計修正的依據︒

型進行產品介面上的易用性測試︐並以

體感受和期許建議方面為訪綱架構︐針

集到 21 份有效訪談資料︒

半結構式 訪談

紀錄並了解改善目前設計

雷︒

83


Visual Mockup

視覺化的特色介紹

親切感的訂餐主頁

84

貼心的店家資訊


快速的訂餐步驟

安全的悠遊卡線上支付

有誘因的抽卡遊戲

即時的取餐通知︑餐點評價︑優惠通知

85


Facebook Fan Page

86

懶人包


介紹影片

Name / eaTKD Video Size / 1920x1080 Footage / 00:02:40 Date / 2018.01 87


廣告投放 A/B test

A 廣告 : 功能

B 廣告 : 情境

88

Analysis


Fan Page Data

89


If you like my works, please contact me!

何 宇欣 He, Yu-Xin

Phone / +886. 975826765 E-mail / m84062133@gmail.com WeChat / yuxin840621

謝謝您 , Thank you!


何 宇欣 He, Yu-Xin

Design Portfolio 2013-2018 All content ©2018 by He,Yu-Xin

He, yu-xin  

User Experience Design

He, yu-xin  

User Experience Design

Advertisement