PORT F OLIO PADI CHENG
[ 程 宇 菉 ]
01
CONTENTS
About Me
03
UI / UX Design TFC Streaming Apps
05
- Video Streaming Service
KKStream
17
- RWD Official Website
DeepSeq.AI
25
- RWD Official Website
Energy Bank
33
- Senior-Satisfied Sharing Platform
順袋 BY THE WAY
49
- Mass Transportation Logistics System
02
[ PADI CHENG
]
As an out-going, attentive person, I like to arrange plans and make contact with people. I enjoy challenge and solve complex problems through design. Besides, I have strong ability of learning and love to reach out to multifunctional team 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 +886-935-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
- Bronze Prize 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
WORK EXPERIENCE PRODUCT (UI/UX) DESIGNER
KKStream (KKBOX Group) / Dec. 2018 - Now
Received Employee of the Quarter Award (2019 Q2) Designed 4 cross-device streaming Apps UI for Japan. Worked closely with project managers, front-end engineers and QA engineers throughout the project. Revised and maintained UX Spec for Amazon Fire TV App. Redesigned UI/UX of KKStream RWD official website, and designed technical services’ icon set and infographics which were used in leaflets, posters and demo videos for Content Tokyo Exhibition. Designed Logo and poster for Taipei Video Tech Meetup which was held in Google Office at Taipei 101.
SCHOOL EXPERIENCES MINISTER OF INFORMATION DESIGN DEPARTMENT
NCKU Bike Festival / Nov. 2017 - Mar. 2018
Designed the visual identity for one of the most significant activities in NCKU. Co-worked with front-end engineer and designed an official website for the activity. Discussed with marketing department to transform information into infographics, then posted them on our fan page, which caused approximately hundred thousands of reach.
Student Association of NCKU Industrial Design
DIRECTOR
/ Sep. 2016 - Jun. 2017 Led 11 sections and coordinated with other departments’ students to launch a variety of design activities, such as holding interdisciplinary lectures. Organized design workshop across 3 design schools, create more chances to enhance participation and also branded for our ID student association.
SKILLS / DESIGN /
UI / UX Design
Product Design
Research
Research
Flow Chart
Ideation
Wireframe
Rapid Prototyping
Mockup
3D Modeling
Motion Graphics Web Design Icon 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
Axure RP
Autocad
Premiere
04
05
[ UI / UX DESIGN ]
TFC Streaming Apps Video Streaming Service
collaborate with UX designer (researcher) / project manager / front-end engineer / QA engineer responsible for UX discussion / UI design / UX Spec revising and maintaining
06
SITE M
01 [
UI / UX DESIGN
This is th
TFC Streaming Apps ] TFC 東北新社 is a famous channel agent in Japan. They want to redesign their 4 current video streaming Apps. The 4 Apps are for 4 channel content providers, and each of them has different features and branding. The Apps should have smooth user experience across devices(android / iOS / Amazon Fire TV) and have to be developed within 3 months.
07
T
F
E
G
M
he redefined structure of 4 Apps:
Level 1
Level 2
Level 3
Level 4
[ UI / UX DESIGN ]
MAP
Episode Detail Page
Top (Home)
Series Detail Page
List View
Episode Detail Page
Linear item Detail Page
Future Lineup
Episode Detail Page
EPG
Linear item Detail Page
Genre
List View
My List
My Page
Tab bar
Detail Page
Watch History Download
Notify Me
Account
Personal Settings Resolution Check About Help
System Setting
EULA Contact Us
Customer Support
Logout Search Page
Keyword Search Result
Detail Page
08
WIREFRAME
Our UX designer (researcher) made the preliminary wireframe first, referring to competi in Japan and analyzed their design. Then I joined to discuss with UX designer, arranging components in each page to revise the wireframe and make it more user-friendly.
USER FLOW There are 3 main user flows in the Apps: Scenario 1 Search Video to play on Top (Home) Select Line and tap on "see more"
Select specific series
Show List view
Start/Finish
Decision (back-end)
Process (displayed page)
Process (user excecute)
Show Series Detail Page
Se
Scenario 2 Search Video to play on EPG
Select specific video
Does the video have “VOD record” items?
yes
Show Linear item Detail Page with “VOD record” button
Tap on the “VOD rec
(not on air stage)
no Show Linear item Detail Page (not on air stage)
Tap on the "Notify Me" button
Added to "Notify M
Scenario 3 Search Video to play on Search Page Type in keyword to search Tap on “Search” icon
Show Search Page Select item in recommend video list
09
Show Keyword Search Resu
[ UI / UX DESIGN ]
itors g the
elect specific episode
cord” button
Me”
ult
Show Episode Detail Page
Show Episode Detail Page
video is about to go on air
Show notice
Tap on the “Play” button
Tap on the “Play” button
Tap on the notice
Show Linear item Detail Page
Tap on the “Play” button
(on air stage)
Select specific item
Show Detail Page
Tap on the “Play” button
10
UI FLOW Top (Home) of 4 Apps
Search Video to play on Top (Home)
Top (Home)
Search Video to play on EPG
Top (Home)
Search Video to play on Search Page
Top (Home)
11
[ UI / UX DESIGN ] List View
Series Detail Page
Series Detail Page
Episode Detail Page
VOD Detail Page
Add to “Notify Me”
Linear item Detail Page ( Not on air )
EPG Page
Linear item Detail Page ( Not on air )
Detail Page
Keyword Search
Search Page
Search Page
Search Result Page
12
COLOR & TYPOGRAPHY DEFINITION Gray Scales
App Color
Secondary Color
Tag Color
Black
Fami
Star
Auto Tag
#333333
#41AA92
#E7F4F6
#E60012
Dark Gray
Cinema
Classica
Manual Tag
#666666
#007DBB
#EEF0FA
#E5B86E
Gray
Star
#999999
#2D99A7
Light Gray
Classica
#CCCCCC
#33489C
H1/
H2/ Bann
Bo
N
#FFFFFF
SYMBOLS I organized the Sketch symbols using Atomic Design method for reference.
13
Scale C
H3/Su
White
Atom
Android
Molecule
[ UI / UX DESIGN ]
d Noto Sans CJK JP
iOS Hiragino Kaku Gothic
Category
Size
Weight
Sample
/Title
20pt
Bold
すべての人間は、生れながらにして自由であり
ner title
16pt
Bold
すべての人間は、生れながらにして自由であり
ubtitle
14pt
Bold
すべての人間は、生れながらにして自由であり
ody
12pt
Regular
すべての人間は、生れながらにして自由であり
11pt
Regular
すべての人間は、生れながらにして自由であり
Note
Organism
14
DEVICES We not only designed mobile App but also designed Amazon Fire TV App, and keep the same user experience as much as possible across different devices.
15
Project managers, front/back-end engineers and QA testing engineers all have to check UX Spec to keep in sync, so it is important to clearly define the interaction rules and functions in it. Since many pages shared the same components, we wrote a section of all reusable components for explaining unified interaction.
[ UI / UX DESIGN ]
UX SPEC
BUG BASH TESTING As the team almost finished the App development, we did 2 stages of bug bash testing to ensure the details. We found 24 people of different departments to be our subjects, divided them into different App groups, and let them test using mobile and Amazon Fire TV. During the testing, our subjects recorded what they found, and I was responsible for group assistant and observation. After that, we summarized the feedback and prioritized them for fixing the bug. 16
17
[ UI / UX DESIGN ]
KKStream RWD Official Website
collaborate with front-end engineer / business developer responsible for integration / UIUX design / icon and infographic design
website link
18
[
UI / UX DESIGN
02
KKST REAM OF F ICIA L WEBS ITE ] KKStream Limited. often participates in global technological exhibitions, and visitors want to know more about us from our official website. Therefore, for providing more complete information, we decided to redesign our official website in 1 month to prepare for Content Tokyo Exhibition at April 2019. I worked closely with front-end engineer and business developer in this project.
19
[ UI / UX DESIGN ]
SITE MAP I discussed with our business developer to clarify and define the structure:
Home
Linear Streaming Music Streaming
Products
OTT Easy Server-Side Ad Insertion
Customers
VOD Encoder Overview
About Us Story
Join Us
Leadership
20
WIREFRAME
MOCKUP PC Products Page
Info Structure Selling point Scenario Put language selection to top ( originally at bottom )
Infographic
Home Page
click “Linear Streaming” icon
Features
Benefits
add new activity announce line add products list and intro at Home Page
Request a demo
Success story
Other products
21
website link
click “About Us’
scroll
[ UI / UX DESIGN ]
P&UI FLOW
click “Our Story”
hover to reveal dropdown menu and click “Linear Streaming”
Mobile
Tap hamburger icon
Tap “Linear Streaming” ( then scroll )
Swipe left to see more scroll
click to go to other products
22
ICON SET I designed the icon set for technical services and features. For technical services, I combined geometrical shapes to simulate the concept. services
features
23
I consulted the technical director and business developer at this stage. Since the flow is complicated, I tried to make the flow chart more user-friendly via data visualization. The infographics were also applied to KKStream’s booth in Content Tokyo Exhibition, including poster, leaflet and demo video.
[ UI / UX DESIGN ]
INFOGRAPHIC
OTT Easy
Metadata Ingestion Ad Server
AD
PTE
PSE
SSAI
Per-Title Encoding
Perceptual Streaming Engine
Server-Side Ad Insertion CMS
Linear
Android OS
iOS
Windows
Mac
Android TV
etc.
Live
Transcode
DRM
Package
Multi-CDN
Adaptive Bitrate
Layout UI Design
Business Analysis
Recommender System
Multi-Device
VOD
Streaming
Account Management
Billing System
Payment Plan
Log Management
Business 24 Customization
Integration
Operation Support
Per-Title Encoding
Perceptual Streaming Engine
Action 1080p
Stream in low quality
View in low quality
Stream in low quality
View in high quality
5000Kbps
Before
Drama 1080p 3800Kbps
1080p
Applied
10000Kbps
Anime 1080p 3000Kbps
24
25
[ UI / UX DESIGN ]
DeepSeq.AI RWD Official Website
Project from biotech startup in USA collaborate with front-end engineer responsible for UIUX design / logo design / icon and infographic design
website link
26
[
UI / UX DESIGN
03
DEEPSEQ .A I OF F ICIA L WEBS ITE ] DeepSeq.AI is a biotech product service in USA that develops protein drugs in smart and efficient ways. It identifies protein/DNA sequences and properties by combining strategic high-throughput screening and artificial intelligence. The website is for the DeepSeq.AI team to participate in a startup competiton and promote their service. I designed for 2 weeks and worked intensively with front-end engineer to communicate the interaction and visual details.
27
[ UI / UX DESIGN ]
SITE MAP ( ONE-PAGE-WEB ) I discussed with service provider about the structure. Considering the information amount and ways of presenting they preferred, we decided to develop One-Page-Web with a simple structure:
About Feature1 Features
Feature2 Feature3
Contact
28
WIREFRAME
MOCKUP&UI FLOW PC
first view line use graphics to imply that the web can be scrolled
use different color background to distinguish sections
scroll
Click “Learn more”
In the mobile size screen, menu was located on the bottom of the screen since it is more reachable for user’s thumb.
29
[ UI / UX DESIGN ]
Mobile
Click “About”
scroll
Click “Feature”
Tap “Menu”
different states for button
email sending result
Click “Contact”
website link Each result has corresponding button to let users go to the next step
30
INFOGRAPHIC DeepSeq.AI has 3 main features, and each feature needs to be explained in an understandable way. I discussed with the team and output the infographics. Moreover, I designed horizontal and vertical infographic versions for RWD. SPMAEAIFKH... DNEPJCLCIMALOWILBXQPY...
EGASTGQPED...
FJBSKUONEMCDKWQOILSD...
LEIAKVSQDD...
SPMAEAIFKHEVEKANLENR...
FAEILLKLHTEK...
EGASTGQPEDDTETTGLEGG...
IMVYLNG...
LEIA... ETPL...
FAEI...
LEIAKVSQDDIVYDLGCGDG ...
ETPL...
FAEILLKLHTEKAIMVYLNG... FEIA...
D Q G I KYLVE S R M F YG Q Q I D L . . .
FAII...
VKSYIVQQIPLGEVRSWIPN...
D Q G I KYL L . . . VKSYIVON...
QAVKYW VM H N I PLG T E T PL L . . .
QAVKYW VM . . .
VDOMJCXLIUTRAPIWVBNIK... WTRFDNILKHMVDXAIZYTB...
User Input
DeepSeq
Output
( physical similarity AI algorithm )
DNA binding
87%
membrane binding
65%
SPMAEAIFKHEVEKANLENR...
target-X binding
User Input
target-Y binding
13% 2%
Potential interacting targets
AAABBBXXXCCCDDDEEEXX... XXXA A ABBBCCCDDDEEEXX... GGGHHHXXXCCCDDDEEEXX...
Target A
Target B
AAABBBXXXGGGDDDEEEXX... AAABBBCCCXXXDDDEEEXX... AAABBBCCCDDDEEEXXXXX...
custom DeepSeq.AI model
31
Target X
[ UI / UX DESIGN ]
LOGO DESIGN
I used the shape of “D” to make the outline. The “D” is filled with squares because of the association of AI data. The light color squares ( 3 in total, top left to bottom right) is the simplification of DNA ( double strand ). Green gradient color was applied to making the logo look more like biotechnology.
Color range | #00FAB8
#00C9C3
#009194
#006D7E
Font | Montserrat Bold 12pt
Montserrat Bold 14pt
Montserrat Bold 16pt
#E5FFFA
Logotype |
DeepSeq. AI
DeepSeq. AI
32
33
[ UI / UX 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
34
[
UI / UX DESIGN
04
ENERGY B AN K ] 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.
35
[ UI / UX 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
36
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
37
It is considered to be lucky when someone is still able to work over 60 years old.
[ UI / UX 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.
38
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
39
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:
“
[ UI / UX 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
40
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
41
Skills Imparting
Life Experience Sharing
[ UI / UX DESIGN ]
/ ACCESS / 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
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.
42
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
43
Process Process ( displayed page ) ( user execute )
Decision ( user )
w“wait for demanders”
Decision ( back-end )
Accept the demand?
show “demanders notice”
yes
[ UI / UX 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
44
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 45
enter your needs
[ UI / UX 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 46
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
47
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
47
- It increases matching chance. - It encourages the seniors to contribute. - It promotes activities on the platform.
[ UI / UX 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) 48
49
[ UI / UX DESIGN ]
順袋 BY THE WAY Mass Transportation Logistics System NCKU ID graduation project Taiwan International Student Design Competition - Bronze Prize Service Design Group
Team project
collaborate with 邱柏翰 / 黃詩雅
responsible for team leader / logo design / serivce process ideation / animation making
50
單 車自由行
學院咖啡座
模擬面試
@雲平大道單車站 / 全成大校內
9:00 - 16:00
@多功能廳 / 雲平大道
9:00 - 12:00 / 13:00 - 16:00
@唯農大樓
" 提 筆，畫 卡，鐘 響，交 卷，等 待。然 後 判 決 下 來。
05 [
UI / UX DESIGN
我 還 年 輕，但 我 還 年 輕。
騎！
關於我們
地址 電話
順袋
BY THE 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.
51
701台南市東區大學路西段1號 系學會聯合會 0983-103-518 總召 陳估熊
[ UI / UX 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.
52
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.
53
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�.
[ UI / UX 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.
54
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.
55
56
[ UI / UX 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)
57
[ UI / UX DESIGN ]
ne
the nd
Underground warehouse the commodities will be packed with our bags for carriers.
Carriers
nsportation
arrangement illustration
58
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
59
Carr notic comm (alre bag )
order route
set face recognition ONLINE SELLER
T
daily route
[ UI / UX 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.
60
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.
61
[ UI / UX 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.
62
APP DESIGN
63
3
Order’s List
Order Details
4
Score
[ UI / UX 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
4
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袋
寄貨
取貨
送貨
64
/ 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
Real-time Tracing
【Shopyy Shop】
|現貨|設計中限定款 素雅風洋裝 三色 滿三 【Shopyy Shop】 件免運
On The Way
❹ To Receive
The service combines the mass transit tracing and the bags’ GPS positioning system, making sellers and buyers know the commodities’ status clearly.
Beautiful dress / 3colors / Free shipping for 3 pieces
On The Way...arrive at Dongmen after 23 mins
/ UI FLOW /
2 1
ONLINE SELLER
COMMUTER AS CARRIER
receive new order
65
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.
[ UI / UX 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
66
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
67
$
transportation fee subsidy
$
COMMUTER AS CARRIER
$
shipping fee non-packaging
ONLINE BUYER
[ UI / UX 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 ｜
68
THANK YOU! +886 935-283-918 padi850227@gmail.com
