Portfolio-Xinyi Han

P

R F

L

I

T

about me

HEY

I’m Xinyi In my mind, the process of becoming a designer is like the process of keeping fitness: instead of dreaming quick success, one should insist on exercise every day and improve skills day by day then the long time endeavor would result as accomplishing the marvelous.

Personal Website: xinyihan.cn a Video about ME: https://www.youtube.com/watch?v=lxGLEFt0rd4

1-1

3

1

For the Elderly Design Principle+2 Examples

Self-help Registration System for Hospital

1-2

2

INFOLOST Media Arts

What does OSCAR LIKE? Data Visualization

Food Delivery System

FOR THE ELDERLY

PROJECT OVERVIEW

TOP GOAL

PROJECT LENGTH

This elderly project is a big project which contains 1 set of design principle and 2 design projects as examples

Not only solve painpoint among the elderly in digital society, but also create more opportunity for the elderly to live gracefully and have close relationships to their family members even the society

It took me 8 weeks to complete this big project

HOSPITAL SELF-HELP SYSTEM

PROJECT OVERVIEW

SYSTEM MISSION

PROJECT LENGTH

This project aims on redesigning the hospital self-help system, making it easier to use by the elderly

Current self-help system is not user-friendly and cognitive-logical.

Studying cognitive psychology and design literature, and I made a set of design priciple for the elderly.

It took me 2 weeks to complete the design principle, and this medicine project took me 3 weeks.

PROBLEM SEEKING

Medicine

time flow — hospital Task

Touchpoint

Appointment

app

Registration

self-help

Consulting Examination

Food

frenquency — week food delivery

dining out

cooking home

Housing

frenquency — week cell phone

tele -phone

meet -ing

equipment phone

Pay Pharmacy

Transportation

time flow — subway station Task

Recharging card

Touchpoint self-help

Buying tickets

self-help

Checking routes

app billboard

Taking subway

auto-dispenser

traidional labor service

modern digital equipment

With the popularizaton of digital technology in service industry, communication mode inevitably has transformed from people-to-people to people-to-digital.

current digital communication is inefficient the eldely tend to have more difficulties when they use digital communication

TIME EFFICIENCY

AGE DISTRIPUTION

LABOR WINDOW

OLD (60-100)

SELF-HELP

1min/person 10min/person

1min/person

1

YOUNG (0-60)

18

10min/person

cooking home dining out food delivery

Medicine

frenquency — week

SCENARIO OBSERVATION

CURRENT DESIGN

DESIGN 1

choose function

choose function

slide card

DESIGN 2 slide card

the interface and logic of current system is complex and messy. there is no uniform regulation of system.two hospitals system is totally different.

shanghai longhua hospital medicine service system

choose disease type

choose clinic

check information

charge

insert cash

confirm

shanghai xinhua hospital medicine service system

choose clinic type

choose clinic

check information

charge money

waiting

check personal information

insert money

USER INTERVIEW

ASSESSMENT

WEAK POINTS

overall experience

process confidence

complexity

long steps

color confusion

unknown wording

money insecurity

too small size

time saving

function clearness

visual experience

logical appropriaty

DESIGN PRINCIPLE COMPOSITION X

5

VISUAL X

less layers,shorter route

bigger if possible

consistency

color

direct to user’s demand

wording

3 friendly to the elderly’s eyesight and touching accuracy

contrast but not distract hightlight the key point shorter，preciser，approachable

feedback navigation

LITERATURE REVIEW

<Simple and Usable> <the Elements of User Experience> <Design for Ageing Gracefully> <Cognitive Psychology>

DESIGN STRUCTURE Labor Window

Design Structure

STEP1

STEP1

go to the specific labor window

STEP2

insert card

STEP2

registeration

registeration 1 -‘which department?’

auto recognize the demand condition

1 select department

-‘physician’ 2 -‘general clinic or speicial clinic?’

2

select type

3

select doctor

-‘special’ 3 -‘which doctor?Eric zhou?’

The design structure is to imitate the window-labor procedure, since people are familiar with this kind of communication logic.

-‘ok’ pay

pay

confirm

TASKFLOW WIREFRAME department navigation

insert card

clinic type doctor information

select

check information

select

inital page locate demand

ok

select

pay tool

okok

check

confirm paying

flow notes

pay state auto flow to initial page

triggering area page notes user action

INTREFACE DISPLAY the interface divided into 3 functional parts

YES NO

navigation

manipulation

confirmation

I created this self-help medical system, I use modular concept to define every functional area, in order to guide peopleâ&#x20AC;&#x2122;s behavior better.

PRINCIPLE EVALUATION

LESS LAYERS,SHORTER ROUTE

NAVIGATION

BIGGER IF POSSIBLE

CONSISTENCY

my design current machine

FEEDBACK

DIRECT TO USERSâ&#x20AC;&#x2122; DEMAND

COMPOSITION EVALUATION

Layer 1

0

1

2 ok

COLOUR

WORDING

VISUAL EVALUATION

3 okok

4

Layer 2

5

LESS LAYERS,SHORTER ROUTE

NAVIGATION

department navigation always shown

BIGGER IF POSSIBLE a)maximize the availabe touching area b)blur the trivial infomation

only 2 layers,5 steps

CONSISTENCY

COLOUR

the interface divided into 3 functional parts: navigation/manipulation/confirm

‘Y+O’ TAKEAWAY

PROJECT OVERVIEW

APP MISSION

PROJECT LENGTH

This food takeaway project is the second part of this whole big project about the elderly

I named it ‘Y+O’, I hope this app can not only solve the food take away problem. But also bring close relationships to the young and the elderly

It took about 3 weeks to complete this food project

cooking home dining out food delivery

「1」takeaway is POPULAR among young people

Food

frenquency — week

PROBLEM OVERVIEW 「2」old people sometimes do NOT COOK cook at home 「3」food can CONNECT the young to the old and the old to modernity

POPULAR

NOT COOK

CONNECT

67.8% >=1 time a week

bad health condition

Young care about Old

38.4% 1-2 times a week

changing flavor

keep with modern society

23.9% 3-5 times a week

tired of cooking

keep in touch with children

PERSONA OVERVIEW

THREE KEY PERSONAS INDENTIFIED

With the development of modern app, I would like to explore and create the opportunity of providing the elderly with outstanding food delivery service.

Degree of following trend

Greatly Influenced

by Children

Care about Food

A FEW ASSUMPTIONS ABOUT THE TARGET AUDUIENCE the elderly (50-70) who have relative healthy condition have relative high cost on food willing to try new modern things (at least not strongly reject) have access to Internet, smart phone, app relatively easily to be influenced by young family members strongly trust their family members care about life (food) quality eg.flavor, health, cooking procedure of food

WHO YOU REALLY WANT Health Concern

attach attention to the quality of food: nutrition, health, cooking procedure

Family Relationship

Accessibility to New Things

relatively easy to be influenced by young family members

tend to try new things or be willing to try when assisted by others

POTENTIAL FOOD DELIVERY CUSTOMER trendy person · healthy eater · connected to young

DISTINCTIVE PERSONAS

health concern family relationship accessibility to new things

RATIONAL CONSUMER,KIDS LOVER

FUN SEEKER,TREND FOLLOWER

Food Cost: $850

‘

I have never felt myself geting OLD, and I am so EXCITED that NEW things make life better.

’

Fashion Mom

Internet lover

Apple Product Fan

Social Network Activist

85%

Job: Retailed Food Cost: $750

‘

I may feel a little UNEASE to try new things, but I trust my granddaughter.

’

Close to Granddaughter

Facetime with Family

Inclusive Consumer

Strict to familiar brand

71%

Name: Kathrine Age: 63 Job: Retailed Food Cost: $1000

‘

’

I cook at HOME or din out at FAMILIAR restaurants because I really care about food QUALITY. Diabetic Diabetic Jogging almost everyday

Love Travelling Classic Consumer

60%

Healthy Lifestyle

Job: English Professor

Age: 60

Elderly+Young

Age: 60

Name: Rachel

Fashion Elderly

Name: Medeline

HEALTHY LIFESTYLE COMES FIRST

USER EXPERIENCE JOURNEY According to 3 PERSONAS, mapping user journey, analyzing userâ&#x20AC;&#x2122;s behavior, raising questions, finding opportunity leading to insights.

BEHAVIOR

QUESTION

OPPORTUNITY

INSIGHT

opportunity

USER JOURNEY

choose flavor

open app

choose restaurant

view food

Does it need a initial personal setting?

warm greeting

personal setting

auto scale setting

auto flow

INSIGHT

order food

check infomation

Does it proper to classify according to flavor?

What is the information do users need to know?

What is the standard of food image?

Whether to show all the restaurants or recommended ones?

How to select recommended restaurants?

How to show so many food choices?

have a mind set and tendency personal flavor recommend

brand loyal and trust

true food picture

cooking procedure

clear and amplified

simple but catchy

recommend according to order history ktichen environment

slide cards YES or NO

medical healthy advice and tips hashtag format

hashtag format

delivery time estimate

What are the flavors?

OPPORTUNITY

more details

locate

log in

QUESTION

painpoint

TRUST

CATCHY

APP: Young + Old

LAYERS & STEPS: Simple + Logic

FOOD: Information + Brand

Visual Design: Clear + Appealing

What is the extra information do users want to know?

How to let users feel in-control?

trace delivery

confirm and pay

DESIGN INSIGHTS

BEFORE USING

BEING USING

TRUST

CATCHY

Trust App

App Logic

YOUNG help OLD

less STEPS and more CLEAR

Trust Food Quality

App Visual

I and BRAND loyalty

SIMPLE but APPEALING

AIM

HOW

1

2

open page

3 initial setting

sign in

APP STRUCTURE

LOGO LOGO

RESTAURANT&ENVIRONMENT PHOTO

Phone Number: Greeting words Address:

Trust Food Quality INFORMATION and BRAND loyalty

Personal Prefrence Setting

Finish Setting

4

5 choose restaurant

choose flavor

SAME PATTERN APP LOGIC less STEPS and more CLEAR

Flavor Choices

Flavor Choices

Flavor

Flavor

Flavor

Restaurant Choices

Restaurant Choices

Restaurant Choices

see more pictures

restaurant environment

back

sliding card single select

tiled graph multi select

6

view food

Flavor

Restaurant

7

detail + order

Flavor

Restaurant

8

order list

Flavor

9

check

FINAICIAL SAFETY

Restaurant

LOGO pay in the familyâ&#x20AC;&#x2122;s phone

order order back

TRUST APP YOUNG HELP FAMILY 1.recommended by the young family member 2.using app with accompany of the young

CONFIRM

3.pay by another phone-children,intimate pay

INTERFACE DISPLAY

INFOLOST Media Arts

INFOLOST The transmission of information among people depends on media. Sometimes, information is lost because of the nature of the transmission. The loss may make information unreadable or misread.

I create this digital media device t which lets people participate, have fun, and get some thoughts about this topic.

Media Arts

on the SCREEN

Interaction â&#x20AC;&#x2DC; SKY â&#x20AC;&#x2122;

Process

infomation unreadable

Video Link: https://www.youtube.com/watch?v=t5wYN91wm9c

1. Edit Original Information

2. Guide- bulb blink in turn

Turn the message that you want to convey into a dot

Control the switch so that the lights on the wall can

matrix on the bulb wall, preparing for later interac-

flash that form the outline of the letters. These

tion.

flashing lights served as location guide of later hitting by laser pen.

3. Use Laser Pen to Hit the Light Spot

4. Display and Contrast

According to Step 2 Guide-flash, another person use

Compare the original flash-guided bulb outline with

laser pen to hit the light, igniting the bulb at dark.

the final hit-ignited bulbs outline.

So move back and forth until the whole information

The light effect is fabulous, and the contrast will give

is completed.

people some thoughts about INFORMATION LOST

behind the SCREEN

Creating Process

1. Design

2. Make

3. Arrange

4. Test

5. Interact

Design electrical

make photosensitive

Place the finished

One by one bulb

Interactive activi-

and electronic

trigger circuit mono-

circuit light bulb

test, overall

ties, shooting

principles

mer production

on the grid rack

effect test

records

LIST of electronic parts

Experimental Manual Circuit

NAME

TYPE

NUMBER

laser pen switch Rocker switch button switch laser receiving tube light-emitting diode triode resistance resistance wire

F8 532nm-650nm NET-35C KCD3 AB16 IS0103 â&#x2C6;Ž5 9013 330 10k 0.3mm2

1 1 2 25 117 117 117 117 117 300m

making PROCESS

Experimental Manual Circuit The circuit is divided into 2 groups A: swith-control + photosensitive bulbs B: photosensitive bulbs

+5V

+5V

R1

R1

330

330 LED

LED

R2

A K1

9013 K1

A

GND

10k IOS103

IOS103

10k

R2

B K1

B

9013

GND

MCU Program After the system reset, the output 74LS373 control lights are all bright, and then extinguished in a few seconds. Then scan the button, when receiving the K1 button signal, output a specific character light "SKY" light, after the button is released, "SKY" lights out.

When scanning a 74LS244 input signal, when receiving a signal, it outputs a signal to the LED corresponding to the 74LS273 control

Coding

infoLOST

Installation Effect Display

‘ SKY ’

information is unreadable

infoLOST

Installation Effect Display

‘ SKY ’

information is unreadable

Movie

Data

Visualization

Oscar Awards 1988-2017 What does OSCAR LIKE?

â&#x20AC;&#x2DC;As a movie fan, I wonder whether there are some tendency and prefrence of Oscar Flavor.

Data is beautiful and it can be arranged in beautiful way.â&#x20AC;&#x2122;

â&#x20AC;&#x2DC;One Million Auditionâ&#x20AC;&#x2122; is a regular program of musical.ly for almost every country.

I designed the india program web of 2 stages.

Cover Design for Japanese Market ‘Meet and Greet’ is a regular offline event program which enables fans to interact with their musical.ly idol in this event. We musical.ly invited many popular musers such as singers, dancers, bloggers to this party.

I designed this poster for the japan ‘meet and greet in Tokyo’ party, a japanese operation event in 12/03/2017.

This poster wants to convey Japanese glorious fantasy, various badges shining represent muti-talent users in our app.

watch full video https://youtu.be/QixuA1oJ7rU

Check out the event This is the video recording the ‘Tokyo Meet and Greet’, and we can see the poster .

Package Design for musical.ly Christmas musical.ly has Christmas-gift exchanging tradition.

All the gifts will be collected and numbered.

People draw lots to get the corresponding gift surprises

I created this â&#x20AC;&#x2DC;musical.ly Christmas treeâ&#x20AC;&#x2122; pattern as main visual element for 2017 Christmas.

I use this elements in Christmas gifts number stickers of package design.

I also use this pattern to design the special Customized Christmas mugs, which is a caring, warm and delicate gifts to every staff.

Operation System Design I design the operation system of platform background interface. I discuss the functional requirement and logical steps with my musical.ly colleagues in order to make this system interface not only visually beautiful but also logically clear.

Musical Cover Design I design musical cover for musical.ly app, which enables our user to locate the music they want to add in their video.

Illustration Cover Sometimes, I use illustration to portrait the image as the musical covers, which will add fun to the expression.

Xinyi Han Interaction Design End EndEnd DO THINGS I LOVE SVA Thankyou