2016 - 2019
Portfolio 游子瑩 / Yu, Tzu-Ying +886 937-522-963 melody20223@gmail.com
游子瑩 / Yu, Tzu-Ying +886 937-522-963
melody20223@gmail.com No.3-5, Malin Rd., Jiaoxi Township, Yilan County 262, Taiwan
- 2019’S PORTFOLIO
Contents Resume
03
Digital Product Design
05
Product Design
61
01 02 03 04
UDM GruPO TESAS T trip
01 conveX
01
07 19 33 45
63
Contents
02
- 2019’S PORTFOLIO
Resume Profile
游子瑩 Yu, Tzu-Ying +886 937522963 melody20223@gmail.com Education
國立高雄師範大學 工業設計學系
NKNU Department of Industrial Design
國立蘭陽女子高級中學 LYGSH
Language
中文 臺語
03
英文 德文
Resume
Work Experience 職稱 / 公司 / 地點 工作內容
研究設計師 / 多邊圓工作室 / 臺北,臺灣
2017, 08 - 2019, 12
設計實習生 / IOH / 臺北,臺灣
2016, 06 - 2017, 07
國科會研究助理 / 高師 / 高雄,臺灣
2015, 12 - 2016, 10
UX UI、研究、建模、室內施工圖 圖文編輯、網頁設計
圖文基礎與實務課程教學助理 / 高師 / 高雄,臺灣
2016, 2-6
Award
臺北設計獎
2017, 9
新一代設計金點新秀獎
2017, 6
台南智慧城市黑客松
2017, 2
校內候車亭設計
2016, 3
評審推薦獎
工業產品組金點新秀獎 第三名 第二名
Software
3D Modeling Adobe UX UI Tools
Knowledge of HTML, CSS 04
- 2019’S PORTFOLIO
Digital Product Design 01 02 03 04
05
UDM GruPO TESAS T trip
07 19 33 45
Digital Product Design
06
- 2019’S PORTFOLIO
07
UDM 201804 - 201806
01
UDM
Branding - User Interface UDM 全名 Urban Diversity and Mobility，主要與臺灣政府及國際學 術單位合作產出相關研究，專注於討論城市的議題，利用不同的活動 及研究產出或是數據相關的呈現，讓使用者了解城市的發展，並提出 各種思考角度及實踐。期望藉由整體的品牌規劃到網站的設計，都可 以緊扣城市發展相關議題。
Design Process
INSPIRATION
CONCEPT
EXTENTION
WEBSITE DEMO
MOBILE DEMO
Project at in-co studio Client : UDM 多樣性城市科技研究中心 Delivery : Branding, Business card, Website Design : 游子瑩 Program : Kevin Luo 08
- 2019’S PORTFOLIO
INSPIRATION 觀察都市規劃的經典大城市發現，每個城市的各有特色的樣貌，例如棋盤式的 舊金山、由中心向外擴張的舊城巴黎、沿著水道而生的阿穆斯特丹等，將之以 Nolli Map 呈現，會發現每個地圖儼然已成為該城市的代表標誌。 Google Map
San Francisco
許多新規劃的城市以棋盤式 排列聞名，例如舊金山
Paris
歐洲等早期開發的城市多為 中心為主向外發展的放射狀
Amsterdam
阿姆斯特丹因城市沿著河道 為生，呈現特別的城市樣貌
09
Nolli Map
UDM 201804 - 201806
CONCEPT 汲取這樣的靈感，我們規劃出 6x6 的方格，藉由 延伸、壓縮、增加、減少，去創造出更多不同的 標誌。 Ex
10
- 2019’S PORTFOLIO
EXTENSION Icons Favicon
Research
News
Contact
簡易區塊道路，讓 icon 再 縮小時還是容易辨識
以相等大小的形狀顯示消 息、新聞的均值性
Business Card
因應客戶要求，直向中文版面搭配橫向英文 版面的設計，將資訊放置在「 城市的區塊 」 之中，以「 街道 」做為資訊區隔。
11
以同心的樣子，顯示不斷 探索核心的研究精神
包圍外圈，如正需要尋找 其中的一塊。
UDM 201804 - 201806
Web Layout & Web Structure
以相同概念出發，以切割方式呈現，呈現網站不同頁面的不同階層。越深入網頁畫面 越多切割，搭配網頁互動更清楚呈現視覺概念。 Landing Page
Homepage
Research
News and Events
Articles
Content
Contact
Content
12
- 2019’S PORTFOLIO
WEBSITE DEMO Color Scheme Main Color Black #000000
RGB 0, 0, 0 White #FFFFFF RGB 255, 255, 255
Auxiliary color Grey #606060 RGB 96, 96, 96
13
UDM 201804 - 201806
Landing page
Homepage
14
- 2019’S PORTFOLIO
Research
15
UDM 201804 - 201806
News & Events
Contact
16
- 2019’S PORTFOLIO
MOBILE DEMO
17
UDM 201804 - 201806
18
- 2019’S PORTFOLIO
19
GruPO 201906 - 201808
02
GruPO
Campaign Page Design 近年網路知識傳播方式也越來越豐富，影音儼然成為我們生活中不可 或缺的一部分。除了娛樂之虞，也是新型態的職涯目標，未來發展不 可限量。順應 5G 時代的到來，來享享科技重新思考使用習慣，推出 GruPO 全新的影音 APP，希望顛覆現有的影音、社群平台。 這個案子主要作為 APP 發佈前的推廣頁面，我們以快速簡易明暸的 一頁式型態呈現，配合視覺、色彩、圖說等方式，期待引發更多使用 者的興趣。
Design Process
CONCEPT
MOODBOARD
PROTOTYPE
GUIDELINE
USER INTERFACE
Project at in-co studio Client : 來享享科技 Delivery : UX / UI Designer : 游子瑩
20
- 2019’S PORTFOLIO
CONCEPT 為了說服大量的影音使用者去使用、嘗試新的產品， 提出以下目標達到之關鍵步驟。
1
吸引影音使用族群
2
點出現有使用痛點
$
3
清楚、簡易說明特色
4
讓使用者主動聯絡
C L I C K !
21
GruPO 201906 - 201808
MOODBOARD Keyword
Color
Playful
Vivid
Active
Gradient
Adventure
Young
22
- 2019’S PORTFOLIO
PROTOTYPE
Wireframe Draft
分鏡圖
為了讓使用者更清楚了解使用流程，我們以 Motion Graphic 的方式說明。
23
GruPO 201906 - 201808
GUIDELINE Color Scheme Main Color
Auxiliary color Gold #FFD655 RGB 255, 214, 85
Grey #606060 RGB 96, 96, 96
White #FFFFFF RGB 255, 255, 255
Icons
強調創團體驗
以集思的樣子凸顯創 團帶來的效益
說明提供之協助
團隊除提供使用者發 揮平台，初期更提供 宣傳、拍攝的服務
榮譽創始會員
為了快速吸引大量 使用者，元老會員 具有更多優勢
24
- 2019’S PORTFOLIO
USER INTERFACE Responsive Web Page Design
被電線桿擋住的反光鏡
25
GruPO 201906 - 201808
Navigator
Section 1
背景以活潑的 .GIF 凸顯特色、 功能、活動
Section 2
進入深入說明前，快速以幾句話直接點出使 用者痛點
26
- 2019’S PORTFOLIO
27
GruPO 201906 - 201808
Navigator
Section 3
搭配 Motion Graphic 說明幾項特色
Motion Graphic
Section 4
以 icon 顯示，快速明瞭讓使用者了解特色
重複按鈕，強調加入
28
- 2019’S PORTFOLIO
29
GruPO 201906 - 201808
Navigator
Section 5
以資料填寫的方式，直接在網頁吸引會員
Section 6
互動式地圖 + 聯絡資訊
30
- 2019’S PORTFOLIO
USER INTERFACE Responsive Mobile Page Demo
手機版也以響應式網頁方式製作，以一頁式滾動呈現為主。
31
GruPO 201906 - 201808
32
- 2019’S PORTFOLIO
33
TESAS 201812 - 201903
03
TESAS
Taiwan Economic Society Analysis System 面對人口總數減少、高齡少子化，及城鄉發展落差不均等問題，行政 院積極推動「 地方創生政策 」，透過適當的資料分析與統計方法，期 待帶動人口的成長、青年返鄉及發展地方特色產業。
藉由這個網站系統，除了希望向使用者說明地方創生之外，也希望可 以透過資料庫的整理，讓更多政府、民間團體或個人都利用這些資料 創造更多附加價值。
Design Process
EMPATHIZE
VISION
PROTOTYPE
USER INTERFACE
Project at in-co studio Client : 國家發展委員會 Delivery : UX / UI Design : 游子瑩 Program : Kevin Luo 34
- 2019’S PORTFOLIO
EMPATHIZE 日本地方創生由來 日本生育率下降人口減少
＋
大量人口往城市移動
因此日本提出「 地方消滅 論」 ，預測未來鄉村會因 為人口太少導致滅村
35
地方創生誕生
因此日本政府希望利用政策鼓 勵民眾返鄉，振興鄉村文化
TESAS 201812 - 201903
VISION 臺灣地方創生
臺灣在 2019 針對三大元素提出地方創生目標，目標復甦鄉村的人口、經濟、產業等， 也創造多元就業機會。
人
場域
產業
吸引城市人口回流
活化鄉村空間腹地
復甦鄉村經濟、平衡 各項產業發展
36
- 2019’S PORTFOLIO
PROTOTYPE
37
TESAS 201812 - 201903
USER INTERFACE Color Scheme Main Color Gold #DEB859 RGB 222, 184, 89
Light Gold - 2 #FFFAED RGB 255, 250, 237
Light Gold - 1 #FFF3D6 RGB 255, 243, 214 Auxiliary Color Black #000000 RGB 0, 0, 0
White #FFFFFF RGB 255, 255, 255
Web Structure
重點頁面將於後頁呈現。 地方創生入口
首頁 關於 TESAS
地方創生資料庫
更多
線上教學 常見問題 如何使用 相關網站 資料來源 聯絡我們 38
- 2019’S PORTFOLIO
首頁
Section 1
在第一部分破題，快速讓使用者了 解這個系統的主要工具。
Section 2
藉由不同使用者案例調查並整理， 一個個步驟帶領使用者使用網站。
Section 3
在訪問的過程中發現政府單位與民 間單位之間，時常有遺漏的消息、 活動、政策，導致沒有利用資源。 因此在此整合活動及消息，讓彼此 可以在此互相告知。
39
TESAS 201812 - 201903
關於 TESAS
Section 1
羅列出資料庫裡，政府收集 及分類出的 12 大類項目。
Section 2
再次提醒使用者使用方式。
Section 3
藉由不同使用者身份案例分 享，搭配網站功能提示，讓 使用者更了解如何利用這個 工具幫助自己。
40
- 2019’S PORTFOLIO
地方創生資料庫
地方創生資料庫為 TESAS 網站最主要工具，國發會整合所有數據於此，這個部 分的使用流程更是重要，我們將之分成兩個部分： 「 初步瀏覽 」 、 「 深入主題 」 。
初步瀏覽
在初步瀏覽階段，利用 User Flow 工具幫助設計流程，我們利用儀表板的總數據 瀏覽，希望使用者在深入運用工具前先得到一些提示，幫助數據利用之發想。
User Flow
定位
當開啟自動定位功能時，網站會自動 定位，或手動選取地圖位置。 儀表板
將版面切割成多層，上方切換可深入 了解不同主題，而儀表板為總相關數 據之瀏覽。 瀏覽初步資料
快速陳列各主題重要數據，使用者得 以快速了解該區域現況，期待引發更 多數據利用的想像。 41
TESAS 201812 - 201903
42
- 2019’S PORTFOLIO
地方創生資料庫
地方創生資料庫為 TESAS 網站最主要工具，國發會整合所有數據於此，這個部 分的使用流程更是重要，我們將之分成兩個部分： 「 初步瀏覽 」 、 「 深入主題 」 。
深入主題
深入主題之後，因應龐大的資料分類，版面將切得更細。在使用功能上也需要更 加著墨，期待使用者可以有更多的資料使用方式，因此也將資料運用加入互動之 中，讓使用者可以在網站上快速得到比較、分析。
User Flow
深入主題討論
以「 人口 」為例，將可細分為更多主題，將之列 在左欄，並將資料顯示於右欄。 熱度圖功能
藉由互動，將欲比較之主題加入地圖中，縮小儀 表板可以檢視全區該主題之熱度圖比較。 下載功能
43
當需要數據佐證時，可利用下載功能，直接下載 已整理好的數據。
TESAS 201812 - 201903
44
- 2019’S PORTFOLIO
45
T trip 201702 - 201702
04
T trip
Tainan Hackthon Smart City Competition 在臺灣這幾年推動公共運輸交通工具的成效來看，各地因為生活習慣 與機能的不同，因此成效落差極大，尤其是台灣南部，使用交通工具 的比例更是少，因此我們選擇以共享交通著手。 而近年臺南的 T-bike 有顯著成長，也因此我們搭配這樣的發展，設 計一款新的旅遊 App - T trip ，搭配遊戲與社交，除了希望可以真的 落實使用者的使用，也希望在政府推動的層面有所幫助，在未來也期 望可以擴及到更多縣市，讓使用者都可以以共享自行車旅行。
Design Process
RESEARCH
ANALYSIS
VISION
PROTOTYPE
FEATURE
Hackthon Project Delivery : UX / UI / Business Model Designer : 游子瑩 Team Members : 游子瑩 / 楊方寧 / 張鈞婷 / 蔡臻平 / 劉以勒 / 徐英愷 / 許哲瑋 / 黃昱峯
46
- 2019’S PORTFOLIO
RESEARCH 國內旅遊分析 / 相似產品分析
國內旅遊分析
（千億）
(%) 95 85
2
75
NT$3971 億
39
1
NT$3601 億
65
36
55 45
33
35
NT$3092 億
25 3
15 5
5
NT$2699 億
NT$2721 億
101 年
102 年
4
27
103 年
各縣市旅次主運具之私人機動運具市占率 1 2
臺灣地區統計 台南市統計
101 73.5
84.4
102 73.3
84.8
各縣市旅次主運具之公共運輸市占率 臺灣地區統計
5
國人國內旅遊總費用
4
47
101 15.4
3
台南市統計
5.5
102 15.6 5.5
30
104 年
103 73.9
104 74.3
105 年 73.8 %
103 15.8
104 15.5
105 年 15.8 %
86.2
5.2
86.6
5.9
84.7 %
6.0 %
105 年
由 1-4 點可見，臺 灣私人載具仍然盛 行，而臺南私人載 具與公共運輸相差 之比例更盛。 由 5 可見國人在臺 旅遊仍具有一定的 消費市場。
T trip 201702 - 201702
相似產品分析
分析具相似關鍵字「 臺南、旅遊、交通 」之 App，針對在「 旅遊、交通 」層面 所提供的資訊做比較，也因此期望得到更具有「 整合性 」之產品。 包含「 旅遊資訊 」正相關
目標 旅行台南
提供路線 不包含路線客製規劃 提供景點資訊
包含「 交通資訊 」負相關
T-Bike 臺南市公共自行車 交通無法直接導航 提供交通工具資訊 提供行程建議
臺南歷史地圖 / Oh! 臺南 不具交通路線規劃 提供部分景點資訊
包含「 交通資訊 」正相關
大台南公車
可以簡易規劃行程 無提供景點資訊 包含「 旅遊資訊 」負相關
48
- 2019’S PORTFOLIO
ANALYSIS 藉由使用者經驗地圖，我們試著發想產品功能。 Process preparing
Customer Experience
假設 旅遊流程
使用者 感受
找景點
期待
交通 住宿
複雜
比較價格
預訂
啟程
體驗
繁瑣
可能不安
期待
享受
路線規劃
故事 導覽 遊戲
景點間串聯
Function Brainstorm 前台
T TRIP
後台
Resource
49
提供選項
分析、儲存使用者喜好
與商家結合
綜合所有使 與公民營大眾 運輸交通工具串聯
聯
T trip 201702 - 201702
experience
ending
迷路
改變路線
焦慮
對改變的不安
提示
路線規劃
使用經驗分析並提供選項給使用者
定位 Google Map
回程
放心
回顧
回憶
顯示 分享
推薦
再使用
喜歡
期待
分享
推薦更多行程
雲端儲存
分析使用者喜好
社群軟體
50
- 2019’S PORTFOLIO
VISION 整合訴求
從前面的研究及分析，可以得出以下使用者主要訴求，並將之整合開發。
地方商家、業者
動態規劃路線
分享
與地方商家、共享自行 車互動業者互動，提供 旅遊更多元可能
客製化規畫行程比較 並找出最佳、最快路線
藉由分享增加使用者間的 互動，收藏他人的旅程， 誘發再次旅行的動機
Roadmap
將產品開發大致分為四個階段，總期長為一年，以下為各階段之目標。 1st
2nd
規劃佈建期
Product Develop
Marketing
Resource
51
重點放在產品的完 整化
建構團隊
產品規劃、設計
產品開發
建構社群
藉由社群提高聲量 資料串接與搜集
3rd
行銷主要時期
產品修正與改善
產品測試與修改
伺服器建置與系統規劃
重點宣傳、行銷期
潛在夥伴蒐集
4th
更多資源收集
T trip 201702 - 201702
Business Canvas
藉由 Alexander Osterwalder 提出的 Business Model Canvas，提出初步的商業模式規劃。 Key Partners
Key Activities
地方政府
一個提供旅遊建議 的平台，亦可分享、 交流旅遊經驗 旅遊路線規劃
共享自行車公司
地方商家
Value Propositions
Customer Relationships 藉由旅行紀錄、社 交活動，以及他人 分享，促使使用者 會持續使用並進行 下一個旅程準備。
Customer Segments
單人或小團體之旅 行
共享單車資訊 Key Resources 共享單車站資料 使用者經驗紀錄
Channels 個人經驗分享
旅遊紀錄
App Stories 社群媒體，例如 Facebook、instagram
城市探險者
單車愛好者
Cost Structure
Revenue Streams
產品開發與維護、聯繫商家之人事成本、廣告投遞
一開始需要請關鍵夥伴加入，收集一定流量及使用 者後可以以廣告置入或商家活動的部分獲得營收。
52
- 2019’S PORTFOLIO
PROTOTYPE Hand-drawing Draft
53
T trip 201702 - 201702
User Flow
01 02 03 04
54
- 2019’S PORTFOLIO
FEATURE 01 Remember your personal preference
在第一次註冊時，便需要請使用者先選取旅行習觀偏好。
如此可以做為未來產品分析之資料，也可以立即提供使用者最佳推薦。
55
T trip 201702 - 201702
經由多次使用，我們也將會藉由使用者瀏覽項目、旅行類型、 收藏類型等，進行分析，並提供最適合的行程。
56
- 2019’S PORTFOLIO
02 Share bike tool
藉由圖層，使用者可以更快速找到共享自行車，以及設定自己的介 面檢視習慣。
57
T trip 201702 - 201702
03 Plan your own trip.
開啟新的旅程時，可以選取已出現之路線，並且調整路線為自己想要的樣子。
也可以自行創造新的路線，藉由分享，未來也許也會有其他使用者跟隨這樣的路線。
58
- 2019’S PORTFOLIO
04 Record your trip
藉由紀錄與分享，誘發使用者去累積自己的旅行經驗與回憶，達到 使用者回流。
59
T trip 201702 - 201702
T trip
T trip
T 代表 Tainan / T-bike / Taiwan
# 70C1A5
# CEE9DE
# FFFFFF
# 000000
60
- 2019’S PORTFOLIO
Product Design
01 conveX
61
63
Product Design
62
- 2019’S PORTFOLIO
63
conveX 201606 - 201705
01
conveX
Social Product Design
conveX 是個以台灣社區巷道空間特性切入的實驗性設施設計。
從問題切入，以在地生活經驗分析發現密集住家形式、人車共道行為 與高速搶快通行等特性。並重新設計適用於台灣巷道空間的安全設施， 達到友善城市、美感空間、機能性使用等必要元素。
Design Process
OBSERVATION
RESEARCH
PROBLEM
STATEMENT
IDEATION
DESIGN
Graduation Project
新一代 - 產品組金點新秀獎 入選後浪來襲 - 新生代設計師聯展 台北設計獎 - 評審推薦獎 Designer : 阮呂承安 / 游子瑩
64
- 2019’S PORTFOLIO
OBSERVATION 我們的巷道文化
因應亞洲台灣等地區的密集式居住文化與複雜的交通組成， 因而產生了一個獨有的巷弄事故現象。
生活環境造成的交通問題
狹小巷道 - 安全死角 - 人車混道
我們的城市狹小且壅塞，行人騎士住家都是共用同一個狹窄 的空間，日常為了搶快，騎士時常穿越社區巷弄爭取時間， 也在許多安全死角的巷道交叉路口間造成了事故。
因此巷弄交叉口成為了此計畫最主要的研究議題，而提升巷 道使用者的安全及改善巷弄交通秩序，則是我們的目標。
65
conveX 201606 - 201705
66
- 2019’S PORTFOLIO
RESEARCH 研究巷弄彎道交叉口事故
發現肇事主因包括三種 : 駕駛違規或未注意，交叉口安全設備的 不良及人車混道的路權判斷。
研究用路者經驗
典型社區巷弄間使用者包括 : 行人、自行車騎士、機車騎士及汽 車駕駛，其中機車騎士最容易於巷弄間發生事故，而人與自行車 騎士屬於最弱勢群。
私人交通載具比較
比較道路優先權與巷道威脅性與訊息的主被動性，可見圖如下， 又在台灣的通勤族，依舊高達七成的比例選擇使用私人載具。 被動
主動
道路優先權
巷道威脅性
觀察巷弄設施
目前非號誌巷弄交叉口，街道視距窄，在舊式設施裡沒有特別根 據灣道路口做有效的訊息提示的設備規劃，使用上訊息不主動， 設置位置不友善，更不易察覺。
67
conveX 201606 - 201705
PROBLEM STATEMENT 非號誌化路口設施問題
台灣的交通設施規定，八米以下道路為非號誌化路口，並不 設置紅綠燈，改以反光鏡、停讓標誌或其他警告標誌代替。 然而這些非號誌化警示存在許多問題，例如以下： 缺乏直覺性的方向指示 肇事時諸多特殊情形難以判別 交通設施被雜亂的街景覆蓋
被電線桿擋住的反光鏡
68
- 2019’S PORTFOLIO
IDEATION 因應非號誌化路口交通設施設置規範，我們創造一個全新的產品， 期望解決現有巷道交通問題。
號誌化路口交通設施
直覺指示 主動給予指示
非號誌化路口交通設施 被動判斷 缺乏方向指示
停
69
讓
conveX 201606 - 201705
1
2
3
提示直覺化
在號誌化路口，紅綠燈給予我們直接的指示， 然而非號誌化路口缺乏這樣的設施。
? ?
訊息主動化
使用者容易忽略被動的訊息，即使設置許多 警示標誌仍然容易發生事故。
符合常見路口類型需求 T 字路口 / 主次幹道
1
? ?
十字路口
2
?
彎道路口
3
70
- 2019’S PORTFOLIO
DESIGN 藉由立面紋理反射車燈 ， 藉由 大面積反射形成圖騰 ， 提醒死 角的用路人。
71
conveX 201606 - 201705
Concept
structure
reflection
direction pattern
Scenario Diagram !
!!!
72
- 2019’S PORTFOLIO
Product Feature
單片結構
幾何紋路立面 Geometry structure surface
環
填充支
材 Expoxy filler
內嵌式螺絲鎖定 11 screws only / per piece 底盤 Bottom plate
73
conveX 201606 - 201705
因應不同路口需求變化
74
- 2019’S PORTFOLIO
75
conveX 201606 - 201705
76
- 2019’S PORTFOLIO
Award
新一代 - 產品組金點新秀獎 入選後浪來襲 - 新生代設計師聯展 台北設計獎 - 評審推薦獎 2017.05.18 臺灣臺北世貿中心 新一代設計展 ( Young Pin Designers' Exhibition )
2017.06.20 - 08.06 臺灣臺北松菸 - 臺灣設計館 TD Museum 後浪來襲 - 新生代設計師聯展
77
conveX 201606 - 201705
展覽海報
78
- 2019’S PORTFOLIO
More Information
由下面連結觀看更多細節
Cïtyee Design
conveX - Social product design Cïtyee - Social design program
79
conveX 201606 - 201705
80
游子瑩 / Yu, Tzu-Ying +886 937-522-963
melody20223@gmail.com No.3-5, Malin Rd., Jiaoxi Township, Yilan County 262, Taiwan