PORTFOLIO
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.
1 1-1
For the Elderly Design Principle+2 Examples
Self-help Registration System for Hospital
1-2
2 3
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
Touchpoint
Recharging card
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 eldery 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 18
YOUNG (0-60)
10min/person
cooking home dining out food delivery
Medicine
frenquency — week
SCENARIO OBSERVATION
CURRENT DESIGN
the interface and logic of current system is complex and messy. there is no uniform regulation of system.two hospitals system is totally different.
DESIGN 1 shanghai longhua hospital medicine service system
choose function
slide card
DESIGN 2
choose disease type
choose clinic
check information
charge
insert cash
confirm
shanghai xinhua hospital medicine service system
choose function
slide card
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?’ -‘ok’ pay
pay
confirm
TASKFLOW WIREFRAME department navigation
insert card
clinic type doctor information
select check information
select
inital page locate demand
ok
select
okok
pay tool
check
confirm paying
flow notes
pay state auto flow to initial page
triguing area page notes user action
INTREFACE DISPLAY the interface divided into 3 functional parts
YES NO
navigation
manipulation
confirmation
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
「1」takeaway is POPULAR among young people
cooking home dining out food delivery
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%
Age: 60 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
Name: Rachel
Elderly+Young
Age: 60
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 Flavor Choices
APP LOGIC less STEPS and more CLEAR
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
TRUST APP YOUNG HELP FAMILY 1.recommended by the young family member
back
2.using app with accompany of the young 3.pay by another phone-children,intimate pay CONFIRM
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;
Xinyi Han Interactive Design END ENDEND DO THINGS I LOVE NYU ITP Thankyou