2020 P OR T FO LIO
WU CHENG CHUN
01
CONTENTS
01
目錄
03
自我 介 紹
Introduction
05
介面 設 計
UI Design
Contents
搬家公司平台規劃與網站設計
Moving Company Process Planning and Website Design
社區品牌官網響應式網站設計
Community Association Responsive Web Design
容器租賃服務後台介面設計 容器歸還站介面設計
31
平面 設 計
Container Rental Service Dashboard UI Design
Container Returning Kiosk UI Design
Graphic Design
銳宇建設：社群形象經營
Ruiyu Construction: Social Presence Management
好盒器：海報、活動看板設計
Good To Go: Poster, Banner Design
AInimal：社群形象經營、主視覺設計
38
影片 後 製
Ainimal: Social Presence Management, Key Visual Design
Video Editing
銳宇建設：商場活動紀錄攝影後製
Ruiyu Construction: Events Record and Editing
國際綠色生活創意設計大賽：概念影片後製
International Green Life Creative Design Competition: Concept Video Editing
02
“
勇於接受新挑戰 強大的自我學習能力 喜歡與夥伴一同激盪出更好的解決方式
”
03
INTRODUCTION
PROFILE
EXPERIENCE
1996 Nantou, Taiwan
07/2020 - NOW Taichung, Taiwan
吳丞竣 Cheng Chun Wu (Bob Wu)
自由接案 / 平面設計師、介面設計師 Freelance / Graphic Designer, UI Designer 12/2019 - 07/2020 Taichung, Taiwan
CONTACT 09-18 Mon. - Fri.
bobwu9611@gmail.com 0981076575
銳宇建設 / 平面設計師、社群行銷 Ruiyu Construction / Graphic Designer, Social Media Editor 06/2018 - 06/2019 Tainan, Taiwan
好盒器容器租借服務 / 介面設計實習生 Good To Go: Containers Rental Service / UI Design Intern
EDUCATION
SKILL
09/2015 - 06/2019 Tainan, Taiwan
UI Design
國立成功大學 / 企業管理學系 National Cheng Kung University / Bachelor of Business Administration 07/2016 - 08/2016 Vancouver, Canada
英屬哥倫比亞大學 / 建築與景 觀 建 築 學 系 University of British Columbia / School of Architecture And Landscape Architecture
Adobe Xd
Figma
Sketch
Zeplin
InVision
Graphic Design
Adobe Illustrator
Adobe Photoshop
Video Editing
Adobe Premiere
04
05
UI DESIGN
UI DESIGN
06
1 搬家公司平台規劃與網站設計 Moving Company Process Planning and Website Design
07
UI DESIGN: Moving Company Website Design
08
Section 1: Problem 本業為搬家公司的業主，知悉現今市場上充斥著許多回頭車的需求， 消費者與回頭車業者通常是透過電話聯繫、論壇發文、接案網站來找到彼此， 沒有一個專門的管道能夠供雙方同時刊登需求與供給， 因此，此次專案目標為：
提供一個更有效率、更快速的媒合平台， 媒合消費者與回頭車司機。
東西才這麼一丁點， 這樣就叫一台專車 好像很不划算⋯⋯
一趟路這麼遠， 如果回去的路上 也有東西載就好了⋯⋯
09
UI DESIGN: Moving Company Website Design
Section 2: Functional Map 經過討論後，分別有兩大功能，第一為尋找回頭車、再來是訂單的管理， 接著使用 Functional Map 更進一步列出司機以及消費者的功能。
10
Section 3: Flow Chart 消費者 Flow Chart 由業者刊登車次， 消費者主動選擇跟車， 填寫完搬遷資訊後， 等候業者的報價。
11
UI DESIGN: Moving Company Website Design
業者 Flow Chart 成功刊登回頭車，接下來等待消費者跟車，並回覆報價，待消費者付款完成後便可開始進行運送。 此頁面的使用者可能並非司機本人，而是透過其他行政人員來處理，因此新增發送簡訊的功能來聯繫消費者以及司機。
12
Section 4: Wireframe
13
UI DESIGN: Moving Company Website Design
Section 5: Color
Main #0FB1BB Background #F7F7F7 Disabled #B3B3B3 Light #F0FBFC Error #FA9C9C
白色與藍綠色，使畫面保 持簡潔可一眼看出重點， 主要按鈕也一目瞭然，指 引用戶至下一步。
14
Section 6: User Journy 消費者使用旅程 STEP 1. 搜尋回頭車
STEP 2. 填寫跟車資料
15
UI DESIGN: Moving Company Website Design
STEP 3. 等候業主報價
STEP 4. 完成付款
STEP 5. 等候物品送至目的地
16
業者使用旅程
STEP 1. 刊登回頭車
STEP 2. 開始集單
17
UI DESIGN: Moving Company Website Design
STEP 3. 回覆報價
STEP 4. 發送簡訊
STEP 5. 完成訂單
18
Section 7: Summary 1. 採取敏捷式開發精神 從開始討論至第一版本的 Prototype，只花了一個禮拜的時間，明白業主目標之後，透過 Prototype 更容易找出流程中的瑕疵， 在討論上也能更明確知道修改的方向。 2. 將市場生態納入設計考量 原先的設計為消費者完成付款後，須等待平台方每月兩次的結算才能將款項給業者，但後來透過與回頭車業者訪談才發現，有許 多不是專營回頭車的司機，想要賺的是快錢 (當天開車當天取得現金)，因此後來更改為向消費者收取系統處理費，搬運費交由雙 方協調。 3. 忽略視覺與情境關聯性 首頁透過插畫風格來表示消費者與業主的情境，切換到登入頁面時，便直接沿用先前情境的插畫，卻忽略了沒看過首頁情境的使 用者，當他們來到登入頁面時，只能依靠按鈕上的「業者登入」以及「消費者登入」來做判別，插畫失去指引的功能，於是重新 設計了頁面登入的插畫，使消費者與業者視覺上具有更大的差異。
19
UI DESIGN: Moving Company Website Design
20
2 社區品牌官網響應式網站設計 Community Association Responsive Web Design
21
UI DESIGN: Community Association Responsive Web Design
22
Section 1: About Shinglong Community 「新龍社區發展協會」位於屏東縣枋寮鄉，擁有豐富的漁產資源， 近年來甚至將廢棄的魚鱗，重新再製成極具地方特色的保養品。
透過社區品牌官網的建立，希望能將社區的故事、 旅遊資訊、保養產品，推廣給更多民眾知道。
23
UI DESIGN: Community Association Responsive Web Design
24
Section 2: Wireframe
首頁風格發想
25
UI DESIGN: Community Association Responsive Web Design
商品資訊介紹
DIY 體驗頁面
26
Section 3: Proposal 初次提案中，準備了三個版本的首頁提供選擇，有主打社區產品為主的首頁、也有以社區故事為主軸的首頁，根據客戶需求選定 後，開始後續設計。 Proposal 1: 社區故事為主軸
27
UI DESIGN: Community Association Responsive Web Design
Proposal 2: 強調產品特性
Proposal 3: 主打社區產品
28
Section 4: Color Main #A3B7BE Secondary #95A4A8 Background #F5F8F9 Text #545454 Highlight #FFBA7B
主色的靈感來自龍膽石斑的魚鱗， 再加上原本保養品的包裝設計與社 區協會的 Logo 配色基調為藍色、 綠色，於是採用了較為沈穩、明度 低的藍作為主色。 另外以亮橘作為強調色，凸顯重點。
29
UI DESIGN: Community Association Responsive Web Design
Section 5: Summary 1. 提供多種面向的提案 提案所展示的三個版本皆有不同的功能取向，給予業主多種選擇，再由挑選出來的風格，來做後續的延伸，如此一來，便能快速 決定網站設計風格。 2. RWD 設計技能提升 此次專案所配合的工程師，在設計響應式網站上擁有豐富經驗，因此在來回修改中，也學習到許多新東西，像是一些絕對單位與 相對單位 (px, rem......) 的應用，還有直接使用瀏覽器來查看在不同裝置上的網頁呈現，並且透過簡單的 CSS 修改，與工程師 在畫面上的調整溝通更快速、更有效率。 3. 官網設計：如何替品牌說故事 第一次接觸品牌官網設計，首頁對於第一次造訪網頁的用戶極其重要，因此品牌想呈現給使用者的是什麼，該如何呈現才能有效 留住用戶，是非常重要的環節。
30
3 容器租賃服務後台介面設計 Container Rental Service Dashboard UI Design
31
UI DESIGN: Container Rental Service Dashboard UI Design
32
Section 1: About Good to GO 好盒器－「容器界的 Ubike。」 致力於減少一次性容器的浪費， 在台南正興街、各大音樂節等地方都能看見好盒器的身影， 目前正朝著手搖飲料店努力邁進，期許未來在喝手搖飲的同時，也能愛護地球。
33
UI DESIGN: Container Rental Service Dashboard UI Design
Section 2: Container Management Backstage 每天在容器轉運站的流量十分龐大，為了更準確追蹤所有容器的狀態與位置，開發了容器管理後台。
目標為方便查看與管理各容器的狀態，以及提升調度容器的效率。
34
Section 3: Design Process
STEP 1. Mind Map 使用心智圖的方式， 將容器管理後台的功能列出。
STEP 2. Wireframe 構思線框稿的同時，邊列出規範， 讓往後設計時能夠更有效率。
35
UI DESIGN: Container Rental Service Dashboard UI Design
STEP 3. Prototype 把所有畫面列印出來進行 Prototype， 觀察使用者使用情形及訪談。
STEP 5. Optimization 重新修改之後， 新功能再進行 Prototype， 再從使用者得到新的回饋。
User A
User B
STEP 4. User Research 紀錄使用者的使用情況後， 重新整理並且分類，再列出要修改的地方。
36
Section 4: Demo
出貨單紀錄：有效控管容器流通與調度
新增出貨單
37
UI DESIGN: Container Rental Service Dashboard UI Design
會員管理：查看使用數據，加以分析利用
店舖管理：用量分析與容器使用紀錄
38
Section 5: Summary 1. 不可或缺的使用者訪談 當你以為整個設計已經非常完善無懈可擊時，在使用者訪談時永遠會得到重重的一拳，不是你想得不周到，而是許多情境容易被 忽略，導致有時太過周到反而適得其反，最重要的還是使用者本身的經驗。 2. Design System 的重要性 首次參與如此龐大的專案，包含資料庫的建立以及整理，若是沒有一套設計規範，常常搞得同樣的頁面或功能，規範卻不統一， 也體會到 Symbol 的強大，Sketch 的 nested symbol 使我們在設計上更有效率。
39
UI DESIGN: Container Rental Service Dashboard UI Design
40
4 容器歸還站介面設計 Container Returning Kiosk UI Design
41
UI DESIGN: Container Returning Kiosk UI Design
42
Section 1: Recycling Kiosk 回收已使用的容器是循環步驟中極為重要的一環， 隨著使用數量增加、據點擴張、會員制的導入， 單靠人力回收所有容器，無法應付未來的發展。
導入回收機台，減少人力需求，積極擴張會員。
43
UI DESIGN: Container Returning Kiosk UI Design
44
Section 2: Design Process
User Journey
45
從如何使用開始，列出所有可能的情況以及問題。
UI DESIGN: Container Returning Kiosk UI Design
Flow Chart 將每個情況、步驟，整理後以 Flow Chart 呈現。
Wireframe 將線框稿畫在便條紙上，方便討論，也能直接移動。
46
Section 3: Demo
會員登入頁面
47
UI DESIGN: Container Returning Kiosk UI Design
未加入會員 (上) / 歸還完畢 (下)
Section 4: Summary 1. Brainstorming 激盪出更多更好的想法 這大概是我印象最深刻以及學習最多的一件事，所有人一同參與討論同一個議題，天馬行空的發散想法，最後再收斂整理，好的 點子就此誕生，這就是新創之所以迷人的地方吧。 2. 帶得走的 UI 技能 參與了不少介面設計的設計與發想，有從 0 開始的專案，也有優化現有流程的專案，從中汲取不少技能，心智圖、Flow Chart、 徒手移動的 Wireframe、Prototype、使用者訪談⋯⋯在這一年之中成長許多，每次與 UI Designer 的討論中，也能知道自身設 計的盲點，還有不少人因互動上的心理學。
48
49
GRAPHIC DESIGN
GRAPHIC DESIGN
50
1 銳宇建設：社群形象經營 Ruiyu Construction: Social Presence Management 除了建案的廣告設計、工地圍籬設計，也負責公司社群形象經營， 商場 Instagram 配合節日、時事發布貼文， 建設公司 Facebook 以介紹有溫度的建築師，傳遞公司價值為主。
trplaza Taichung
Liked by iambob77 and 176 others trplaza
51
GRAPHIC DESIGN: Ruiyu Construction: Social Presence Management
IG: Tom & Resort Plaza
FB: 銳宇建設
52
2 好盒器：展板、活動看板製作 Good To Go: Poster, Banner Design 擺攤時的活動看板、試營運會員招募 Banner、店家宣傳。
53
GRAPHIC DESIGN: Good To Go: Poster, Banner Design
54
3 人工智能養成：社群形象經營、線下活動主視覺設計 Ainimal: Online Presence Management, Key Visual Design Ainimal 主打透過機器學習，進行養成的社群交友軟體，精準為你配對適合你的聊天對象。 曾舉辦過實體線下活動，擔任主視覺設計，後來也負責社群形象經營。
55
GRAPHIC DESIGN: Good To Go: Poster, Banner Design
56
57
VIDEO EDITING
VIDEO EDITING
58
1 銳宇建設：商場活動紀錄 Ruiyu Construction: Event Record and Editing 2020 元旦，以瑜伽揭開序幕，於活動中擔任攝影以及後製。
59
VIDEO EDITING
頌缽祝福
火箭瑜伽
108 次拜日式
60
2 國際綠色生活創意設計大賽: 概念影片 International Green Life Creative Design Competition Concept Video 2018 國際綠色生活創意設計大賽，在小組中負責站體設計，首次嘗試使用 Lumion 來建模，以及後製概念影片。
61
VIDEO EDITING
62
CONTACT ME bobwu9611@gmail.com 0981-076-575