UIUX & Graphic design portfolio 2023

Page 1

PORTFOLIO

HUANG ZI JIA

2022 UIUX

我是黃子嘉,畢業於台灣科技大學工業設計系,目前為一名UI設計師,負責介面設計 及使用者體驗優化,具有社群圖文及介面設計等經驗,曾將舊版APP優化為符合公司 產品需求等,在團隊中負責視覺呈現,對跨域溝通也有充分學習

康、心理、知識管理、產品等APP專案,也有行銷文宣、包裝、海報等設計經驗,就

。另外,也執行過健
學期間透過精進自我獲得了國際IF設計獎、金點新秀入圍三項類別及晟銘盃科技應用 大賽入圍,對設計保持熱情及十足學習心。 About me 0975-600-030 Taichung , Taiwan start062677@gmail.com
JIA

Experience Project

金點新秀設計獎

產品設計類 / 循環設計類 / 工藝設計類

2021

群玩科技公司

GUI / UI 設計實習生

玉山青年菁英設計工作坊

2021

籌備組工作人員

IF DESIGN TALENT AWARD

2021

Health Beauty (health APP)

2020

晟銘盃科技應用大賽 入圍 O+

藥盒水壺

臺科大設計週作品展

2020

產品類參展

2018 - 2022

國立臺灣科技大學

設計系工業設計組

2015 - 2018

台中市立大甲高中

室內設計科

Design skills

UIUX | 使用者體驗設計 | 設計思考 | 視覺元素

Illustrator | Photoshop | Figma | InVision

心理引導APP 專注閱讀APP 健康管理APP
文明病APP 智能水壺APP 智能烘焙秤APP 2020 2021 2021 2021 2022
CONTENT 01 UIUX 心理引導APP設計 06 UIUX 專注閱讀APP設計 02 22
HUANG ZI JIA Graphic design 04 衛生棉包裝設計 56 Graphic design 05 社群圖文 64 UIUX 03 文明病APP設計 40

《紀錄迷失的心靈,找回嚮往的花園》

心靈花園是一款透過建構式問題結合植物生長的心理引導 APP,

藉由趣味化的栽種過程,引導想要走出事件壞心情的使用者,在

療癒自 我的同時,認識更深層的自我。

研究 : 團體 / 視覺 : 個人 garden 2021/03 - 2021/06 專案時間 設計分工 01

Background

# 壓力的本質:個人與環境的互動和評量

壓力是一個連續變化的動態過程,而非靜態的間斷現象。個人會不斷地評斷所處環境的要求,並試圖運用各種可能的個人

資源(內在、外在),以認知和行動來因應壓力,試著重建個人與環境間的平衡。 壓力源 (自變項) 壓力造成的結果 (依變項)

壓力感受、個人資源 (調節因子 / 中介因子)

Problem

而在現況調查中發現,國內多數大學生都有心理輔導的需求,台大2019年個別心理會談人次高達一萬次,清大、成大每學

年度諮商人次也都達六七千人,而國內多數大學生平均得等上3周至1個月才能見到諮商心理師。

20%的美國成年人有不同程度的心理或精神疾病,約 5%的成年人已達到嚴重程度, 但在所有心 理壓力人群中,僅有不到 45%的人群會選擇以心理諮詢、藥物、住院等方式進行治療。

Reserach

心理類產品需求大幅成長

全球用戶最多的10款心理App在去年4月份產生1000萬的下載量,較去年 下載量上漲約25%。

去年第一季度內 心理健康公司的融資總額達到破紀錄的5.76億美元, 比之前的季度最高融資額高出60%。

Interview

訪談對象:6人

5位學生、1位社會新鮮人,年齡19-23歲

群體特性

自我紓解能力較差,無法只靠自己解決或想開問題 認為壓力可以是正向,但並不總是成功轉換負面壓力

短期:釐清問題、防止更多壓力生成,並讓心情變好

長期:讓思考方式活絡,

培養問題處理能力與抗壓性
群體目標
短期面對問題時能更好地思考、防止壓 力生成並 培養長期處理問題能力。 2018-2020 心理健康公司融資總額成長圖表 Q1’20 44 $ 576 Q4’19 $ 115 37 Q3’19 $ 225 52 Q2’19 $ 357 41 Q1’19 $ 210 42 Q4’18 $ 125 22 Q3’18 $ 129 30 Q2’18 $ 247 33 Q1’18 $ 177 33 交易總數 融資總額 短期_自己思考,嘗試弄清楚問題 想出解方 想出但無法/不想執行 未想出 阻止壓力生成 讓 心 情變好 解決問題 變得更有抗壓性 短期_想暫時逃離壓力源 解決問題 長期_尋找徹底的解決方案 現實問題所迫 可與他人進行諮詢 個人_自行梳理 (未構成壓力)
對於「暫時逃離壓力源」已有多種解方,且較不涉及根本,故期望從 另外兩項切入:幫助使用者

Information Architecture

以 引導釐清問題培養問題處理能力 進行設計 :

透過栽種植物幼苗至成熟,引導多方位思考的灌溉

大學生、社會新鮮人

容易在生活中感到壓力的

公有地 個人檔案 登出 資料設定 查看他人植物 移植我的植物 圖鑑 總列表 分類 回顧事件 移植公有地 分享 鼓勵 留言 私訊 選取移植植物 重新命名 完成移植 主頁面 栽種頁 新增 選顏色 輸入事件 命名事件 選取種子 個人花園 採收 收穫果實 陽光 肥料 蟲害 雜草 水 敲殼 完成 問題 輸入回答 栽種動畫 目標 群體
較缺乏自我開導能力的

Wireframe

以 7種植物生長要素搭配建構式問題 為設計核心 : 藉由趣味化的栽種過程,帶領想走出事件壞心情

的使用者,在療癒自我的同時認識更深層的自我

事件紀錄 X 七種引導問題

栽種植物
動態栽種 X 收穫新植物 X 七種栽種行為
開啟 栽種 體驗 回饋 引導問題
《紀錄迷失的心靈,找回嚮往的花園》 garden

初始畫面

#事件梳理 #心靈探索

開始栽種獨一無二的心靈植物

從家園中的一把鏟子

引導頁面_栽種說明書

以栽種說明書作為引導 讓使用者能夠了解心靈花園的運作流程

描述事件

栽種思考流程 心靈植物收成
根據回答呈現對應植物成長增進趣味與成就感 栽種思考七大流程 #建構式問題
以建構式問題對應植物生長元素
#釐清感受 #植栽過程

心靈植物收成

#對應事件植物 #心靈映照 #植栽動畫

以最終步驟敲殼,敲開專屬於你的心靈植物

也會不定期飄出過去相關事件提醒自我 畫面背景也會隨著時間、心靈感受變換 家園_自己的花園 季節變換
最新的心靈植物會展示於家園
長期未使用 白天黑夜
#交流鼓勵 #多元思考 選擇性地移植植物到公有地 拓寬思考維度認識更多角度思想 公有地
garden
video figma

徜徉在浩瀚資料庫,建造專屬你的知識寶庫

專注閱讀是一款結合存取資料與培養閱讀習慣的APP,在專注閱讀,

累積的每篇文章都是能使你堡塔強大的子民,按照文章重要程度進行

分級制度,你的閱讀能夠使他們找到屬於他們的領土得到歸屬

研究 : 團體 / 視覺 : 個人 2021/04 - 2021/06 專案時間 設計分工 02

Background

資訊量暴增的年代,跟不上資訊速度已造成現代人焦慮,為了 成就自我跟上腳步,進而存取過多文章,文章累積與閱讀速度 不成正比,閱讀文章的動力也隨著存取時間拉長而逐漸下降。

Problem

# 文章儲存後不會回顧儲存的文章
看到 資料 存取 資料 回顧 資料
根據投放問卷及深度訪談6位使用者發現以下痛點 :
「有時候資料ㄧ存起來,就會忘記自己存過,或放在哪裡了。」
「存取時覺得之後會讀,沒想到自己這麼懶」

Reserach # 7 成使用者希望/嘗試過解決此痛點

根據40份以上回收問卷結果發現,有儲存文章習慣的使用者佔86.7%

其中,存取後卻不再點開高達92.3%,7 成使用者希望/嘗試過解決此痛點

外部 因素

有興趣卻無法馬上閱讀 而產生存取的動作

經過訪談也發現了以下問題 :

# 閱讀存取的文章經常被排在第二順位

閱讀被認為是一件消耗腦力的行為無法產生樂趣

因此就算 對文章內容或知識有需求進而存取,對

後續「閱讀」卻無法產生吸引及動力

# 文章存取過量,造成回顧困難

文章存取時 缺乏分級標示,不清楚對於文章是

需要或想要,存放過久忘記初衷而更不願閱讀

短期:增加閱讀文章之主動性

長期:培養閱讀,增進充實自我習慣

存取 文章 放棄 回顧

文章累積過量 生心理抗拒過多文章

Information Architecture

以 提升自發性閱讀存取資料進而培養習慣充實自我 設計,

希望閱讀是一件能誘發使用者主動完成而不拖延的行為

個人可利用時間較多

缺乏動力,易受誘因吸引

重要度 標籤 時間 設立閱讀目標 開始閱讀 閱讀文章 選取閱讀文章 主頁面 主頁面 分析 設定 閱讀頁面 存取文章 資料庫 簽到 商店 分類 閱讀文章 暫停閱讀 重要度 存取 閱讀列表 閱讀完成 閱讀分析 年/月/日 輸入文章連結 閱讀文章 閱讀時間 備註 標籤 備註 分類 已讀/未讀 提醒設定 基本資料 設定時間/日期 閱讀時間量 存取文章量 閱讀文章數 系統日曆 連結其他日曆 日曆
目標 群體 大學生、社會新鮮人

Wireframe

以 知識庫做為資料存取並藉由擴建城市引起使用者興趣 : 初期設計風格年齡層偏低,在後續視覺設計做了調整
文章分級存取 存取資料 依照個人安排 挑選適合之內容或時長花費 閱讀資料 查看閱讀分析 記錄個人成長 閱讀完成 享受閱讀帶來之回饋 提升樂趣及成就感 建造堡塔
徜徉在浩瀚資料庫,建造專屬你的知識寶庫
領地圍繞中心資料庫 透過消化閱讀富裕個人知識及堡塔 也象徵資料庫與個人知識的連結 主畫面 簽到 商店 當日日期 閱讀分析
存取資料 子民出現 子民移入領地 獲得知識幣 擴建領土 富裕堡塔 閱讀資料 閱讀完成 建造堡塔
存取資料 讀取中 5星 4星 3星 2星 1星 未標註 APP存取 網頁插件存取 兩種存取方式 : 網頁插件/APP存取 存取標籤分類保留存取初衷 快速存取並簡單分類 不怕遺忘文章位置 #設立標籤 #分級可視化

# 可單篇閱讀或選取多篇文章

# 系統收入文章後自動判別閱讀時間 恭喜

閱讀資料 選取資料進行閱讀 系統依照分析績效給予知識幣 閱讀完成後子民移入個人領地
閱讀目的命名 閱讀列表

將領土與閱讀子民加入分析 除了看見圖表示分析內容

堡塔蒐集也一併顯示成長里程碑

閱讀分析 視覺分析 專注時間 閱讀存取比 #專注時間 #存取閱讀比 分析閱讀存取比與閱讀時間
看見個人閱讀的趨向及成長
正向回饋 #建造寶塔 #合併收藏 多種排列組合創建個人化堡塔 合併蒐集享受閱讀帶來成果及樂趣
負向回饋 限度設定 雜草佔領 文章存取未讀超出個人設定時間 個人堡塔將長出雜草驅趕子民離開 (限度設定可依照個人安排選擇)
資料庫 #依照時間標籤多樣化查找
管理所有資料
文章依照標註收入資料庫 以利需要時方便查看 領土中間的尖塔為資料庫
象徵王國知識中心
figma

馬鈴薯的貼心建議 文明病不再困擾

跳脫以往數據式分析,以淺顯易懂的方式讓使用者找到問題

藉由沙發馬鈴薯角色引導,讓使用者有趣地面對文明病

研究 : 團體 / 視覺 : 個人
2020/10 - 2021/01 專案時間 設計分工 03

Background

當國家變得工業化及人類活得更長壽時,文明病就會變得更多。

現代人緊張的生活壓力常造成許多問題,長期下來找不到解決方 法造成身心靈兩頭燒。根據醫學研究,每天平均有20%-30%的人

因為壓力、不規則作息及飲食不正常,引發了更多的症狀。

Problem

科技的進步卻為人們帶來文明病,而現代人的文明病經常導致...

#情緒受到文明病影響,生活品質大幅降低

情緒起伏不定,身心靈都受到影響

# 不知道文明病起因也不知道怎麼辦

外界訊息太龐大,不知道那些才是正確的

# 造成分心,無法專心在工作上

忙碌於工作,卻又被文明病所困

# 依賴高熱量食品抒發高壓生活

體重持續上升無法維持身材

2018年10大文明病排名

油膩的飲食習慣、攝入過多的精緻糖、頻繁使用電子產品都可能導致文明病。在早安健康2018年的調查中發布了 現代人時大文明病排名,我們挑選了較有相關連結「 全身痠痛 」、「 肥胖」、「 眼睛痠痛 」、「 失眠 」、「 便祕 」,作為

全身痠痛 肥胖 眼睛痠痛 過敏 胃痛 失眠 便祕 頭痛 口臭 蛀牙 1 32% 30% 22% 20% 17% 13% 11% 9% 8% 8% 2 3 4 5 6 7 8 9 10
疾病功能切入點。

Information Architecture

以 找到個人文明病根源以對症下藥 進行設計 :

透過紀錄給予明確指引,降低使用者工作之餘的生心理耗損

社會新鮮人(單身族群)

工作忙碌無心照料身心

飲食較不規律靠食物紓壓

招呼頁面 介紹頁面 登入頁面 運動頁面 選擇連結頁面 主頁面 主頁面 分析 社交 小學堂 設定 基本資料頁面 註冊頁面 開始 登入 輸入帳號密碼 留言 ID/QR code 輸入帳號密碼 輸入基本資料 輸入帳號信箱 資料連結 切換疾病 運動 飲食 任務 角色設定 忘記密碼 註冊 資料連結註冊 下一步 切換疾病 年/月/日 五大疾病 飲食頁面 任務頁面 角色頁面 註冊 創建角色頁面 所有問題頁面 問題分析頁面 配件 完成 下一步 下一步 添加好友 好友列表 基本資料 通知 鼓勵 分類 文章 社群 測驗 登出 登入成功/失敗 是 否 搜尋
目標 群體

Wireframe

以 圖像化 日常紀錄,角色提供建議互動 為設計方向 :

為了降低忙碌之餘的額外身心靈負擔,以角色互動進行

發展,藉此我們挑選5種較有關聯的文明病進行延伸

日常紀錄

分析 建議 利用運動、飲食等日常紀錄, 找出潛在誘發問題因素,並 直接加以標示提醒
ICON
# FBB03B # 00A99D

創建角色

為角色增添個人化的配件 創建屬於自己的專屬馬鈴薯

主畫面
可自由切換任意疾病 讓不同屬性馬鈴薯幫助你更加健康 #自我評估 #日常紀錄

疾病切換

由上方列表切換至不同疾病 功能也會依照疾病有所變化

便秘
全身痠痛 眼睛痠痛 失眠
專屬飲食建議及每日推薦 使用者不須額外耗時查詢所需 #每日推薦 #飲食紀錄 飲食紀錄 依照不同使用者特質 給予不同難易度的運動推薦 #運動推薦 #運動紀錄 運動紀錄
依照日常記錄給予建議與評分
分析
直接標示關鍵問題點並提供提醒 #問題點建議 #健康評分
透過5MB就能在忙碌之餘 補充健康相關知識 #健康知識 #項目分類 小學堂
figma

0975-600-030

start062677@gmail.com

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