2019 2020
Hu ang ing
黃寧
HUANG NING
NTUST DESIGN PORTFOLIO
CO N TEN T Inside the po r tfoi l o
01
04
02
05
03
06
產品設計 / 9 airro 機場創新導航產品與服務流程 設計
UI 設計 / 30 movieco 電影訂票 APP 設計
服務設計 / 49 國泰保險菁英圈 國泰人壽產學合作
文創商品設計 / 58 永有晉陽 - 系列文具
網頁設計 / 66 花甲 - 指彩網站頁面
Other works/ 66 平面設計、插畫、包裝設計
機 場 導 航 行 李 車
我的角色 / 服務設計 產品設計 UI 設計
PRODUCT DESIGN TEAM WORK 2018 09 - 2019 01
Ｑ： 機場迷路 負重行走 概述 Airro 是一台機場導航行李車，它提供乘客導航至登機口或機 場各處，及載運行李的服務，解決轉機及一般旅客在出境大廳中尋 路的心理壓力，與行李造成的心理負擔，此服務將由搭乘的航空公 司提供。
5.
問 題 定 義 在這裏，為了了解旅客在機場所面臨的問題，我們透過 5W2H 法與觀察紀錄法，定義出問題的輪廓．
6.
服務流程探索 我們探索機場服務的流程．將情況較為負責的轉機為思考的起點， 其分為轉機前與轉機後，並以香港國際機場為參考，分析機場的動線．
轉 機前
1
2
3
4
5
報到 / 托運
安檢出關
前往登機門
等待登機
登機！飛行中
7.
轉機 中 8.
1
下機前往 轉機櫃檯
2
辦理 登機證
3
驗票 安檢
4
等待 / 休息
5
前往 登機門
6
9. 順利 登機
訪 談
採用半結構式訪談 3 名使用者後，我們發現，使用者在轉機時會產生強烈的不安與疲勞．
大範圍與陌 生造成迷路
機場人員協助
活動
溝通不良
趕時間
我認為機場的指 示很不明確
我認為櫃檯服務 人員效率很差
我在轉機時有導 遊告知路線
轉機過程中找到 登機口我才能真 正放鬆
我的隨身行李很 重，因為帶了工 作用的筆電
20181113-1-03
20181113-1-01
20181113-2-01
20181113-1-07
20181113-1-06
我第一次去大機 場時容易繞來繞 去，感到不安
我有因櫃檯服務 太慢而錯過班機 的經歷
我在轉機時有空 姐舉牌指示路線
我在轉機時擔心 錯過班機而忍著 不用餐
我在機場一邊帶 小孩一邊提行李 非常累
20181113-1-04
20181113-1-02
20181113-2-01
20181113-1-08
20181113-3-01
我在轉機時因指 示不清找不到登 機口和轉機櫃檯
有人帶領讓我的 轉機旅程很輕鬆
20181113-1-05
20181113-2-03
我向櫃檯人員問 路，卻因為櫃檯 人員表達不清， 還是找不到路
我認為轉機時需 要知道路線及該 做的事是什麼
20181113-3-04
20181113-2-02
等待 滑手機是我等待 時的主要活動 20181113-2-04
我覺得機場內可 以吃東西的地方 很少 20181113-2-05
10.
隨身行李的 影響
得到正確資訊
在機場如果我要 從行李箱拿東西 很麻煩 20181113-3-02
因為要帶土產、 隨身衣物等，我 的隨身行李很重 20181113-3-03
人 物 誌
運用 WAAD 分析．我們總結出一名代表使用者．
精神緊繃、 怕錯過飛機的 職業女性
• 曾因指示不清與地勤人員 溝通不良而迷路 • 因 工 作 用 筆 電， 隨 身 行 李 仍然很重．
需要充足的資訊與減輕 行李負擔來幫助轉機
焦慮程度 低
Goal 有精神地在出差時完成所有任務 將精神、力氣多留給接下來的工作
使用頻率 低
高
負荷程度 低
高
高
Frustration 大量移動帶來疲勞 時間壓力與資訊不透明帶來焦慮 在陌生環境迷路並找不到所需資源
11.
顧客旅 程 地 圖
12.
機 場服務三大痛點 資訊零碎不透明 飛行流程介紹、航班資訊、路況導航
隨身行李妨礙行動 行李運輸系統
排隊耗時、降低效率 航空公司服務預約
13.
問卷調查
14.
為了驗證旅客是否有這樣的痛點與需求，我們蒐集了 142 份的問卷，來驗證我們的構想．
結論
我們應該針對快速幫 旅客找到需要的資訊與目 的 地， 及 緩 解 迷 路 的 不 安 與行李的負擔進行設計．
15.
Airro 服務將由搭乘的航空公司提供
16.
設計提案
我們規劃了全新的轉機服務流程，解決負重行走與迷路的問題， 來協助旅客有更愉快、輕鬆的旅程．
17.
18.
原型設計 我們的服務體驗，以航空公司的手機 app 與導航行李車為主要的接觸點，利用手 機 app，我們協助旅客順暢的完成線上報到與輕鬆租用導航行李車的服務．
掃描查看 Pr otoytpe
19.
點擊＋號 / 圖示新增航班
搜尋機場
搜尋目的地與查看航班
點擊
收藏航班
航班首頁 航班首頁能立即查詢航班，將航班加入收藏隨時顯示在首頁， 讓旅客能快速查詢搭乘的航班，找到需要的資訊，並能隨時拿出來查看．
20.
點擊導航圖示
查看轉機櫃檯資訊 與導航
點擊 Book 按紐 抽取號碼牌
成功！
轉機協助 為了緩解旅客對找不到轉機櫃檯與害怕排隊拖延時間的焦慮，Airro 能幫助使 用者查看位置與導航至轉機櫃檯，還可線上抽取號碼牌，節省排隊時間．
21.
點擊 Check-in online now 按鈕
輸入機票號碼 或登入航空公司會員
線 上 Ch e c k - in 為了讓旅客更快速的完成 轉機手續，我們也提供線上 Check-in 的服務，只要是 該航空公司的乘客，便能利 用這項功能，在轉機時省去 到櫃檯報到的麻煩．
22.
選擇旅客
輸入護照資訊
選擇座位
成功得到 登機證！
點擊 Wayfinding 標籤頁
可顯示導航狀態及剩餘時間
導航中
導航結束
提示將遙控器 放置機器凹槽
導航頁面 在使用登機證 QRcode 租用 airro 導航 行李車後，在 APP 的導航頁面上，便會 顯示狀態資訊，使用完畢時，依循指示 便可輕鬆歸還機器．
歸還成功！
頁面顯示狀態、使用時間、目的地
23.
產品渲染效果
產品呈現 遙控
Airro 在租借後，使用者可 用遙控器切換導航／跟隨／ 待機模式，並調整 airro 的 速度。
24.
警報模式
在警報模式下，若有行李被拿 起，會觸發警報，使機器發出 鈴聲，按壓遙控器前端按鈕可 關閉警報模式。
速度旋鈕
模式燈
切換模式
停止鍵
警報模式鈕
跟隨
使用者在中途用餐、 逛免稅店等場景使用
導航
至登機口及機場各處 airro 會在使用者前方投 影方向燈
搬運 行 李
行李放置在 airro 上後， 可用彈力帶固定行李
25.
movieco
電影線上訂票 APP 設計 我的角色 / 服務設計 UI 設計
UI DESIGN TEAM WORK 2018 04 - 2018 06
26.
Ｑ： 電影訂票 整合 影評社群 概述 整合訂票與影評社交系統，可以輕鬆訂票，立即查詢影評，關 注喜歡的影評人，並透過影評任務系統得到優惠，讓分享電影成為 分享生活中的美好。
27.
設計背景 根據調查顯示，大眾眾選擇電影的主因多為劇情偏好與口碑，而上映後的 2~4 週，是 決定電影票房的關鍵時刻，如果此時能累積口碑與票房，就能締造後續票房的長紅，然而現 有的訂票 APP 多半不易查詢影評，也難以製造用戶黏性，因此我們將訂票 APP 與影評社交 機制結合，不只更容易找到喜歡的電影，也幫助刺激電影的票房。
28.
上映 2~4 週吸引觀眾是關鍵
現今訂票與影評少有整合
29.
競品分析 我們分析現有的電影訂票 APP 所針對的 面向，並總結出現有產品的體驗缺口．
電影資訊
30.
社群媒體
影城品牌
價值主張
體驗缺口
快速方便 資訊收集 社群媒體
與社群媒體互動單向、 缺乏行程考量
影城整合 商業模式 考量行程
資訊不足、忽略 重要的口碑資訊
資訊收集 快速方便
缺乏電影服務的 資源整合
31.
問卷調查 發現問題後，我們運用問卷調查的方式， 蒐集２９４份的問卷，驗證是否有這樣的需求。
選擇電影的原因
多數使用者以劇情偏好為選擇的主因。
32.
決定消費的習慣 ?
使用者的消費情境多為心血來潮，其次 為事先計畫。
通常選在電影上映期間的 何時至電影院消費 ? 選擇此時觀賞電影的原因 2-4 周 58% 避開上前期的人潮，且有較多影評可以參考。 1 周 33% 想搶先看，怕被暴雷。店家可能會有活動。
多數使用者選擇影評較多可參考的，上 映 2~4 週觀影。
33.
34.
顧客旅程地圖 我們將現場觀察與問卷調查的資 料繪製城ＣＪＭ，並找出痛點。
電影線上訂票服務痛點 現場排隊耗時
臨 時 抉 擇，選擇電影猶豫不決
電影本身及個人偏好 影響服務體驗
35.
設計提案
36.
經過前期的研究調查，我們發想如何解決問題， 並進行提案．
電影訂票
影評社群
功能圖
37.
劇情分類方便事先計畫、有特定喜 好，但沒有鎖定目標電影的用戶。
心血來潮的族群，則為現正熱 映的影片，和距離作為選擇。
首頁 首頁的搜尋欄及分類提供事先 計畫的人查找，快速購票按鈕 則供心血來潮的人能快速訂票。
38.
發送電影預告通知，增加觀注，讓用戶累積期待．
簽到提升用戶黏性
以優惠作為酬賞增加影評
菜單任務 透過階段性任務和影評消息，提升影評的瀏覽， 增加影評數，用優惠點數，和提升影評階級的 榮譽感誘惑用戶。
39.
搜尋頁 據調查，距離為選擇電 影院主因，故搜尋欄新 增地點選項．
個人資訊 關注和紛絲發揮社交的功能，增加用戶黏性
40.
影評區 寫影評換折扣、累積經驗值，提升等級與聲望， 根據調查，口碑為選擇電影的主因之一．
在該電影上檔時的限時活動 任務，任務為一系列電影相 關劇情，把劇情帶入任務， 加以宣傳．
任務清單 定期的階段性任務，提高 影評的瀏覽，和活絡社群．
41.
優惠 參加活動贈送電影院附近餐廳、店家的折扣， 整合觀眾觀影前後都是逛街和用餐的需求．
座位預覽 提供座位視野的預覽，為用戶的需求主要需求之一．
42.
43.
國泰保險菁英圈 我的角色－服務設計 UI 設計
SERVICE DESIGN TEAM WORK 2018 092019 01
Ｑ： 提升保險業務員榮譽感 概述 促使國泰優秀人才經驗交流，透過專業形象提升榮譽感。
舉辦邀請制的主題聚會，提供拓展人脈的優良環境，讓菁 英 業務與高端客戶之間增加共同話題與接觸，使其更有效 的了 解客戶心理拉近關係，並認識新客戶。
45.
訪談＆人物誌
將訪談內容繪製成人物誌，分析業務員的行為與需求．
我是正俞，處女座 A 型， 細心算是我的專長，讓我在工作中更能比 別人多一分打動客戶的用心。
我將會 今天下午我將會帶著 我精心準備的禮物拜 訪客戶。
46.
我需要 我需要手機、平板、 筆電、來輔助我的工 作，也時常需要參加 課程進修自己。
我會 我會使用電子化的媒介 來聯繫客戶，維持感情， 當有新產品和相關資訊 就能即時分享給他。
研究洞察與發現
我們從業務員工作環境尋找最具意義的關鍵活動，並洞察行為的核心意義．
業務員行為與關鍵情境
開始與 客戶接觸
服務客戶
業務員重點摘要
促使服務 延續的因素
找尋新客源
聊天找需求
建立自己的人脈
蒐集客戶資訊
規劃客戶未來
提供專業到位的服務
當客戶傾聽者
保險業外關心互動
細心的需求分析，在業餘進修自己，
知識
以專業為軸心，建立自己的品牌。
個人品牌
與客戶關係不只限於業務上，
人脈
隨時關心各領域知識。
甚至益於雙方人脈的交流。
47.
概念發想
結合以上業務員行為與關鍵情境、業務員重點摘要，我們進行進一步的概念發想．
知識
＋
個人品牌
＋
人脈
建立一個專業標示與環境，讓業務員良性競爭且能經驗交流， 以優勢與榮譽鼓勵業務員爭取發展機會，推動整體的進步與發展。 希望能透過我們的設計帶來更好的效益，不論是客戶、業務員、 國泰企業及相關人士之間都能有更廣、更密切的人脈交流。
48.
概念劇本
我們透過邀請制的活動與會員制度的設計，協助業務員營造尊榮感，拓展人脈。
來 ! 我們先看這酒的
色澤，再聞聞香氣，
品悅姐，這是您的邀
座，穿的美美的來參 加吧 !
文文您好，我是正俞，
用心品味它
請函，這次是品酒講
品悅姐的業務，這是我的
這次是什麼主題 呢 ? 真是讓我太 期待了呀 !
這款酒的口感帶有
正俞你好，今天的聚 會真的很開心 ! 謝謝 你的邀請 !
名片，很高興認識你 !
莓果香氣，真棒 !
邀請制主題聚會
進行知識交流 開拓話題
接觸新客戶的機會 擴展彼此人脈
講座結束後，主題性禮品 助業務員讓客戶留下印象
49.
網站設計 50.
透過保險菁英圈網站，業務員能即時獲取最新的活動資訊．
概念價值
從設計外觀與創造優勢等不同的面向規劃， 以提升菁英業務員的榮譽感，在其工作上達到正面效益。
•優先繼承客戶
•參與講座，認識優秀人才
•與高層人士交流，提供 擴展人脈的優良環境
•菁英的標示―國泰菁英徽章 •國泰旗下多方位服務
•形成影響力，成為互相
幫助與激勵的良性競爭
•開拓與高端客戶間的話題 與接觸，增加客戶的黏性
51.
講座給所有關係人帶來之效益
對國泰公司
對菁英業務員
對專業客戶
•與客戶的緊密關係
•接觸新客戶的機會
對被邀請客戶
•更好的工作成效
概念展回顧
52.
•與各式優秀人才認識
•發揮與合作的新環境 •接觸深度的知識
為了驗證我們的設計，我們在國泰人壽概念店舉辦了概念展，邀請業務員， 一同參與我們為保險業務員打造的創新提案，收集他們的建議與想法，並進行反思．
概念展問題
＋ _
正面影響 - 鎖定高端客群
• 客群鎖定很好，抓到高端客 戶的興趣 • 視覺設計好看、高級，符合 設計概念 • 網頁設計吸睛，易了解內容
負面問題 - 成本考量
• 經費現實面擔憂成為阻礙
• 活動規模須因交流情況進行調整
? !
延伸點子 - 社群經營與融入生活 • 線上網頁社群經營，擴展人脈
• 客戶名單的分析，避免客戶的重複 • 禮品生活化，融入客戶生活
疑惑不解
• 分層制度的制定 • 防止搶客戶機制
53.
CULTURE AND CREATIVE PRODUCT DESIGN INDIVIDUAL WORK 2018 072018 09
54.
創作背景
趙卿，趙簡子為春秋時期晉國趙氏 的領袖，在位期間勵精圖治，鑄刑鼎， 頒布成文法，體現了社會進步的要求， 並建立了晉陽城 ( 今日山西太原 )，以文 化淵源為背景，創作一系列的文具產品。
資料收集 觀察博物館觀眾族群，以青少年及兒 童為主，因此將文具作為產品的主題，並 收集趙卿墓出土之文物資料。
55.
設計理念 永有晉陽，不僅象徵了趙卿建立晉陽城的偉業，也代表了山西太原自晉 陽城至今歷時千年的時光，標誌設計結合了春秋時期晉國的古文字，並以灰 褐色的配色，除了帶來典雅、考究、沉靜的意象，也傳達給觀眾以古文物和 歷史為主題的訊息，融合現代，設計為文物締造了更加和諧的印象。
56.
晉侯鳥 尊 \ 侯 馬 盟 書 迴 紋 針設 計 以春秋時代的晉國文字與山西博物院鎮館之寶－《鳥尊》為參考，將其造形化作迴紋針， 作為書籤，或固定文件，都將是獨特而具有意義的標誌。
57.
58.
愛 君 之 過－橡皮設計 靈感源自尹綽重視趙卿的君主過錯而非君主出醜的故事， 可見趙簡子開言納諫的美德。造型以趙卿墓的古代禮器，玉璜 為基礎，結合其細緻的雕花與型態，使橡皮更改錯誤的意涵與 尹綽愛君之過的寓意相互呼應。
59.
鼎之 言 圖 釘 設 計 趙卿墓中出土的隨葬七鼎，顯示出了趙卿擁諸侯權力地位的象徵，以此為創 作來源，將七鼎化身為精緻小巧的圖釘，充滿趣味的文具，讓留言更有分量。
60.
螭 / 菱之 福 － 便 簽 設 計 取用出土自晉侯墓的青銅器紋飾，將菱形紋的祝福意涵 與螭紋的力量象徵，在輕巧的便簽上重生．
61.
指 甲 彩 繪 網 站 設 計
我的角色－主頁設計 客製化頁面設計
WEB DESIGN TEAM WORK 2018 092018 11
62.
概述 花甲以中國傳統色為主題，提供線上指甲彩繪販售及客製化等 服務，面向偏好古風時尚的女性客群．
63.
主頁設計
64.
客製化頁面設計
65.
66.
Other Works 包裝設計、海報設計、插畫
67.
包裝設計
68.
69.
海報設計
70.
插畫
71.
72.
73.