1
CON T E N T S
03
ABOUT ME
UI/UX DESIGN
47
05
WEB DESIGN
PRODUCT DESIGN
53
2
Li,Shi-Hsuan E x pe r i en c e s B ehance Po rt f o l i o R ev i ew i n Ta i w a n 擔任行政規劃與 策 展 人 Des ign Info rma t i o n & Th i n ki n g L a b U X 專案實習生 － 大型跨國科技公 司 網 站 易 用 性 測 試 與 研 究 U XS D 用戶體驗 x 服 務 設 計 工 作 坊 獲 得 金 獎
O th e rs 台灣科大設計週 - 忐忑子女 作 品 參 展 ： 產 品 設 計 作 品 ／ Pr o E 建 模 作 品 台灣創意母體 - 校園化裝競賽 特殊材質獎
負責：使用者經 驗 研 究 ／ 介 面 設 計 ／ 視 覺 設 計 台灣科大設計週 - 誰管明天 清華大學產品開 發 合 作 專 案
主題展參展：河方台北
負責：使用者經 驗 研 究 ／ 服 務 流 程 設 計 ／ 產 品 設 計 J o nk er Mal ac ca An d r o i d Ap p 開 發 負責：介面設計 ／ 視 覺 設 計
Skills
3
創獸營營隊 宣服組組長與晚會展場佈置 班刊 - 八分之一 編輯
Cre ativ e Fie l ds
Illustrator
Photoshop
After Effect
Sketch 3
Flinto
Final Cut Pro
Indesign
UI / UX
Graphic
Industrial
李 Shi-Hsuan,Li
國立臺灣科技大學 2012-2016
思 萱
National Taiwan Univerity of Science and Technolory tel / + 8 8 6 - 9 1 0 - 0 4 0 4 2 6
創意設計系 - 主修工業設計
ma i l / y ef un1 2 3 @g m ai l . c o m
D e sig n U n d e r g r a d u a t e Ho n o r s P r o g r a m
wec ha t / y ef un1 2 3
- I n d u st r ia l D e sig n
我是李思萱 擁有跨領域合作與專案實作經驗， 對於不擅長的領域會積極並且快速學習， 認為好設計應從使用者內心真正的聲音出發， 期許能做出直指人心的設計。
4
UI/UX
5
DESIGN
6
高 中 歷 史 課 活 動 App， 透 過 劇 本 懶 人 包 進 行 課 間 臨 時 趣 味 活 動， 提 高 學 生 的 專 注 力 與 學 習 動 機， 創 造 師 生 間 雙 向 且 良 好的互動。
UXSD Workshop 2015.05 用戶體驗 X 服務設計 X 創新
What I did / Brainstorming
金獎
User Interview&Persona Storyboard Customer Journey Map
7
共同設計 / 林子虹
Business Model Canvas
共同參與 /
Wileframe
王亦方、湯士賢、吳宜芳、李佳軒
UI&Vidual Design
「嗨！歷史」
HiStory
8
01
HiStory UI/UX Design
這是什麼
何時使用
課程活動模組
歷史課間
給誰用
高中老師 高中生
單向教學無法引起學生興趣
文 科 在 學 習 上 須 大 量 的 記 憶， 繁 瑣 的 細 節 令 許 多 高 中 生 頭 痛 ，以 歷 史 為 例 ， 年 代 與 人 物 交 織 的 歷 史 事 件， 以 平 鋪 直述的教學無法引起學生興趣。
訪談
深度訪談 15 位學生及 4 位老師 二次訪談受訪者
高中生 「歷史課就是在睡覺， 反正都是要背，那回家背就好了。」
9
高中老師 「升學壓力與創新教學間的平衡 是相當困難的事。」
顧客旅程地圖
上課中
上課前
備課
無法 互動
趕課
老師 外顯 行為
下課後
學生 無法管教
備課
考前 複習 與同學 互相驗收
沒時間 預習
早自習 考試
聽課 抄筆記
做別科 作業
睡覺
借筆記
補習 做作業 （主科） （主科）
學生 臨時抱佛腳 無奈
情緒 感受
疲憊 思考如何 提高學生興趣 課程時間有限 無法創意教學
無奈歷史 非主科
上課疲憊 思考課程
我們將歷史課的行 程 分 為 三 部 份 ，從 訪 談 整 理 的 內 容切 入 ，分 別 列 出 師 生 的 痛 點 ，做 成 一 份 顧 客 旅 程 地 圖 ， 並對最不愉快的低 點 作 深 入 思 考 、 發 想 。
設計方向
1
促進師生間雙向互動
3
2
師生皆不需花太多時間準備活動－課前時間少
課程緊湊，無法花太多時間活動
4
簡單預習和複習，提升學生能力
10
01
HiStory UI/UX Design
Prototype htt ps :/ / m ar v el app. c o m / 57i 1bg
對歷史年代和事件的記憶感到痛苦嗎？老師是否無法改變單向教學的模式以致於 無 法 引 起 學 生 興 趣 ？ H i Sto r y 歷 史 課 A p p 擁 有 簡 短 的 活 動 能 讓 師 生 快 速 互 動 、 獨立思考，還有多元 的 主 題 類 別 ， 每 次 使 用 都 有 全 新 的 體 驗 ！
班級進度與廣播系統 一個老師會同時教 許 多 班 級 ， 橫 跨 不 同 年 級 ， 老 師 登 入 後 ， 所 有 班 級 和 進 度 便 能 一 目 了 然 。 透過廣播系統，老 師 能 讓 學 生 預 先 知 道 上 課 內 容 並 事 先 預 習 ， 上 課 時 學 生 較 能 快 速 進 入 課 程 。
11
快速活動 / 隨機抽取 抽 出 學 生 進 行 三 到 五 分 鐘 的 活 動， 幫 助 學 生 快 速 進 入 主 題， 快 速 簡 短 的 活 動 不 佔 用 教 學 時 間，讓學生學習獨立思 考 。
12
01
HiStory UI/UX Design
提詞劇本 被 抽 選 到 的 學 生 要 照 著 簡 短 的 劇 本， 利用提詞功能即興演戲。
13
歷屆考題測驗 課程結束後出現此範圍得考古題，讓學生快速瞭解 大考出題方向、幫助記憶。
14
01
HiStory UI/UX Design
登入
班級管理
App Flow 課前
選擇進度
選擇教材
課中
課後評量
課後
15
課前推播 學生預習
抽選學生
學生端通知
劇本提詞機
架構
廣播系統
老師端登入
學生端登入
班級管理
課程進度
學生管理
成績記錄
趣味課程
點名系統
成績查看
課程進度
劇本題詞
本週推播 課後練習
選擇教材 抽中通知
抽選學生 同步題詞
16
01
HiStory UI/UX Design
App GUI LOGO
數字：Heti LT
1234567890 ICONS
17
COLORS
#50E3C2
#E8E8E8
#B8E986
#9B9B9B
逢場作戲
集思廣益
抽絲剝繭
？
？
18
「 共 創 展 覽 新 體 驗 」
wheee 是一套展場導覽的服務，利用 iBeacon 傳遞訊號，創造自動化室內 導航，搭配熱門區域地圖和同步朋友推薦，讓使用者擁有最獨特的展覽體驗。 共同設計 / 謝佳紜 程式設計 / 張子晏、李泓其 參與分工 / 使用者經驗研究、概念發想、互動設計、介面設計
19
20
02
wheee UI/UX Design
這是什麼
何時使用
在哪用
給誰用
展場導覽服務
新一代設計展
世貿中心
看展人 參展學生
Q1: 新一代需要什麼？ 01. 培養大眾設計意識
02. 贊助更多好作品曝光
人潮
好作品
03. 改善動線疏散人潮
好體驗
Q2:wheee 可以為新一代做什麼？ 01. 利用社群帶來更多看展人潮
02. 人潮確實帶進好作品
03. 改善擁擠展場的體驗
新一代設計展對大部分設計系學生是讓展品商品化的機會，對各廠商
議題
也 是 個 發 掘 新 人 的 場 域 ， 但 是 不 同 學 生 與 廠 商 的 需 求 卻 不 盡 相 同， 且 展場充滿 大 量 的 雜 訊 。
21
新 一 代 的 現 場 已 經 承 載 了 許 多 資 訊， 我 們 想 尋 找 一 個 讓 使 用 者 易 接 觸 、 即 時 、 無 痛 的
目標
新平台 改 善 現 有 的 展 場 資 訊 呈 現 方 式 。 經 過 多 次 發 想 與 提 案， 決 定 不 提 供 過 多 訊 息 ， 並 嘗 試 讓 使 用 者 成 為 建 構 地 圖 的 一 員 ， 利用社 群 與 大 數 據 的 方 式 ， 發 酵 不 一 樣 的 價 值 。
族群
與其提供使用者
不如讓使用者
目不暇給的資訊
自行建構世界
目標族群為會接觸設計，以及會看展的人，讓他們能在展場快速發現好作品， 更能用自 身 的 經 驗 帶 給 他 人 價 值 。
22
02 技術
wheee UI/UX Design
iBeacon 是 藍 芽 發 射 器 利用推 播 訊 號 到 手 機 ， 觸 發 應 用 程 式 ，幫 助 使 用 者 定 位 、 參 展 者 推 播 。
特色
看展不迷路
23
熱門與朋友推薦
作者線上導覽
wheee demo video https://youtu.be/I2RjkI6IhZ0
NAVIGATE
室內導航定位 標 注 目 標 學 校， 進 行 導 航 定 位 ， 當 指 針 相疊，即可往目標方 向 行 動 。
白色指針為手機指向， 藍色 為 標 的 方 向 。
轉動 手 機 到 兩 者 相 疊 。
24
02
wheee UI/UX Design
熱門學校推播 目 前 最 夯， 不 斷 有 人 造 訪 的 學 校 ， 顏 色 會 由 綠 色 POPULAR
25
轉為紫色，直覺判斷區域的熱門度。
GOLDEN PIN
金點入圍參考 金 點 入 圍 代 表 作 品 受 到 一 定 的 認 可， 使用者能作為參觀學校的參考。
NEWS FEED
好友都去哪裡 來 看 展 的 朋 友 都 推 薦 什 麼 呢？ 開 啟 w heee 追蹤好友動態 吧 ！
26
02
wheee UI/UX Design
作品導覽 在 作 者 忙 碌 時 聽 解 說 ，並 能 夠 隨 時 喜 愛 收 藏 ，或 者 GUIDANCE
27
打 卡 記 錄 ，第 一 次 收 藏 或 紀 錄 都 會跳 出 通 知 提 示 。
喜愛列表 呈現簡化作品資訊
展開記錄內容
收藏紀錄列表 卡片式模擬紀錄便條
記事本 在 展 場 中 隨 時 記 錄 下 喜 愛 的 作 品 與感 想 ，在 未 來 一 NOTE
次追蹤，不分散社群宣傳。 28
02
wheee UI/UX Design
App Flow
29
30
02
wheee UI/UX Design
App GUI LOGO
COLORS
#FF5756
#FFFFFA
#233E66
#FFF358
#FB82FB
#D8D8D8
w h e e；( v t . ) 使 興 奮 ，使 激 動；( i n t . )（ 表 示 高 興 、
LOGOTYPE
激動等）喲，啊；(vi.) 發出尖叫聲 發現好作品時發出 whee 興奮的聲音。
ICONS
31
Navigation Bar
像怪獸小手的圖像
Wheee
AM
%
Tab Bar
32
JONKER MALACCA 2014 Gap Time for Dream chasers in Asia 國 際 體 驗 學 習 計 畫， 此 專 案 為 開 發 一 款 介 紹 馬六甲當地文化街的旅遊指南 App，幫助馬六甲申請上世界文化遺產，此 App 已贈與世界文化遺產局。 點我下載 共同參與 / 陳柏全、黃致嘉 ` 負責 / 資料收集、攝影、介面設計、視覺設計 33
掃描下載試用 34
03
Jonker Malacca UI/UX Design
在哪用
給誰用
馬六甲
觀光客
深度旅遊
情境
行走中導航、外地觀看資訊 此應用程式主要目的為介紹當地文化，讓遊客能進行深度觀光，並透過 A pp 導 航 到 街 道 上 的 文 化 或 美 食 景 點 。 除 了 現 場 使 用， 也 能 在 他 處 瀏 覽 照 片 和 文 字 介 紹 認 識 當 地 文 化 。
內容
35
主 要 內 容 有： 兩 大 主 題， 以 及 主 題 下 細 分 的 項 目 ， 每 個 項 目 裡 還 有 不 同 的地點 。 每 個 店 家 或 景 點 都 有 文 字 介 紹 、 相 片 、 地 址 ， 和 導 航 。
文字介紹
Google 地圖
相片
展開與收納
店家介紹
相片集
Google Map 導航
36
03
Jonker Malacca UI/UX Design
兩大類別深度探索 每個類別裡介紹的店 家 都 是 當 地 學 校 推 薦 與 認 定 的 ， 收 納 M a t e r i a l 式 設 計 讓 介 面 簡 潔 明 瞭 。
37
店家導航 第四項功能為所有店家在地圖上的確切位置，可以 選擇類別，或者全部顯示，讓使用者一目了然。
38
03
Jonker Malacca UI Design
App GUI
LOGO
+ #b5495b
+ 地標
Jonker Malacca
COLORS #b5495b
#E6E6E6
#545859
主色取自馬六甲 最 常 出 現 的 紅 磚 牆 顏 色 ，希 望 讓 使用 者 能 有 身 歷 其 境 的 感 受 。
ICONS
39
Facebook Banner
40
HUNTIT 「 搭 乘 台 北 捷 運 尋 找 寶 藏！」 外地遊客到了台北常需要不斷上網搜尋景點和交通，而台北捷客除了 通勤或固定的景點以外還能去哪呢？ 捷運藏寶冒險 App，幫助外地旅客遊台北，也讓在地台北人發掘捷運 新去處，當小海盜成長的同時，旅人們也將擁有更多台北口袋名單。
2 015 台 科 設 計 週 展 出
41
42
04
Huntit UI/UX Design
這是什麼
在哪用
給誰用
效益
捷運尋寶遊戲
捷運站周邊
觀光客 台北人
特色旅�
台北捷運尖峰時期塞滿上下班的民眾，但其他時段搭乘的比例
議題
卻 相 當 低， 除 了 通 勤 方 便 之 外， 期 望 透 過 其 他 方 式 吸 引 民 眾 使用 大 眾 運 輸 。 許多長期居住臺北的人經常抱怨不知道能去哪裡，網路上的旅 遊地圖多是給外來旅客的景點推薦，對於臺北人而言沒有吸引 力， 對 於 外 地 的 旅 客 更 是 需 要 知 道 捷 運 能 到 達 的 旅 遊 景 點 。
尖峰
43
離峰
人潮大約 5:1
44
04
Huntit UI/UX Design
概念 遊戲化旅遊資訊，利用尋找藏寶地圖，並以對戰獲得領地 的 方 式， 激 起 玩 家 的 好 勝 心 ; 與 店 家 結 合， 使 獲 勝 者 能 夠 得到優惠券等實體獎品，增進玩家對戰慾望。
等級提升後裝備也升級，
從小水手到大海盜。
01 選 擇 一 個 尋 找 任 務 的 篩 選 方 式 三個篩選任務的方式，自由選擇，由左至右： 地點緣盡 / 時間快結束的 / 獲得獎勵多寡 最右邊的則是特別通知。
02 選 擇 一 個 任 務 進 行 對 戰 當玩家的等級越高，便能看見星星數越高的任務， 星星是每次拿到的獎勵，能夠換取獎勵。
45
。
03 進 行 對 戰 !
04 獲 勝 ！
規 則 一 / 找 到 照 片 上 的 店 家， 定 位 後 解
獲得餐廳折價券以及
鎖進入對 戰
悠遊卡加值點數
規則二 / 三 戰 兩 勝 46
W E B
47
D
D E S I G N
48
XL 維力盃 三分鐘影片大賽概念網站
49
共同參與 / 魏廷恩、林逸晟 參與分工 / 企劃討論、介面設計、Coding
為了行銷維力炸醬麵 XL 大碗滿意，舉辦維力盃三分鐘影片大賽， 網友可以在等泡麵的三分鐘觀看影片，看完後即可投票。
50
BikeMap 自行車騎乘地圖網
BikeM ap 讓自行車族 能 夠 參 考 推 薦 路 線 ，選 擇 訓 練 或 是 休 閒 ，並 利 用 網 站 連 結 的 Go o g l e M a p 安排路線，規劃時程 ， 更 能 揪 團 一 同 騎 乘 自 行 車 。 BikeM ap 還有團購頁 面 ， 有 推 薦 的 運 動 裝 備 ， 也 能與 他 人 一 同 團 購 享 優 惠 。 51
52
P R O D
53
D U C T
54
55
「除了陪伴，更是守護」 LOOKOUT 利用佩戴在寵物狗身上的電子項圈，在家中長輩發 生 意 外 倒 地 時 ，用 應 用 程 式 及 時 通 知 家 屬 ，防 止 悲 劇 的 發 生 。 LOOKOUT 讓最好的幫手協助家人的照護！
L O O KO U T 共同參與 / 謝佳紜、莊雅琪、闕子淵 參與分工 / 使用者經驗研究、概念發想、產品設計、影片剪接
56
07
LOOKOUT Product Design
研 究 顯 示，6 5 歲 以 上 老 人 意 外 死 亡 的 原 因 中 ， 跌 倒 高
動機
居第二 。 許 多 情 況 下， 跌 倒 不 會 在 第 一 時 間 致 命 ， 往 往 是 因 為 行動受 限 且 周 遭 無 人 造 成 遺 憾 。 老人對於自身配戴偵測跌倒的穿戴式裝置接受度不 高，認 為 有 損 自 尊 。
57
透 過 寵 物「 幫 忙 」 配 帶 穿 戴 式 裝 置， 取 代
目標
在 老 人 身 上 裝 置 偵 測 器， 在 老 人 跌 倒 不 能 自救時，發出求救訊號。
設計項目
智慧項圈
App
寵 物 與 主 人 日 常 相 處 時 ，若 智 慧 項 圈 偵 測 到 寵 物 出 現 異 常 行 為 模 式 ，就 有 可 能 是 主 人 發 生 意 外 ，應 用 程 式 便會發送警訊給緊急聯絡人或醫務人員。
58
07
LOOKOUT Product Design
狗狗行為模式研究 測 試 時， 我 們 會 到 狗 狗 看 不 見 的 地 方 降 低 他 們 的 警 戒 心， 再 讓 受 測 主 人 假 裝 突 然 倒 地 ， 研 究 發 現 狗 狗 會產生特定的低頭繞 圈 行 為 模 式 。
59
我 們 將 電 子 系 同 學 焊 接 好 的 電 路 板 縫 在 較 柔 軟 的 帆 布 中 ，做 成 一 個 簡 易 的 項 圈 進行產品測試。
電子項圈設計內容 老人跌倒時透過人體紅外線模組與六軸感測器判斷 / 發出警示聲響 / 關閉警報按鈕 / 傳輸警訊
60
07
LOOKOUT Product Design
登入畫面
輸 入 ID 號 碼
輸入 ID 號碼登錄 第 一 次 使 用 LOOKOUT A PP 時 ， 需 要 輸 入 項 圈 手 冊 上 的 ID 號 碼 ， 應 用 程 式 會 將 輸入同組號碼的使用 者 建 立 在 同 個 群 組 。
61
放上寵物照片
新增狗狗和主人的檔案
設定主人檔案
設定主人檔案
首頁
群組展開
依照狗狗分家庭群組 使用者可以同時加入不同群組，讓使用者除了自家的寵物和親 人外，還能同時關心在遠方的親人們。 每個群組的右上角會顯示項圈當下的電量，讓使用者輕鬆關注 項圈狀況。
62
07
LOOKOUT Product Design
警報器介 面
二度確認
緊急聯絡人收到通知
項 圈 偵 測 到 跌 倒 警 示 後， 經 過 3 0 秒 觸 發 手 機 警 報， 若 老 人 沒 事， 能 自 行 將 警 報 器 關 閉 ， 手 機 仍 會 再 度 跳出光箱詢問是 否 要 關 閉 ， 但 若 老 人 沒 關 閉 警 報， 應 用 程 式 便 會 撥 打 電 話 給 親 人 或 救 護 專 線 。
63
除了陪伴，更是守護 Look Out !
64
65
面對面，看見使用者內心的長相 做出直指人心的好設計
66