2
Yi Lin Chuang Portfolio
1
0
2017
7
莊以琳 Yi Lin Chuang
abedoftherose0826@gmail.com 0981-688994 英文 | TOEIC 770
國立交通大學 工業工程管理所人因工程組 碩一 國立成功大學 心理學系
軟體技能
熟知領域
Photoshop/ Illustrator/ InDesign Sketch/ Aftereffect/ Adobe XD
R/ SAS HTML5(Pug)/ CSS3(Sass)/ jQuery
相關經歷
研究
統計、質性方法、心理實驗法 論文研究、訪談、市場調查
心理學
認知心理學、心理物理學 感覺與知覺 人因工程、人機互動
設計
IDEO 設計思考、設計方法論 平面、介面、交互設計
UI 設計師 接案
UI/UX 設計 實習
新漢科技 Nexcom
2016.07 - 2016.08
UI 設計 / 動畫製作 接案
研華科技 Advantech
台灣金融科技創新企劃競賽
視覺設計師 兼職
行銷 / 網頁設計師
南星創速器 SSX
INPSY
2016.10 - 2017.01
2016.02 - 2016.06
2016.04 - 2016.05
2016.01 - 2016.06
About Yi Lin Chuang 一個樂於學習的活力女子，每天充滿奇怪的點子， 喜歡心理學、設計、插畫和音樂，十年後要去南極寄 一封明信片給自己，最想去太空旅行！
01/ 實
WebAccess/NMS 系統 物聯網平台 AllIotCloud AlgoMunity 應用程式
02/ 續
字體設計 插畫
01/
實
參與專案
- WebAccess/NMS 系統 - 物聯網平台 AllIotCloud - AlgoMunity 應用程式
01 | 參與專案
Webaccess/NMS 系統 - 既有產品重新設計 交互設計、介面設計
本產品為控制網路連結系統，原先的操作介 面為以工程思維製作，其他非工程背景的使 用者認為操作起來不順暢、經常找不到想要 的功能在哪，與工程師的心智模型有所不同， 因此以使用者中心重新設計這款產品。
原 WebAccess/NMS
Discover
利益關係人訪談 捷思式評估 競品調研
1
Define 定義價值
Develop
Deliever
重整資訊架構 線框稿 介面設計 製作設計規範
Dicovery
利益關係人訪談
與技術工程師訪談，了解他們目前 的技術範圍，訪談目前的使用者了 解其使用情況與其他控制網路系統 的經驗。
捷思式評估
利 用 Nielsen 的 Heuristic Evaluation 十大原則，從既有的 NMS 介面當中 找出使用性問題。
競品調研
實際找三樣與 WebAccess/NMS 同類型的產 品進行分析，了解他們產品的目標族群與特 色，分析本產品與其他三者在拓墣圖、儀表 板和列表的優缺點做為之後設計的參考。
2
Define
3
Develop 使用工具 : draw.io, Illustrator
重整資訊架構 顯示 方便快速檢視 動態更新
Action
記錄
簡單地處理複雜 網路
過去紀錄簡單查 詢、比較
原先的網站架構訊息繁雜、分層過細，並有太多重複和不 必要的功能重整，因此透過重整，使流程上增加流暢度。
原 WebAccess/NMS
重整後 WebAccess/NMS
02 | 參與專案 | WebAccess/NMS 設計過程
線框稿
繪製線框稿，安排各資訊和功能的呈現方式， 來檢視流程可用性。
介面設計
為了減少使用者的視覺負擔，至多三種顏色去做標示（包含設備資訊 呈現），並且在視覺資訊圖表上依照資訊的特性去做安排，而非原先 都用圓餅圖做呈現。
過去統計。儲存先前的紀錄，依時間呈現不同 數據，有存活率和十大流量的比較。
紀錄。分為事件記錄以及系統 呈現。
統記錄，以欄位方式
Guideline
將元件模組化，並製作設計規範。
拓墣圖，分成四區塊 1) 空白處 2) 設備 3) 線 4) 群組。
02 | 參與專案 | WebAccess/NMS 設計過程
交互過程
選擇幾個在網站中較主要的互動。
小工具
藉由滑鼠右鍵叫出小工具，小工具主要分成頁面工具以及 物件指令。
篩選器
藉由篩選和搜尋的方式選擇使用者想看到的訊息。
設備多重選取
左鍵 +ctrl(command) 即可點選取多個設備。 可用於群組或是建立連線。
表單展開
使用於表單有多個選項時（超過三行即可使用），當使用者點選 箭頭，表單縮窄拉長，顯示被隱藏的部分。
01 | 參與專案
物聯網平台 AllIotCloud 介面設計、交互設計、響應式網頁
AllIotCloud 三大物聯網平台，媒體、電商和 論壇所構成，希望透過這個平台消弭物聯網提供 者與使用者的鴻溝。本專案因為時間緊迫（僅三 個月，包含設計與網頁開發），因此先產出最小 可行性產品（MVP），事後再放入市場（量性測 試）以及執行易用性研究 ( 質性深入探討 )，藉 此修正產品。
目前已經上市
資訊架構
依照 PM 給的功能規格書，列出適當的資訊架構，並與 PM 討論刪減功能。
流程設計
利用作業分析（Task analysis）將作業分成主作業和次要 作業，並之後整理成流程圖來展現動作與頁面的流程。 使用工具 : draw.io
總流程
02 | 參與專案 | 物聯網平台 UI 設計
媒體流程
電商流程
論壇流程
色彩
字體
在介面色彩上，以深藍色 (#263A94) 作為三個網站的共同色， 使網站保有一致性，而再以不同色系去做延伸，媒體為淺藍色 系，電商為黃色系，論壇為綠色系。
媒體
理性、專業、清新
電商
活潑、明亮、愉快
以 Windows 和 Mac 的預設字體（微軟正黑體與蘋方體）為 網頁的字體。 為了防止中老年使用者看不清楚，內文字體大小為 16px， 但未來會以大、中、小字體篩選器讓使用者針對自己覺得舒 服的大小去做調整。
論壇
安全、親切、穩定
H1
26px
H2
24px
H3
22px
H4
20px
內文 16px
02 | 參與專案 | 物聯網平台 UI 設計
介面流程
從流程設計會進行的作業和頁面流程，利用視覺化的方式去做頁 面跳轉的呈現。
媒體
論壇
電商
原型設計
使用工具 : Sketch
主頁面
購物流程
文章或討論頁
列表
帳戶頁面
02 | 參與專案 | 物聯網平台 UI 設計
響應式網頁設計 (RWD)
從 StatCounter 的 2015-2016 數據報表，全球螢幕解析度分佈中，電腦版最多是 1366x768 而平板為 768x1024，調整手機和平板的版面以及互動，讓使用者到不同 裝置上都可以有良好的體驗。
媒體
論壇
電商
交互過程
選擇幾個在網站中較主要的互動。 使用工具 : Adobe XD
輪播區塊
購物車
為網頁的視覺焦點，放在偏於左上方的位置，以多張圖片為主， 文字為輔。
購物車為一種隱喻 (metaphor)，像日常生活中的購物籃一 樣，具有放置的功能，此外可以直接計算金額和刪除商品。
媒體 / 電商
將區塊右下方設計三個按鈕，可切換三張圖片。 如果有文字說明 ( 例如媒體）則將標題和內文以淺藍底深藍框 的方式呈現，防止新增圖片過深過淺看不見文字的窘境。
電商
在商品內容中，選擇加入購物車，此時購物車圖標會顯示 目前將幾個商品加入，點選購物車會顯示目前選購的數量 與價錢。
02 | 參與專案 | 物聯網平台 UI 設計
導覽列收合
客服對話框
用於瀏覽文章或討論內容，適用於內容篇幅過長的頁面，讓使用 者知道目前正在閱讀的文章或討論的標題名稱和類別。
以往客服會是透過信件的方式解決使用者對於產品的疑問，但通常回 覆時間不固定，而對話框會顯示客服人員目前的狀態，並利用對話的 方式，更貼近使用者，更為親切。
媒體 / 電商 / 論壇
當使用者往下滑動頁面時，導覽列僅顯示目前正在閱讀的 文章或討論的標題名稱和類別，而當使用者向上滑動頁面， 導覽列則顯示原先的導覽列內容。
電商
在帳戶訂單管理中，點選對話框按鈕，出現客服人員姓名以及 線上時間狀態，輸入問題後按確認即可傳送訊息。
留言與回覆
空狀態
發表自己的想法並與他人進行互動與交流，由於論壇上幾乎都是代號來稱呼，以 輸入方式回復他人是個不方便的作業，因為記憶他人代號非常需要認知資源，因 此設計成回覆按鈕。將回覆樓層設計成彈跳視窗讓使用者不必再搜尋過去的留言 即可看到想看到內容。
輕量彈跳視窗，例如提醒、購物車。 利用敘述文案顯示其空狀態。
論壇
按留言鈕，留言框跳出即可留言。按下回覆鈕後，留言框跑出，顯示使 用者要回覆的樓層，若想查看回覆樓層的留言，按顏色為 #263A94 的超 連結文字，即有彈跳視窗 (popup) 跳出，即可查看其留言內容。
電商 / 論壇
個人帳戶的管理列表，例如訂單列表、發表的文章。 以一段溫和的文案激勵使用者，加上明顯的行動按鈕， 藉此增加使用者的行為次數（發文、購買商品）
01 | 參與專案
AlgoMunity 應用程式
- 台灣金融科技創新企劃競賽第四名 介面設計、交互設計、動畫
FinTech 創意大賞企劃競賽時所製作的 UI 設計， 此提案嘗試搭建理財專員與潛在投資人之間的橋 樑 , 盡可能的減少資訊不對稱的情形。並且透過提 供先驅者足夠的誘因使先驅者願意分享其交易策略 給追隨者。最後 , 導入群眾的力量 , 反饋可能具有 價值的資訊給廣大投資人。
客戶需求 消弭資訊不對稱
分享策略
視覺識別
A
A
群眾外包
資訊架構
A
02 | 參與專案 | AlgoMunity 應用程式
介面流程
使用工具 : Sketch, AfterEffect
主頁
主頁面有四大功能，Pioneer Algorithm, Virtual Market, Financial Advisor, Community 此外 , 按下旁邊的 hamburger bar 會側邊欄會顯示。
理財專員
客戶端 可以透過下拉式選單選擇不同銀行 的頁面 , 進一步查看該銀行內部同理專的 顧客評價、投資經驗等資訊。
帳戶
社群
先驅者演算法
模擬市場
My Account 會顯示目前你的投資分配 ， 以及你現在的身份（大眾或演算法先驅 者）。 Settings 主要可以設定語言以及是否可提 供聯絡資訊。
開發交易策略演算法並將其成品陳列在平台上者被稱作「 先驅者 」(Pioneer), 而追隨先驅者所開發出來的交易策略演算法的一群人則被稱作「追隨者 」 (Follower)。 追隨者可以透過支付先驅者「 管理費 」以及「績效費 」 的方式選擇跟隨先 驅者的交易策略演算法 , 當追隨者點下「 追隨 」的按鈕時即可追隨此先驅者。
各種投資主題，你可以和 AlgoMunity 的 使用者討論。
在這練習投資，或是參與銀行舉辦的投 資競賽，提供投資者投資經驗。
02 | 參與專案 | AlgoMunity Application
產品 pitch 動畫
使用工具 : AfterEffect, iMovie
Styleframe
03 /
續 - 字體設計 - 插畫
02 | 字體設計
躁反城市 練習字 英文字體 : Hacked
肥胖 字體意象創作
木乃伊 練習字 英文字體 : Saber
美式風格創作
02 | 插畫
莊以琳
Yi Lin Chuang abedoftherose0826@gmail.com 0981-688994