Portfolio of Yueru Xu by yvettexu

PORTFOLIO Yvette Xu UX Design Personal works

Phone: +44 07521 524540 Email: yx1393@york.ac.uk

CONTENTS Personal Design Collection From 2016 - 2017

Easy Tickets

Personal project Aug, 2017 - Sep, 2017

Alz Care

Group project Aug, 2017 - Oct, 2017

Before DDL

Personal project Mar, 2017 - Apr, 2017

This portfolio contains my interaction design products and shows the process how I accomplished them. You can see my ability of research and design, also my passion for UX design.

Garden Views 36 Personal project Oct 2016 - Nov, 2016

01 Easy Tickets UX design

There are a plenty of college students enjoying watching dramas. When I communicated with my friends in a drama club, I found drama fans suffered a lot due to the ticket. They preferred to buy cheap tickets so they had to buy early. And they could not resell the tickets when they could not watch the drama. They also found buying cheap tickets so difficult. In order to figure it out, I used the design method: Double diamonds. I did a deep research and found lots of painpoints. Then I designed an app to solve the problem to try my best to meet users needs.

Personal project Aug, 2017 - Sep, 2017

In this project, I accomplished the whole process of interaction design. It was a fun problem-solving process and an inspiring learning journey because each step and change came with new observations and insights from the users perspective.

01 Easy Tickets Background&Questionnaire

Questionnaire I designed a questionnaire on the website, and then I sent out questionnaires in different WeChat groups and QQ groups about drama. Finally, I received 96 feedbacks.

�� Age

Gender

Male Female

How long ago to buy before the performing?

Ticket price

<20 20-30 30-40 >40

Occupation

Ways to buy

A week A weeka month 1-3 months 3-6 months

<200 200-500 >500

Wechat Web App

Student Dramarelated Firm Others

nm tai er

te Da

sth

e ea

Times they go to theaters a year.

Give up Find cheap tickets in forum Buy expensive tickets

-2

What will they do if they miss cheap tickets?

Yes No

s ea or

5 2-

�� Can they find cheap tickets easily?

ov pr

They watch dramas mainly to…

Background Last year, the drama performance increased by 9.3% in Beijing, the number of audiences peaked to 1,730 thousand people, the box office peaked at 260 million, increasing 19.4%. Many ticket platforms said drama has stabilized in the second after the concert in all scene performance categories. But the college student group has always been overlooked. They are exposed to dramas in their schools more or less and they have different chances to learn drama. However, college students are not rich and they may miss the opportunity to enjoy dramas due to the price and the distance.

Expensive price

Discount

No one company Environment in the theater

Cannot choose the seat

Performers

Public praise is not good Category

Heat

The reasons why they choose the drama.

The left seats are not good

The theater is too far

The reasons why they give up to watch the drama.

01 Easy Tickets Interview Sometimes, I will miss the cheap tickets.

When I found my view on my seat not good, I feel terrible.

If I want to buy cheap tickets, I have to buy them early and I am not sure if I am free on the day, and I can not return the tickets.

Xinyan Zhao

Ming Yang

Occupation: Student Go to the theater: 1 time/month Salary: 0

Occupation: Student Go to the theater: 3 time/month Salary: 0

Student tickets are not easy to find.

I could not choose the seat sometimes. It made me hesitate.

When I buy second-hand tickets, I cannot trust the holder if I give him money first.

Ziqi Wang

When I was told the cheap tickets were sold out, I could find them in other platfoems. I think finding a cheap ticket is time-consuming.

Occupation: Designer Go to the theater: 6 time/month Salary:20,000RMB /month

I only focus on cheap tickets.

I failed to resell my tickets.

According to the questionnaire and interviews, I found Most drama audiences are females.

Reselling is troublesome.

Most drama audiences are young(between 20 and 30).

The type of drama, cheap tickets, performers, the heat of drama are main reasons why audiences watch a drama.

Most drama audiences are students. Drama audiences can accept cheap tickets(under 500rmb). Most drama audiences buy tickets by apps.

Expensive tickets, seat position, theater position, quality of dramas, limited to choose the seat are main reasons why audiences give up watching dramas. They pay much attention to the view from the seat.

Most drama audiences cannot find cheap tickets, then they will give up or find second-hand tickets.

Cheap tickets are sold out quickly.

Most drama audiences watch drama under 10 times a year.

If you want to buy cheap tickets, you have to prepare early.

01 Easy Tickets Competitor Analysis

Painpoint Lacking a platform to provide second-hand

Damai

Second-hand tickets

Reminding

Function form

tickets and cheap tickets. Users donâ&#x20AC;&#x2122;t know the true view from the seat.

Cheap tickets

Users have different tastes and they need

Cheap tickets Seats Recommendation Category

Send-hand tickets Reminding Tickets left

Yongle

Second-hand tickets

Reminding

categories.

Cheap tickets

Time range

According to the analysis and interviews, I determined that typically a potential user contains following features.

Choose seats

Drama fans

Theater map Seats

Target User

Performing calendar

Students and wage earners 20-30 years old Familiar with mobile apps

Recommendation

QR code tickets

You may like

Drama’s info

Second-hand ticket list

Photos

Choose the date

Second-hand ticket’s info

Contact the holder

Theater page

Choose seats

Compare seats

Holder’s page

Theater map

Personal center

Private messages

Tickets

Overdue tickets

01 Easy Tickets High-fi prototype

‘Artistic, young, casual’ are keywords to the UI design of this app. Artistic - Andy Warhol, Paris - Pink Young - pure, sky - Blue Casual - cotton, sneaker - Grey

#2193B0

#6DD5ED

#D66D75

#E29587

#E3E5E5

01 Easy Tickets High-fi prototype

02 Alz Care UX design

One of my teammate’s grandmother is an Alzheimer’s. During the taking care process, her family and other patients’ family suffered from many unexpected and tough difficulties. Such as they do not have enough time to accompany with patients, they are not capable to find an experienced nurse, they are worried about the safety of the patient etc. We realized there are many inconveniences for all Alzheimer's families, not only the unfriendly facilities but also a limited exchange of information and outlet for repressed feelings.

Group project My role: User research leader UX & UI design Aug, 2017 - Oct, 2017

Therefore, our team did user research aimed at Alzheimer families to find painpoints. Then we came up with an idea to create Alz Care which is an App that can help Alzheimer's families to take good care of their patient and provided a platform for information communication and resources.

02 Alz Care Background Europe Asia

10.5million

Alzheimerâ&#x20AC;&#x2122;s disease (AD) is a progressive neurodegenerative

22.9million

disorder. This disease usually begins after age 60, and risk goes up with age. Around the world, there are 9.9 million cases of Alzheimer. 46.8 million people worldwide are living with Alzheimer patients. The number will almost double every 20 years.

The Americas

9.4million

Africa

4.0million

Clinical symptom: Dysmnesia Aphasia Agnosia Executive dysfunction Dementia

The map shows the estimated number of people living with in each region

2015 US$ 818 billion

2018 US$ 1 trillion

2030 US$ 2 trillion

Every 10 elderly people, there is an Alzheimer patient.

The total estimated worldwide cost of Alzhemei will become a trillion dollar disease, rising to US $ 2 trillion by 2030.

Much of the increase will take place in low and middle income countries. (In 2015, 58% of all people with Alzheimer patients live in LMICs, rising to 63% in 2030 and 68% in 2050.

68% 2050

Apple $742 billion

Google $368 billion

Alzheimer $818 billion

If global Alzheimer care were a country, it would be the 18th largest economy in the world exceeding the market values of companies such as Apple and Google.

02 Alz Care Interview & Observation We interviewed some people to find out painpoints. All of them have an Alzheimer patient in their families. Here are some important records.

I cannot find a suitable community to discuss the disease.

Observation

I cannot coordinate the time and energy on my own.

It is my duty to keep caring them.

Muzi Lee

70 years old Fall ill 3 years

I tried not to allow my dad stay along.

I don’t know how to make sure that she won’t lose her way?

Before my dad got sick, I didn’t pay attention to Alzheimer. So when my dad got this disease, I was helpless.

It was exhausted to take care of my father and my child at the same time.

I feel sad about my dad don’t know who I am.

I spent lots of time picking a caregiver.

She didn’t talk a lot, just watched TV to kill time. When her daughter walked away for a while, she felt so uncomfortable. Although she forgot who her daughter was. She wanted to go out for a walk, she didn’t tell her daughter and walked to the door, but she forgets how to unlock the door. Her daughter asked to wait and she looked impatient.

Rensu Zhao

40 years old Lee’s daughter When she picked a caregiver on the internet, she browsed the history page and read the comment. She didn’t look after her mother all the time. Most of the time, she sat next to her mother to company her. When she noticed her mother walked to the door, she was cooking. She asked her mother to wait and then persuaded her to walk after lunch.

What we found？ Family members feel tired to look after Alzheimer. They think picking a caregiver is time-consuming. They don’t how to manage their time. They are worried about the patients losing their way. They think it is their duty. They were not familiar with Alzheimer before. 14

02 Alz Care Persona & Empathy map

Kelly Lee --a family member of Alzheimer

Julie Zhang -- An Alzheimer patient

“I give up my spare time to look after my mother, I feel exhausted sometimes.”

Age: 50 Occupation: Engineer Status: Married Location: Beijing Salary: 10,000RMB/month

Goals -Find other families of Alzheimer and communicate -Find suitable caregivers to ease the burden

Family Background

Frustrations

Kelly has a son and a daughter, but they do not live with her. Her mother is suffering Alzheimer, so Kelly live with her to care her. But Kelly needs to work on workdays. Occasionally, other relatives will come to care her mum.

-Sometimes they do not know how to take care of Alzheimer’s. -To take care of the older, they don’t have enough time to relax. -They could not trust caregivers.

Age: 81 Occupation: Retired teacher Status: Widowed Location: Beijing Symptom -Cognitive decline, unfamiliar with people used to know -Unable to go out by herself -Always in a daze -With changeable moods -Extreme drowsiness -Have difficulties in moving. Living Condition -Living with daughter -Starting drug treatment -Having diabetes complication -Vision loss Empathy map

02 Alz Care Journey map

Zzz.. Sleeping

Watching TV

Eating

Prescription

Eating

Watching TV

Having problems Need nurse

HOME

HOSPITAL

Walking with son (daughter)

Good night

Chatting and relaxing

HOME

PARK

HOME

Alzheimar

Work on weekdays

Family member

FIRM

The patient needs to be looked after at home.

Issues

8:00

Back to work

They need to get knowledge about Alzheimer.

12:00

The family member has to balance the work and life.

16:00

MARKET

The patient need company.

The family member need to rest.

20:00

02 Alz Care SWOT & Ideation SWOT

Ideation

- The Alzheimer group is common in China - The family members need help. - The market is not competitive. - The Alzheimer group is ignored in the internet market - Caregivers are not easy to find - Caring for Alzheimer is difficult. - Holding related lectures. - More job opportunities for caregivers. -The family members can have more time to relax.

- Caregivers may not be professional and familiar with Alzheimer. - The families may not be interested in the lectures.

After generating ideas to help Alzheimer families. We clustered them on the sticky notes. And then we prioritized them depending on the importance and feasibility.

After that, we found 3 ideas that we could develop. 1. A community aimed at Alzheimer 2. A caregiver system 3. A bracelet with GPS to locate the patient.

02 Alz Care Information architecture S etting

Identity Distance

Lifestyle Accompany

Location

24h accompany Party accompany

Name

Demand setting

S tate of an illness

Bracelet with GPS Personal info page

R ecommendation

Caregiver

Evaluation

My questions

User information

Location History

Address

Map

Name

Evaluation Paid

Favourites

Alz Care

Preferences

Personal info

Location Timeline

My answers

Messages

Quet ion Contact

S earch

The first contact

Name

Ask Add

Patient's info page R ecommended topics

Most popular

Name Disease description

Interested

Community

Phone Mail

Information

Articles

Discovery

Nurse

Contact Working time

Lectures News

Message Ways

Time Medicine

Following

Writers

R elationship

History Personal Info Name

Off-line support groups

Address Edit Phone number

02 Alz Care Low-fi prototype Effective communication with other patients’ relatives and finding the answers to your questions.

Disease description

It can provide users with an extremely clear process of choosing the caregivers.

Recommend caregivers

Contact the caregiver

Effective communication with other patients’ relatives and finding the answers to your questions.

Lecture

Write your answer

Discovery

Author’s info

Question page

Contacts

Employed caregiver

Disease description

Participating in online or offline activities to receive knowledge from experienced people.

Caregiver’s info

Community

Search result Users are able to customize the safe distance for patients connected with the GPS bracelet.

Location

Location setting

In double user information in the drawer, you can easily find your collections, and simultaneously record patients’ illness

User&patient info

02 Alz Care Workflow ? Post a question in the community

Community Post in the community

Have useful information or not sure about something

Other Caregivers reply

Organize a offline sharing meeting

Care Need to find a nurse to take care the patient

Set symptom of the patient

The caregiver cannot find the patient.

Alz Care will recommend those who match you requires

Find a profession to look after the patient

A phone is ringing.

Location A caregiver is walking with a patient.

The patient is walking away.

The app shows the location of the patient.

A bracelet with GPS

The caregiver finds the patient.

02 Alz Care High-fi prototype

03 Before DDL UX design

The phenomenon of procrastination is quite common. People do not finish their tasks until the deadline is coming. They want to control themselves but they fail over and over again. DDL means deadline. Before DDL aims to those who have suffered procrastination and want to overcome it. According to the research, I designed some functions like barrages, intensive patterns and so on. Users can be reminded and feel a sense of urgency to avoid procrastination. The degree of intensive patterns symbolizes the degree of urgency of tasks. I also tried to use Processing to present this effect.

Personal project Mar, 2017 - Apr, 2017

03 Before DDL Background Reasons for procrastination

Points of procrastination

In Tim Urban’s article, why-procrastinators-procrastinate, he used 3 characters to explain the phenomenon of procrastination.

To know procrastination deeply, I read the research article, PROCRASTINATION, DEADLINES, AND PERFORMANCE: Self-Control by Precommitment, written by Dan Ariely and Klaus Wertenbroch there are some points of procrastination. And I summarize them with Tim Urban’s characters.

Instant Gratification Monkey

ENJOY People like to enjoy themselves not work before the deadline. If they can control not to play they will improve efficiency.

DEADLINE Deadlines can help people control procrastination.

Panic Monster

PENALTY The penalties can help people control procrastination more efficiently than rewards.

Rational Decision-Maker It is clear what 3 characters symbolize. And before panic monster coming, instant gratification monkey controls people mind. When the deadline is coming, the panic monster will show up and rational decision- maker has to control the mind.

COSTLY People are willing to self-imposed deadlines to overcome procrastination, even when these deadlines are costly.

ATTENTION Before the deadline is coming

When the deadline is coming

Working environment and sudden messages mainly influence people’s attention and then they will procrastinate.

SELF-IMPOSED Although self-imposed deadlines is effective in improving task performance, people do not set their deadlines optimally.

BEHAVIOUR Procrastination effects to behaviour more than attention.

FLEXIBILITY Greater flexibility might lead to lower grades.

03 Before DDL Interview & Observation Ming Yang prepared for the exam of IETLS. I observed her whole afternoon to find what disturbs her most and what made her procrastinate. Then I interviewed her some questions to find deep key points

Keywords from the interview

She did the reading exercise. She met a word she didnâ&#x20AC;&#x2122;t know.

She discussed with her friends about news.

She picked up the phone.

Then she opened the app of Weibo and found some gossip news about some actors.

She checked the dictionary on her phone.

A message popped up on her phone, then she opened the WeChat.

Mobile phone Distraction Her friend told her he had to review. Then Ming did the reading exercise again.

Entertainment

Deadline

Nervous

Remind

Punish

Push

Panic

She picked up the phone again.

The whole process lasted 3.5 hours. The actual time she studied was 2 hours. The time she cost on the phone was 1 hour and 40 minutes. In the whole process, the distraction was mainly from her mobile phone. Every time a message popped up on her phone, she would glance at it.

Procrastination

When she noticed her friend was studying, she would put down the phone and go back to study.

Solution Penalty

Distraction

Remind

Deadline

Insect & Trypophobia

Lock the app

Barrages

Task list

03 Before DDL Information architecture & User test Intensity pattern

The latest deadline

Task page

Calendar

Task list

Set as desktop

Intensity pattern

Adding

Name

Time

Information

Description

Before DDL

Do it

Urgency degree

Home page

Delete

Information

Calendar

Edit

Analysis

Urgency degree Time Description

Done

Set as desktop Time management

S etting Intensity pattern Pattern setting

Intensity degree Jump to settings of IOS to choose apps App limitation

Low-fi prototype

User test

03 Before DDL High-fi prototype 12:24 AM 12:24 AM

12:24 AM

Setting

Intensive Pattern Dot

days

November

12:24 AM

Analysis November DDL

Tasks 12

Intensive Degree Leisure time Study time

Do it

Other time

Dissertation

Accomplished tasks Rest tasks

App LImitation

Morning, 10 am The dissertation should be no more than

But there are

in length and should be written in formal English, using appropriate grammar and punctuation.

You have accomlished 3 tasks before DDL

Jump to Settings

3,500 characters (approximately 500 words)

What have you done this month

9 tasks left before DDL

Done

th Nov

Task page-month In the left side, you can slide your finger to jump to another task. The length of line in the left depends on the urgency degree you set.

Dissertation Morning, 10 am The dissertation should be no more than 3,500 characters (approximately 500 words) in

Task page When you touch â&#x20AC;&#x153;Do itâ&#x20AC;?, limited apps cannot be used.

length and should be written in

Setting

Analysis

Choose the patterns and intensity degree on this page.

An analysis to help you control yourself.

formal English, using appropriate grammar and punctuation.

12:24 AM

18 days passed 12:24 AM

Time Management Date

12:24 AM

History dissertation

left

stop wandering

from

Work time

28th Nov 2018

20181108

days

History dissertation 20th Nov 2018

The dissertation should be no more than 3,500 characters (approximately 500

from

Relaxing time

20181108

words) in length and should be written in formal English, using appropriate grammar

/day

20181108

stop wandering

Home page

3 days before deadline

Force to lock screen Yes

12:24 AM

20181108

3 days before deadl

No 3 days before deadline

Leisure time

History dissertation

Study time Other time

History dissertation

stop wand

Done

The background of task list is intensive patterns. The intensive degree depends on the days left.

days

Adding

When you manage your time, there will be some analyses on the page.

When you add tasks, you can set urgency degree.

Barrage After setting the limited apps, there will be barrages to remind you the task when you open the limited apps

26th Nov 2018

IBM Presentation

UX Presentation

days

Time management

Intership Presentation

days

28th Nov 2018

30th Nov 2018

03 Before DDL Processing & Pattern

Users can choose different insect patterns in the setting. Most people are afraid of them. When the deadline is coming, the insect will be intensive. If users want to avoid, they have to finish the task as soon as possible. The effect was accomplished by Processing.

Processing

03 Before DDL Storyboard 1

Linda didnâ&#x20AC;&#x2122;t do her essay well before so she decided to pay more time to prepare next essay.

A message popped up on her phone.

Linda checked the deadline on the app, and the pattern was more intensive than before. She felt a little nervous and continued studying.

She set a task on Before DDL and the patterns were not so intensive at the beginning.

She opened Twitter to see the news then there were barrages showing up to remind her to study.

Before the deadline, she finished her essay rather than start doing it when the deadline was coming like she had done before.

She started to study but didnâ&#x20AC;&#x2122;t have any ideas about her essay.

She put down the phone and tried to study. Then she kept learning every day.

Finally, she got A+ due to the promotion of efficiency.

04 Garden Views Academic research & UX design

In the Design Basic class, we did an academic research to explore views and experience in Chinese classical gardens. We learned the space design and the value of Chinese classical garden. Our teacher allowed us to learn by unscrambling the extracted models of garden views. The quintessence of this academic research was the extracted models of garden views. I got a deep understanding of Chinese classical gardens by observing and contrasting these models in many classical gardens. After the academic research, I found many students still not understand the space of Chinese classical gardens. So I designed an app utilizing these extracted models to help students to learn easily and agreeably.

Personal project Sep, 2016 - Oct, 2016

04 Garden Views Academic research In this research, we tried to explore the feasibility of transforming the Chinese classical gardens. We found the process of evolution in Chinese classical gardens and explored its spatial language, providing the opportunity to transform into modern architecture language. By the extracted models of Chinese classical gardens, we hope to arouse people's identity of Chinese traditional sense of space and rumination. We analyzed the space changes in classical gardens: scroll landscape, scatter point, disorder, sight, indication, contrast, penetration, twists and turns, series. And we tried to analyze how ancient people see and enjoy.

Oblique Insertion

透视

Sight Dividing

间夹

Progressive

斜刺

Upwards Path

分眼

Indistinct Reveal

递进

Devious Penetration

仰止

透漏

闪差

磨角 Polished Corner

In between

Perspective

下察

Front Axonometric View Inferior Observation

Upwards Path

闪差

Progressive

透漏

Sight Dividing

仰止

In between

递进

分眼

间夹

透视 Perspective

Indistinct Reveal

Devious Penetration

下察

Back Axonometric View Inferior Observation

Oblique Insertion

透视

Sight Dividing

间夹

Progressive

斜刺

Upwards Path

分眼

Indistinct Reveal

递进

Devious Penetration

仰止

透漏

闪差

磨角 Polished Corner

In between

Perspective

下察

Front Section Inferior Observation

04 Garden Views Extracted models

磨角

下察

Xia Cha, Inferior Observation, a continuous interpretation of one part or proportion. Through a sinking perspective and composition, people can observe a special object to obtain a different angle of viewing.

闪差

分眼

Fen Yan, Sight dividing, interpretations to a single subject from various focus. Observing the destination in parallel viewpoint or perspective, people can gain narrative spatial conception in different but similar angle. The point of view is not simply divided the sight.

透漏

斜刺

Xie Ci, Oblique Insertion, an occasional temptation to an unpredictable and informal insertion. The arrangement of windows or holes in classical gardens can be an example of oblique insertion.

仰止

间夹

Jian Jia (In between) means leaving narrow path between clips and what within the wall is often empty. The experience of In between is to term a contrast with the previous space or to express the specific spatial identity.

递进

透视

Perspective exists the performance of special relationship of depth, but it also can be flat. The perspective can be an exaggerated sense of distance, which is gradually being passed through different spatial levels.

Di Jin(Progressive), a progress spatial series with the rich level progressive relationship. The exaggeration of the depth and distance space replaced absolute physical measurement, creating continuous and seemingly endless architecture experience.

Yang Zhi(Upwards Path), phrased from the Shi Jing(book of songs). Specifically refers to the action of looking upwards, or to the lofty. This can be seen in traditional Mountain and Water paintings, commonly used in the arrangement in gardens.

Tou Lou, Indistinct revealed, phrased from a plague “Tou Feng Lou Yu”(leaking winds and rains). The window leads to the disappear of space boundary. This vague and instinct reveal the connection between different spaces.

Shan Cha, Devious Penetration, a toric path. It is space that cannot be pass through immediately but needs a gradual process. During this process, the transition and conversation of space are completed.

Mo Jiao, Polished corner, the phrase from Yuan-ye( Garden arranging, Ji-Cheng 1631) It calls more attention to the corner and edge parts. The polished corner can be a notice or trailer for space coming front, also leaking the upcoming experience.

04 Garden Views Insight & Low-fi prototype To make students learn Chinese classical gardens easily and agreeably, I designed an app based on the academic research.

Insight: Students donâ&#x20AC;&#x2122;t pay attention to ancient classical gardens. To understand classical gardens, students need to visit them.

Knowledge

Photos

Photos&info

Whole model

Choice question

Add

Garden map

Garden tasks

Response

The extracted models are hard to understand in planes, they need to be contrasted in the gardens.

Home page

04 Garden Views High-fi prototype

Garden map

Home page

Garden tasks

The three main portions: knowledge, model and gardens.

The garden map is based on your location, you can unlock gardens after accomplishing the task in the last Garden View task.

Knowledge You can learn knowledge of these extracted models of garden views

Find the correct view in the actual corresponding garden and upload the pictures to accomplish the task.

Choice question You need to match the correct view to the extracted model.