XINRU CHEN
1994
2016
Portfolio
XinRuChen
Portfolio 2016
CONTENTS Introduction 01 Hi, I am XinRuChen!
KKLive App 02 Intern project in KKBOX Taiwan UI / UX
Alibaba UED 03 Intern project in Alibaba Group Visual Design / Illustration
NTUST Things 04 My projects in NTUST ICD
Illustrations 05 Those things Iʼm think about
Hi Iʼm XinRu Chen! Nice to meet you !
01
Introduction
Never lose the original passion!
陳芯如 XinRu Chen 台灣科技大學 NTUST 工商業設計系 主修工設 ICD industural design 0936-248009 B10110013.ntust@gmail.com FB: Xin Ru Chen
出生在高雄 在新竹成長 目前定居台北的小小設計人 喜歡畫圖、設計、看書、旅行、享受美食 從健康的小麥色皮膚就知道跟太陽很有淵源 個性就跟太陽一樣熱情 ! 熱愛學習各種新事物 !! 夢想成為一個能改變世界的人 !!!
Internship
KKBOX
UI/UX 實習生
2016/7-12
與PM及RD實習生一起執行完整的Android App設計規劃， 主要負責概念發想、UI介面設計、體驗流程、使用者測試。
阿里巴巴集團
視覺設計實習生
2014/7-9
在集團旗下的國際UED部門處理商家後台業務相關的產品， 主要負責節慶賀圖，LOGO與icon的設計、網站Banner等等。
台灣創意母體
AE動畫實習生
2013/7-9
隸屬於臺灣科技大學的設計中心，舉辦過不少跨國工作坊， 主要負責 Adobe AE 的影像後製及動畫編輯等等。
Open House
Mood Saver
兒童互動玩具設計
2016
臺灣科技大學畢業專題製作，結合科技互動的玩具設計。 主要負責概念發想、把手介面設計、產品外觀及手冊。
Micro-enterprise MissThings
失物小姐
UI/UX 設計
2016
台大創創車庫的創業團隊， 為台灣第一個專為尋找遺失物建立的平台， 旨在解決找失物繁瑣的過程， 以及推廣遺失物友善的環境。 獲獎
三校聯盟App創意競賽 佳作
2016
Workshop
open HCI 16
訊・變
高橋善丸
質恆轉形
人機互動工作坊 2016
數據實體工作坊 2015
文字設計工作坊 2015
產品設計工作坊 2014
Technical Expertise UI / UX Design User Research / Customer Journey map Persona / Flow chat / UI flow / Wireframe Prototype / GUI / Sketch Visual Design Illustration / Icon / Color Plan / CIS Product Design Interior Design
Ai Illustrator
Prott
Sketch
Swift
Zeplin
Ps Photoshop
Intern project in KKBOX Taiwan Simple design, intense content.
02
KKLIVE APP
Intern project in KKBOX UI / UX
KKLIVE / KKBOX LIVE 演唱會直播App Android App 將原本KKBOX的LIVE直播服務獨立出來，重新規劃成一款符合使用者 在移動設備端觀看體驗的App。融入演唱會愛好者所需的近期活動 預告、線上訂票、藝人專頁、活動提醒等功能，並增加了聊天室的 趣味使用性，除了保有粉絲跟藝人間的連結，更加強粉絲間的互動 性，讓整個App更有人味。
02
KKLIVE APP
What I did /
Team Members /
User interview Product planning UI design Wireframe Prototype
XinRu Chen / Designer Christina Chuang / PM Jason Chen / PM Henry Su / Android Developer Xun Lee / Backend Engineer
What / 專業的演唱會直播App
Scenario / 想觀賞演唱會，手邊卻只有手機可以使用
Persona / 18-35歲的年輕族群 習慣以手機作為觀看平台 1.）平常就有在關注演唱會資訊的樂迷 2.）想看演唱會卻不知從何開始的新手
Insights / 即時更新演唱會活動清單 喜歡可以立刻訂票 演唱會上線通知 粉絲與藝人互動 粉絲間的互動
02
Flow 試用
KKLIVE APP 登入
註冊
驗證
首頁
直播
追蹤頻道
關注活動
觀看紀錄
即將
設定
登出 帳號設定
頻道頁
本機設定 排序方式 意見回饋 版權說明 即將頁
資訊
購票
投票
資訊
投票
傳送歌單
播放頁
影片
留言互動
02
KKLIVE APP
Wireframe 最終定案版的手稿，前面還有好幾代。
Wireframe
02
KKLIVE APP
最終定案版的電繪稿，討論每個元件的尺寸 及相對位置，之後的UI都是照這份去套的。
UI
App Icon
02
Features
KKLIVE APP 卡片式設計 簡潔的介面設計 直覺的操作模式
即將上線活動 安可曲投票 活動簡介 線上購票
互動聊天室 客製化的互動按鈕 BOT人性化互動 集氣條
Intern project in Alibaba Group Design made intelligence visible.
03
Alibaba UED
Intern project in Alibaba Group Visual Design / Illustration
千牛 / 商家營運平台 Alibaba intren project 大二時候在阿里巴巴杭州總部進行暑期二個月的視覺設計實習，主 要負責節慶插畫跟LOGO、icon等零件的設計，以及局部的介面規劃 。是實際上線的產品，約五百萬用戶看見這組賀圖。
03
Alibaba UED
03
Alibaba UED
一個人在大陸實習，便養成了用便利貼記錄生活點滴的習慣。
My projects in NTUST ICD My Ideological enlightenment.
04
NTUST Things
My projects in NTUST ICD Matching Bus MissThings
Matching Bus / 公車App設計 Product design project 身在大台北，日常生活總免不了需要搭乘公車。現有的公車App雖 然方便，但如果可以加入更多貼心的細節、讓流程更簡潔我想會更 貼近使用者，於是有了Matching Bus 公車App設計。
04
NTUST Things
即使不清楚公車號碼， 第一次搭公車也能輕鬆上手的公車App
What
Persona
284
搭乘不熟悉路線公車的乘客
254
281
?
記不住 公車路線號碼
只知道 自己的目的地
第一次 在台北搭公車
Scenario 好不容易找到公車站， 卻不知道要搭哪個路線 第一次搭這班公車， 被一堆相似站牌名稱搞得頭很痛
Insights
更人性化的站牌標示 顯示車資及收費模式 顯示距離目的地站牌數 等車時間
公車方向 路線圖 營運時間
04
Flow
NTUST Things 開始
輸入出發地
開啟GPS
附近站牌選項
地圖 人性化描述
輸入目的地 附近站牌選項
地圖 人性化描述
結果
顯示前三班來車
方向
車資
收費 方式
時間
距離
路線
輸入路線
即時選項
路線圖
資訊
營運時間
MissThings / 失物招領App設計 三校聯盟App創意競賽 相信不少人都有掉東西的經驗吧，面對東西不見的著急心情我們特 別明白，結合地圖圈選跟跟品項過濾，不論你是撿到東西還是掉東 西都可以輕鬆找尋失主/失物！
04
NTUST Things
更快找尋失主
地圖圈選功能
失物標籤設計
佈告欄讓你能快速找到失主
範圍尋找更快更有效
範圍更小更好搜尋
What I did /
Team Members /
Product planning UI / UX design Prototype
XinRu Chen / Designer Zhang, Zi-Yan / Research Developer
What / 失物招領平台App
Scenario /
Persona /
Situation A. 東西掉了卻不知道要從何找起
Situation A. 遺失物品的人
Situation B. 撿到失物卻不知道要怎麼處理
Situation B. 拾獲物品的人
Insights / Situation A. 能用範圍的方式找失物 分類失物類型 遺失時間過濾 追蹤失物流向 Situation B. 簡單地發出拾獲告示 自動配對失物主人 聯絡失物主人
Wireframe
04
NTUST Things
04
Features
NTUST Things 即使你在屏東掉東西，回到台北也能找回遺失物！
跨區域性
Google map 定位＋地圖圈選＋分類清單功能 讓你迅速找到失物，同時解決台灣失物責任歸屬和 招領窗口的繁亂問題。在不同地點遺失東西時可以 於同系統中找回失物。
發現遺失的當下，立即發出遺失訊息
即時性
確切性
我們系統結合臉書認證的可靠性與聯絡的即時性， 拾主可以即時的將資訊po在系統上，而失主也可 以在發現物品遺失時立即尋找。
這是我掉的嗎？ 失主可推測遺失地點，搭配本系統的地圖功能，確 切知道遺失物是不是自己的。
ï¼OVABLE MESSENGER
04
NTUST Things
MoodSaver / 親子互動玩具設計 臺灣科技大學101級畢業製作 科技日新月異，人與人之間的關係卻越來越疏離，我們想藉由玩樂 的方式讓親子間重新找回對話的方式。也挑戰結合科技技術，讓產 品不再只是模型，是可以真正動起來的原型。
ＳＴＯＲＹ
＂二個宇宙間的訊息傳遞＂ 常聽見人家說，父母與孩子就像住在二個星 球上的人，總是無法理解對方到底在想什麼。 Mood Saver是名穿梭在宇宙間的太空信使， 乘載與傳遞二個宇宙間想分享的各種喜怒哀 樂。結合簡潔的App操作、容易學習的錄放 互動、720全向移動、可愛的動物太空人外 型，透過親子共玩玩具的方式，讓二個星球 間建立起情感層面的緊密連結。
產 品 示
播放鈕
意 圖
錄音鈕 喇叭 （出聲孔）
麥克風 （收音孔）
背面
正面
720度移動全向球
技 術 結 構
總體規格 24X24X35 cm
太空信使技術結構 規格 15X16X9 cm 電池需求 9v電池 2個
移動星球技術結構 規格 Φ24 cm 電池需求 9v電池 2個
以磁力結構結合 太空信使與移動星球
技 術 結 構
鈕扣電池
錄音按鈕 （有段）
錄放控制模組 喇叭
播放按鈕 （無段）
麥克風
9V電池 馬達控制模組 ARDUINO
馬達 & 全向輪
9V電池
手機app操控
使 用 方 式
輕按右耳即可錄音，重按結束錄音。
手機app介面設計
輕按頭頂即可播放錄音內容。
左手控制移動方向
右手控制定點旋轉
使用App控制移動方向。
產 品 照 片
1｜ 2｜ 3｜ 4｜ 5｜ 6｜
太空信使背面細部圖 太空信使與移動星球 按壓右耳開始錄音 按壓頭頂即可播放 組合太空信使與移動星球 App操作過程
1 2 3 4 5 6
Those things I think about. Life isnĘźt about finding Life is about creating.
05
Illustration
Those things I think about ...
聖誕搭檔 illustration / 麥克筆 色鉛 想練習畫機器人，剛好是聖誕節所以就來應景一下吧！ 感覺是可以在遊戲世界戰鬥的那種有趣角色。
05
Illustration
校徽簡化LOGO 全國琉璃傳情活動網站icon 琉璃傳情為竹友會的一年一度的全國性活動，為了要配合網站跟整 體視覺風格，所以把參與的學校LOGO全部重新簡化繪製一次，只保 留關鍵元素呈現極簡的味道，讓主角琉璃商品的相片更突出。
05
Illustration
05
Illustration
黑白插畫類 illustration / 黑色原子筆 很喜歡帶著筆記本跟黑色原子筆隨手塗塗畫畫寫些筆記，記錄生活 中一些美好時刻，或是抒發一些難以用文字表達的感覺。 我覺得黑與白最能表現物體最原始的樣貌。
Contact
陳芯如
XinRu Chen +886 936 248 009
1994
2016
b10110013.ntust@gmail.com