Portfolio 2018
UI/UX & Website Design
林瑛怡 Ying-I Lin
0988761643 yingyi518@gmail.com
19
Portfolio 2019
Profile
EDUCATION MA Communication Design: Graphic Design Kingston School of Art (Kingston University of London) 2016 – 2018
法國語⽂學系 天主教輔仁⼤學 2011 – 2015
PROFILE 林瑛怡 Lauren
1993 / 05 / 18 0988761643 yingyi518@gmail.com www.linkedin.com/in/yingyilin93/ www.behance.net/yingyi518 dribbble.com/yingyilin
LANGUAGE 中⽂ — ⺟語 英⽂ — 精通 法⽂ — 中等 SKILL Adobe Xd ・ Adobe After Effect ・ Adobe Illustrator・Adobe Photoshop ・ Adobe Indesign ・Html & Css
WORK EXPERIENCE Visual Designer 視覺設計師
How Design 怎漾設計・New Taipei City Mayʼ 18 – Present ・客製化RWD網⾴設計 ・客製化後台系統介⾯流程設計，設計⾯試(Applicant Tracking System)後 台操作、線上課程後台操作以及虛擬貨幣介⾯流程 ・規劃網站UI、UX，製作Functional Map、WireFrame。 ・擔任系統/網⾴PM，與各部⾨協商及整合需求，分配⼯作時程並回報主管
Freelance Graphic Designer 平⾯設計師
PINGHE ・ London Octʼ 17 – Julyʼ 18 ・重新設計PINGHE品牌設計以及周邊VI設計 ・PINGHE & pH15 官網設計 ・pH15中國天貓商場形象、活動設計 ・依需求製作設計物，從網站形象圖、EDM到每季的⽬錄
Graphic Design Intern 設計實習⽣
Joseph Fashion ・ London Novʼ17 – Febʼ18 ・負責Joseph Fashion線上設計物製作：Social Post 以及投放各個網站的 活動Banner ・ Joseph新⼀季品牌⽬錄以及網站點⼦發想 ・測試Joseph中⽂版網站UX
UI/UX Design
Portfolio 2019
UI/UX Design
Kid Castle Foreign Teacher Recruiting Website
Kid Castle Foreign Teacher Recruiting Website 吉的堡外事部網站設計
Year | 2019 Client | Kid Castle Educational Group China Work | Website Design, Applicant Tracking System Design
在這個專案我的⼯作主要為PM以及UI/UX設計師，除了設計網⾴外還需 要吉的堡外討論功能及需求，並製作客製化外語教師⼈⼒⾯試系統，讓 招募外師⼯作可以更制度化與更有效率。
Portfolio 2019
UI/UX Design
Kid Castle Foreign Teacher Recruiting Website
Design system Colors
Typography
Main color #2880C1
#002E60
Secondary color
#F4B517
H1
H2
H3
Kid Castle Educational
Kid Castle
Educational
Kid Castle Educational
Helvetica Neue Medium 50px
Helvetica Neue Regular 34px
Helvetica Neue Medium 26px
Paragraph Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
Text color
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero.
Helvetica Neue Regular 16px #222222
#FFFFFF
#8F9EBE
#ECEFF4
Portfolio 2019
UI/UX Design
Kid Castle Foreign Teacher Recruiting Website
Applicant Tracking And Interview Booking System
Hiring Process ⾯試流程
客製化⼈⼒以及⾯試系統
The Task
1. 依需求將申請⼈篩選成三類，HR篩選後之後 會寄出⾯試邀請信，裡⾯會有連結讓申請⼈依 ⾃⼰⾏程預約⾯試時間。 2. 在確定⾯試時間的七天前皆可以⾃由取消、 重新預定⾯試時間 3. ⾯試官以及申請⼈遍佈在其他國家，需要有 Time zone設定讓⾯試時間同步 4. 需要有⿊名單以及顯⽰申請次數的功能
Applied
Applications imported from application form pages
1st Interview
2nd Interview
Conditions 1. Invitation email sent – Waiting for response 2. Interview scheduled by candidate (system) 3. Interview scheduled by admin 4. Interview confirmed 5. Interview canceled by candidates (system)
6. Interview canceled by admin 7. Link expired (system) 8. Interviewed 9. Passed
Offer
Hire
Conditions
Conditions
1. Not contacted yet 2. Contacted 3. Offer accepted 4. Offer declined
1. Not contacted yet 2. Contacted 3. Onboarding
Reject
Conditions 1. Not contacted yet 2. Contacted
Portfolio 2019
UI/UX Design
Kid Castle Foreign Teacher Recruiting Website
可隨時區變更時間，改變顯⽰時間
Front Stage Booking Process 前台申請流程
申請⼈收到系統邀請信裡會有連結可以連接到預約⾴ ⾯，預約⾯試時間後將可以email登入到預約總覽介 ⾯，在期限內可⾃由更改或取消⾯試時間。
Portfolio 2019
UI/UX Design
Kid Castle Foreign Teacher Recruiting Website
分類⽅法：依照申請⼈上傳的⽂件⿑全分類
Applied stage: 所有申請⼈提交申請表格後， 最⼀開始的階段都會是”Applied”。HR之後會 進⾏更近⼀步的履歷審核，通過後就會寄出系 統⾯試邀請信。
A - 全部⽂件已上傳 B - 缺少部分⽂件 C - 缺少所有⽂件
Update Stage / Condition
Update
Stage 1st interview
View Profile
Condition
Update Button: 改變狀態、寄出系統信收合在此按鈕內 Profile Button: 進入內⾴可以看到申請者的詳細資料以 及HR變更的所有紀錄。
Schedule interview Send invitation email
Interview ScheduleDate interview
25 Oct, 2019 20:00
Interviewed Applications
Passed
Interviewer Bulk Action
(GMT + 8:00) Asia/Taipei
Lucas Sinclair
Cancel the interview Choose action
Update *
Search names, phones number or email…
Interview Stage Process ⾯試後台流程
10 Row
此階段流程結合了⼿動控制以及系統控制的階段，因此部分狀態會隨系統⾃動改變狀態。
Filters
Search Leave an update
Category
Stage/condition
All categories
Nationality
All stages
Category
A
A
A
Candidates
Steve Harrington Last updated 10th Oct 2019, 14:35
Steve Harrington Last updated 10th Oct 2019, 14:35
Steve Harrington
All conditions
Timeframe
All countries
Any time
Cancel Update stage/condition
Confiirm
Nationality
Stages
Condition
Interviewer
Germany
Applied
–
–
Update
View Profile
Germany
1st Interview
–
Update
View Profile
Invitation email sent
Action
Waiting for response
Germany
1 Interview st
Last updated 10th Oct 2019, 14:35
01
當HR將狀態更新⾄”1st/2nd interview”時，系統將⾃動寄出⾯試邀請信，請申 請⼈預訂可⾯試時間。
02
⼀旦申請⼈選好了⾯試時間，系統狀態將會顯⽰出時間⽇期，並改變狀態顏⾊⾄ 黃⾊，提醒HR需要指定⼀個⾯試官 ; HR也可以從後台設定⾯試時間。 Condition
10th Oct 2017, 14:00
Not assigned yet
Update
View Profile
Interview scheduled by candidate
B
Steve Harrington
2
Germany
1st Interview
A
Steve Harrington Last updated 10th Oct 2019, 14:35
Steve Harrington Last updated 10th Oct 2019, 14:35
Lucas Sinclair
Update
View Profile
Lucas Sinclair
Update
View Profile
Update
View Profile
10th Oct 2017, 14:00
Interview scheduled by candidate
Interview scheduled by admin
Admin已預定時間
Interviewer
Not assigned yet
狀態變成黃⾊時，會提醒指定⾯試官
Interview confirmed
Last updated 10th Oct 2019, 14:35
A
10th Oct 2017, 14:00
10th Oct 2017, 14:00
申請⼈已預定時間
Apply times
Condition
Germany
1st Interview
Germany
1st Interview
10th Oct 2017, 14:00 Interview confirmed
10th Oct 2017, 14:00
Not assigned yet
Interview scheduled by admin
03
指定好⾯試官之後，系統狀態將會轉為綠⾊，代表這個⾯試已確定。系統會寄出 ⾯試確認信給申請⼈和⾯試官。當然在到期的七天前還是可以⾃由的取消/改變時 間，狀態這期間也會不定期的改變。 Condition
B
Steve Harrington Last updated 10th Oct 2019, 14:35
A
Steve Harrington Last updated 10th Oct 2019, 14:35
10th Oct 2017, 14:00 Canada
1st Interview
Interviewed
–
Ireland
1st Interview
Passed
–
Germany
1st Interview
Link expired
–
Australia
1st Interview
Interviewed
Lucas Sinclair
Update
View Profile
Update
View Profile
Steve Harrington A
Last updated 10th Oct 2019, 14:35
Update
View Profile
Blacklist
A
Steve Harrington Last updated 10th Oct 2019, 14:35
Update
View Profile
Interviewed confirmed
04
⾯試後系統狀態皆會是⼿動變更，系統強制設定每變更⼀個狀態HR需要留下 變更紀錄，讓每個⼈都可以了解他每個狀態變更的原因。
Portfolio 2019
UI/UX Design
Kid Castle Foreign Teacher Recruiting Website
sit site
Hi, Admin
Log out
pplications
Profile
Oct 21 2019 5:10 PM
Timeline
Go back
Condition changed - From Contacted to Onboarding By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Condition changed - From Not yet contacted to Contacted By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Moved to Hired stage - Not yet contacted By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Condition changed - From Contacted to Offer accepted By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Condition changed - From Not yet contacted to Contacted By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Moved to Offered stage - Not yet contacted By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Condition changed - From Interviewed to Passed By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Oct 21 2019 5:10 PM
Condition changed - From Interview scheduled to Interviewed By Sophie Lee Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy.
Activity Log – Timeline 狀態紀錄
當HR要改變申請者的階段和狀況的時候，會強制要求填 寫改變原因，⽅便其他⼈追蹤申請⼈的⾯試狀況。
Portfolio 2019
UI/UX Design
Kid Castle Online Course Website
授课老师 Elyse Ward
少⼉美语、⼝说教学 ＯＯ⼤学英⽂幼教硕⼠毕业，10年教学经验
100,000 位学⽣
Kid Castle Online Course Website
23 堂课
查看所有課程
吉的堡線上課程網站
Year | 2019 Client | Kid Castle Educational Group China Work | Online Course Frontstage & Backstage Design
初阶英⽂
主要負責設計線上課程⾴⾯以及流程，客⼾需求希望設計⼀個網站可以同時給 園內的⼩孩上直播網課並同時開放線上課程給其他客群。此專案主要為每個登 入的⾓⾊不同，設計不同層級的介⾯、以及設計出流暢的線上課程介⾯。
(205个评论) 总时数3⼩时24分 課程售價 4.5
¥150.00 ¥200
⽴刻購買
Elyse Ward
少兒美語、⼝說教學 100,000 位学⽣
幼⼩衔接英语课程 直播
早教
¥400
7⽉26⽇ 09:00直播 Natasha Gill
Junior Class 少⼉基础英语课程
专业班 5
798
少⼉美语 6⼩时 45分钟 Elyse Ward
早托
先修班
¥600
5
798
23 堂课
Portfolio 2019
UI/UX Design
Kid Castle Online Course Website
Design system Colors
Typography
Main color #0089C8
H1
Kid Castle Educational
#2880C1
Alert and button #F4AE00
蘋⽅ — 簡 Light 48px #6EB828
#DA251C
#ED615A
Text
#707070
Paragraph
H2
Kid Castle Educational 蘋⽅ — 簡 Regular 34px
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero. #AAAAAA
#242222
#FFFFFF
蘋⽅ — 簡 Regular 16px
H3
Kid Castle Educational 蘋⽅ — 簡 Medium 26px
Portfolio 2019
UI/UX Design
Course Page Interface 前台課程介⾯
Kid Castle Online Course Website
課程⾴⾯以簡單流暢為主，可以⼀⽬了然的看出每個按鈕的功⽤。課程⽬錄上做出Checkbox讓使⽤者可以記錄已看過的課程，課程 區塊也做出延展按鈕，讓觀看⾯積變⼤，瀏覽體驗更舒服。課程播放區塊下做出Tap，分類出課程所需要的資訊：“課程概述” “學⽣ 評價” “問題討論”以及“資料下載”。
学员评价
精选评价
L
李⼤名
4.5
2019/05/18
⽼师⼀开始从没想过的历史观点来解释起源，让⼈忽然豁然开朗，原来以前在学校怎样 都搞不懂只能⽤死背的单字是这样解读，使我在读英⽂时能够以更主动(去查询为什么 会这样)的探询⼼态去学习，感觉更有兴趣了。⽼师⼀开始从没想过的历史观点…… 查看更多
L
5星 4星 3星 2星 1星
(205个评论)
第⼀章1.11章節 mixin中設定圓⻆時為何要給預設值? 我想請教我添加再Three.js 添加dat gui 控制box 顏⾊或者背景顏⾊ 有沒有什麼參考的寫法 … 3
李⼤名・2019/05/18 授课⽼师・ Elyse Ward
发问中
3
255
255
在iOS系統稱為Action Sheet，不過在Android上叫做Bottom Sheet，主要是⽤於⼿機裝置。在設計時， Action sheet是⼀組快速⼜簡潔的⽅法，無須設計額外的畫⾯，同時提供使⽤者選擇的空間
2019/05/18 微信扫码
新浪微博 好友
复制链结
W
255
你知道答案吗？回复此问题 回复
Portfolio 2019
UI/UX Design
Kid Castle Online Course Website
Profile Page 個⼈資訊介⾯
個⼈介⾯設計已Tap樣式分類各個資訊，User可以輕鬆看到所需內容，個⼈帳 ⼾設計只要申請講師權限就可以開課，因此得到權限後介⾯將會比⼀般User多 出兩項分類，盡量在⼀⾴解決所有需求。
簡易圖表顯⽰課程的銷售狀況
课程管理 封存课程
稿草
编辑 删除 最后修改时间：1分钟前
Junior Class 少⼉基础英语课程 Elyse Ward 课程⻚ ⾯
6⼩时 45分钟 5
講師課程管理收在更下⼀個層級
798
Junior Class 少⼉⼝说英语课程 Elyse Ward ⽬前完成进度65%
Portfolio 2019
UI/UX Design
Kid Castle Online Course Website
Course Creating Process 課程上架流程
課程申請 申請表單
官⽅核准 申請
備課期
備課期
準備影片
送出影片審查
經營期 官⽅審查回饋
修改問題
問題回報
上架
與學⽣互動
Portfolio 2019
UI/UX Design
Kid Castle Online Course Website
Course Backstage 課程後台介⾯
個⼈介⾯設計已Tap樣式分類各個資訊，User可以輕鬆看到所需內容，個⼈帳⼾設計只要申請講師權限就可以開課，因此得到權 限後介⾯將會比⼀般User多出兩項分類，盡量在⼀⾴解決所有需求。
Portfolio 2019
UI/UX Design
Kid Castle Online Course Website
Easy to update multi-video process
第1节
Emoji meanings around the world
编辑
第2节
Emoji meanings around the world
编辑
Emoji meanings 第3节 第3节 Emoji meanings around thearound worldthe world
编辑
第4节
Emoji meanings around the world
编辑
第3节
Emoji meanings around the world.mp4
2MB of 10.9 MB (21% 完成)
1.11 Emoji meanings around the world 15:06
簡易影片上架流程
簡易影片上架流程，上傳完影片再調整影片順序以及名稱。
收合 编辑
上传状态：上传中 刪除此單元
第4节
Emoji meanings around the world.mp4
编辑
2MB of 10.9 MB (21% 完成)
拖曳视频到这⾥ -
或者 -
选择⽂件 添加单 元
编辑
Portfolio 2019
UI/UX Design
Cryptocurrency Exchange Platform
Coinxchange Cryptocurrency Platform 虛擬貨幣交易所練習
Year | 2018 Work | Website Design, Ui/Ux Design
此專案為公司原本案⼦的延伸練習，主要⽬的為設計出每個⼈都可以輕鬆使⽤的交易貨幣平台， 案⼦中特意以明亮簡單視覺設計出平易近⼈的介⾯，介⾯按鈕設計成⼤比例並配合圖⽰讓交易者 對於貨幣交易不再有壓⼒。
Portfolio 2019
Trade
交易介⾯
UI/UX Design
Cryptocurrency Exchange Platform
Portfolio 2019
UI/UX Design
Cryptocurrency Exchange Platform
User Dashboard 個⼈帳號總覽
個⼈介⾯裡可以簡單看出使⽤者的交易貨幣狀況，系統會算出他⽬前交易中和 已交易的⾦額、以及今⽇漲幅可賺/賠的的⾦額。 介⾯右上⾓有發送和接收按 鈕，可以簡單在該介⾯中將各種貨幣發送到其他帳⼾中。
Portfolio 2019
UI/UX Design
Cryptocurrency Exchange Platform
簡易的Lightbox設計，在⼀個介⾯中選擇多種貨幣的流動。
Receive
Send Token Adress
Token Address
B TC
B TC
2NFxA1QnfvKxFJh6x5L8GWahd9D2beugGjM
Rental Fee
Amount
2N2WbhgBMJWaLRjZoCoND7t7zUWsg3apjyK
0.0005 (100 TWD)
QR code
Note
Fee Total Cancel
Send
Close
Portfolio 2019
UI/UX Design
Cryptocurrency Exchange Platform
Wallet
錢包介⾯ 錢包介⾯會列出該平台可交易的貨幣，點進內⾴可看到該貨幣更詳 細的交易清況。
Portfolio 2019
UI/UX Design
Cryptocurrency Exchange Platform
Wallet
錢包介⾯內⾴ 錢包內⾴可產出該貨幣的交易地址並可重新命名⽅便管理，同時列 出接收發送紀錄。
Website Design
Portfolio 2019
Website Design
Silk Of Me E-commerce Website
Silk Of Me E-commerce Website Year | 2019 Client | Silk of Me Work | Website Design〠Squarespace website system
Portfolio 2019
Website Design
United Quartz Year | 2019 Client | United Quartz Work | Website Design
United Quartz
Portfolio 2019
Website Design
Responsive Design
United Quartz
Portfolio 2019
Website Design
United Quartz
Portfolio 2019
Website Design
BitWe Cryptocurrency Trading Landing Page
BitWe Cryptocurrency Trading Landing Page Year | 2018 Client | BitWe Work | Website Design
台灣虛擬貨幣交易平台⾸⾴設計，⾴⾯強調親切簡單年輕，希 望給⼈簡單操作的形象。
Portfolio 2019
Website Design
Ceres Website
Ceres Website Design Year | 2019 Client | Crers Work | Website Design
藥廠⼀⾴式網站設計，主要介紹該藥以及研發時程。
UI/UX Design
ASUS ROG Audio Landing Page
ASUS ROG Audio Landing Page Year | 2018 Client | ASUS Work | Website Design
ipad black https://dribbble.com/ZHENHUA
Portfolio 2019
Portfolio 2019
Website Design
ASUS ROG Ryujin Product Page
ASUS ROG Ryujin Product Page Year | 2018 Client | ASUS Work | Website Design
Portfolio 2019
Website Design
ASUS ROG Strix RGB Product Page
ASUS ROG Strix RGB Product Page Year | 2019 Client | ASUS Work | Website Design
Website Design
ASUS 30th Anniversary Timeline
ASUS 30th Anniversary Timeline Year | 2019 Client | ASUS Work | Website Design
ipad black https://dribbble.com/ZHENHUA
Portfolio 2019