Nobi

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