Padi Cheng UIUX Portfolio 2019

Page 1

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


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.