Cheng - En Tsai UX/UI PORTFOLIO
PART 1 RESUME
蔡丞恩 Cheng - En Tsai 1990/12/26, Born in Kaohsiung, Taiwan
＋886 952-399069 tsaichengen15610@gmail.com tsaichengen15610@126.com online portfolio link https://www.behance.net/tsaichenge7271
設計以人為本，透過研 究 流 程 發 現 更 好 的 設 計 缺 口 建構美好的交互過程，讓 人 體 驗 更 美 好 的 生 活
EDUCATION
2013-2016
National Taiwan University of Science and Technology (Taiwan Tech) Master of Design, department of Indurstrial and Commercial Design, Major in user testing, user interface and user experience research. Professor - Chien-Hsiung Chen 陳建雄
2009-2013
National Kaohsiung Normal University Bachelor of Design, department of Indurstrial Design.
AWARDS
2014
CID Annual Design Conference
- Outstanding paper
2014
GREAT DESIGN Competition, toy design group
2013
Youth Innovative Design Festival, Product Design
2012
KYMCO Motorcycle Design Competition Cup
- nomination
2011
Bone Award Design Competition
- nomination
- Silver award - Spcial enterprise award
WORK EXPERIENCE
2016/03-2017/03
Tainan YanShuei District OfďŹ ce
2014/07-2014/09
Trend Micro Incorporated
2013/08-2016/02
Human-Computer Interaction Lab
2010/09-2013/06
department of Indurstrial Design ofďŹ ce
2010/07-2010/08
WHT kaleidoscope ad design
- community design substitute service (military) - UID (user interaction desinger) intern - member - assistant - staff (part time)
EXPERIENCE
2015
UXSD workshop
2015
Dept. of Indurstrial and commercial design student association
2015
Design seminarďźš3D printer commercialization
2014
Thinking through making internationa communication workshop
2014
6th OpenHCI workshop
2014
Wisdom electronic aesthetics exhibition
- staff
2014
Design and cultural creativity seminar
- staff
2013
Design seminarďźšThe commercialization of wisdom electronics
2013
NKNU Dept. of Indurstrial design 8th exhibition of graduation
2012
4th workshop of NKNU ID Dept.
- chief coordinator
2011
102 degree ID student association
- event coordinator
- participant - chief coordinator - leader - participant - human resource staff
- visual editor - leader of exhibition
ACADEMIC PROJECT
2015/08-2015/12
空氣清淨機造型設計 財團法人工業技術研究院 結合工研院空氣濾淨技術，提出設計都市環境濾淨大型裝置之外型，改念提案與製作精緻草模 - 產品調查、工業設計、模型製作
2015/03-2015/10
跨境店商服務系統使用性評估 財團法人資訊工業策進會創新應用服務研究所 面談與系統使用性任務操作，歸納介面使用性問題並提出改善介面設計 - 使用性測試、使用者經驗訪談、介面設計
2014/11-2015/02
ICT互動水晶球介面設計 財團法人工業技術研究院 感應不同手勢操作，建構水晶球互動操作模式，提出操作說明手冊 - 產品調查、交互設計
2013/11-2014/05
照射手腕裝置外觀設計 102年度北醫合作計畫「遠紅外線照射對腎素引發血管平滑肌細胞增殖與肥大之影響」 應用於洗腎患者，設計穿戴式紅外線照射裝置，提出設計精緻模型 - 產品調查、工業設計、模型製作
FREELANCE CASES
2016/09-2016/10
擔當者行動響應式網站設計 公益助學民辦機 建構與套用響應式網頁架構於新版網站，優化網站介面 - 介面視覺設計、網站設計
2016/08-2016/09
早餐店POS網站介面架構 台大創新初創團隊 調查現有POS市場優劣與後台管理框架，建構遠端預定系統介面與提出原版改善建議 - 使用者經驗研究、產品調查、交互設計
2016/07-2016/08
美髮預定系統介面設計 台大創新初創團隊 市調訪查預定系統之定位，訪談關係使用者經驗與建構預定流程，提出概念性系統介面 - 使用者經驗研究、交互設計、介面設計
2016/05-2017/03
鹽水區公所視覺識別系統 臺南市鹽水區公所 重新設計公所logo、名片、指標、桌牌、簡報樣板、紀念像框，提供新版視覺識別 - 視覺設計
2014/11-2015/02
可繞式介面展示裝置設計 財團法人工業技術研究院顯示中心 可繞式介面應用於行動裝置，設計展示精緻模型 - 工業設計、模型製作
PAPER & CONFERENCE
MASTER
平板手機即時通訊介面選單設計與使用手之研究
RESEARCH
A Study on Menus Design and Using-Hands for Instant Messenger User Interface of Phablets
2015
虛擬環境中3D 視覺指引研究 陳建雄、陳詩捷、蔡丞恩、蕭如惠、林子虹 2015中華民國設計學會設計學術研究成果研討會論文集，雲林科技大學，2015年5月16日，p.1-6
2014
手機即時通訊軟體之互動介面使用性研究 蔡丞恩、陳建雄 2014中華民國設計學會設計學術研究成果研討會論文集，大同大學，2014年5月17日，p.316-321
2014
智慧電視裝置互動介面之使用者行為研究 陳建雄、鄭雅方、蕭文信、蔡丞恩、陳怡安 第21屆人因工程學會年會暨研討會論文集，國立勤益科技大學，2014年3月29日，p.1-8
COMPETENCE & TOOLS
UX research
Product design
UI design
Event planning
Usability testing
Visual design & Layout
Ai
Ps
general
Id editing
Ae
sketch
proto. io
UI ( mockup / prototype )
ProE
Keyshot
3D product
SPSS
statistics
PART 2 UX/UI PORTFOLIO
CONTENTS 1.Hair salon reservation system
- Reponsive Web Design
2.Post ofďŹ ce assistant
- App Design
3.Easy parking
- App Design
4.Donator
- Reponsive Web Design
project 1 HAIR SALON RESERVATION S YSTEM - Reponsive Web Design
Hair Salon Reser vat ion System
2016 Free lance project U X- UI des ign
Design Brief 臺大學生創業資工團隊想要建構新的web reservation，期望未來此系統套用在各種行業上， 經過發想與調查後，決定以小眾市場-美髮業作為切入點，尋求設計師提供設計概念。
其中系統又以HTML網頁形式建構，訴求未來使用者能免安裝程式步驟，直接進入系統使用。
Design Process research survey
user flow
wireframe mockup
相關系統/平台調查
系統網頁定位
框架草圖
訪談
功能地圖
響應式介面
現有理髮店現況/規模 顧客旅程地圖
服務觸及地圖 框架流程地圖
消費者端介面設計
Research 相關系統/平台調查
現有理髮店現況/規模
訪談 1 &
1 2
miss
3
ipad
4
FB
FB line
line
1
30
2 line
3
4
line
line
line
line
line
line
5
6 7
fb
line
8
9 line
line
line
insight
FB(2)
line(5)
(6)
(line) miss
line
line
reservio
https://www.reservio.com
simplybook
http://tw.simplybook.me https://tw.news.yahoo.com/ simplybook-.-me-045400685.html
Agenda
https://www.sagenda.com
chechfront
https://www.checkfront.com/ support/docs/add-ons/ google-adwords
plane
http://www.planyo.com/ features.php
http://www.eztool.com.tw
EzTooL EzNail(
)
http://www.ez-nail.com/zh-tw/ default.aspx http:// www.lohas.torabao.com http://www.rwdweb.com.tw
現有13間相關預約平台/系統
調查不同規模店家 所使用的預約方式
http://www.heimavista.com/ files/ 15-1303-9935,c4241-1.php? Lang=zh-tw http://www.yding.com.tw/ service.aspx Lhasa It
http://www.lohaslife.cc/ archives/1453
4位美髮店設計師
9位有預約經驗顧客 1
預約階段
Ｃustomer Journey Map
前
資訊階段
電話 通訊軟體 網路系統
從名片/廣告文宣/網站 /實體消費獲得預約資訊
顧客
1
事實 問題
2
3
4
1
5
6
7
2
問題
等待
9
10
紀錄預約資訊
12
事實
8
13
6
14
7
後
現場服務
提出預約時間/聯絡訊息 /服務項目/其他
電話 通訊軟體 網路系統
網站資訊更新/維護 實體名片/廣告宣傳
店家
中
預約溝通
預約途徑
15
接待
16
8
事實2 事實3 事實4 事實5
染燙提早一兩週預約，因為女生一次大約就半天了， 所以比較難約 第一次用手機，第二次後用line line有比較熟的感覺
用line比較有會員的感覺，比較親近 不用手機的原因是考慮電話費
打電話預約，覺得比較快，可以直接回覆和確認
問題1
事實8
如果設計師記錯時間，有訊息紀錄可以查
問題3
事實9
電話即時確認
網路預約會有簡訊確認
事實10 出門前會再看一次預約時間
事實11 有時候會用line跟設計師小聊天一下，設計師會關心頭髮狀況
顧客 即時性對話，告知顧客現況
付款/離開
問題詢問
3
4
5
結帳/ 給予名片
服務後關心 /宣傳 17
網路預約要打字比較慢，覺得用說得比較快
18
問題2
手機網頁不好預約（點選或打字）
問題4
因為前一人加服務，導致準時到場還是要等待
問題5
去現場才知道價位，因為染燙多要看髮量，現場才能評估 有被插隊的經驗，導致需要現場等待
事實12
有些ＦＢ粉斯專頁也有預約系統插件
問題6
電話接單會記在腦子隔天去店面再紀錄
事實14
店面都使用ipad線上紀錄行事曆
問題8
十分之三會爽約，導致設計師空窗
事實13 事實15 事實16 事實17 事實18
FB、line會有對話紀錄
每位設計師可以看到行程 記錄在紙本行事曆上
預約有即時性的回饋確認
問題7 問題9
記錄紙本會miss，忘記記錄或是記錯
下一位客人來了，但前一個客人未完成服務
設計師會用line關心髮型是否有疑問，事後關心 透過line推送廣告
insght
快速登入平台
11
店家
事實6 事實7
後續服務
9
顧客 事實1
結束服務
店家 顧客與店家都有紀錄可循 並配合環境使用個人裝置
避免失約，有紀錄可循或防止機制
服務後可以延續店面資訊
UI Flow
系統定位
預約系統建構在響應式網頁 RWD-HTML
優勢
1.不需多花時間下載安裝程式，獲取連結即可快速進入預約系統 2.響應式網頁設計，適用於各種顧客或店家，使用環境作調適
3.手機版可針對顧客，從名片或廣告傳單時獲取連結時使用；網頁版可於自家桌電預約，或店家端管理時使用 4.如系統有問題時，工程師可於遠端即時修復、維修
目前顧客主要預約途徑
期望未來系統預約途徑
直接網路預約
設計師名片
店家
其他通訊軟體 訊息預約
透過連結
透過QR code
顧客端預約
管理後台
主動預約
電話聯絡預約 其他網路平台 獲取預約資訊
Ｃustomer Touch Point Flow 目前預約途徑以電話預約與通訊軟體預約居多，
顧客
顧客端預約
其他廣告文宣
被動觸發預約
美髮店消費時 留下個資
店家
管理後台
顧客
顧客端預約
Function Map
首次預約
會員登入
黃框功能
預約選項
選擇服務項目 指定設計師 預約時段
預約
預設服務項目 預設設計師 預約時段
目前已預約資訊
顧客
即時訊息 店面資訊 地圖位置 店面服務 進度
歷史預約紀錄
紅框資訊
完成訊息
輸入聯絡資訊
手機號碼（帳號） 名字/信箱/廣告詢問 密碼（直接成為會員）
再次確認
匯出行事曆
完成訊息
再次確認
取消/修改 匯出行事曆
取消/修改 匯出行事曆
信箱/行事曆/其他
取消/修改
信箱/行事曆/其他
信箱/行事曆/其他
今日預約狀態 查看預約行事曆
即時訊息通知 服務狀態更新
簡訊/通訊軟體通知
日期總覽/設計師分類
營運報表分析
管理者登入 店家
會員清單管理 推播訊息內容 編輯/管理 預約連結匯出 預約表單內容修改 設定
新增/修改/刪除/禁止 訊息通知/廣告推播
直接複製網址連結 分享至訊息
簡訊/通訊軟體通知
Flow Map
藍框介面頁
Ａ0 首次預約
黃框功能
a1
紅框資訊
a2
選擇 服務項目 指定設計師
顧客
店面服務 進度
手機號碼（帳號） 名字/信箱/廣告詢問 密碼（直接成為會員） 其他需求
a1’ 會員預約
目前已預約資訊
店面資訊 地圖位置
再次確認
輸入聯絡資訊
選擇 預約時段
b1 會員登入
a3
預設選擇 服務項目 指定設計師
匯出行事曆 修改預約 取消預約
a2’ 選擇 預約時段
c1
a1’ c2
即時訊息 歷史預約紀錄 登出
c3
a4
完成預約
會員說明 （只出現一次）
a3’
再次確認
其他需求
匯出行事曆 修改預約 取消預約
a4’ 完成預約
信箱
c1
行事曆
c2
再次確認
匯出行事曆 修改預約 取消預約
其他
c1
a1’ c2
Mockup
paper wireframe
ＲＷＤ mockup
Login page
ďŹ rst time reserve
Reservation Steps reser ve is main function
sign up in the steps
sign in to reserve
alendar Selector
other interfaces
project 2 POST OFFICE ASSISTANT - App Design
郵 局 小 助 理
2016 -UＸ/UI design -App redesign
設 計背 景 快速提案設計練習，以一周為期限，利用身邊週遭資源與人力，進行快速進行使用性測試，尋找原本app中的架構與使用性問題，並執行使用者訪談 暸解受試者對於郵局的服務需求，歸納與架構新的服務流程，改善原本的服務體驗，最後設計概念性介面設計。
1. 優 化目標
快速執行業務
調查現有軟體“e動郵局”，針對現有功能重新歸納與改善， 提出新版架構與功能介面
清楚查詢資訊
方便節省時間
2 . 顧客 經驗 訪談 訪談七位受訪者，族群為學生（23-25歲） 大部份民眾到實體郵局處理兩大類業務
顧客到郵局最主要需求
1.儲金帳戶
2.郵務
其他業務
填單存錢、領錢、轉帳、
寄信/包裹/快遞
投資、壽險、集郵、
繳費、ATM領錢/轉賬、刷存簿
服務痛點
・ ・ ・ ・
ATM領錢前不知道戶頭剩多少錢。 拿/填單子有時總是搞混，不知道什麼業務該拿哪 種單子，或不清楚如何填，如數字大小寫。 有時只是存款，但排隊等很久。 經常匯款給固定人，要重複填單覺得麻煩。
房地產、各種申請等
・ ・ ・ ・ ・
經常現場買箱子或信封，因此要現場填寫地址，覺得佔用他人排隊 時間（事先手機紀錄好地址）。 不知道多少錢，反正帶足夠錢，現場給他秤重估價。
・ ・
經有些申請規則很多，看不懂，只想知道如 果要申請我需要帶什麼。 網站資訊又太雜太亂看不懂，想要有專人簡
不清楚自己包裹重量是否超過限制，或是其他限制。
單說明，但又不可能在櫃檯前讓櫃員慢慢說
收件時經常無法配合郵差，導致要另外去郵局領件，但郵局營業時
明，會有壓力。
間又短。 經常要自己打電話詢問收件者是否收到貨件，沒有提醒回饋。 緊急時選擇便利商店寄送，因為比起郵局，處理更快，不用排隊， 收件時間又比較彈性，隨時拿去都可。
・ ・
時常排隊很久，到號時只是拿了申請單填寫 ，填寫完又要再抽號排一次隊。 經常排隊前一個人不知道申請什麼，等超級 久。
3. 顧客 服務 旅程缺口與設計 以“儲金帳戶”、“郵務”、“其他業務”作為新版APP之概念方向， 解決使用者在這三項業務中，遭遇的服務問題，
pain point
以顧客服務流程呈現各階段問題痛點與設計機會點。
要找郵局ATM 才免手續費
儲金帳戶
事前不知道帳戶剩多少錢 要等提領完才知道餘額
操作
完成
ATM
領錢、匯款、繳費
前往 郵局 填單
抽號
顧客到郵局儲金帳戶的業 務，大部份屬於領錢、存 錢、匯款、繳費等為大宗 ，簡單的提領會透過ATM操 作，但還是有多宗機會會 進入郵局透過櫃台辦理。
design point
雖然郵務窗口不需要抽號 處理也比較快 但有時人多還是得排隊
完成
處理業務
存錢、領錢、匯款、繳費
無盡的等待
・不清楚填單類別 ・寫錯、多次填寫
地圖式郵局 位置快搜
到號櫃台
對於不清楚的申請 無法在櫃台慢慢問
預填申請單 /填單指引 到場刷條碼輸入 網路APP掛號預約排隊 並先預約處理業務種類
帳戶餘額查詢
另行預約專人解說
・事前準備包裹時 要查詢煩雜的 規則/限制/資費
寄件郵務
・特殊寄件要事先 拿取寄件單填寫
現場買箱子、信封 或者特殊快捷 要現場填寫寄件單
現場郵局等待
沒有進度回饋 要自己主動 上網查詢追蹤
包裹掛號經常 無法配合郵差領取 錯過要去現場郵局領
目 前 郵 務 類別 多 樣 ，限制規則也多， 因此設計面以寄送
準備
填寫
寄件
寄件單
交貨
寄件 過程
收件
流程分為三個階段 作為功能層級，寄 送、寄送中和收件
寄件階段
寄送中階段
收件階段
APP隨時行動 掌控進度
即時變便 收件方式
。在各個階段提供 使用者關鍵服務。 預先快速查詢 ・寄件種類指引 ・3+2郵遞區碼 ・中英地址翻譯 ・郵資查詢 ・郵局地址
預先填寫寄件單 /填單指引 到現場再刷條碼輸入
網路APP預約 郵差專人收貨
另行預約收件位置 ・住家 ・到貨時間 ・郵局 ・便利商店
・看了網頁業務介紹說明後 還是不懂，想要專人解說
・程序較長 對後面等待的人有壓力
・只想知道我需要準備什麼 以便現場申請
抽號現場 郵局等待
・可能拿了申請表 填寫後要再次抽號排隊
其他業務 網路 申請
郵局包辦多樣服務，如集 郵、壽險、房地場、代售 ...等，對於第一次接觸的 顧客會以暸解為主；如果
暸解 業務 內容
現場 郵局 申請
進而申請程序，則考量APP 手機環境不適用過於複雜 的申請流程，因此，設計
櫃檯 辦理
點為導向現場或網頁環境 為佳。
清楚業務程序
網路APP掛號預約排隊 並先預約處理業務種類
不清楚業務程序
網路APP掛號預約專人解說服務
4 . 郵局 小助 理功能架構 根據前述研究，主要以三個功能為本提案APP之核心功能，協助使用者處理業務並解決主要問題，其餘三個為次要功能： 1.儲金帳戶、2.郵務、3.預先抽號
我的儲金帳戶
郵務幫手
1.儲匯業務（須申請登入）
2.郵務業務
a.帳戶餘額
A.帳戶查詢
b.交易明細
A.寄件服務
c.VISA交易對賬
a.存簿轉帳
B.轉帳服務
B.寄件查詢
C.收件服務
b.收件者通訊錄
e.中英地址翻譯
c.資費查詢
f.郵局地點查詢
a.輸入代號＋13碼
a.預約收件地點與方式 b.收件通知
（其他業務：壽險、房貸、綜金）
D.服務指引 D.密碼設定
d.3+2郵遞區號查詢
b.跨行轉帳 c.繳款
C.其他查詢
a.預填寄送單
a.更改網路密碼/使用者代號 （高階密碼）
a.各種郵務類型介紹 （國內/國外/大陸兩岸×函件/包裹/快捷/便利箱）
預定抽號
其他業務查詢
行動商城
個人設定
3.網路排隊
4.其他業務查詢
5.代售線上商城
6.帳戶設定
A.壽險業務
A.集郵電商
A.寄件人資料管理
B.理財專區
B.代售小舖
B.個人帳戶管理
C.房地產出租
C.郵政商城
A.網路抽號 （何地郵局>時間區間>業務類型）
B.郵局查詢
D.網購中心 查詢後如果明白，有辦理之需求 可直接進入預定抽號
5 .郵 局 小 助 理 介 面 介 紹 郵局小助理
pain point
design point
尚未建立個人帳號 郵局小
動郵 局 助理
我的預約事項 我的儲金帳戶
郵務幫手
我的儲金帳戶
郵務幫手 我的儲金帳戶
郵務幫手
我的儲金帳戶
預約抽號 其他業務查詢
預約抽號
其他業務查詢
預約抽號
預約抽號 行動商城
其他業務查詢
個人設定
行動商城
個人設定
Statement 行動商城
行動商城 Report
個人設定
homepage
side menu
以儲金帳戶和郵務兩大類別為主要核心功能，副要業務集中由
當第一次使 用“預填寄件單”時，輸入
預約抽號作為入口，引導使用者說明或配合實體郵局服務。
寄件者地址資料時，會自動記錄自己的 住家地址，以建立個人資料帳號，以方
剩餘功能的使用層級最低多，把現有APP多於繁雜的功能皆列 入其他業務查詢。有關於集郵和代售的服務集中在行動商城。 個人設定則是此ＡＰＰ與網路郵局帳號等高階設定。
便未來“預約抽號”與寄件服務所需。
輸入帳號一半才知道要另外去申請帳
領錢前不知帳戶剩多少錢
號，也不清楚流程。
我的儲金帳戶
我的儲金帳戶
我的儲金帳戶
我的儲金帳戶
登入帳戶
帳戶查詢
即 時 帳 戶 餘 額、近 期 交 易 明 細 、V I S A 交 易 對 賬
帳戶類型
轉帳服務
網路帳號
立 即 / 預 約 / 定 期 - 存 簿 轉 帳、跨 行 轉 帳、繳 款
（局號帳號共14碼）
提醒您：
使用 此 功 能 必 須 先 臨 櫃 申 辦「行 動 設 備
金融憑證」 ，取得「網路密碼」 、 「使用者代 號」 ，方能登入啟用。
我尚未申請 要預約抽號
網路密碼
其他查詢
其 他 業 務：壽 險 保 單 紀 錄、壽 險 房 貸、綜 合 儲 蓄
使用者代號
密碼設定 我知道了
取消
登入
更 改 網 路 密 碼、使 用 者 代 號、網 路信箱
只有第一次進入“我的儲金帳戶”才
進入後，主要以兩大功能為主，一為
有提示。
帳戶查詢，讓使用者隨時可查詢目前 帳戶餘額與交易紀錄。
只有第一次進入“我的儲金帳戶”才 有提示。如果未曾申請過網路郵局帳
二為轉帳，讓顧客不用親零郵局或ATM
號，可捷徑進入預約抽號，為使用者
即可完成匯款。
安排一段到郵局的申請流程預約。點 選後會有另一段申請說明流程。
如果已有網路郵局帳號， 即直接可登入。
其餘壽險、保單等查詢機率不高的選 項，皆列在其他查詢功能中。
郵務幫手
郵務幫手 我要寄件
可 預 填 寄 件 單、管 理 寄 件 者 通 訊 錄、查 詢 準 備 寄 件 資 訊、預 約專人收件
寄件中查詢
查 詢 寄 送 中 的 國 內 外 函 件、包 裹、快 捷 位 置
我要收件
臨 時 或 預 約 收 件 地 點 與 方 式、 管理收件通知
寄件種類指引
國內外/大陸兩岸-信函/包裹 / 快 捷 之 類 別 介 紹、寄 件 方 式、 限制規定
我要寄件 預填寄件單
預先填寫寄件者資料 至 郵 局 交 件 時 只 需 刷 取 條 碼，不 需 另 外 填 單
收件者通訊錄
編輯管理經常寄送者通訊 讓填寫預填寄件單更加快速
資費查詢
查詢與估算各種類別郵務資費
3+2郵遞區號查詢
查 詢 郵 遞 區 號，幫 助 填 寫 地 址
中英文地址翻譯
幫助國內外中英地址填寫
郵局地點查詢
搜尋離你最近的郵局 更 可 以 預 約 抽 號，更 加 節 省 時 間
預填寄送單 請先選擇郵務類型 寄送地區
預填寄送單
預填寄送單
預填寄送單
寄件者
寄件單確認
寄件單完成
國外
限時掛號函件
預 設（ 我 的 住 家 ）
寄件類型
新北市
1.確定閱讀國際包裹規則與限制
取消
台北市大安區基隆路四段43號 黃大強
新增收件人至通訊錄
請攜帶郵件與條碼至郵局辦理郵務
注意事項
重 量 限 制 - 每 件 重 量 不 得 逾 2 公 斤。 尺寸限制最 大 尺 寸：長 寬 厚 各 不 得 逾 6 0 公 分，合 計 9 0 公 分 為 限。成 捲 者，其 長 度 及 直 徑 之 2 倍，合 計 以 1 0 4 公 分 為 限，最 大 一 面 之 尺 寸 不 得 逾 9 0 公 分。
樓
下一步
收 件 地 址 / 收 件 人：
台北市大安區基隆路四段43號 黃大強
弄
填寫invoices表單
取消
永和區
請選擇
2 . 國 際 包 裹 需 填 寫 英 文 IN VO IC E S
高雄市前鎮區南天街29號5樓 王小明
收 件 地 址 / 收 件 人：
道路或街名或村里名稱
我已閱讀並遵守規則
限時掛號函件
寄 件 地 址 / 寄 件 人：
高雄市前鎮區南天街29號5樓 王小明
請選擇線縣市/鄉鎮市區
注意事項
寄 件 類 型：
寄 件 地 址 / 寄 件 人：
收件者
包裹快捷
完成時間104年09月11日18:41
寄 件 類 型：
高雄市前鎮區南天街29號5樓
下一步
取消
修改
確認
修改
預約抽號
返回
郵務幫手的寄件心智
避免現場填單花費時
多種郵務類別有各種
寄件者可快選自己預
可選擇是否收藏收件
到現場只需要讓櫃檯
模式分為：寄件前（
間，提供了預先在手
不同限制或要求，選
設的住址，收件者資
人在通訊錄，以方便
刷條碼，讓櫃檯列印
準備件物與寄件）、
機APP上填寫好寄件
取郵務類別後，自動
料可透過選單，以便
往後再次寄給同一人
出寄件單貼至包裹或
寄件中、收件
單的服務。
跳出提示說明需要的
填寫地址。
時可以快選通訊錄。
信函上，增加便利性
附件或限制。
。在準備過程亦可確 保自己的郵務沒有缺 失。
沒有進度回饋，要自己主動 上網查詢追蹤 查詢完後，會記錄本郵件，如有到 包裹掛號經常，無法配合郵
貨或是其他狀況，會直接顯示通知
差領取，錯過要去現場郵局領
到右上角“我的預約”告知
寄件查詢
寄件查詢
輸入郵件代碼
查詢結果 國際快捷郵件
代號前英文碼
Ｅ1 2 3 4 5 6 7 8 9 0 1 2 3
E - 國際快捷郵件
目前最新處理結果
代號後13碼 請輸入 請輸入圖形認證碼
狀態
運送途中
處理 時間
2014/09/12-21:22:02
備註
接 收 局 名：台 中 郵 局 清 單 代 碼：1 2 3
處理 單位
請輸入 重新產生認證碼
取消
查詢
台中郵件中心 小旺收發處
郵件詳細處理過程 修改收件方式
返回
不用每個類別都選一次後查詢，編
查詢完後，可直接修改收件方式
號機制在第一個英文字母個有代表
，以便臨時有狀況無法配合郵差
的類別。
收件，可能是預約郵差到貨時間 。
在現場郵局，如果人多時，便是無 盡的等待。
預定抽號 預約抽號
預約抽號
請選擇郵務類別
預約結果
請選擇郵務類別
已為您預定
其他業務-壽險申請
新北市永和區-永和分行 處理業務-壽險申請
預計前往郵局 新北市
永和分行 預計前往日期與時段 09/15
請於104年9月15日 您的時段為13:15
永和區
地圖式搜尋
至特約櫃檯辦理 告知您的編號為A333 屆時將會有專人為您辦理業務 請 準 時，感 謝
13:00-13:30
取消
預約
取消預約
確定
預先預約郵局與時間，讓郵局可以預
預約後會根據所有預約的人與業務多
先知道顧客要處理的業務，以面做出
寡，回饋告知一個比較確切的時間點
現場人員調配與，分散現場各種不同
，節省現場排隊等待時間。
業務的排隊人潮。 如有過多人潮，也會事先知道，再調 整是否需要改時段去郵局。
我的預約事項
當我的預約事項兩起紅燈時，表示有提示通知事項 要注意： 1.預約抽號後，會亮起紅燈，表示有預約事項，可 提供使用這到郵局提示通知。 2.可開啟預先填寫好的寄件單，到郵局櫃檯時，交 貨時使用。 3.查詢信件後，會自動記錄所查詢之郵件，如要取 貨或是其他狀況時，會顯示告知使用者。
i cons
inte r fa ce
project 3 EASY PARKING - App Design
Easy Parking
Touch and Search. Easily Search for A Parking Ppace.
2014 UX / UI / App design
Problem
Concept
在市區尋找汽車車位總是一位難求，在慢車道上尋找空位時， 無法得知前方哪裡會有空位，緩慢行使更可能影響交通。
與停車位實體空位感應器整合，透過app快速尋找城市中的閒置 車位。在地圖模式可以搜尋目的地附近停車位，也可以篩選停車 格類型、以及個人目前的停車狀態。
就近訪問有開車或是機車經驗之同學，了解
找車位經驗
停車選擇經驗
在市區尋找停車位的相關經驗與方式，歸納 萃取其中重要的經驗與結論：
User Experience
A1
通常想要找車位時，人與車已經在 目的地四周。
A2
出門前通常不會事先查好哪裡停車 比較方便，頂多會看路怎麼走，但 不會事先在家裡或是出門前就查好
B1 找停車位時不會在乎停在什麼種 類的停車場，但有些人會顧慮停 路邊車子會被刮到或是偷走。
B2 會很在乎停車要不要錢。
要停哪裡。
A3
在使用手機地圖尋路時，總是學得 要打字找路十分不方便，在馬路邊 使用手機看地圖很怕發生意外。
B3 有時候會忘記自己停在哪裡。
Major flow
Easy Parking
主要功能為搜尋鄰近的 停車位 ，開啟後直接 地圖顯示附近的停車位 。解決與符合上述A1、 A2、A3之問題情境。
Conceptual App
找到的空位可以開啟卡 片，觀看停車位狀況， 包含什麼路上剩多少空 位，根據訪談B2，停車 位是否收費為重要資訊 ，因此特別突顯。並且 卡片附上街景照片增加 使用者對環境了解，避 免遺忘車位問題(B3)。
燈泡象徵發現， 用easy praking快速發現停車位。
Searching street parking near your position...
直接搜尋附近停車位
Wonderful road
3
empty parking space
Wonderful Road Street Parking : FREE arrived time need : 12 mins time limit
cancel
: 09:00 - 18:00
remember
navigate
share parking
Parking status
My car parking status
MY
XN-15610 A CCOUNT
garage
Searching street parking near your position...
Parking status
Search
卡片顯示目前停車位資訊
GOGOPA
Parking Tower
Positon
00:03:46
Setting
NT 80 / total
Statement
NT 20 / per hours
Report VIEW IN MAP
side menu
LEAVE THE PARKING
我的停車狀態
當你停車後，APP可以幫助你記 錄你停車的狀況，包含時間與收 費換算，更紀錄停車所在地的街 景圖片，讓你可以透過照片避免 忘記你的停車位子，也可以直接 開啟地圖模式，幫助尋找您停車 的位子。
Search Type a street or a position.
次要尋找停車位方式，直接輸入關鍵字，可 即時查看當地停車狀況。
W Kennedy St
W Kennedy St
3
empty parking space
W Kennedy St
Street Parking : FREE arrived time need : 12 mins time limit
cancel
: 09:00 - 18:00
remember
navigate
garage
Searching parking near your your position... position... Searchingstreet parking lots near
直接輸入關鍵字
Searching street parking near your position...
搜尋結果
Searching street parking near your position...
查看空位
Filter 搜尋停車場類型，包含路邊 街道停車位（預設）、室外 停車場、立體停車場
Icons garage
project 4 DONATOR - Reponsive Web Design
DONATOR 2016 Responsive Web Design
登入會員/註冊
透明公開
最新消息
成果回饋
關於我們
我要捐赠
登入會員/註冊
透明公開
最新消息
成果回饋
關於我們
開始捐贈
開始捐贈
如何幫助
物資捐贈 透過寄送流程
認購捐贈 透過線上付款 直接認購我們所需的物資清單
活動捐款 透過線上付款
我要捐赠
Design Brief
Iterate the charity donate web, which base on responsive wed design. And redeďŹ ne the conceptual construction to practical wireframe.
3 main ways to donate
staff donate
subscribe
money donate
Mobile
header
banner
main function
Tablet
Desktop
viedo feedback
banner
public info
news
footer
scale & gird system
345px
Details
768px
1440px
column width 20px
column width 47px
column width 70px
gutter width
5px
gutter width
10px
gutter width
27px
gird padding
28px
gird padding
49px
gird padding
150px
12col
Tab switch
watch more please go online portfolio https://www.behance.net/tsaichenge7271
ďź‹886 952-399069 tsaichengen15610@gmail.com tsaichengen15610@126.com
THANKS FOR WATCHING