Page 1

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級畢業製作 科技日新月異,人與人之間的關係卻越來越疏離,我們想藉由玩樂 的方式讓親子間重新找回對話的方式。也挑戰結合科技技術,讓產 品不再只是模型,是可以真正動起來的原型。


STORY

"二個宇宙間的訊息傳遞" 常聽見人家說,父母與孩子就像住在二個星 球上的人,總是無法理解對方到底在想什麼。 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

Profile for Xin Ru Chen

XinruChen profolio 2016  

XinruChen profolio 2016  

Profile for xinruchen
Advertisement