UI/UX Portfolio 2019

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 微信扫码

新浪微博 好友

QQ

复制链结

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