Portfo!io HSU HO-YAO
About
Those who plant in tears will harvest with shouts of joy.
凡流淚撒種的, 必歡呼收割
HSU HO-YAO 1992Industial Design, Wuhan University. D-Source Co. Designer Teamson Design Co. Graphic Designer GreenWave Company. Graphic Designer Obiz Design Co. UI Designer
project experience
Skill
2014.12 GlenFarclas Horsestand wisky stand
2D_Photoshop \ Illustratrion \ XD \ Figma 3D_Alias \ Rhino \ 3DMAX \ Keyshot HTML \ CSS \ Python \ Zeplin
2015.03 GlenFarclas 60th stand & package 2016.02 Balvenie wood lego shelf 2016.10 Fantasy Fields Tmail Website design 2016.12 Church chrismas decoration 2017.01 Versanora VVV bookshelf 2017.04 Teamson kids animal bookshelf 2017.08 Olivias’s Modern doll furniture
+ Tel: 0963876280 E-mail: z26879391@gmail.com
2017.12 Hongkong tradeshow booth design 2018.11 Danofence CIS redesign
Content
UI/UX design / TPM Fans club magazine
graphic design / Branding design
/ Website layout
/ FB Post
/ Zespri post
/ Weibo post
/ Sneaker painting
booth design / Shanghai medicine booth
Photo design / Interest
U!/UX design
TPM頂級啤酒粉絲俱樂部
UI/UX design
2020.01 - 2020.08
TPM頂級啤酒粉絲俱樂部
UX Research
About Project
服務客戶 三得利 執行時間 6 month 專案負責 UX research, IA, wireframe, flow chart, prototype, mock up.
專案背景 專為TPM啤酒VIP客戶服務，除了最新消息、歷史沿革、工廠介 紹等品牌相關資訊；同時提供用戶註冊/登陸、發票查詢、預購 商品等功能性服務。
期望目標 1. 幫助使用者更加了解TPM品牌精神以及品牌文化。 2. 協助使用者在進行發票登錄/贈品兌換時順利的完成目標任務。 3. 優化行動裝置操作體驗。
TPM頂級啤酒粉絲俱樂部
UX Research 使用者訪談 專案針對此客群：25-35歲上班族、中年男子，進行初步訪談並 使用者研究、收集
製作Persona
重新設計之前，先了解其他特定使用者是否也有相同的問
關於
痛點
題。透過訪談對話了解真正的需求，以此為基礎進行設計
年紀：32
長期在外奔波拜訪客戶，無法長 時間透過電腦操作。希望有更便 捷的方式能夠了解兌換消息以及 發票登錄。
職業：注重生活的業務 使用頻率：一個月3-4次 最常使用功能：
Ken Wu
發票登錄、查詢點數、贈 品查詢
目標與追求 可以更容易透過手機進行發票登 錄等功能，
定義問題與方向
WHO 怎麼樣的使用者會使用TPM俱樂部網站？
行動裝置優化
介面資訊 更清楚辨識
主要功能 更符合需求
原本沒有針對行動
原本同一頁面承載
透過用戶研究發現
裝置優化，手機頁
太多資訊，操作動
後，了解用戶對發
面容易出錯跑版。
線混亂，使用者容
票登錄、點數查詢
操作錯誤時只能返
易迷失方向。因此
等功能需求大。
回上一層修改。
重新調整資訊架構
WHY 是什麼原因而選擇該品牌？以及使用相關會員服務？
HOW 操作過程中是否有好的體驗？是什麼？是否有不好的體驗 ？是什麼？
TPM頂級啤酒粉絲俱樂部
UX Research
最新計畫
會員制度 會員規定
資訊架構
關於會員
原有資訊架構較沒有組織性，使用者容易迷失方
積點辦法
向。因此根據主要需求與問題方向重新調整主要 功能架構，讓資訊層級清楚劃分，讓使用者直覺
會員權益
性操作。 匠心職人精神 啤酒工廠巡禮 確認年紀
首頁
通訊誌 釀造家的堅持 匠心職人精神
美食逸品圖鑑
啤酒工廠巡禮
發票登錄
釀造家的堅持
積點活動
點數查詢 贈品兌換
美食逸品圖鑑 手機號碼登入 登入/註冊
LINE帳號登入 加入會員
TPM頂級啤酒粉絲俱樂部
UX Research
登陸發票工作流程 在用戶研究中，發現登錄發票為使用者主要需求 ，因此在設計上也特別著重這一部分的流程。
手動登陸
首頁
MENU
發票登陸
QRcode登陸
開啟相機掃描
載具圖片相關
發票登陸完成
TPM頂級啤酒粉絲俱樂部
Mock up
首頁RWD 原產品首頁資訊排列雜亂，各個區塊視覺元素沒 有統一，無法讓使用者對品牌形成記憶點；同時 原本的視覺動線及閱讀方式不理想，無法讓使用 者流暢地辨識內容。
不同於以往將所有內容壓縮在一個視線範圍中，為了營造 品牌高品質質感，一個視線範圍中只會呈現一個區塊的內 容，讓使用者能夠更加聚焦在品牌希望傳達的內容上。
兩版塊之間透過品牌標語+品牌風景區塊，營造版面閱讀 節奏感，同時加深使用者對品牌精神的印象。 不同大板塊在遵循使用者閱讀習慣從左至右的基礎上，透 過排版方向的不同(由上之下、由左至右) 以及細節變化， 提高使用者在首頁的留存率，並延長觀看時間。
TPM頂級啤酒粉絲俱樂部
Mock up
註冊流程
重新設計欄位，未輸入欄位 提醒需填入的資訊，透過顏 色變化引導使用者更直觀的 完成操作
針對特定欄位優化，讓使用 者理解是要自行填入或選單 選擇，提高操作效率，降低 使用難度。
用進度條告知用戶目前的操 作狀況，幫助使用者知道自 己的位置。
TPM頂級啤酒粉絲俱樂部
Mock up
登陸發票流程 原發票登錄系統切換需退回首頁重新操作，操作 不便利；優化後使用tab bar快速切換登錄發票 方式，有效提升使用者登錄發票體驗。
TPM頂級啤酒粉絲俱樂部
Mock up
贈品兌換流程 原會員中心為條列式排版，難以從文字判斷具體 包含的服務，增加學習成本。因此改以圖標+文 字展示，降低學習成本便於使用者辨識內容。
贈品兌換流程加入購物車功 能，優化使用者管理贈品兌 換的體驗。下方固定結算功 能區塊，提高轉換率。
Graph!cs design
Graphics design
BRANDING DESIGN
去除異味、淨化環境 你可以選擇NO.1
丹諾凡斯Danofence 品牌識別設計
Graphics design
BRANDING DESIGN BRANDING SPIRIT
LOGO BRAINSTORMING
A
B
丹諾凡斯
Daofence希望構建讓消費者不再擔心食安問題的消毒體系. 因此 使用由義大利進口的消毒水技術. 同時為了營造本土品牌風格, 希望融入內斂的中國元素, 打造義大 利技術中國品牌的品牌風格.
C
D
E
F
最終在眾多的logo種選擇了墨水暈染效果的版本, 同時具備了中國傳統元素及協調的顏色搭配. 與丹諾凡斯的品牌精神不謀而合.
Graphics design
BRANDING DESIGN PACKING DESIGN
包裝設計結合手繪及暈染效果 創造出特別且易於辨識的品牌風格
Graphics design
Website Design
官方活動頁面
官方活動頁面
Graphics design
Website Design
雙11店面裝修
品牌介紹頁
Graphics design
FB Post
Graphics design
Zespri Post
部分作品選
Graphics design
Weibo Post
部分作品選
Graphics design
Shoes Painting
Model: Air Jordan 1 “Jeter” Tool: Photoshop \\\
Model: Air Jordan 8 “Bugs Bunny” Tool: Pencil \\\
booth design
Booth design
看見中國農業科技展
Graphic design
公司內部進行大量討論後, 最終決定摒棄所有多餘的介紹, 集 中在販售商品及應用場景上. 因此放大主標比重輔以產品圖片.
Booth design
看見中國農業科技展
Render
6m
3m
參考了大量動物的素材後, 摸索出簡潔又兼顧功能的造型. 滿足書架功能的同時, 也能讓小孩 坐在書架上看書.
Booth design
2018北京京正嬰童展
Render
搭配品牌識別將背板設計成雲朵的 形狀, 同時輔以品牌塗鴉元素
Booth design
2018北京京正嬰童展
1:1 圖稿確認
1:1 CAD圖稿確認
pho!ograph
Photo-graph
Photo-graph