2022Portfolio

Portfolio JHANG

2018

NAI - WUN

2022

Hello. //////

聽 見 設 計 之 聲

張 乃 文 個 人 作 品 集

UIUX DESIGN

WEB DESIGN

SERVICE DESIGN

PRODUCT DESIGN

//////

好的設計 源自於使用者體驗與對細節的追求

Contents

01

個人簡介

APP DESIGN 07

永豐DAWHO

17

Red Cross Singopare

//////

設計提案•介面設計•設計規範•開發測試

使用流程設計•介面設計•產品功能

WEB DESIGN 29

ROG AniMe Matrix™

37

Pocket

47

買器

59

BonBonMusic

使用者經驗設計•使用流程設計•介面設計

產品提案•市場調查•使用者研究•介面設計

使用者研究•介面設計•產品功能•專案規劃

使用者體驗設計•介面設計•產品功能

01

張 乃 文 ABOUT

ME

Hi~ 我是張乃文，一位從產品跨到UI、UX Ｄesign 的設計人

，從來不設限自己所能嘗試的事物，享受在任何環境中，不 斷嘗試、不斷學習。發現 『真實』 問題，並勇於解決。

一個享受設計、熱愛解決問題的跨領域研究生，更是一位 喜歡吸收新知，勇於挑戰的斜槓青年！

//////

聯絡我吧！

+886 917-680220

ABILTY / 專業能力

UI Design

UX Design

jerry10jerry10@gmail.com

Web Design

Product Design

了解不同平台介面設計規範與準則，具備

了解使用者研究方法與使用者體驗設計方

熟悉網站開發流程，擅長網站頁面佈局及

擅長產品設計與行銷企劃活動，也了解內

快速設計 。

隊開發模式，規劃產品使用方法，設計良好

覺與操作邏輯 。

內容轉換為視覺化圖像。

介面設計實務經驗，熟悉產品設計流程及 Sitemap, User Flow, UI Flow, Flow

法，能觀察出使用者的痛點與需求，以及團 的產品使用體驗 。

跨平台裝置設計，創造出一致性的網站視

容行銷、SEO搜尋引擎優化，將複雜的產品 Sketach, Visual design, Layout, SEO,

Chart, Wireframing, Prototype,

Empathy, Ｐersona, User Journey

Landing Page, Visual Design,Respon- PPT/Keynote, Event planning,

Visual Design, iOS Guidelines,

Map, User Stor y, User Research,

Development.

Mockup, Mood Board, Style Guides, Material Design.

Map, Stakeholders Map, Functional Usability Testings,Sur vey .

EDUCATION / 教育背景 2018 - 2021

國立成功大學 工業設計所

人工智慧•前端開發•使用者經驗

sive Web Design, Front-end

2014 - 2018

私立大葉大學 工業設計系

工業設計•網頁設計•介面設計

EXCHANGE / 海外交流 2017.06 - 2017.08

加州大學 聖地牙哥分校 人工智慧•語言學習

2016.07 - 2016.08

香港理工大學 設計學院 產品設計•品牌設計

Marketing, Video production .

2011 - 2014

私立弘文高中 普通科

活動企劃•影像剪輯•社群經營

about me 02

WORK EXPERIENCE / 工作經歷 ASUS 華碩電腦股份有限公司 UX Designer

華碩電腦股份有限公司

2021.06 - Now

Description

• ROG AniMe Matrix™系列產品燈效控制軟體專案（產品包括：筆電/主機版/耳機/鍵盤..等） -針對個別產品性質與使用情境，負責軟體操作使用流程與介面設計 -依據使用者定位與數據報告，進行軟體新功能應用規劃與設計

-規劃 AniMe Matrix™系列產品跨裝置燈效串連與互動功能設計 -負責 AniMe Matrix™燈效軟體UI Flow 與Wireframe 製作

• ZenBeam Latte 系列微型投影機軟體設計專案

-負責產品前期競品分析、使用情境、用戶行為等研究 -延續Latte 系列軟體操作行為，進行使用體驗優化 -負責軟體新功能應用設計與導入

-負責軟體UI Flow 與Wireframe 製作

-與工業設計師、人因研究員一同設計遙控器，以及定義操作規範 -與外包廠商協作，進行軟硬體開發與產品系統測試

• Zenbo 智慧機器人軟體設計專案

-負責Zenbo產品功能與產品定位，進行軟體功能規劃與設計 -負責軟體UI Flow 與Wireframe 製作

-與前後端開發團隊協作，進行介面測試

UXI Ｄesign 遊石設計有限公司 UI/UX Design Intern

遊石設計有限公司

2020.07 - 2020.12

Description

• 永豐銀行大戶數位帳戶專案

-協助產品介面設計（GUI） ，並與開發團隊進行前端介面測試

-與專案團隊一同負責製作產品設計規範（Design Guideline）

• 中國信託智能理財概念產品專案

-協助產品前期桌面研究、專家訪談與競品分析

-負責產品原型製作（Prototype)與用戶訪談（Interview）

• 財團法人精密機械中心 - 生產管理系統專案 -參與介面視覺風格提案

-協助軟體介面設計（GUI）與ICON設計

ＱＤＭ 網路開店 UI/UX Design Intern

皇博數位有限公司

Description

• 與店家溝通，並進行使用者訪談及統整客服問題，整理設計需求規格（Survey） • 規劃專案架構與產品功能流程圖（Flow Chart） • 與開發團隊討論，規劃長短期產品開發順序

• 設計功能使用流程與收費模式，並製作Prototype及Mockup • 新產品市場調查與使用者洞察

• 新產品概念提案與產品服務設計（UI-Flow） • 產品ＲWD網頁視覺與編排設計（Mockup)

2019.07 - 2019.12

03

BonBonMusic 音樂家教媒合平台 UX Design Intern

蹦蹦資訊有限公司

2018.07 - 2019.06

Description

• 與老師及學生進行使用者訪談，找出平台淺在使用問題（Interview） • 與團隊討論產品視覺規範與產品功能（Ｓtyle Guideline） • 設計產品使用流程與操作規範(User Flow)

• 規劃新版產品專案架構與產品功能(Functional Map) • 設計產品服務與優化使用體驗

• 負責產品介面設計與原型製作(Mockup) • 產品跨平台網頁編排設計(RWD)

• 附屬產品形象網站開發與前端程式撰寫(HTML/CSS/Javascript)

• 課程維護與內容行銷（ＳＥＯ優化） ，並協助製作產品行銷素材及活動企劃文案

大葉大學國際語言中心 Web Designer（兼任助理）

2015.02 - 2018.06

大葉大學

Description

• 中心語言學習導航系統維護及前端開發(HTML/CSS/Javascript) • 語言學習導航系統手機版設計與開發

• 優化學生諮詢體驗，改善學生線上預約使用體驗(User Journey Map) • 中心活動企劃與執行、影像製作、平面文宣設計

淞煜科技

2015.01 - 2015.02

淞煜科技股份有限公司

Web Design Intern

Description

• 規劃產品各項功能與設計產品視覺介面

• 協助部分產品前端開發(HTML/CSS/Javascript)

PATENT / 專利

TWM557072U 可拆式溫度顯示裝置 TWM558273U 伸縮圍欄柱

AWARD RECORDS / 得獎紀錄

2021 2018 2016

TWM557497U 改良式電腦散熱裝置

TWM558925U 多功能投影機裝置

2021 IF DESIGN AWARD

2020

2018 奇想設計大賽 - 創新科技組 / 銅賞

2017

User Interface (UI), User Experience (UX), Communication

GIGABYTE Great Design

康寧創新家 / 佳作 Corning Future Innovator

2020 奇想設計大賽 - 創新科技組 / 佳作

GIGABYTE Great Design

天府寶島工業設計大賽 / 入圍獎 Sichuan-Taiwan Industrial Design Awards

//////

about me 04

EXPERIENCE / 職務經驗

2019

2019 2018 2017 2016 2016 2016 2015 2014

成功大學工業設計系大三工業設計課 / 授課助教（ UI/UX 實作設計課、Sketch•Adobe XD 軟體課程 ） 成功大學圓夢創業計畫 / 計畫負責人

大葉大學 ID25 工業設計系畢籌會 / 官網負責人 大葉工設期末聯展 / 文宣組負責人

第二十六屆工業設計系聖誕晚會 / 社群經營 2016 跨文化英語先修營 / 影音組負責人 大葉大學國際語言中心戶外電影夜/ 總招 2015 跨文化英語先修營 / 活動組負責人

大葉大學設計學院三系聯誼 / 聯合主辦人

DESIGN TOOLS / 設計工具 Graphics Design

Sketch Figma Adobe XD Illustrator Photoshop InDesign

Programing

HTML 5 CSS 3 Bootstrap

UI / UX / Prototyping

InVision Zeplin Framer Miro Overflow

Microsoft Visio Lucid Chart

Video Production Final Cut iMovie

Product Design Rhino

Keyshot

Auto CAD

Solidwork

//////

ＡＰＰ DESIGN

07

DAWHO 08

“ 專為千禧世代所打造的VIP數位帳戶

”

DAWHO是永豐銀行旗下的數位帳戶產品，提供和銀行VIP同等級 的服務、更高的存款利息、更多的刷卡現金回饋、更優惠的外幣換

匯、實用的免費跨行提款轉帳、超多檔免手續費的基金投資，以及 便利的網路銀行服務。此外本專案也榮獲2021 IF DESIGN AWARD

User Interface (UI), User Experience (UX), Communication 三 項設計大獎。 //////

設計提案•介面設計•設計規範•開發測試

2020.07 - 2020.09

設計總監： 張群儀

共同設計： 張幸儒、Susan Cheng

09

//////

專 案 背 景 ｜ Ｂackground

永豐銀行 DAWHO 數位帳戶至今已有超過60萬人申辦，旗下APP也提供相當完整的 金融服務，包括存款服務、投資管理、外匯兌換、證券等項目。而本專案主要是協助大

戶數位帳戶設計與開發新的帳戶功能，包括無卡提款、繳費、貸款與紅包轉帳，並在既 有設計規範中，協助重新定義設計準則與規範。

專 案 任 務 ｜ Mission

本專案主要根據前期的用戶研究報告，以及銀行端所提出的功能需求，進行使用者介 面設計，包括操作流程、介面插圖、介面文案等等。最終彙整舊有設計與現有設計，重

新針對應用程式各項內容制定設計規範， 包含文字、顏色、控件、ICON、版型等，提出 一套完善的設計規範給後續產品的設計團隊。

DAWHO 10

Project Research //////

目 標 族 群 / Ta r g e t U s e r s

25~39歲

工作賣力、玩得也用力

所得收入前20%，具職涯潛力、有經濟基礎、存在投資需求 數位接受度高，習慣社群學習，喜歡透過社交媒體發聲

需求洞察 / Demand Insight

01

02

該族群對生活環境的動盪感到憂心，因難

亨利族們因期望增加收入，也願嘗試投資

以掌握未來社會發展的趨勢，賺取更高的

。但受到近年保守的投資氛圍影響，和本

已經無法滿足他們，如果有機會，多傾向

識，無法持續性的建立投資信心、養成理

收入成為重要的生活目標。然而固定薪水

身較低的投資經驗和較少的理財相關知

成為斜槓青年以增加更多收入。

財習慣，常造成只能節流、無法開源的負 面循環。

Strategy & Solution //////

功能圖 / Functional map

貸款查詢

發紅包

貸款主頁

未借貸

車貸

已借貸

信貸 借貸資訊

紅包主頁

貸款首頁

發紅包

固定金額

隨機分配

貸款內容

紅包確認

貸款資訊

建立成功 發給好友

發送連結

收紅包

好友領取

紅包明細

連結領取

待領取

已領取

登入領取 登入搶紅包

無大戶APP

有帳戶為下載APP

非大戶用戶

已發送

11

頁 面 流 程、線 框 圖 / U I F l o w , W i r e f r a m e

貸款查詢

1.0 1_1

(

)

1.1 1_2

1

_

(

)

_ _

_

1_2

_

1

XXX XXX

1_1

1.2 1_1

(

_

_

1.1

)

_

1_1

_

2

1_2

_

(

)

1.2

_

1_2

_ _

2.1

_

1_2

_

_

1_2

_

_

1_3

5.0

5_0

5_0

_

_

5_0

_

2

5_0

1

_

1

36 47

5.1

2

2 1

5.2

3

發紅包

3

1

5.1

5.1.1

5_1

5_1_2

5_1_2

_

_

5_1_2

_

_

5_1_2

_

_

5_1_2

_

_

5_1_2

1

30

1

30

1-1

5.3 1

5_1_2

0 5_1

_

5_1

1

2

3

4

_

_

5_1_1

_

_

5_1_2

_

_

5_1_1

_

_

5_1_1

_

_

5_1_1

_

_

_

5_1_1

5_1_1

1

1

2

2

0

5_1_1

5.1.2

5_1_2

_

_

_

_

_

5_1_1

_

_

5_1_1

_

_

_

_

_

_

Design Execute //////

設計規範 / Design Guideline

DAWHO 12

13

介面設計視覺稿 / Mockup

貸款 Ioan

簡化頁面資訊，並放大專屬額度 與優惠利率，透過卡片滑動的互 動方式，除了能讓用戶更專注於 內容上，也能藉此向用戶推薦。

貸款選單

貸款首頁藉由卡片式設計，並結 合標籤與進度條，分類編排基本 貸款資訊，幫助用戶快速查看還

款金額與還款日期，輕鬆管理， 不同款項。

貸款首頁

DAWHO 14

「貸款內容」、「貸款資訊」 等頁

面，透過摺疊式手風琴介面，將

待繳金額依據應繳日期排列管 理，並搭配提醒標籤，協助使用 者進行還款。

貸款內容 貸款詳情

15

紅包轉帳 Red envelope

簡化紅包初始步驟提高用戶的沈

浸 體 驗 與 CTA。此 外，為 增 加 活 動 的趣味性和用戶活躍，亦針對「已 發出」的紅包，向用戶推播即時的 領取狀態。

紅包主頁

以 「發放方式」 的按鈕互動，取代原 本「固定金額」與「隨機金額」的頁

籤，除了更符合用戶的心智模型外

，也能減少過去切換頁籤時，造成 資料被清空的可能，提高用戶完成 紅包發放的成功率。

準備紅包

16

「確認紅包資訊」、「發送紅包」 等 頁面，除了透過互動方式引導用戶

完成紅包資訊的輸入、確認外，同

時盡可能的凸顯紅包樣式， 以強化 主題。

準備紅包

紅包紀錄

紅包紀錄頁下方的卡片按鈕狀態

會根據活動進度呈現不同的文案， 以刺激用戶進行互動。 另外已發放 詳情頁，除了能呈現當初設定的紅 包參數，更會提醒用戶剩餘的紅包

數量，以鼓勵用戶多項好友推廣， 刺激互動。

已發紅包

17

Red Cross 18

“ Ｊoin an event and offer a helping hand ”

Red Cross Singapore Volunteer APP 是一款專為當地紅十字會

的義工所設計的應用程式。整合了義工會員、活動資訊、義工社群、 活動簽到等日常活動所需服務，除了降低協會員工在活動進行時 的管理，也促進義工之間的交流及自我成長。

//////

使用流程設計•介面設計•產品功能 2019.05

共同設計：吳庭蕙

19

//////

專 案 背 景 ｜ Ｂackground 本專案為新加坡 WeesWares 公司委託之設計案，主要是為新加坡紅十字會的志工與

管理者設計一套志工活動APP，並同時整合新版新加坡紅十字會會員管理後台，解決 協會活動時的各項管理與志工交友問題。

專 案 任 務 ｜ Ｍission 本專案為任務導向的設計專案，主要任務是依據其他設計師所完成的使用者研究，以

及廠商需求，規劃一款完整的應用程式架構，並設計其應用程式中的使用者介面，包 括介面視覺、APP功能、操作邏輯等等。

Strategy & Solution

Red Cross 20

//////

現有問題 / Problems 藉由其他設計夥伴的研究與訪談，統整出以下幾點問題，包含義工端與行政管理端。

•已有20k 義工, 但只有2-3k的活躍使用者。 •現在不能同時輸出義工資料和他的活動。 •現在新註冊義工表格是人去批准的，少則一天10表格，多則一天100表格，相當費時。 •義工帳號尚未批准，無法參加義工的活動。 •不是所有義工有登記在系統裡。 •現在表格欄位太長，需要5-10分鐘填完，需採階段性填寫。 •需要可以filter不同組合的義工 •現在活動有義工名額限度，額滿後註冊關閉。可能需要一具專業或興趣篩選。 •現在缺少活動日曆 •需要更聰明的辦法讓活動主辦人可以簡單的記錄義工簽到。由紙本更換成手機掃描。 •義工訓練證書有自己的有效期限，現在系統沒法自動知道證書有沒有過期。 •現在沒法自動輸出義工貢獻了多少個時數的信件或是圖表。 •大多數的義工對科技產品使用不熟悉，連menu是什麼都不知道，需確保介面一致性。 •現在系統無法更換密碼。 •要減少行政事務，部分流程盡量自動化或由義工自行操作。 •現在很多義工數據，但沒法用圖像化的辦法閱讀。

解決方案 / Solutions 根據前置研究團隊所發現的核心問題，提出所有可能的必要功能，並藉由團隊會議將所提 出的方案與功能透過卡片分類法進行統整與分類。

•義工簽到

•義工活動

•義工會員系統 •訊息通知 •會員卡

•證照提醒

•義工里程指南

21

系統地圖 / Sitemap

Design Execute //////

線匡圖 / Wireframe

Red Cross 22

字型與色彩 / Font ＆ Color

Fonts

Avenir

Ink Bandits

Color Palette

# FF4E4F # 4D566D # F4F1F1 # FFFFFF

23

介面設計視覺稿 / Mockup

Newsfeed

Newsfeed Index

Video Card

Photo Card

Red Cross 24

Event

Event Search

Check In

Event Index

Check Out

Event Information

Comment

25

Volunteer

為增加義工對於活動的參與度， 在義工個人頁設計了類似遊戲 化的個人儀表盤，紀錄每一位義

工的歷程，並藉由APP社群相互 分享。

Volunteer Information

Leaderboard

Red Cross 26

Special Homescram

由於紅十字會的義工年齡層相 當廣，因此分別針對高齡者與兒 童設計出不同的主介面。

針對高齡長者除了針對按鈕尺 寸與佈局進行調整外，也對於按 鈕icon

進行重新設計，增加圖

像差異化，幫助長者記憶。

Homescram for Elderly

對於兒童所使用的主介面，增加 了更多元的色彩和動物圖樣，讓 整體視覺較為童趣化，此外也調 整了文字敘述方式，讓孩童更容 易閱讀。

Homescram for Children

//////

WEB DESIGN

29

ROG AniMe Matrix™ //////////

ROG AniMe Matrix 30

ROG AniMe Matrix™

Matrix Editor/ Matrix Device Page “ 隨心所欲，展現自我

”

ROG AniMe Matrix™ 是一款專為具備LED 點陣顯示器系列產品所設

計的燈效控制與編輯軟體，可支援包括ROG Zephyrus G14電競筆電、 ROG Delta S Animate 電競耳機、ROG Strix Flare II Animate 電競鍵

盤、ROG Z690 Extreme 主機板... 等裝置。讓玩家客製化燈效樣式，展 現個人風格於裝置顯示器中。

//////

操作流程設計•介面設計•功能規劃•軟硬體整合

2021.07 - Now

共同設計：

華碩設計中心UE Team

31

ROG AniMe Matrix™ //////////

專 案 背 景 ｜ Ｂackground

華碩於2020年推出ROG Zephyrus G14筆電，一款具備LED 點陣顯示器，提供玩家可自定義想要顯示的動畫，於裝置外

觀上。而本專案主要是協助設計此燈效控制軟體的新功能， 並依循既有設計規範為更多此類型產品設計控制軟體。

專 案 任 務 ｜ Mission

本專案主要任務是延續前期的用戶定位與ROG Zephyrus G14裝置的軟體設計思路， 針對新的產品進行燈效編成軟體的設計，產品包括：ROG 系列的電競耳機、鍵盤、主機

板、電競筆電...等，多款具備LED點陣顯示器的產品，重新彙整各項產品硬體規格，與

產品使用定位與情境，進行使用者流程與介面設計，確保該系列產品在軟體使用都遵 循一致的操作定義。並與GUI、RD合作完成軟體開發與產品上線。

Project Research

ROG AniMe Matrix 32

//////

目 標 族 群 / Ta r g e t U s e r s

22-35 歲- Z世代遊戲玩家 1 2

擁抱創意，自我表達 個性化｜個人化

重視真實，追求獨特 簡約內斂｜現代中性｜潮流獨特

Z世代玩家受社群影響，炫耀風氣越來越發達，玩家除了會追求產 品CP值與獨特性，更勇於表達自身想發，追求與眾不同的感覺。

用戶類型 / Product User Type 深入了解Z世代玩家後，我們從新產品 價值中，設定目標用戶與購買需求。用 以深入了解每個產品在具備AniMe Matrix 後潛在的用戶行為。

用戶行為 / User Behavior

從各產品所定義的目標用戶、使用者數據報告與用戶回饋，探索各產品的使用情境，並根據使用行為 與動機歸納潛在的需求，以及可延伸的功能。

33

用戶需求 / User Needs 從各產品中的AniMe Matrix用戶會有的需求去分析歸納後，可以從功能需求及編輯能力兩個方向 來做整合，最終區分出給想要快速套用官方燈效的一般玩家，與追求高客製化的進階玩家，規劃 Basic與Advanced兩個方向，滿足不同用戶在燈效設定的需求。

Strategy & Solution //////

功能圖 / Functional map

Matrix Device Page

Lighting Settings Memory Content

Canvas & Previw

Animation Mode

Armoury Crate

Edit Toolbar Detail Settings Animation Bar

Matrix Editor

System Mode

Audio Mode

Animation Settings Content Library Textfield Settings

Canvas & Previw Detail Settings

Canvas & Previw Detail Settings

Notification Settings

Audio Visualizar Textfield Settings

Design Execute //////

頁面流程/ UI Flow

State Machine for ROG Maximus Z690 Motherboard Matrix Device Page

線匡圖 / Wireframe

Matrix Editor For ROG Zephyrus G14 & Delta S Animate

Matrix Device Page For ROG StrixFflare II Animate & Maximus Z690 Extreme

ROG AniMe Matrix 34

35

介面設計視覺稿 / Mockup

Matrix Editor

for ROG Delta S Animate Headset

採用模組化與群組化的設計思路，區分出工具

區、動畫列、設定區等三項操作區域，並搭配即 時的預覽視窗。讓玩家能針對每個裝置獨立設 定動畫與文字等效果。除了讓玩家能快速熟悉 各項功能的位置外，也能減少未來新裝置加入 時的開發與設計成本。

ROG AniMe Matrix 36

Matrix Device Page

for ROG Maximus Z690 Motherboard and Strix Flare II Animate Keyboard

Matrix Editor

for ROG Delta S Animate Headset

Content Platform for All Matrix Product Family

37

Pocket 38

“ 一鍵整理你愛的商品，不錯過任何優惠時刻。 ”

Q Pocket 是一款針對新一代網購消費族群所設計的商品收藏平臺

，並同時整合既有平台店家會員，除了讓消費者能將猶豫不決的商 品保留起來外，藉由與不同網上店家的合作，以及ＡＩ消費者價值

模型，透過Q Pocket 平台精準推薦商品給潛在消費者，提供消費者 便利的網上購物模式，更增加消費者對於品牌店家的認識。 //////

產品提案•市場調查•使用者研究•介面設計 2019.09 - 2019.12

39

//////

專 案 背 景 ｜ Ｂackground

ＱＤＭ網路開店平台本身提供了相當多元的開店功能給店家，包含分級會員、推薦商 品、行銷工具等等。QPocket 是ＱＤＭ針對Ｃ端族群所推出的新產品，期望藉由提供不

同的購物工具，來提升消費者在網購時的便利性，並同時整合現有的開店平台功能， 提供新的銷售管道給站上店家。該專案主要還在構想與評估階段，故我的工作著重於 使用者需求探討、市場調查、產品提案以及初步設計階段。

問 題 發 現 ｜ Ｐroblem

在收集店家的客服訊息以及在與店家進行訪談後，發現消費者在網購時，會因為部分

原因而在商品加入購物車後，遲遲不進行結帳，甚至最後將網頁關閉。日後透過後台 數據及觀察，發現不進行結帳流程，有以下幾點原因：

• 消費者對於商品價格、運費產生猶豫，因而暫停購物流程，最終忘記回來察看商品。 • 查找商品時，對於同類型商品會進行重複瀏覽及互相比較。 • 為了等待商家優惠活動或免運時段，而延後下單。 • 結帳流程過於繁瑣，因而暫時擱置。

Pocket 40

設 計 目 標 ｜ Design Ｇoals

專 案 限 制 ｜ Project Constraints

希望能夠推出一款簡易的消費者線上購

本專案期望以簡易網站服務為主，必須以

讓使用者能有更好的購物體驗外，更能幫

主，需 減 少 團 隊 開 發 時 間，並 符 合 系 統

物工具，解決購物閒置並整合平台會員，

連結商家消費者會員與平台行銷工具為

助店家推廣商品到潛在買家。

RWD跨平台系統設計規範。

Project Research //////

使用者調查 / User Survey

藉由網站後台資料與ＧＡ資料，發現一部分的消費族群，因為商品運費、價格產生消費猶豫

，而會用網購工具來進行購物，如：現金回饋服務、比價網、痞客邦...等等，更發現網購族喜

歡將感興趣的商品透過臉書收藏起來或使用LINＥ傳給好友一同討論，近而來回檢視同一 個商品頁。所以我們針對上述需求歸納了幾項可能的需求服務，能與網購相互連結的產品

（包含既有的網購服務） ，期望找出可能的切入機會。 現金回饋 比價網

商品收藏

商品頁

商品頁

加入購物車

部落格

人物誌 / Persona

在經過與站上店家的合作所進行的問卷調查，以及網站後台消費數據，經過一個月的整理 與討論，歸納出以下三種類型的年情族群，作為產品的潛在使用族群。 Target User

Secondary User

Tertiary User

姓名

王婷惠

林慧齊

陳俊祥

職業

行銷企劃人員

大學生

後端工程師

年齡 網購頻率

網購目的 最終結帳原因

28

一週一次

購買日常所需或搭配網 購優惠活動購買關注已 久的商品 商品有需求且獲得相關 購物優惠或促銷活動

20

兩週一次

在社群媒體上看到討論 度高的商品或同學之間 團購

想要且商品價格合理，同 時能省去運費

24

一個月一次

過節、生日購買禮品或 累積紅利省下出門的 時間

商品有需求，且相對急 迫，有信用卡相關累計 優惠

41

Strategy & Solution //////

使用者故事 / User Story 問題統整

初步需求規劃

消費者常因為商品簡介來不及查看完商

提供給消費者一個簡單的商品收後購買

物流程，最後不小心將購物頁面關閉，或

能一鍵將商品收藏起來，並且不限單一店

觀望商品

品內容，或因為價格、運費等因素停滯購 忘記回頭繼續完成購物。

商品比較

消費者在查看商品時，對於相似產品，或

不同品牌的相同產品時常來回比較，比較 其內容、價格等資訊。

等待優惠

服務，協助消費者還沒預覽完有興趣時， 家。

提供給消費者一個獨立的比較列表，能將 有興趣的商品加入比較。

消費者在將商品加入購物車後，多半會等

藉助商品收藏功能與店家後台連結，主動

下單，因而長時間將商品放置於購物車。

者個需求，進而調整促銷活動及會員優惠

待商家的優惠活動，或是免運時段才進行

結帳流程繁瑣

追蹤會員所關注的商品，讓店家了解消費 方案。

由於現今站上店家的會員系統是各自獨

推動聯盟會員登入服務，將本服務的會員

新申辦會員，並填寫收件資料，因而增加

店家會員登入頁直接登入，並使用已儲存

立的，當來回於不同店家購物時，皆須重 消費者的結帳時間。

系統製作成註冊快捷按鈕，讓消費者能在 的收件資料進行購物。

探索解決方案 / Exploring Solutions

在經歷過幾次的專案會議與專家訪談，最終在

考量到專案限制與開發等因素，決定已稍後購

稍後購買

買商品暫存作為主要產品服務，並整合店家商 品內容，製作成一套簡易的綜合型商品目錄（享 逛街） ，以及獨立的會員系統，連結店家會員與 店家商品。

享逛街

ＱＤ Ｍ 會 員

Pocket 42

功能圖 / Functional map

Design Execute //////

線匡圖 / Wireframe

43

介面設計視覺稿 / Mockup

Color Palette

# 1D90C8

# 000000

Fonts PingFang TC

● 享逛街-主頁面

DESKTOP ｜ MOBILE

# 9E9E9E

# FFFFFF

Pocket 44

● 珍藏商品（卡片模式）

● 珍藏商品（清單模式）

DESKTOP ｜ MOBILE

● 關注店家

MOBILE ｜ DESKTOP

45

● 帳戶設定-常用地址

DESKTOP｜MOBILE

● NavBar

MOBILE ｜ DESKTOP

Pocket 46

● 最新消息

MOBILE ｜ DESKTOP

● 享逛街-找店家

DESKTOP｜MOBILE

47

買器 48

“ 擺個好位，添加『 買器 』 ”

ＱＤＭ 網路開店- 買器是一款專為站上店家所規劃的行銷工具，專 為平台店家商品行銷所設計的整合行銷售工具。同時整合消費者

價值模型，找出潛在消費客戶並進行分群，解決店家在商品推廣上 的廣告問題，以及優化消費者在購物流程上的操作體驗。

//////

使用者研究•介面設計•產品功能•專案規劃 2019.07 - 2019.08

49

//////

買器

將 你 的 商 品擺放到任何角落

專 案 背 景 ｜ Ｂackground ＱＤＭ網路開店平台提供給網路店家需多開店基礎服務和功能。其中包誇多項的商品 行銷及廣告工具，如：受眾中心、電子報、簡訊等功能。但平台上對於社群媒體的產品

推廣，以及廣告分潤等服務較不成熟，在受到需多店家意見與回饋後，期望設計一款 整合行的社群銷售功能，解決店家在產品行銷上的問題。因此該專案我主要圍繞在與

店家進行討論，了解店家的需求後負責專案的使用流程規劃、產品功能、介面設計及 收費模式等四大項目。

買器 50

問 題 發 現 ｜ Ｐroblem 最初ＱＤＭ 平台於2013開始提供給需要網路開店的店家，透過各項平台工具，打造適合的

購物網站。隨著開店所需的功能陸續建置完成，使用者開始對於商品行銷、社群經營、廣告

分潤等購物服務出現問題與需求。尤其是廣告投放受眾不夠精準，以致廠商投入大量行銷 成本卻只有極低的觸擊率與點擊率。

設 計 目 標 ｜ Design Ｇoals

專 案 限 制 ｜ Project Constraints

希望藉由設計一款店家專用的行銷工具，

本專案為平台功能之擴充專案，需搭配原

連結平台既有行銷功能，以及優化消費者

段性更新服務，介面設計上除需維持既有

解決店家所面臨的商品行銷問題，並同時 購物流程。

有平台其他功能。此外，本專案為未來階

平台視覺一致性外，還需考慮後續功能擴 充所需之介面編排型式。

Project Research //////

訪談 / Interview

為了釐清店家對於商品行銷的需求，以及在操作社群和廣告時所面臨的問題，邀請了三組 站上活躍店家的行銷人員進行訪談，以了解核心問題與產品需求。 chochoco 巧克力專賣 社群行銷專員

『 在與部落客進行合作時，時常需要計算商 品導購率，並定期進行分潤。 』 美福食集

數位行銷人員

『 商品時常會針對客群，在不同社群廣告透 過圖文和超連結置入商品。 』 patya 打鐵仔 行銷企劃人員

『 商品多半需要嘗試不同的Banner，並觀察 怎樣的文案較多人會近一步查看商品 。 』

51

競爭分析 / Competitive Analysis

藉由競爭者分析了解現有的解決方案與服務，找出新產品可能的特色與可能的解決方案。

導購快捷 數據分析 導購分潤 其他功能

Buy Button 一頁式導購頁

HandsUP 直播導購

一頁式導購頁

營銷活動分析 市場分析

轉換率、購物車、收尋 顧客、商品

轉換率、購物車、收尋 顧客、商品

授權API 開發

商品促銷活動 （整合折扣碼）

無

部落格程式碼嵌入

會員可購物金、購物提醒信 LINE 訊息中心

會員可見價、直播串接 電子報會員群發

Strategy & Solution //////

探索解決方案 / Exploring Solutions

藉由訪談及競爭者分析後，可將需求分為兩大需求，分別是針對商品導購管理，以及消費 者行為分析。因此決定提出一款以社群行銷為導向的系統性行銷服務（功能） ，核心業務在 整合消費者數據，提供店家行銷相關服務！

買器 52

功能圖 / Functional map

頁面流程 / UI Flow

53

Design Execute //////

介面設計視覺稿 / Mockup

ＱＤＭ 擴充功能 商品行銷工具 - 買器

Color Palette

# 63B8AB

Fonts PingFang TC

# 000000

# 959595

# FFFFFF

買器 54

Button Stytle Icon

商品短網址

商品卡 Ａ

商品購物按鈕

商品卡 Ｂ

商品標籤按鈕

商品酷卡

01.

基本設定 Creat Page

55

02.

按鈕設計

Creat Page

版型樣式•外型與位置•顏色與文字

由於每間店家的網站介面風格不盡

相同。因此在按鈕設計部分除了提

供多元的樣式，也給予更多客製化 的外型設定選項。

買器 56

03.

分潤設定

Creat Page

在與店家訪談後，發現每間店家所 採用的分潤方法都不相同，最終在

與店家討論後，先提供兩種分潤設 定方式給店家自行設定。

04.

進階設定

Creat Page

為確保日後本專案能因應使用者的 回饋及需求進行功能上的擴充，多

設計了進階設定的頁籤，能針對使 用者需求擴充按鈕設定項目。

57

05.

產生按鈕

Creat Page

06.

按鈕總覽

Creat Page

根據訪談結果，將多半店家較關注的數據統整到按鈕總覽中，便於使用 者在管理按鈕的同時也能了解商品行銷狀況，即時針對廣告文案與需求 進行調整。

買器 58

07.

快速購買頁

Shopping Page

快速購買頁除具備RWD響應式設計

外，也整合了商品選單，讓店家在建

立按鈕時能預先搭配商品選項，縮 短消費者的購物流程。

59

BonBonMusic 60

“ 打造專屬音樂生活圈，讓學習變得更簡單 ”

BonBonMusic是個專為音樂學習者所打造的音樂家教媒合網路

平台，擁有200多位不同專長的音樂老師，橫跨30多種的樂器教學

與音樂課程。整合了課程開設、課程搜索、課程預約、課程管理、老 師履歷，打破空間與時間，讓想學習音樂的同學，透過這個平台找 到適合自己的音樂老師。 //////

使用者體驗設計•介面設計•產品功能 2018.07 - 2018.10

共同設計：Janet Huang

61

專 案 背 景 ｜ Ｂackground ＢonBonMusic 音樂家教媒合平台是一款媒合音樂老師與學生的網路服務工具，學生 可透過線上預約課程後，與老師在線下進行授課。由於該平台還在MVP的試營運階段

，部分網站功能、使用流程、網站介面都還有許多待改善的地方。期望透過網站的功能

升級、視覺設計，以及使用者體驗設計，優化整體平台使用體驗，並解決平台學生與老 師所面臨的問題。

問 題 發 現 ｜ Ｐroblem ＢonBonMusic 音樂家教媒合平台在第一版ＭＶＰ平台上線後，在學生端與老師端都

有許多使用者透過客服反應網站功能問題，以及網站不易上手等問題，不管是在老師 申請、開設課程、課程預購，或甚至是課程預約規則等等，因而導致課程維護與課程行 銷相當不易進行。

BonBonMusic 62

設 計 目 標 ｜ Design Ｇoals

專 案 限 制 ｜ Project Constraints

本專案希望透過使用者研究找出現有平

由於該設計專案需依照絕大部分的舊版

視覺介面的更新，優化網站整體操作體驗

端切版時程。因此需於兩個月內完成所有

台使用性問題，並藉由使用者體驗設計與 及解決學生與老師所遇到的使用問題。

Project Research

網站後台系統，也必須配合委外公司的前

視覺稿，並符合新的視覺規範與RWD跨 平台系統設計規範。

//////

現有問題 / Problems 由於團隊最初開發已基礎功能為主，為導入任何使用者體驗設計、視覺設計等方法，因此藉 由與其他設計師討論與客服回應，初步針對網站使用觀察出幾項問題。

學生端

•課程搜尋缺少搜索指引，容易出現錯誤搜尋。 •課程篩選項目過多，且易遮蓋課程資訊。 •課程封面照用意不明。 •購課頁面缺少流程指引，表單佈局過於擁擠。 •按鈕與視窗中的符號與顏色不一致，易誤判。 •課程管理頁文字用詞與編排，學生不易理解。 •個人簡介儀表內容不足，學生使用率不高。 •課程評價缺乏詳細回饋，使學生草率填寫。

使用者調查 / User Survey

老師端

•教師申請說明頁，缺乏詳細的文件準備說明。 •申請資料表單欄位眾多，可能需分區整理。 •部分欄位選項過多，需給予文字搜尋。 •課程管理頁，過於複雜新手老師不易管理。 •老師簡介頁呈現方式過於樸素，無法引導老 師詳細填寫簡介，並讓學生快速閱讀。 •課程開設頁面表單和課程種類眾多，缺乏引 導說明老師無法快速上手。 •完課機制與改課方式繁瑣，老師容易遺忘。

為了解與釐清現有平台使用上的諸多問題，並深入探討老師與學生不同的使用思維。因此

除了藉由Google Analytics和1對1電話訪談的方式，探究學生的核心問題，也舉辦了兩次 的老師加速器活動，透過焦點團體法找出老師們的問題共通點，最終將各項問題進行彙整

，提出可能的改善方案。

63

競爭分析 / Competitive Analysis

由於在與老師進行討論時，發現有需多老師使用過其他家教、接案網站尋找學生。為了筐

列平台的使用客群與未來主打的服務特色，因此針對其他不同屬性網站進行初步競爭者 分析，協助找出產品的解決方案同時，也探究平台的差異化。

Strategy & Solution //////

使用者故事 / User Story

在與老師與學生訪談後，找出了四個大方向的問題點，並提出對應的設計方案。 問題點

網站介面編排臨亂 不易操作

解決方案

- 分離學生與老師介面 - 網站編排重新規劃

- 統一 網站介面風格 - 創建課程續約功能

- 履歷撰寫分類與範例 - 新增教學成果儀表

- 手機版介面獨立設計

問題點

平台使用流程與規則 複雜引導性不足

解決方案

- 課程管理規則與程序 重新規劃

- 製作老師申請、課程 開設操作懶人包 - 規劃人員協助SOP

- 設計常見問題說明頁

問題點

使用者不易理解 品牌意象與服務內容

解決方案

- 規劃新的企業識別

問題點

產品獲利模式不足 老師跳單率高、續課率低

解決方案

- 規劃老師培育課程

- 擬定網站設計規範

- 新增老師清單功能

- 統整其他服務視覺

- 追蹤老師授課狀況

- 製作品牌行銷素材 - 規劃品牌行銷文案

- 設計學生需求問卷

BonBonMusic 64

使用者流程圖 / User Flow

老師開課流程

學生購課流程

65

使用者旅程地圖 / User Journey Map 學生端

老師端

BonBonMusic 66

67

系統地圖 / Sitemap

BonBonMusic 68

69

Design Execute //////

品牌意象 / Brand Image

情緒板 / Mood Board

BonBonMusic 70

字型與色彩 / Font ＆ Color

Fonts

Color Palette

# F26C77

# 495EAE

# F0BB4C

# 282829

# 58595B

# 8A8C8E

71

介面設計視覺稿 / Mockup

ＢonBonMusic RWD Website

BonBonMusic 72

●

更多課程

更多課程-篩選

新版課程篩選視窗，改用全屏模式， 讓使用者能專注於選擇需要的條件

，並利用標籤及字體顏色區分多選 項目與單選項目。

73

●

課程內容 - 老師

●

課程內容 - 組織單位

BonBonMusic 74

●

付款資訊

新版付款頁除了藉由視覺優化，提 升選單清晰度，更加入了程序指引 與摘要資訊卡，幫助使用者了解購 課流程，並在進入最終付款時，也能 清楚檢視所有訂單內容。

●

完成購課

75

新版老師端管理頁面，除了針對老師主頁中的教學經歷，藉由簡介劃分，將 自我介紹、教學內容、個人履歷個別獨立，引導老師完整填寫個人簡介。 ●

老師主頁

開 課 管 理 部 分，透 過 圖 示 I CO N 與 頁 籤，將 複 雜 的 課 程管理選項，逐一區別開來

，同時幫助老師容易熟悉開 課介面。

●

我要開課

BonBonMusic 76

●

由於過往課程內容頁表單 多，且 組 成 複 雜，因 此 新 版 介面使用卡片式的方式，搭 配項目清單列，讓老師能按

照順序填寫課程開設所需 的內容。 ‘

- 課程封面照彈出視窗 -

- 上課位置與價格彈出視窗 -

- 上課程時間彈出視窗 -

課程內容

77

ＢonBonMusic Teacher APP

BonBonMusic 78

介面流程圖 / UI Flow 老師端管理APP流程

介面設計視覺稿 / Mockup ●

起始畫面

Email Sign In

Phone Number Sign In

79 ●

我的課程

My Course Index ●

My Course Info

收件夾

Course Questions

Course Notice

Course Link

BonBonMusic 80 ●

我的課表

Weekly Schedule ●

Teaching Records

設定

Setting Index

Personal Info

Reset Password

//////

Thanks for watching.

+886 917-680220 jerry10jerry10@gmail.com

//////

設 計 不 僅 僅 是 視 覺 與 功 能，好 的 設 計 是 一 種 無 形 的 體 驗

2018 2022

//////

Wait for you .