UI design+ product design_2020

Page 1

PRODUCT DESIGN_ ISLAND GONE

1

6

PORTFOLIO KAI-WEI WANG 2019

Industrial Design 1


2


6


王 凱 薇 Kai-Wei, Wang

03/15/1997 Taipei, Taiwan +886936053158 vivianwang1997@gmail.com

EDUCATION 2016-2020

國立成功大學 工業設計學系

2012-2015

台北市立中山女子高級中學


WORKING EXPERIENCE 2019. 7-8

可染品牌設計實習

WORKSHOPS PARTICIPATED 2020. 5-6

互動界面設計松

2019. 9-12

成大 Book 一市 - 移動圖書館 書車設計

2019. 12

仿生學工作坊

2019. 8

Re-lab 資訊視覺設計工作坊

2019. 3-4

校園體驗創新工作坊

EXTRACURRICULAR ACTIVITIES 2017

成大工設營 - 亞設王

2016-2020

工設系女排

SKILL Illustrator

Solidworks

Indesign

Keyshot

Photoshop

Figma

Premiere

Language 中文 英文 日文 越南語


8

6


9

UI DESIGN

PRODUCT DESIGN

互動介面設計 -Fitness Hunter

08

10 Lean product design -vacuum cleaner 9 42 Easy take

7


FITNESS HUNTER 8

Fitness Hunter 是一款健康管理的 APP,給予 想要改善體態、追求健康生活的人健康餐飲、 運動場所地圖


互動介面設計松工作坊

9


Starting point 人們因為假期、長期工作久坐等 等原因導致身材走樣,想要透過 運動健身及飲食改善體態。

User Persona ABOUT

是一名成大學生,從小生長於台北,為求學 遠赴台南。自己打工賺取生活費,近期為了 減肥而有了吃健康、去健身房運動等想法 GOALS

佳諭

- 想透過運動及飲食來減肥,改善自己的體態 - 想要找到一個工時穩定的工作,下班有自己 的空閑時間可以運動

22 歲 學生 非單身

NEEDS

成大周邊租屋

- 因為是路痴,找路需要導航 - 正在朝著健康生活邁進,所以希望可以找到附近的運 動場所、健康餐廳,方便下課之後直接去運動和吃飯

PERSONALITY

10

內向

外向

PAIN POINTS

忙碌

休閒

獨立

合群

- 不知道怎麼吃才能減肥 - 想要吃得健康但找不到適合的店家 - 生活費有限不能花太多錢


UI DESIGN_ FITNESS HUNTER

User Journey Map 發現自己增肥 ▼

查詢減肥 ( 飲食、運動 ) 相關資 料,發現 FITNESS HUNTER ▼

選擇適合的健身房 ▼

前往運動健身 ▼

選擇適合的水煮餐當晚餐 ▼

前往買水煮餐

Point of view

How might we?

想要以飲食改善自己體態的佳諭,需 要找到價格優惠又有賣健康食物的店 家,因為她不想花太多錢就獲得健康

我們如何讓佳諭花少許的錢就 能買到健康的食物

想要減重的佳諭,需要容易獲取健身 房資訊和健康飲食店家的方法,因為 她課業忙碌且對周遭環境不熟悉

我們如何讓佳諭在最短的時間 內找到最適合自己的健身房和 飲食

想要健康飲食又對台南地區不熟悉的 佳諭,需要能順利帶她去買導航,因 為她容易迷路且不知道哪裡有賣

我們如何讓佳諭順利購買蔬菜 水果

11


01 首頁 - 最新消息 - 本日推薦 - 附近最新 - 最佳人氣 提供優惠訊息及分類資訊, 讓使用者可以用特惠價格購 買到商品,也可以以分類快 速找到自己想要的店家。

Feature 提供健康餐飲、運動場所詳細資 訊、 最 新 消 息 及 所 在 地 圖, 另 外 提供標記收藏以便日後查看。

12


UI DESIGN_ FITNESS HUNTER

02 地圖 設置健身房及餐廳兩個按鍵,按開 後可以設定摘選條件 ( 價格、距離、 營業時間 ) 以利使用者更快速篩選 到自己想要到店家,也可按開下方 卡片查看更詳細內容。

13


03 收藏 可分類 / 新增自己的收藏、自己新 增店家備忘錄供以後查看。

14


UI DESIGN_ FITNESS HUNTER

04 我的 提供偏好設定,讓系統更準確對使用 者提供餐飲推薦,另外還提供推播通 知,讓使用者第一時間接獲最新消息。

15


UI Flow

16


UI DESIGN_ FITNESS HUNTER

Wireframe

17


Prototype all_ 第一版

all_ 第二版

01 調整整體主視覺配色,使頁 面風格更貼近主題。 02 修正第一版頁面沒有加上 Status bar 的問題,確保用 戶理解目前的網路狀態、時 間、藍芽連線狀況以及手機 電力。

03 內容修改成符合主題的資 訊,讓測試時會比較真實。

2 map_ 第一版

2 map_ 第二版

01 原本版本,多了一個搜尋 列,乍看之下,無法馬上確 定實際用途,因此只保留一 個搜尋欄。

18

02 取消 V、X icon,因為 X 像 是錯誤訊息。


UI DESIGN_ FITNESS HUNTER

2-1 gym_/2-2 food_ filter

2-1 gym_/2-2 food_ filter

第一版

第二版

01 修正第一版網頁端的呈現方 式,改成 App 的選單方式。 另外也調整了 " 取消 / 套用 " 的 Button 大小已修正點 擊範圍。

2-1 gym/2-2 food suggest

2-1 gym/2-2 food suggest

第一版

第二版

01 增加已選的標示,使用戶理 解目前選擇情況。

02 在地圖上顯示店家資訊時, 若店家分布密集的話,資訊 會重疊、全部擠在一起,所 以調整成在頁面下方以店家 資訊卡的方式呈現," 探索 更多 " 可以直接放在卡片右 方。

19


3 saves sort_ 第一版

3 saves sort_ 第二版

01 更改 " 編輯分類 " 分層,修正原 先 " 編輯分類 " 會被解讀成修改 收藏類別裡的內容問題。

20

02 修正二次確認 Alert 彈 跳訊息視窗格式,描述 文字刪減成一行。


UI DESIGN_ FITNESS HUNTER 4 my info_ 第一版

4 my info_ 第二版

01 修正 Navigation Bar+ Status Bar 為 64pt 02 修正 buttons 擊範圍太小

4-5 customer service

4-5 customer service

第二版

第一版

01 客服中心當頁直接顯示 文字輸入欄位,並用 Picker 去選擇提問類行 為:問題回報、建議回 饋、聯繫客服已修正藏 得太深的問題。

21


Test GOAL

- 找到適合自己的健身房和健身飲食

PROCESS

4人

情境 假設

任務 擬定

指標 設定

測試 think aloud

SUS 系 統易用性 量表

紀錄 / 訪問

任務設定

任務指標

任務一 想要健康生活的新生 / 找到距離 目 前 所 在 位 置「500 公 尺 以 內 」 且「營業中」的水果攤並了解前往 的路線

1. 選單功能是否直覺流暢 2. 用戶能否利用篩選條件找到適合 店家

任務二 想要將吃過並喜愛的店家收藏起來 的用戶 / 收藏喜愛店家

任務三 客家的碩班生 / 開啟推播通知

22

製作易 用性測 試表單

1. 測試收藏功能是否流暢 e.g. 在兩個步驟內完成 2. 新 增 收 藏 分 類 的 操 作 能 否 在 1 min 內完成

用戶能否順利找到這個功能並開啟 通知 用戶能否在 1 min 內完成這個任務


UI DESIGN_ FITNESS HUNTER

RESULTS ANALYSIS

51.88 F 易用性評分

表現較佳

我覺得這個網站 / 產品 / 系統的功能整合得很好。( 同意 ) 表現較差

我可以想像大部份的人很快就可以學會使用 這個網站 / 產品 / 系統。( 不同意 )

介面優化

灰色 Filter 按鍵看起來像 不能按,使用者在操作時 不會想先使用此按鍵。 點擊範圍設定過小導致許 多使用者無法成功點開。

沒有設計定位點,使用者 無法得知自己在哪裡。

到底是個人設定還是系統 設,兩者放在一起有些不 太合適。

功能優化 / 待處理問題

健身房搜尋功能的使用率低 - 健身房的資訊通常只需要 GOOGLE 搜尋就可獲得 - 幾次搜尋得知健身房位置 / 資訊後,此功能需求降低 運動難道只能去健身房 → - 想要運動不是只有去健身房這一種方式 功能未能完全打到主要客群 - 只單純提供餐廳餐點資訊卡路里 / 定位,健身房價格 課程資訊定位,卻沒有提供如何變健康的方式

新增卡路里統計、餐點 類型介紹、根據身高體 重及生活習慣餐飲推薦 清單及運動方式推薦。

23


70


9

OTHERS

PRODUCT DESIGN

精實產品開發 / 手持直立式吸塵器

26

包裝設計

36

10 Lean product design -vacuum cleaner 9 42 Easy take


10

VACUUM CL 與 奇美的產學合作方案,運用精實開

發流程改良奇美原有手持直立式吸 塵器,始吸塵器更能貼近使用者 的需求,並藉由外觀再設計吸 引喜歡簡約、有品味的客群 。

DESIGNERS

王凱薇

直立式手 持吸塵器 26

楊馥嘉

與奇美的產學合作方案,運用精實開發流程改良奇美原有 直立式手持吸塵器,使吸塵器更能貼近使用者的需求,並 藉由外觀再設計吸引喜歡簡約、有品味的客群。


11 2

LEANER product design

- 奇美產學合作 - 精實產品開發 -A3 報告書

設計者|王凱薇 / 楊馥嘉

27


精實產品開發 Lean Product Development 使用豐田汽車生產線的「精實產品開發」,設計以顧客為本、 符合市場產量的產品。經過長時間觀察、訪談及問卷調查,找 出使用者需求,分析競爭產品、訂出開發策略等,把產品及客 戶的價值最大化。

1. 脈絡訪查 Contextual Inquiry 我們尋找了 20 位符合目標客群的受試者,提供他們奇美的吸塵器 VC-HB1PH0,請他們在平時使用吸塵器的場域進行工作。

年齡| 20-40 歲 偏好| MUJI、UNIQLO 個性|喜愛整潔、生活有條理 “生活就是要有質感”

平時有用吸塵器打掃的習慣

在受試者打掃的過程中,會請他們 think aloud,我們會執行觀察, 記錄下受試者執行工作的整個流程,其中也包括使他們無法順利工作 的『關鍵事件』,最後進行訪談,了解他們在操作過程中的問題及對 吸塵器的期待。

操作

28

think aloud

觀察

訪談

關鍵 事件


OTHERS_ VACUUM CLEANER

2. 關鍵事件 Key Points 分 類 並 統 整 在 脈 絡 調 查 過 程 中 所 得 的『 關 鍵 事 件』,並找出關鍵事件背後的顧客需求,提出發 生頻率較高的需求作為後續問卷及我們設計方向 的參考。

組裝過程|地刷組裝不順利

打掃過程 馬達運轉聲音過大、電線干擾打掃、 狹小空間或縫隙不易清理、某些角度 會卡

清潔過程 不知道如何打開集塵筒、需要用手才 能把集塵筒傾倒乾淨、傾倒時灰塵會 飛起 29


事件所整理出的顧客需求做設計,一個問題會問及滿意度 ( 此項需求 ) 和重要性, 發放問卷給符合目標客群並且有使用過吸塵器的人填寫,問卷的題目依據關鍵 分為 5 個程度,將滿意度及重要性換算成機會分數,找出真正的顧客價值。 事件所整理出的顧客需求做設計,一個問題會問及滿意度 ( 此項需求 ) 和重要性, 其中對於吸塵器操作得直覺性及操作認知並沒有在問卷中顯示出來,但在脈絡 分為 5 個程度,將滿意度及重要性換算成機會分數,找出真正的顧客價值。 調查中確有非常多使用者題及,我們認為這是奇美產品此產品獨有的問題點。 Jobs to be done 其中對於吸塵器操作得直覺性及操作認知並沒有在問卷中顯示出來,但在脈絡

3. 顧客價值分析

調查中確有非常多使用者題及,我們認為這是奇美產品此產品獨有的問題點。 問卷的題目依據顧客需求做設計,一個問題會問及滿意度 ( 此項需求)和重要 性,分為 5 個程度,將滿意度及重要性換算成機會分數,找出真正的顧客價值。

▲ 歸類出

3 個需要改良的部分

C O M P E T I TO R R E S E A R C H 4. 競爭者分析 Competitor Research

C O M P E T I TO R R E S E A R C H 15

透過競爭者分析發現原產品的吸力在競品中較具優勢,因此我們希望在改善

30

其他功能的同時能保留此優勢,另外在傾倒不卡塵的部分是原產品較其他競品弱 勢,這也是我們覺得未來可以好好著手改善的部分。


OTHERS_ VACUUM CLEANER

P R O D U C T S T R AT E G Y 5. 產品策略 Product Strategy

跟據顧客價值分析和競爭者分析列出了後續產品改良及發展的重點。

根據顧客價值分析和競爭者分析列出後續產品改良及發展重點

16

SAL MAPPING C AU S A L M A P P I N G 濾網排列

對產品策略提出的 10 點

濾網厚度

過濾棉厚度

濾網密度

過濾棉密度

分 析 圖, 找 出 各 項 問 題

響 的 因 素, 尋 找 日 後 設

可以切入的點。

3

4

作 因 果 分 析 圖, 找 出 各 項 問 題 沾手機率 背 後 影 響 的 因 素, 尋 找 日 後 設

(過濾系統卡塵量)

濾網厚度

2

3

4

沾手機率 (過濾系統卡塵量)

1

馬達功率

1

分貝數

集塵筒與 吸入方向 同向

真空率

地刷構造

康達效應

過濾棉密度

出風口灰塵量 (過濾效果)

針對產品策略提出的 10 點做因果分析圖,找出各項問題背後影響的因 吸入的空氣量 (吸力) 素,尋找日後設計產品切入的點。( 下圖為部分 )

分貝數

2 吸口構造

過濾棉厚度

濾網密度

出風口灰塵量 (過濾效果)

因果分析圖 Causal Mapping 6. 計產品可以切入的點。

集塵筒與 吸入方向 同向

真空率

地刷構造

吸口構造

吸入的空氣量 (吸力)

離心力

伸縮管管徑

310 300

離心力

伸縮管管徑

240

地刷密閉程度

集塵筒密合度

康達效應 主機密閉程度

吸入量

濾網排列

針對產品策略提出的 10 點

(g/min)

越 好

越好 0

1

2

地刷與地板 貼合度

地刷密閉程度

集塵筒密合度

主機密閉程度

240 吸入量

吸口構造(折角數)

310 300

(g/min)

越 好

越好 0

1

2

吸口構造(折角數)

輪子高度

product

設計參數

+ -

正相關 負相關

元件參數

科學參數 權衡關係 設計參數

元件參數

科學參數

31


24

24

3模型 D 3M&DO特點 DMEOID LDImodeling N R UE R SE S E LGI N/G&FFeatures /E AT F EU AT

渦輪

渦輪

使用渦輪取代原來的風扇 使用渦輪取代原來的風扇 ,葉片數也由�變成��。 ,葉 片 數 也 由 � 變 成 ��。 奇數可增加平衡性,以減 奇 數 可少共振,達到降低分貝的 增 加 平 衡 性,以 減 少 共 振,達 到降低分貝的 效果;增加截面積及葉片 效 果;增 加 截面積及葉片 外型改變氧流方式能增加 外 型 改進氧量。 變氧流方式能增加 進 氧 量。

15°

15°

人體工學握把

人 體 工 學握把

符合手形的握把形狀,及 ��度前傾設計,改善原有 符合手形 的 握 把 形 狀,及 產品體趕過重的問題。 ��度前傾 設 計,改 善 原 有 產品體趕 過 重 的 問 題。

32


OTHERS_ VACUUM CLEANER

25 25

直線型設計 直線型設計

productdesign design product

集塵筒水平銜接主機,讓 集 塵 筒 水 平 銜 接 主 機,讓 進氣方式成一直線,使氣 進 氣 方 式 成 一 直 線,使 氣 流流動能更順暢,以減少 流 流 動 能 更 順 暢,以 減 少 吸力流失。 吸 力 流 失。

一鍵傾倒+刷毛

兩側排塵

兩側排塵 避免灰塵直接對著使用者 排出。 避免灰塵直接 對著使用者 排 出。

一鍵傾倒+刷毛

按下下蓋按鍵能開啟下蓋 道出灰塵,轉開下集塵筒 按接著將其拉出,此時過濾 下下蓋按鍵能開啟下蓋 道軸上的刷毛會刮下集塵壁 出 灰 塵,轉 開 下 集 塵 筒 接上的卡塵。 著 將 其 拉 出,此 時 過 濾 軸上的刷毛會刮下集塵壁 上 的 卡 塵。

33


1 26

1 26

90°

90° 90°

自由彎曲地刷接頭

自由彎曲地刷接頭

自地刷彎折處用軟管相接(兩處),一 由彎曲地刷接頭

個用來左右擺動,一個用來上下 地刷彎折處用軟管相接(兩處),一 地刷彎折處用軟管相接(兩處),一 擺動,使操作時能隨意轉動,增加 個用來左右擺動,一個用來上下 個用來左右擺動,一個用來上下 打掃便利性;另外,能減少地刷接 擺動,使操作時能隨意轉動,增加 伸縮管段的折角,減少吸力損耗。 擺動,使操作時能隨意轉動,增加 打掃便利性;另外,能減少地刷接 打掃便利性;另外,能減少地刷接 伸縮管段的折角,減少吸力損耗。 伸縮管段的折角,減少吸力損耗。

導流設計 導 流 設計

流暢的 導流通道。

導流設 計 流暢的導流通道。 流暢 的導 流通 道。

34


H OW NN H OWTOTOC LCELA EA

OTHERS_ VACUUM CLEANER 27

27

轉開下方的集塵筒 22轉開下方的集塵筒

product design product design

按按 下鍵, 按 鍵, 下打 蓋打 下 下蓋 1 1按開倒出灰塵 開倒出灰塵

塵 濾筒 軸往 上下 的拉, 刷毛會 3 3將過 濾集過刷下卡在壁上的塵 軸上的刷毛會

將 集 塵 筒 往 下 拉,

刷下卡在壁上的塵

不沾手倒出卡塵 4不沾手倒出卡塵 4

35


73

I D E AT I O N

AR 74

75

月曆

- 各國人物

36


76

OTHERS_ CALENDAR

月 曆 Calendar

37


酒家菜逼八 Juo Jia Tsia Bi Ba

將桌遊結合在台南傳統美食 - 砂鍋鴨的宅配包裝上,藉由此新穎的設計 吸引年輕人目光除了能嘗到酒家菜,還能從遊戲中了解酒家菜的歷史 與文化,讓這快消失的台南美食文化得以傳承下去。 圖案以黑色為底,以不等寬的線條繪製,同時結合窗花、剪紙風格的 外框,創造復古感。製作上利用 UV 噴墨技術將黑色墨水噴印在紙板 上,再用絹印塗刷上色,增添手工的精細度與質感。

38


OTHERS_ JAO JIA TSAI BI BA

H OW TO U S E

65

H OW TO U S E

1

阿美 飯 砂鍋 店 鴨

65

H OW TO U S E

1

阿美 飯 砂鍋 店 鴨

包裝內部放置食材

2

拆開盒子,撕下兩

3

邊有菜譜卡及人 物卡的紙板

盒子展開變成桌遊的

G A M E R3O L E地 圖;戳 下 兩 邊 紙 板 上

邊有菜譜卡及人 物卡的紙板

3

邊有菜 物卡的

盒子展開變成桌遊

地 圖;戳 下 兩 邊 紙 板

的卡片成遊戲的配

包裝設計成可以完全攤平 archaeology and design

▲ 宅配包裝介紹

宅配包裝的紙箱為桌遊

拆開盒子,撕下兩

archaeology and design

1

阿美 飯 砂鍋 店 鴨

拆開盒子

2

拿出食材退冰

2

拿出食材退冰

拿出食材退冰

GAME ROLE

盒子展開變成桌遊的 地 圖;戳 下 兩 邊 紙 板 上

的卡片成遊戲的配件

每人選一個

餐具放在轉

39

走到料理格




86

BYE

42


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.