Padi Cheng Design Portfolio

PORT F OLIO PADI CHENG

[ 程 宇 菉 ]

CONTENTS 01

03

05

15

About Me

Daily UI Challenge & Redesign

Service Design Energy Bank

- Senior-Satisfied Sharing P

順袋 BY THE WAY

- Mass Transportation Logis

e n 17

Platform

Y

53

85

103

UI / UX Design

Graphic Design

Motion Graphics & Video

Whandy

55

Personal Branding

87

67

Taipei Metro Redesign 89

- New Weather App

33

stics System

Sparkgo

- Cross Platform Integration App

NCKU Bike Festival 77

NCKU Bike Festival

91

Eyemood Branding

99

順袋 BY THE WAY ORIBAGU Lifestyle Lookbook

105

107

- RWD Official Website

02

[ PADI CHENG

]

As an out-going, attentive person, I like to arrange plans and make contact with people. I enjoy challenge and solve problems through thinking. Besides, I have strong ability of learning and love to reach out to interdisciplinary collaboration.

Love design cause there is no model answer, and durng the design process, there is always full of surprise. Love observing life, understanding how people look at things and seeing issues from different perspectives.

1996 / 02 / 27 Taipei, Taiwan 0935-283-918

LEADERSHIP

padi850227@gmail.com

SOCIALITY

TEAMWORK

INTEGRATION

EDUCATION

AWARDS

National Cheng Kung University

Bó Lè Associates AIxCSR Competition

Department of Industrial Design

- 2nd Prize with NTD 30000

/ Sep. 2014 - Jun. 2018

/ Oct. 2018

Taipei Municipal

Taiwan International Student Design Competition

Zhongshan Girls High School

- Finalists ( ongoing ) Service Design Group

Stars Program Admission to University

/ Sep. 2018

Academic Excellence Award

News Report

Open HCI Workshop

/ Sep. 2011- Jun. 2014

- Best Technique Award MR. H - Hanger design

LANGUAGES

/ Aug. 2018

News Report

Open Data Innovative Application Competition

Chinese

Native

English

TOEIC 945

Japanese

Basic

- Finalists / Jun. 2017

HOBBIES

WORKSHOPS Open HCI Workshop / Aug. 2018

Singing

Guitar

Flute

Japan Chiba University - Clean Air Joint Design Workshop / Jun. 2017

Band

03

Cooking

Calligraphy

Electrical Engineering & Industrial Design - Fintech Workshop / May. 2017

EXPERIENCES MINISTER OF INFORMATION DESIGN DEPARTMENT

NCKU Bike Festival / Nov. 2017 - Mar. 2018

One of the most significant activities in NCKU. Responsible for designing the visual identity and co-worked an official website. Cooperating with marketing department, We transformed information into infographics and posted them on our fan page which caused approximately hundred thousands of reach.

Student Association of NCKU Industrial Design

DIRECTOR

/ Sep. 2016 - Jun. 2017 Coordinating with each section and other departments’ student, launching a variety of design activities, such as organizing workshop with 3 other design schools and holding interdisciplinary lectures. These activities not only enhanced participation and coherence but also branded for ID student association.

.

ShiaoChingShe - Joint Design Workshop

COORDINATOR

/ Sep. 2016 - Feb. 2017 Organizing and leading the joint design workshop with NTUST and NTUT on winter vacation. Integrating 5 sections and we only had video meeting because of long distance.

We accomplished the unprecedentedly design cooperation and it was well-reputed.

SKILLS / DESIGN /

UI / UX Design

Product Design

Research

Research

Flow Chart

Ideation

Wireframe

Rapid Prototyping

Mockup

3D Modeling

Motion Graphics Web Design Inter-disciplinary Design

Prototype

/ SOFTWARE /

Graphic Design

Adobe Series

UI / UX Design

Product Design

Illustrator

After Effects

HTML5

Invision

Solidworks

Photoshop

Dreamweaver

CSS3

Zeplin

Keyshot

Indesign

Experience Design

Sketch

Autocad

Premiere

04

Let’s Not Fall In Love BIGBANG

Californication

Red Hot Chili Peppers

Palette 田馥甄

[

DAILY U & REDE

05

UI CHALLENGE ESIGN ]

06

DAILY UI CHALLENGE & REDESIGN

In the Daily UI Challenge, I rethought about the user process of every topic. I tried to use related Apps then noted some usability problems, and read several relevant UI/UX case studies. Afterwards, I observed the presentation of the current UI, and thought over how to make the UI more friendly.

In the Redesign, I chose Trello since it is widely used in meetings and projects at school. I asked some users about the usability to get more info and tried to redesign it.

07

/ Make the price and main buttons fixed at the bottom, so users can still see it clearly when scrolling the details. / Each item has a category tag on its page, to show users what category the item is in and know where they are in the platform.

[ DAILY UI CHALLENGE & REDESIGN ]

E-commerce

/ In the Shopping Cart, the page shows how many items total the user adds. / There is a progress bar on the Shopping Cart page, so users can clearly know which stage they are at.

Shopping Cart 1

ORDER DETAILS

2

PAYMENT

PRODUCT

Long Flax Shirt

Size / S Color /

Shirt

Long Flax Shirt

Wide Shirt

( 145 )

Size

S

M

Quantity

1

Size / F Color /

L

Per Piece

NT. 450

White

Skinny Jeans

Size / M Color /

Description Size Chart

Yellow

Black

Sweater Coat

ADD TO CART

3

Cart Total

Size / S Color /

NT. 1538

Beige

4 items 3

CONFIRMATION QTY

TOTAL

1

NT. 450

1

NT. 350

1

NT. 299

1

NT. 439

NEXT

08

TV-App / The search page offers suggestions such as “Hot Searches”and “Genres”, and has filter for more detailed search. / In the drama page, use Tab Bar to sort and hide the information. / The episode background would change color with the progress bar, enhancing visual experience.

Search

Filter

Game of Thrones

Hot Searches

Game of Thrones 翻牆的記憶

TW

US

Sense 8

愛的3.14159

TW

US

Black Mirror 楚喬傳

7 seasons ｜65 episodes

US

CN

Western

Action

Thrill

Like it soooooooo much !

250

800+

15,763,249

Genres Comedy

Gooooood ! 300

US

Romance

Epic

EPISODES

ABOUT

CAST&CREW

COMMENTS

Recently Season 3

EP 3-1

25:21 / 52:05

7 seasons ｜65 episodes Season 1

09

EP 1-1

52:05

EP 1-2

52:04

/ Video and voice call are hidden into the “more” button, in case users touch the buttons easily by accident.

[ DAILY UI CHALLENGE & REDESIGN ]

Direct Messages

/ Users can pin the messages in case the important ones disappear after a while. / Users can drag the voice message to repeat. / All functions are stored into the “add” button. Users can find them more intuitively, and close them by the “exit” button.

Design Team 4 members

Monday Remember to upload the files!

9:30 am

4 members

Hi there !

Hi there !

9:32 am

0:31

data.pdf

9:32 am

1:09

OK ! Where’s the data?

9:35 am

Design Team

Download

Thanks !

Type something ...

Ethan

Josh

Jenny

Irene

Invite

Notification

9:34 am

Shared Documents data.pdf

Download

company logo.ai

Download

activity plan new.pdf

Download

slide 09.pptx

Download

Shared Photos

10

ea lth

11

H

R

Ad d

g

ee tin

de r

ity

in

Re m

nt es t

Co

Ac tiv

M

w

ne

g

ee tin

ta g

nt es t

Co

M

Ta g

e

H

nt ex t

Co

u

M

ity

12 :0 0

m e

Ti

e

rt o

20 18

/5

1

t

bo tt le

Ev en

in g

br

12 :0 0

/9

be

Da te

em

Ex er re ci m s

si at c Fe SC st CP iv Ta al ip ei

Ac tiv

Ev en t

00

18 :

15 :0 0

p.

7

Se

30

23

2

18

20

24

16

/9

3

25

17

9

/5

Ad d

0

:0

22

4

26

18

10

2

0

29

21

13

5

28

on

M

20 :0 0

6

28

20

12

4

27

n

Su

Ev en t

:0

21

5

27

19

11

3

26

19 :0 0

22

14

6

29

Tu e

18 :0 0

15

7

30

ed

W

0

:0

16

ei

1

Sa t

Fe st iv al p

Ta i

ic

us

M

CC P

at S

r

Fr i

0

:0

17

8

31

u

Th

ar

nd

le

be

pt em

Se

Ca

0

:0

15

g

3 Tu e

bo tt le

on

M

in

br

2

se

rt o

be

em

Ex er re ci m

n

Su

4 ed

W

5 u

Th

6 Fr i

r 7 Sa t

ar

nd

le

be

pt em

Se

Ca

8

Calendar

/ Touch the date to have a quick view of the activites below the calendar.

/ Users can create different tags with different colors.

/ Users can search for events using keywords or tags.

/ Use the outline of CD to show the album cover. / On the music page, when playing the music, the CD rotates and the waves below start to move, enhancing user visual experience.

Albums Liked

[ DAILY UI CHALLENGE & REDESIGN ]

Music Player

/ On the music page, touch the “playlist” button to check and switch other songs quickly. 所謂的愛 Californication

小宇

Red Hot Chili Peppers

還是會寂寞

Jun. 1999

陳綺貞

一路向北 周杰倫

1

Music

Californication

Red Hot Chili Peppers

2

Breakeven The Script

3

Let’s Not Fall In Love

4

BIGBANG

Californication

Red Hot Chili Peppers

5

Palette 田馥甄

Albums Californication

Red Hot Chili Peppers

Around the world

Red Hot Chili Peppers

Parallel universe

Red Hot Chili Peppers

Scar tissue

Red Hot Chili Peppers

Otherside

Red Hot Chili Peppers

Californication

Red Hot Chili Peppers

Californication

My Music

Red Hot Chili Peppers - Californication 1:23

4:02

Jun. 1999

1

th

y

2

4 5

Around the world

Red Hot Chili Peppers

Liked

Parallel universe

Red Hot Chili Peppers

Scar tissue

Red Hot Chili Peppers

Otherside

Red Hot Chili Peppers

Californication

Red Hot Chili Peppers

所謂的愛 小宇

還是會寂寞 陳綺貞

Playlists Songs Albums Artists Liked

一路向北 周杰倫

Re m

in

d

m

e

1

ho

ur

be fo re

ea l

3

Padi Cheng

Californication

Red Hot Chili Peppers

Breakeven The Script

12

Trello Redesign / Move the board topic to the navigation bar, avoiding crowding together with members and board privacy settings. / Move Filter Cards out from menu, since it is commonly used and hard to find. / Change the arrangement of the card. Take the FB, IG post for reference, since they are more friendly to users. Put the tags and topic on top, due date on the upper right corner, photo and text in the middle, and attachment, reply, members below. / Use “plus sign” button to replace “add another list / card”, for it is more intuitive for users.

Design Project

Ethan

Private

Filter Cards

Todo list Meeting 1

1

Plan Book

Meeting Records Sep 1

New Ideas Idea 1

20180702 3

1

20180709

5

1

Idea 2

3/4

Sep 1

5

6

1

Reference from Public Relations

5

Idea 3

13

10

5

20180723

1

Fanpage

20

20180716

Drafts

Reference from Marketing

10

1

6

Inbox

18

4

Meeting 1

1

[ DAILY UI CHALLENGE & REDESIGN ]

/ On the Boards page, add the Personal and Team topic to distinguish them, making the info more clear. / On the Boards page, change the board list arranging from vertical to horizontal, so the page can show more teams and more board info can be presented.

Design Project

Boards

A team

Personal

Private

Personal Boards Exercise

Brainstorm

3

Training

4

4

Meeting 1

Team

A team

Todo list

10 Members

Design Project

Chatbot

2018 Expo Meeting

Plan Book

UX

2

1

Meeting Records Sep 1

20180702 3

REDESIGN

10

20180709 1

4

20180716

15 Members

New Plans

13

From Upper

4

4

6

5

5

20180723

Sep 1

1 Boards

NotiďŹ cation

ProďŹ le

14

[ Energy Bank 順袋 BY THE WAY

15

S E RV ICE D ES IGN ]

16

17

[ SERVICE DESIGN ]

ENERGY BANK Senior-Satisfied Sharing Platform Bó Lè Associates AIxCSR Competition - 2nd Prize

Team project mentor

Judy Chiu (HR Director of Microsoft)

collaborate with

黃俊錚 / 葉俊言 (NTU CSIE) 羅偉倫 (NCCU MAB) 邱靖晏 (Design Goldsmiths) 李建承 (NCKU ID)

responsible for HCI design / logo design / serivce process ideation / design integration / PPT design

18

SERVICE DESIGN 01

[

ENER GY B A NK ] Energy Bank is a platform that offers seniors to become providers, and share their experiences or expertise to others.

The platform not only enhances cross generation communication, but also raises seniors’ self-esteem and sense of accomplishment, co-creating a satisfyed senior society.

19

[ SERVICE DESIGN ]

BACKGROUND The aging of the population has become more and more serious. Issues about seniors have called attention of the society.

We found that services for seniors at present aimed to detect disease, improve security and look after them. However, for seniors who have retired, their next period of time have just begun.

The Post-World War II baby boomers have more resource, capability to manage their lives. As a result, we decided to focus on seniors who have just retired and find more opportunities for them.

DESIGN PROCESS We made a plan of the design process for the project, from research to design, expecting the project to be more complete and close to users.

discover problem defining user study ideation insight design persona

20

USER STUDY We designed an interview for retired seniors to know more about their daily lives and needs. We visited 20 respondents of different occupations. After the interview, we organized what we learned into the Affinity Diagram.

Daily activity

Matter

Like to share

Less info source

Negative mindset

join sports class

some activity webs didn’t update

willing to chat

read newspaper

afraid to be deceived

find lecture

can’t get latest info

still want to teach

use LINE to contact their child

bored

go to community college

still need to take care of the elderly

join activities

used to call their firends

friendless

watch television

planting

INSIGHT What do seniors think about work?

We found out that some seniors are still enthusiastic and want to do what they do at work, such as teaching. We did some data research and asked further about their thoughts about work, and learned some new perspectives.

Statistics by MoHW(Taiwan) in 2016- Seniors are the least satisfied when not having work to do.

Pensions are not enough

21

It is considered to be lucky when someone is still able to work over 60 years old.

[ SERVICE DESIGN ]

Before

After

Work

Family

Sociality

Sociality Hobbies Family Hobbies

In the interview, we discovered that work, sociality, family and hobbies are the main parts in people’s daily lives. People prioritize these parts at different stages. Before retirement, people generally put work and sociality at first and second place. When retired, they no longer have to work, and sociality part would decrease quickly. As a result, there are much more free time but besides family and hobbies, they still feel bored and want to find new fun.

Lack pathway Bored, lose their balance Afraid of being decieved

Physical, mental problems Become passive Seldom contact with others

Although seniors have passion for sharing what they know, there are seldom platforms for them to obtain information and participate in activities, resulting in their friendless and solitude. Besides, We found out that LINE is the main message software seniors use, and the user interface is friendly for them. Thus, it is an approriate intermediary for us to apply.

22

PERSONA We analyzed our target users’ details and generated 2 personas, describing their background, behavior and conditions.

PERSONA 1 BACKGROUND ran coffee shop, cake and engineering before - 60 years old / reduced workload, still had factory in China - 64 years old / retired because of health concerns

石鐵成

Shi, Tie-Cheng Age / 68 Just moved to live with his son

SATISFYING THINGS

CHALLENGE

CONTACT

Share some work stories with his grandsons during Chinese New Year

His son is busy and nobody can chat with him

Make phone calls from LINE to chat with colleagues or families

PERSONA 2 BACKGROUND Retiring from elementary school because of health concerns at 53.

Besides taking care of her mom, she usually goes back to school and help others.

林麗娟

Lin, Li-Juan Age / 61 Living together with her husband

23

SATISFYING THINGS To see a science tool she made being used by other teachers. It can inspire more people.

CHALLENGE

CONTACT

The evironment of school she stayed was simple, so she is afraid of being tricked and reluctant to try.

To share info through adding groups by LINE. Ex.Health Care Forum Group

After confirming our personas, we evaluated the conditions that users face and then decided what we are going to solve:

“

[ SERVICE DESIGN ]

PROBLEM DEFINING

“

The imbalance of retiring life causes plummeting in physical, mental and cognitive functions

IDEATION To raise seniors’ self-esteem and sense of accomplishment, we discussed and let the seniors become active, and brainstormed what they can do, then sorted these ideas into 3 main parts.

Passive

Active

investment

business

experience office

chat stories

Career

Share

Providers

cooking

TAI-CHI

planting

photography

English

Skills / Hobbies

24

PLATFORM INTRO Energy Bank is a platform that offers seniors to become providers, and share their experiences or expertise to others . Providers are aged above 55 years old or have retired, and demanders can be any ages. On the platform, providers post what they can share, while demanders post what they need. The platform would match the demands and supplies, and providers can conduct the service. post supplies

Providers

post demands

Matching

Aged above 55 years old or have retired

Demanders Everyone at any ages

/ PLATFORM SERVICES / There are 3 kinds of services that providers would offer - career consulting, skills imparting and life experience sharing, for these are professions that seniors willing and competitive to give out.

Career Consulting

25

Skills Imparting

Life Experience Sharing

We offer 2 platforms for users - chatbot (short-term goal) and website (medium-term goal). Chatbot ( we use LINE) is convenient and user-friendly for seniors, while website gives them more complete information about the service.

Chatbot

[ SERVICE DESIGN ]

/ ACCESS /

Website medium-term goal

/ PLATFORM SYSTEM /

Money Users set up the profits for exchanging between services.

Time currency & Red Envelope - When users have completed their services, they are rewarded with an equivalent value of the time currency.

- Users earn a red envelope once the time currency reaches a certain amount. The red envelope can be further exchanged for services.

Rating System Both providers and demanders can rate each others after the service.

26

USER FLOW (FOR LINE) We thought over the LINE process of providers and demanders, including what the UI shows, what data users should give, and organized it into user flow, to revise and reconfirm the details and logic of our service.

Providers Aged above 55 years old or have retired

show”re-enter” no

add a supply

show“add a supply”

voice enter supply details

enter name

enter location

enter service name

enter time

enter description

enter price

Is the supply details correct?

yes

show

enter target

Demanders Everyone at any ages

show”re-enter” no

add a demand

show“add a demand”

voice enter demand details

enter name

enter location

enter service name

enter time

select service details

enter price

Is the demand details correct?

yes

Is the

show“ ( system

27

Process Process ( displayed page ) ( user execute )

Decision ( user )

w“wait for demanders”

Decision ( back-end )

Accept the demand?

show “demanders notice”

yes

[ SERVICE DESIGN ]

Start / Finish

Data

match succeed

no

ere any providers?

no

“wait for providers” m inform providers )

yes

yes

show “provider options”

Select providers?

no

yes Is there other providers?

no

show“informed providers”

Did the provider accept?

no

yes match succeed

28

UI FLOW (FOR LINE)

1

enter nam

Providers

enter service

enter descrip

enter targ

enter locat

enter tim

enter pric

select the “I can help” button

voice operate to enter your supply

1

Demanders

enter nam

enter service select service

enter locat

enter tim

enter pric

select the “I need help” button 29

enter your needs

[ SERVICE DESIGN ] 2

1

Provide examples for description, including giving keyword, category, degree.

2

Use AI techniques to add punctuations to become a complete paragraph. Organize what the users enter and show the info.

1

Based on different needs, our service offers relevant detailed options to make the matching more accurate.

2

The template of service data would show which category the service is in, and indicate the rating of the service.

me name

ption

get

tion

me

ce

check the details before submitting wait for the system to smart match

decide to accept or not with the selected demander

2

me

e name details

tion

me

ce

scroll to check the services

select the service you like 30

AI TECHNIQUES We use AI techniques in Energy Bank to make the platform senior-friendly, and encourage the seniors to contribute.

ChatBot

ChatBot is the main access of our platform.

Why

LINE is widely used among seniors.

Voice Operation

Set up demands and supplies via voice user interface.

Why

- Voice operated user platform is considered to be more intuitive and user-friendly.

- It lowers the threshold of technology usage of seniors.

Price Suggestion

Price Suggestion helps user set a price.

Why

It assists users to get an idea of setting up reasonable prices of their services.

Jobs Recommendation

Send work suggestion notice to potential platform users.

Why

31

- It increases matching chance.

- It encourages the seniors to contribute.

- It promotes activities on the platform.

[ SERVICE DESIGN ]

HOW TO ENTER MARKET We enter the market through advertisements at LINE and related institutions, for these accesses are more easily to contact with seniors. Moreover, users can recommendate to others after using our platform, enhancing our reputation .

Access

User Motivation

- LINE Advertisements

- Reputation

- Human Resources and Cooperative Institutions

- Joining in recommendation and providing the red envelopes

FINANCIAL INCOME We collect matching fee of the service at first. As more users join in, our platform can help post advertisements and public opinion polls. On top of that, after platform data collecting, it can be analyzed and applied, such as consumer behavior of seniors. Enterprises can employ potential seniors intern and improve entrepreneurial influence.

Matching Fee 15%

Advertising Fee

Public Opinion Polls

Analysis and application after data collecting

Senior Internships(Stakeholder/ Improving entrepreneurial influence) 32

33

[ SERVICE DESIGN ]

順袋 BY THE WAY Mass Transportation Logistics System NCKU ID graduation project Taiwan International Student Design Competition - Finalists ( ongoing ) Service Design Group

Team project

collaborate with 邱柏翰 / 黃詩雅

responsible for team leader / logo design / serivce process ideation / animation making

34

單 車自由行

學院咖

座

模擬面試

@雲平大道單車站 / 全成大校內

9:00 - 16:00

@多功能廳 / 雲平大道

9:00 - 12:00 / 13:00 - 16:00

@唯農大樓

" 提 筆，畫 卡，鐘 響，交 卷，等 待。然 後 判 決 下 來。 我 還 年 輕，但 我 還 年 輕。

SERVICE DESIGN

一 次，夢 想由自己定 義。"

01

[

騎！

關於我們

地址 電話

順袋

BY T HE WAY ]

BY THE WAY is a service system which combines logistics with mass transportation. Commuters can carry commodities by the way, while dealing with them efficiently without any packaging.

35

701台南市東區大學路西段1號 系學會聯合會 0983-103-518 總召 陳估熊

[ SERVICE DESIGN ]

BACKGROUND Online selling and shopping plays an essential role in our daily lives. Despite their convenience, they lay huge burden on the environment undoubtedly, including excessive one-time packaging and problems caused by transport.

36

RESEARCH We interviewed online sellers and buyers about using packaging, organized the behaviors and problems during the process of online shopping, and make into an ultra-simplified user journey map.

Buyer places an order

Seller packs the commodity

Seller sends the package

Package arrived

ONLINE SELLER

Buyer gets the package

ONLINE BUYER

Problems

Problems

Don’t have suitable packaging

Have to deal with all kinds of packa

Packagings often don’t fit perfectly so sellers still have to add cushions Find packaging on their own

Sellers often buy brand new ones or get them at shops

Buyers have to throw some packaging a cushions away since there is little use Packaging left take up space

Buyers suppose packaging such as box be used in the near future but boxes tak much space

INSIGHT Is packaging necessary?

Use packaging bumpy roads may cause collision

packaging makes tallying more efficient

Packaging cause some problems in sellers’ and buyers’ lives. Seller buys packaging just for sending and buyer throws it away for only a while. But is packaging necessary? We found that using regular packaging can have better efficiency when tallying and carrying. Moreover, packages may encounter bumpy roads and cause collision in the process of transport.

Thus, we infer that the presence of packaging is because of protection from transport problems. Sellers cannot deliver commodities without packaging, while buyers need to deal with those packaging eventually.

37

aging

We brainstormed about the solutions of reduce packaging, including reuse, decomposition and non-packaging. We chose the direction of non-packaging and then thought of the ways to accomplish.

Eventually, we adopted the idea of “Change the means of transport�.

[ SERVICE DESIGN ]

IDEATION

CONCEPT

and

will ke up

CHANGE MEANS OF TRANSPORT

FOR ONLINE AUCTION SELLERS

The packaging is mainly for protection from tranportation problems. Therefore, we decided to change the means of transport without packaging.

In comparison to online store, online auction sellers have fewer money and capability to use eco-friendly packaging, and rather buy one-time packaging instead. Accordingly, we tend to improve packaging problems for auction sellers.

HITCH A RIDE

Big city has dense mass transportation which commuters rely on. We decided to let commodities hitch a ride, and combined the logistics system with mass transportation consequently.

PROTOTYPE & TESTING We made the prototype of the bag, and tested the grasp comfort of the carrier, the function of anti-theft and water-proof.

38

INTRODUCING

BY THE WAY

BY THE WAY is a mass transportation logistics service system. Applying the concept of hitching a ride, we integrated the diverse logistics system with mass transportation, and let the commuters carry commodities by the way. With the design of machine at each site and the aid of App, online sellers and buyers can deal with commodities easily without packaging, and meanwhile promote social sharing.

39

40

[ SERVICE DESIGN ]

TARGET USERS We mainly serve online sellers, online buyers and carriers, and also provide pure senders and pure receivers service.

without preparing packaging use face recognition to gain efficiency

ONLINE SELLER (or sender)

route matching APP delivering MACHINE

Machin

MRT and bus stations become t location where people deliver an receive commodities.

transportation fee subsidy for higher intention use face recognition to gain efficiency

COMMUTER AS CARRIER

(by mass transit system) carry commodities by the way MACHINE

MACHINE

People who take mass tran can be carriers.

without dealing with packaging use face recognition to gain efficiency

ONLINE BUYER (or receiver)

41

[ SERVICE DESIGN ]

ne

the nd

Underground warehouse the commodities will be packed with our bags for carriers.

Carriers

nsportation

arrangement illustration

42

SERVICE PROCESS

Intro film

1

2

3

Sign up

Place order

Delivering

Sellers, buyers and carriers sign up on App. The App connects with orders on e-commerce platforms.

Buyer places order on e-commerce platform, while the App informs seller of the new order simultaneously.

Seller takes the commodity to the machine for delivery without packaging.

TARGET USERS

matching

set face recognition set daily route COMMUTER AS CARRIER

set face recognition ONLINE BUYER

APP

RELATED DEVICES

BAG

MACHINE

43

Carr notic comm (alre bag )

order route

set face recognition ONLINE SELLER

T

daily route

[ SERVICE DESIGN ]

4

5

6

7

8

Take the bag

Carry the bag

Return the bag

Receiving

Scoring

Carrier takes the mass transportation ( MRT / bus / U-bike ) with the bag.

Carrier returns the bag to machine, and accounts the transportation fee discount.

Buyer receives the notice and gets the commodity without packaging.

After reconfirming the commodity, seller and buyer can give score to carrier on App.

rier receives the ce about new modity, and gets it eady packed with ) at each machine.

44

MACHINE DESIGN

face recognition camera glass monitor elevating platform

delivering / receiving situation

RFID induction underground warehouse carrier situation

/ FEATURES / face recognition camera for identifying member quickly seller puts commodity on the platform without packaging

Machine Operation Animation

when carrier takes the commodity, machine will pack it with BY THE WAY bag the elevating platform carries commodity, connecting with underground warehouse

/ LOCATION / Commuter who takes the mass transit system can be carrier, and the machine will be arranged at each station.

45

[ SERVICE DESIGN ]

BAG DESIGN / FEATURES / design mainly for fashion, handy use thick cloth material can prevent damage water-proofing surface avoid getting wet bag mouth made up of hard plastic with security tag, preventing carriers or others from opening the bag, and equipped with RFID and locator

Security Tag

avoid theft and protect seller / buyer privacy

RFID

Micro Locator

machine via sensoring

current position

pass in and out station /

App shows the

/ SIZE / M

S

Maximum capacity(cm):

L

21*12*15

28*16*20

Shoe case

35*20*25

33*12*20

According to our investigation, male usually buy 3C products online, while female mainly buy clothes or cosmetics. As a result, BY THE WAY bag provides three different sizes, and the large one can accomodate a shoe case.

46

APP DESIGN

47

3

Order’s List

Order Details

4

Score

[ SERVICE DESIGN ]

/ FUNCTIONAL MAP / 5

Notice New Order

ONLINE SELLER

1

Ship

2

Search for Station To Ship Map To Deliver Order Status Set Daily Route Notice

1

2

On The Way To Receive

Order’s List

COMMUTER AS CARRIER

Search for Station Map

Notice

1

Order’s List

2

Order Details

3

Score

3

Search for Station

ONLINE BUYER

To Ship Map To Deliver Order Status On The Way To Receive

/ WIREFRAME / Everyone may play different roles at the same time

訂單紀錄

城市等級

Users can be sellers, carriers and buyers at the same time. According to the functional map, we found out that the 3 roles have some common functions they need, so we designed an UI that integrated these common functions. Therefore, users can operate the App without switching their roles.

[蝦皮拍賣] 現貨 2018-2-23 已到站 [蝦皮拍賣] 現貨 2018-2-23 已到站 [蝦皮拍賣] 現貨 2018-2-23 已到站

地圖

$100 $100 $100

Encourage using the service To encourage users, we decided to visualize the service. Meanwhile, we noticed that the map is a common function users need, and it is a good carrier to present the visualization. Thus, we made the map to be the center of the main page, and added the city level indicator.

待出貨

捷運大安站

捷運江子翠站 尚有1袋

寄貨

取貨

送貨

48

/ FEATURES / Info Visualization

Order Status

Users can know the order status from the change of BY THE WAY character, which raises interest while waiting. The city level is the visualization of service usage rate. As usage rate increases, the city map would change subsequently, encouraging more people join BY THE WAY. ❶ To Ship Search stations

❷ To Deliver Station User’s Position Notifications Orders list Add New Order

❸ On The Way

Set Delivery Route

❹ To Receive

Real-time Tracing

【Shopyy Shop】

|現貨|設計中限定款 素雅風洋裝 三色 滿三 【Shopyy Shop】 件免運 Beautiful dress / 3colors / Free shipping On The Way for 3 pieces

The service combines the mass transit tracing and the bags’ GPS positioning system, making sellers and buyers know the commodities’ status clearly.

On The Way...arrive at Dongmen after 23 mins

/ UI FLOW /

2 1

ONLINE SELLER

COMMUTER AS CARRIER

receive new order

49

new order / to ship

main page

set new route

Signing up needs face recognition setting to enhance delivering / receiving efficiency, and reassure users about commodity safety.

[ SERVICE DESIGN ]

Face Recognition

Trilateral Info Integration Users can use delivering / receiving / carrying service. The App can connect with e-commerce platforms and integrate orders, which is convenient for users to check, sort and organize.

Scoring Feedback System After buyer receives the commodity, seller and buyer can score carrier.

Great carriers can get extra bonus to boost the carrying quality and intention.

1

The new order detail would be showed to let sellers check before shipping.

2

Carriers can select MRT / bus / UBike to screen out the stations.

ONLINE BUYER

receive order notice

all notice page

order details

50

BUSINESS MODEL

BY THE WAY cooperates with online platform, mass transportation and the government. Online platform gives ways of exposure and data of clients, while

BY THE WAY increases the client flow. Mass transportation rents the service, and BY THE WAY gives the reward bill. The government gives out subsidy, while

BY THE WAY gives back venue rental.

provide clients info increase clients

non-packaging fee non-shipping fee

E-COMMERCE PLATFORM

ONLINE SELLER

$

service rental reward

MASS TRANSIT SYSTEM

$

$

subsidy venue rental

GOVERNMENT

51

$

transportation fee subsidy

$

COMMUTER AS CARRIER

$

shipping fee non-packaging

ONLINE BUYER

[ SERVICE DESIGN ]

LOGO DESIGN

Associating the road, MRT routes and bag with the strokes of 順袋 , the logo presents our concept of carrying commodities by mass transit system. Using green and orange colors to show the eco-friendly, dynamic and interactive images of the service.

Color range ｜

English font ｜

#00A29A

DINCond-Black 12pt

#F8B62D

DINCond-Black 14pt

DINCond-Black 16pt

Secondary logo ｜

52

[ Whandy Sparkgo NCKU Bike Festival

53

U I / UX D ES IGN ]

54

55

[ UI / UX DESIGN ]

WHANDY New Weather App

2017 Open Data Innovative Application Competition - Finalists

Team project

collaborate with 黃詩雅

responsible for UI design

56

[

UI / UX DESIGN

01

W H ANDY ] Whandy is a new weather App which is personal, intuitive and thoughtful for users. They can obtain information clearly, and the App provides personal belongings reminder to suggest them to bring when going outside. In addition, the App provides different modes for different types of users along with pleasant layout, giving users great experiences when interacting with Whandy .

57

[ UI / UX DESIGN ]

BACKGROUND Weather Information is closely related to our daily lives. However, the relevant products and services aren’t that consummated --- counterintuitive, jumbled and disordered. Therefore, we decided to design an App that meet users’ needs, just like an assistant, arranging things about weather.

DESIGN PROCESS We carried out the project according to the design process below, expecting the App to be closer to users.

observation

insight

research / analysis

ideation

problem definition

design

58

RESEARCH We interviewed some users and found out some information. When people used weather-related Apps, they mostly used it to check the whole day weather before going out, and prepared personal belongings according to the information. Although the information was precise, it hardly helped users.

Some terminologies and data were difficult for reading and converting to intuition. Users only wanted to know common items. Thus, we studied 14 Apps on the market and organized the data.

/ ITEMS IN APPS / We collected items in each App and make a chart: weather image max&min temp. instant temp. perceived temp. temp. per hour daily forecast humidity UV index air index wind speed Pr of precipitation sunrise / sunset accumulated rainfall pressure dew point visibility 0

5

10

Items that Apps commonly have are: max&min temp. / instant temp. / temp. per hour / daily forecast / humidity / wind speed / probability of precipitation

59

14

[ UI / UX DESIGN ]

/ ITEMS PRESENTATION / We organized how the items being presented in Apps: temperature related

24 C

air index

47

Pr of precipitation

70 %

pressure

1006 hPa

sunrise / sunset

5:30 / 18:40

wind

2km / h E

UV index

high

humidity

40 %

Some items like air index, pressure, wind and humidity all used numbers that we had no idea about.

/ APPS COMPARISON /

Taiwan Super Weather

detailed info

Weather Pal

WU

visualized

detailed classification

table-structured images

dynamic icon

layout cause poor readability

location switching & icons

too many professional data

some items text-heavy

counterintuitive

line graph too detailed

dynamic icon UV / air reminders

60

PROBLEM DEFINITION According to the research and analysis above, we organized the main problems users faced: data couldn’t connect with user’s experience hard to switch different locations superfluous items cause complicated layout forgot to bring personal belongings after checking the weather

INSIGHT We considered and analyzed the user needs and then came up with our design direction: FOR DIFFERENT TYPES OF USERS ( backpackers, farmers, drivers, sports fan, etc. )

SUGGESTIONS & TIPS ( traffic, outfit, necessities, thoughtful words, etc. )

DATA CONVERT TO INTUITION ( short words, icons, images, etc. )

IDEATION We discussed about what kind of people would need weather Apps most, and thought of several types of tips for users, meanwhile changing the means of performing information.

SWITCH USER MODES

61

PACKAGE REMINDING

WORDS & IMAGE

[ UI / UX DESIGN ]

INTRODUCING

WHANDY

01 TWO USER MODES

02 PERSONAL KITS REMINDER

03 SIMPLIFIED WORDS & IMAGE

62

/ 01 - TWO USER MODES / 一 般

GENERAL MODE

台南市 東區

4月9日 星期日 13:00

24°c

體感 23°c

26 22

早 晚 溫 差 大！

旅行

TRAVEL MODE

STEP2 設定您的旅遊地點 台北市 大安區

4

月

日期 時間

7

12

日

4

20

月 10 日

7

日

時

台北市 大安區

4

時

月

18

時

CHOOSE STARTING POINT

63

Default mode, main color is sky blue.

The hamburger icon is for menu, it can choose settings or switch modes. The icon on the other side is for location.

The home page provides essential daily temperature. There are useful tips to remind users about the weather, with personal kits reminder below.

Main color is orange.

First choose the starting point ( will be default return point ) and the date / time for start and end, then go to the next step.

Second, choose the city you will visit and the date / time, and you can add more locations.

After finishing it, the App will present the daily weather of your journey.

CHOOSE TRAVEL CITIES

PERSONAL TRIP WEATHER MAP

[ UI / UX DESIGN ]

/ 02 - PERSONAL KITS REMINDER / We provide 4 mostly used personal belongings - umbrella, sunscreen, mask and coat.

When people need them according to the weather, the personal kits will light on, reminding users to bring them.

/ 03 - SIMPLIFIED WORDS & IMAGE / Using simplified images or icons to replace complicated data, and add some short words or conversation to present the weather information.

10% 降雨機率

6

中量

紫外線

80

普通

空氣品質

5:10

18:03

日出日落

佳

可見度

64

UI FLOW

設 定

°c

溫度單位 語言

中文

關於我們

press “settings”

settings page 一般

一 般

台南市 東區

台南市 東區

4月9日 星期日 13:00

24°c

體感 23°c

4月9日 星期日 13:00

24°c

26

體感 23°c

22

早晚溫差大！

loading App

home page ( main info )

swipe left

26 22

早 晚 溫 差 大！

choose settings 旅行

press “travel mode”

STEP1 設定您的旅遊起點

去

回

日期

4

月

時間

12

時

日期

4

月

時間

18

時

7

日

10

日

travel mode

65

[ UI / UX DESIGN ]

一般

台北市

台南市 東區

台南市 東區

台北市 信義區

4月9日 星期日 13:00

台中市 南區

台北市 大同區東區 台北市 大同區 台南市

台南市 東區

台北市 大安區 大安區

台北市 信義區

4月9日 星期日 13:00

台北市 中山區 中山區

台中市 台北市 中正區南區 中正區 台北市 松山區 松山區

24°c

體感 23°c

24°c

26

體感 23°c

22

26 22

早 晚 溫 差 大！

早晚溫差大！

search location

choose location

一般

一般

24小時內預測

台南市 東區

4月9日 星期日 13:00

6

80

中量 紫外線

普通 空氣品質

10% 降雨機率

5:10

22:00

18:03

swipe up

00:00

02:00

22 C

21 C

23 C

06:00

23 C

08:00

25 C

25 C

五

六

10:00

12:00

24 C

24 C

14:00

25 C

一

早 晚 溫 差 大！

二

三

四

28 C

30 C

32 C

25 C

26 C

23 C

23 C

20 C

21 C

22 C

日

一

28 C

30 C

32 C

23 C

23 C

20 C

home page ( secondary info )

daily / per hour forecast

旅行

旅行

STEP1 設定您的旅遊起點

STEP2 設定您的旅遊地點

二

回

日期

4

月

時間

12

時

日期

4

月

時間

18

時

7

10

25 C

18:00

25 C

三

四

25 C

26 C

26 C

21 C

22 C

22 C

旅行

台北市 大安區

去

16:00

14天內預測

佳 可見度

日出日落

04:00

日

press OK

4

月

7

日

12

時

日期

4

月

時間

20

時

press OK 7

4/7 12:00

4/7 20:00

台北市 大安區

日本 東京

4/8 20:00

4/9 20:00

4/10 18:00 台北市 大安區

日

日

32 C 28 C

台北市 大安區

4

step1 for start & end

月 10 日

18

30 C

30 C

30 C

時

step2 for travel cities

journey weather map timeline

66

67

[ UI / UX DESIGN ]

SPARKGO Cross Platform Integration App

Team project collaborate with

李宜家 ( Industrial Design )

顏廷安 / 鄭旭程 / 張皓宣 ( Electrical Engineering )

responsible for UI design / front-end developing

68

[

UI / UX DESIGN

02

SPARKGO ] Sparkgo is an App that gives youtubers and fans a brand-new way to interact with each other. The App combines three commonly-used platforms, making it convenient to manage and receive info. On top of that, it gives out a new interactive way - Sparkgo mission, to make followers closer to youtubers, activating the community.

69

[ UI / UX DESIGN ]

BACKGROUND - Star-chasing is tiring, so is being a star. Star-chasing is a popular activity and entertainment among young people.

Meanwhile, youtuber is a newly developing occupation which more and more people join in nowadays. However, managing multi-platform and following celebrities usually cause trouble when it comes to switching Apps. In addition, many youtubers lack funds, and the interaction with fans lack variety. Thus, the community needs more innovative ideas.

RESEARCH & ANALYSIS We investigated some domestic and foreign youtubers and found out that almost every youtubers used at least 3 different platforms, and each platform had different types of posts / stories, which was tiring for followers to read, and hard to catch all the information. Meanwhile, youtubers had to manage different platforms, and often missed messages from fans.

We discussed about the behaviors of users and related platforms:

Business model Closer to youtubers

Pain point:management

FOLLOWERS

More pleasant

Motivation to approach a new App ( pull )

following experience

SPARKGO Project

YOUTUBERS

Hope to have easier income source Why use them / Platform’s benefits

REFERENCE Medium / Snapshot / Instagram stories

Instantly easily operating

Instagram cross platform post

Flexible managing #hastag using habit

70

INSIGHT After our research and analysis, we decided to design an App with regard to the needs of youtubers and fans: integrate 3 commonly-used platforms, provide brand-new interaction plans, and strengthen the community power.

INTEGRATION

INTERACTION

COMMUNITY

IDEATION & DEVELOP PROCESS

01 integrate stories / posts

activate community

Through launching tasks, followers and users being followed wouldn’t have to get out of the system. With the sponsorship and participation of the task, users could set up a VIP interaction zone self-directedly.

enhance interaction

In addition to comments and requests, stimulating the interaction with fans is essential and tedious. Therefore, in this phase of developing, we focused on how to enhance the interaction between youtubers and fans.

02

03

71

Focusing on the three platforms Taiwan youtubers mainly used ( Facebook / Instagram / Youtube ) , stories that users followed would be placed on the home page chronologically.

[ UI / UX DESIGN ]

FUNCTIONAL MAP

joined mission update notice

receive sponsorship earn rewards Sparkgo news posts / owner profile page

subscription

mission in progress update popular wish Sparkgo mission instructions

Sparkgo mission

popular mission soon expired mission single mission page / owner profile page

SPARKGO

wishing well management profile editing about Sparkgo my wallet user profile

advanced settings / linkage account fans management following achievement mission management

mission

my Sparkgo mission joined mission

72

FLOW We organized and simplified the functional map, then convert it to the UI flow to make sure the App structure:

1.1 user profile

1.1.1 edit profile 1.1.2 settings

1.2.1 search 1.2 subscription

1.2.2 single posts 1.2.3 youtuber profile

1 log in / sign up

1.3 Sparkgo mission

1.4 my mission

1.5 notice

73

1.3.1 single misson

1.3.1.1 add misson

1.4.1 my Sparkgo mission 1.4.2 joined mission

[ UI / UX DESIGN ]

WIREFRAME 1

1.1 設定

我的檔案 aaa123

LOGO

寶石100

大家好大家好大家好大家好大家好 大家好大家好大家好大家好大家好 大家好大家好大家好大家好大家好

1000

1000

粉絲人數

編輯個人檔案

追蹤中

任務名稱

任務敘述任務敘述任務敘述

300顆寶石

90%

倒數1天

5顆寶石加入任務

aaa123

1 min

創立帳號

用戶 資料

1.2

訂閱 動態

追蹤 任務

我的 任務

我的 通知

1.2.1

搜尋

1.2.3

搜尋

aaa123

返回

熱門推薦

1 min

大家好大家好大家好大家好大家好 大家好大家好大家好大家好大家好 大家好大家好大家好大家好大家好

平台

敘述

分享

aaa123

搜尋紀錄 網紅名

登台任務執行中

1000

1000

粉絲人數

追蹤

追蹤中

任務名稱

任務敘述任務敘述任務敘述

text about your photo today text about your photo today text about your photo today

愛心1

留言1

aaa123

用戶 資料

平台

300顆寶石

分享

追蹤 任務

我的 任務

平台

1.3.1 搜尋

任務名稱

1.4.1 登台計畫報告

返回

倒數1天

aaa123

任務內容任務內容任務內容任務內容任務內容 300顆寶石

90%

300顆寶石

90%

5顆寶石加入任務

bbb456

1 min

bbb456

1 min

bbb456

1 min

棒！ 我的 任務

我的 通知

參與的任務

我的任務

10人參與

倒數1天

任務名稱

編輯我的任務

300顆寶石

90%

5顆寶石加入任務

任務內容任務內容任務內容任務內容任務內容

5顆寶石加入任務

棒！

追蹤 任務

倒數1天

任務內容任務內容任務內容任務內容任務內容

棒！

訂閱 動態

我的任務

參與的任務

任務名稱

任務名稱

加入討論

用戶 資料

分享

1.4.2

aaa123

10人參與 10人參與

1 min

我的 通知

1.3 SPARKGO MISSION

倒數1天

5顆寶石加入任務

aaa123

1 min

訂閱 動態

90%

加入討論

bbb456

1 min

bbb456

1 min

bbb456

1 min

棒！ 棒！ 棒！

5顆寶石加入任務

用戶 資料

訂閱 動態

追蹤 任務

5顆寶石加入任務 任務 通知 我的

我的

10人參與

倒數1天

aaa123

任務內容任務內容任務內容任務內容任務內容 300顆寶石

10人參與 用戶 資料

90%

訂閱 動態

追蹤 任務

5顆寶石加入任務

我的 任務

倒數1天

我的 通知

74

FEATURES / NAVBAR /

user

subscription

Sparkgo mission

my mission

notice

user : user account settings page / edit profile subscription : integrate cross platform posts, users can press like and leave a comment Sparkgo mission : displaying missions in progress, users can check and join in my mission : users can manage joined in missions or missions create by themselves notice : receive notice when mission updated / new sponsorship / mission complete

/ SUBSCRIPTION / Posts from different platforms will be organized into the App, and the App will show which platform at the edge of the photo.

75

[ UI / UX DESIGN ]

/ SPARKGO MISSION / Users can launch your own mission to attract followers, and make a hit. Followers can sponsor the launcher to achieve the mission and leave a comment, enhancing the interaction between users.

check your mission or mission you joined in

mission status leave a message

join the mission

76

77

[ UI / UX DESIGN ]

NCKU Bike Festival RWD Official Website

Team project collaborate with information design department 林耿弘 ( minister )

陳意昕 / 陳柏成 / 李建承 ( members )

responsible for integration / UI design

78

[

UI / UX DESIGN

03

NCKU Bi k e Festi val ] The Bike Festival is one of the most representative activities in NCKU. The event is for senior high school students to know more about NCKU’s colleges and departments, and promote the features and great image of NCKU, attracting 10000 people approximately.

To enhance the reach, quality and the perfection of the event, we developed the official website to integrate all the information, and let visitors know more about NCKU.

79

[ UI / UX DESIGN ]

FUNCTIONAL MAP We gathered the information of departments and all the activities in NCKU Bike Festival, then organized them into the functional map.

about the event college & department ( 9 colleges )

department introduction affiliated company fair

Department Expo

college cafe banyan picnic market future forum

activity list

Class Before University

student show simulator interview application packet building exploration

NCKU on Bike

bike guidance free NCKU

event schedule

sign up

80

WIREFRAME FOR MOBILE

什麼是單車節

LOGO

成大單車節 一系一企業 成大單車節 活動三主軸

簡介

活動流程

單車節可是讓你們

些 可 愛 的 高 中 生了解 科 系 的 好 機 會

單車節可是讓你們

些 可 愛 的 高 中 生了解 科 系 的 好 機 會

單車節可是讓你們

些 可 愛 的 高 中 生了解 科 系 的 好 機 會

home page

swipe up

home menu

成大單車節 一系一企業

01

01

01

科系

科系

科系

學院名稱

學院名稱

學院名稱

學院名稱

學院名稱

其他 科系 科系基本介紹科系基本介紹 科系基本介紹科系基本介紹

01

科系基本介紹科系基本介紹 科系基本介紹科系基本介紹

學院名稱

swipe up

相關 公司 名稱

科系基本介紹科系基本介紹

科系/科系/科系

college & department menu

company intro

活動流程 說明文字

開幕式

開幕式

開幕式

活動介紹活動介紹 活動介紹活動介紹 活動介紹活動介紹

活動/活動/活動/活動

活動介紹活動介紹

activity menu

activity intro

swipe up 81

公司基本介紹公司基本介紹

department intro

活動名稱

活動分類

公司基本介紹公司基本介紹

看科系

活動名稱

01

公司基本介紹公司基本介紹

看企業

活動分類

活動分類

公司基本介紹公司基本介紹

公司基本介紹公司基本介紹

01

成大單車節 活動三主軸

科系

其他 科系

開幕式

9:00 - 9:30

@成功廳

9:00 - 9:30

@成功廳

9:00 - 9:30

@成功廳

9:00 - 9:30

@成功廳

schedule

其他

科系 科系 科系

相關 公司 名稱

公司基本介紹公司基本介紹 公司基本介紹公司基本介紹 公司基本介紹公司基本介紹 公司基本介紹公司基本介紹 公司基本介紹公司基本介紹

看科系

switch department

[ UI / UX DESIGN ]

WIREFRAME FOR PC

什麼是單車節

簡介 單車節可是讓你們

些可愛的高

LOGO

中 生了解 科 系 的 好 機 會 單車節可是讓你們

些可愛的高

中 生了解 科 系 的 好 機 會 單車節可是讓你們

些可愛的高

成大單車節 一系一企業 成大單車節 活動三主軸 活動流程

中 生了解 科 系 的 好 機 會

home page

scroll

home menu

成大單車節

01

學院名稱

學院名稱

其他 科系

01

一系一企業

學院名稱

科系

科系

學院名稱

科系基本介紹科系基本介紹

科系基本介紹科系基本介紹

科系

科系基本介紹科系基本介紹

科系基本介紹科系基本介紹

科系

科系基本介紹科系基本介紹

科系基本介紹科系基本介紹

科系

科系基本介紹科系基本介紹

科系基本介紹科系基本介紹

科系基本介紹科系基本介紹

科系基本介紹科系基本介紹

看企業

scroll

其他 科系

01

學院名稱

college & department menu

科系 科系 科系

看企業

department intro

switch department

成大單車節 活動三主軸

01 活動分類

01

活動名稱

活動分類

活動名稱

活動介紹活動介紹

活動

活動分類

活動介紹活動介紹

活動

活動介紹活動介紹

活動

活動介紹活動介紹 活動介紹活動介紹

activity menu

activity intro

scroll 活動流程 說明文字

開幕式

開幕式

開幕式

開幕式

開幕式

開幕式

開幕式

開幕式

開幕式

schedule

82

UI FOR MOBILE intro section

menu section

抽

什麼是單車節 NCK U

BIK E

成大單車節 一系一企業

FES TIV AL

成大單車節 活動三主軸 甚麼是單車節 單車節可是讓 單車節可是讓 單車節可是讓

你們 你們 你們

?

些可愛的高中 些可愛的高中 些可愛的高中

生了 解 科 系 的

好機會

生了 解 科 系 的

好機會

好機會 生了 解 科 系 的

event intro

website link

活動流程

swipe up hint

技術支援

home page

swipe up

browse four main sections

點跡工作室

home menu

college & department section 成大單車節 一系一企業

規劃與設計學

07

抽

show departments

規劃與設計學院

工業設計系

directly change department here

規劃與設計學院

建築

其他 科系

工設 都計

成大工設系本著人本主義理念，

成大工設系本著人本主義理念，

期能透過完整的人文、科技、感性

期能透過完整的人文、科技、感性

設計等課程，培育專業的設計與

設計等課程，培育專業的設計與

企劃人才，以提升國際競爭力。

企劃人才，以提升國際競爭力。

看企業

看企業

college & department menu

department intro

activity section

成大單車節 活動三主軸

抽

工業設計系

change to company

建築 / 工設 / 都計

07 規劃與設計學院

switch college

院

07

swipe up

抽

規劃與設計學院

switch department

schedule section

抽

switch activity

02

抽

活動流程

升學前必修課

大 學生閃電秀

抽

單 車 節 當 天 會 有 不 少 的 活 動， 讓 我 們 一 窺 活 動 的 行 程 吧！

升學前必修課 大學生閃電秀

02 升學前必修課 模擬面試 / 備審資料全攻略 / 大學生閃電秀 / 趨勢論壇

activity menu

大學生閃電秀

switch category

開幕式

趨勢論壇

activity info show activities swipe

up

是否曾思索唸大學的意義? 有沒有想過大學的生活樣貌? 是否對大學

充 滿 未 知 的 場 域 滿 懷 憧 憬？

大 學 真 是由你 玩 四 年？

swipe up

10:00 - 15:30

@成功廳 10:00 - 11:30

趨勢二 / 循環經濟

12:00 - 13:30

趨勢三 / 區塊鏈

14:00 - 15:30

趨勢四 / 永續經濟

16:00 - 17:30

閃電秀

9:00 - 16:00

＠國一講 / 國二講

schedule

院系博覽會

83

@成功廳

趨勢一 / 社會企業

大學生

activity intro

9:00 - 9:30

單車遊成大

9:00 - 16:00

@雲平大道

9:30 - 16:00

@成大校內

科系探索

@雲平大道單車站 / 校內各系館

單車導遊行

@雲平大道單車站 / 都計系前單車站 / 南榕廣場單車站

time location show / hide info

[ UI / UX DESIGN ]

UI FOR PC

intro section

menu section 抽 什麼是單車節

甚麼是單車節

?

成大單車節 一系一企業

S CR OLL

單車節可是讓你們

些可愛的高中生

NCKU

了解 科 系 的 好 機 會 單車節可是讓你們

BIKE

些可愛的高中生

單車節可是讓你們

成大單車節 活動三主軸

FEST IVAL

了解 科 系 的 好 機 會 些可愛的高中生

活動流程

了解 科 系 的 好 機 會

menu button 技術支援

home page

點跡工作室

home menu

scroll college & department section 成大單車節 一系一企業

抽

其他 科系

07

規劃與設計學院

07

其他 科系

07

規劃與設計學院

工業設計系

工業設計系

成大工設系本著人本主義理念，

成大工設系本著人本主義理念，

工設

期能透過完整的人文、科技、感性

期能透過完整的人文、科技、感性

都計

設計等課程，培育專業的設計與

設計等課程，培育專業的設計與

企劃人才，以提升國際競爭力。

企劃人才，以提升國際競爭力。

規劃與設計學院

規劃與設計學

建築

建築

院

規劃與設計學院

工設 都計

看科系

看企業

college & department menu

department intro

menu button

22 design studio

switch department

scroll activity section

schedule section

成大單車節 活動三主軸 02

抽

抽

02

大學生閃電秀

單 車 節 當 天 會 有 不 少 的 活 動 ，讓 我 們 一 窺 活 動 的 行 程 吧！

大學生閃電秀

升學前必修課

抽

活動流程

升學前必修課

是否曾思索唸大學的意義?

升學前必修課

模擬面試

有沒有想過大學的生活樣貌?

備審資料全攻略

是否對大學

大學生閃電秀

大學真是由你玩四年？

趨勢論壇

開幕式

充滿未知的場域滿懷憧憬？

學院咖

座

院系博覽會

模擬面試

趨勢論壇 其他 科系

activity menu

activity intro

大學生閃電秀

備審資料全攻略

schedule

scroll

84

[ Personal Branding Metro Taipei Redesign NCKU Bike Festival Eyemood Branding

85

GR A P H IC D E S IGN ]

86

01 Perso n al B randi ng GRAPHIC DESIGN

PADI

Using my English name Padi, I geometrized the four letters P, A, D, I, which the logo prototype was made up of. The strokes built up the three-dimensional pattern from dot to lines and to layers, which means the diversity of design thinking from 2D to 3D.

87

[ GRAPHIC DESIGN ] Rough｜

Standard Present｜

Font｜ INSPECTIONXPERT GDT NOFRMS V／A 0 L：100% W：100% Color Range｜ #F8B62D

PADI

PADI

#3E3A39

88

02 M etro Tai pe i Rede s i gn GRAPHIC DESIGN

METRO TAIPEI

Matro Taipei gives us a rapid, close image. I used lines to create the shape of a MRT, which represented the 5 main lines, and gave out a 3-dimentional feeling.

89

[ GRAPHIC DESIGN ] Rough｜

Standard Present｜

Font｜ Ebrima, V/A 100 L:100%, W:108%

Extension｜

Color Range｜ #F8B62D

#036EB8

#C30D23

#7F4F21

#00913A

#231815

METRO TAIPEI

exhibition

METRO TAIPEI

public art

METRO TAIPEI

street dance competition

90

03 NCKU Bik e Festi val GRAPHIC DESIGN

NCKU

B IK E

F E S T IV A L

Using the main four letters, N,C,K,U to form the shape of a bike, which became the logo. The round pattern represents the wheel of a bike, and inside lies a 3 by 3 grid which means the bird-view outline of our campus. Red is to represent the old styles in Tainan, and blue means the freedom and blue sky we enjoy in NCKU.

91

[ GRAPHIC DESIGN ] Secondary logo｜

Pattern｜

Font ｜

Color Range｜

小塚ゴシック Pr6N B 8pt

#C5564F

#192D78

#8EBDE6

#9FA0A0

小塚ゴシック Pr6N B 10pt

小塚ゴシック Pr6N B 12pt

92

93

94

[ GRAPHIC DESIGN ]

95

96

[ GRAPHIC DESIGN ]

SLIDE / FANPAGE POST DESIGN NCKU BIKE FESTIVAL

NCKU BIKE FESTIVAL

學習點

總籌部｜業務內容

#活動設計 解析大型活動的後台如何精密運作，全局視野支配活動各點的物質、人力、流程！

總籌

總籌

公關

公關

行銷 學術 資設

主展場規劃

售票系統

單車遊成大

科系博覽會活動設計

客運售票套票規畫

Obike：物流規劃

套裝活動制度設計

動線進出管理

單車自由行

巨量工作流程設計

新生包物流配送

行銷 學術 資設

#行政技能 遍成大各種處室，了解各單位掌握的資源與權限，讓你成為行政小天菜！

#神秘Bonus 總副召私授限定A____A進來就知道

面試標準 #流程規劃

#長相

（不是你的錯）

單車導遊行

（想像現場，推演籌備脈絡的邏輯力）

#在地技能

#協作溝通

科系探索

（聽得懂人話，人話說得清楚）

#額外加分

（成大力，場域資源連結的能力）

由於業務包含許多空間規劃，擅長Solid 3D、平面圖、交通管理者我們求之不得 <3

成功大學第十一屆單車節

成功大學第十一屆單車節

NCKU BIKE FESTIVAL

NCKU BIKE FESTIVAL

學習點

行銷部｜業務內容

#多元培訓課程，紮穩行銷實力 行銷基本概念與理論、行銷策略、TA分析、競品分析、創意思考、社群行銷、內容行銷、實體行銷......

總籌

總籌

公關

公關

行銷 學術 資設

Facebook社群行銷

Instagram品

行銷

線下實體行銷

粉專經營−內容行銷

官方帳號經營−內容行銷

創意行銷

線上活動−互動式行銷

人物專欄−故事行銷

互動遊戲

行銷 學術 資設

#規模實戰機會，點綴耀眼履歷 實際執行觸及人數超過十萬人、參與人數超過9000人的大型活動，連業界都難以觸及的龐大規模！

#資源共享共創，拓展無限可能 部長豐富工具、資源、經驗、課程、機會傳承共享，開拓眼界、拓展無限進步可能！

面試標準 #邏輯思考

廣告投放−主動式行銷

廣告投放−主動式行銷

客群見證

#創意想像

KOL合作−代言人行銷

KOL合作−代言人行銷

公關行銷

#溝通表達

成功大學第十一屆單車節 成 功大學第十一屆單車節

成功大學第十一屆單車節

NCKU BIKE FESTIVAL

NCKU BIKE FESTIVAL

學習點

資設部｜業務內容

#從零到百的網站設計流程 除了版型設計外，更要平衡技術力與用戶感，一起規劃出既美觀又高效益的單車節官網！ 總籌

總籌

公關

公關

行銷

行銷

學術 資設

官方網站架設

粉專圖像輸出

實體文宣輸出

使用流程規劃

繪圖軟體操作

酷卡、明信片

UI/UX 設計

資

前後端工程

貼文用圖設計

圖像排版

學術 資設

#設計作品累積、大量曝光 觸及人數超過十萬人、參與人數超過9000人的展示機會，連業界都難以觸及的龐大規模！

面試標準 #設計概念

大型海報、布條

#軟體操作

各式實體輸出

#使用技術

#面試需求

請攜帶電腦，展示過往平面設計/網頁開發作品 （不用兩者都會 xD 但請讓我們知道你擅長什麼！）

成功大學第十一屆單車節

97

成功大學第十一屆單車節

[ GRAPHIC DESIGN ] 趨勢論壇介紹

趨勢論壇是什麼? (吼 又要聽講座)

(

針對時下最重要的議題，請來知名的企業與教授和成大學生進行 一場三方的理性的激辯，完整道盡未來幾十年的趨勢，讓你在短 時間與世界接軌，看見世界的脈動，放眼國際看見未來。

可不是一般講座呦)

嶄新科技應用

四大趨勢

-區塊鍊

獲得什麼?

? ?

串流音樂平台、身分認證、金融交易，未來許多產業都將因 區塊鍊面對重大的改革！

＃你準備好了

你可以

當天資

你知道當紅的比特幣應用的是甚麼概念

你知道未來人類的交易方式即將面臨巨大的改變

?

＃洞察趨勢，接軌世界 四項國際趨勢，讓你看見未來 ＃學思並行，批判思維 三方理性的思辨，讓你跳脫陳舊框架 ＃換位思考，解決代溝 填補企業教授與學生想法之間的差距 ＃拓展人脈，討論力++ 各界專家齊聚成大，給你一個平台接觸

些風雲人物

3/3 10:00成功大學光復校區成功廳等你哦！

98

04 Eyemo o d B randi ng GRAPHIC DESIGN

EYEMOOD

Eyemood is a multifunctional double glasses case brand. Combining the alphabet “E” and ”M” to make a form of sliding double glasses case, and added eyes to make the logo dynamic, representing that clients use the product in good mood.

99

[ GRAPHIC DESIGN ] Rough｜

EYEMOOD

Standard Present｜

EYEMOOD

Font｜

INSPECTIONXPERT GDT NOFRMS V／A 0 L：100% W：100% Color Range｜

Variation｜

#3E3A39

#F7F8F8

EYEMOOD

100

101

102

[ GRAPHIC DESIGN ]

順袋 BY THE WAY ORIBAGU Lifestyle Lookbook

103

[ MO GR &V

OT I ON R A P HIC S V ID EO ]

104

01 é &#x2020;č˘&#x2039; BY T HE W AY MOTION GRAPHICS & VIDEO

BY THE WAY project is about service design combining logistics with mass transportation ( p.39). Because of its complexity, our team decided to make an intro video to let people understand the service more clearly, and I was responsible for the whole video. The video describes the issue we face in the beginning, and then gives a scenario to explain the service process. The video was displayed on our graduation exhibition at SCCP Taipei, and received much positive feedback.

responsible for director / screenplay design / visual design / narrator

video link

105

106

[ MOTION GRAPHICS & VIDEO ]

02 OR IBAGU L i festy le L ook book MOTION GRAPHICS & VIDEO

Oribagu is a brand from 25TOGO design studio where I interned at last summer. The video aims to show the four popular styles of bags. We decided to let each bag match a particular type of character, and show the dynamic, leisure lifestyle with bag through shuttling in the urban jungle. The video was displayed on ORIBAGU exhibitions around the world.

collaborate with Chloe Tam / Niki Leung / Kenji Mok responsible for director / screenplay design / assistant camera operator / assistant editor / background music editor

video link

https://www.youtube.com/watch?v=wqT9jhCyh6I

107

108

[ MOTION GRAPHICS & VIDEO ]

THANK YOU! +886 935-283-918 padi850227@gmail.com