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
