Xinrong's UX and Interactive design portfolio

Page 1

2021

Xinrong Li PORT Digitial and Interactive Design


01

NEW HOME ESCORT SERVICE DESIGN PROJECT

FOOD & VR

TABLE OF CONTENT

02

INFORMATION DESIGN INTERACTIVE DESIGN

03

AIR QUALITY SERVICE AND SOCIAL DESIGN PROJECT

04 Enjoy your journey USER-CENTERED DESIGN PROJECT

05

BIKE INTERACTIVE DESIGN PROJECT

Xinrong Li’s Portfolio


01

NEW HOME ESCORT SERVICE DESIGN PROJECT

House renova�on is a �me-consuming , mul�-step and messy job . Almost every homeowner who buys a house will face the challenge of renova�ng the house . At the same �me , due to the lack of knowledge of the decora�on and the situa�ons where the skills of the workers do not match what the decora�on companies say in their adver�sement , trouble is sure to emerge . In view of this situa�on , I have established a service pla�orm that provides integrated decora�on services .

INDIVIDUAL PROECT July - August , 2019

Xinrong Li’s Portfolio


BACKGROUND

QUESTIONNAIRE Friend’s introduc�on Internet

For the home owners who are in contact with the renova�on for the first �me , they should try hard in doing inves�ga�on , looking for a decora�on company, and purchasing building materials . In addi�on to listening to the opinions of friends around them , they also need to read magazines or look for relevant case materials online and do market research . And they need to get a closer look at the details of each area . It takes a lot of time and effort for the owner to decorate a house , which may affect the work of the homeowner . A slight mistake may result in financial loss .

54%

18%

Market

8%

Adver�sing

Propaganda magazine

Channels of knowing the decora�on company

Ac�ons

A�racted by the decora�on company's low-cost package , such as the 888-yuan-package and the 999-yuan-package . The all-inclusive price is not the final price . Due to the lack of communica�on in the previous plan , subsequent changes occur , which result in addi�onal items

The demoli�on of the wall does not include the removal of the batch layer , you have to pay addi�onal money .

search online

Stake holder

Touch point

Thinking

Before the waterproofing was checked , the floor was �led

The workers are not competent enough and the project is not well-completed .

Drive to the decora�on company

Decora�on company

Mobile phone Computer Friends

Why is there so much informa�on on the Internet? who can read all of this?

Sign a contract

House owner Parking operator Decora�on company App service provider

Recep�onist of decora�on company Parking space

The package offered by each company is different. I don't see the pros and cons. It's very troublesome to go on a field trip.

Communicate with designers Measure the size of the house

Choose the way of decora�on

Choose a company that has Understand designed the content for celebri�es of the service and consult the price

House owner

My friend may give some useful advice to me.

Price comparison

Field trip

Receive data Can not fully understand the contract Want to build house as soon as possible.

Tell the designer what style we wants

Tell the designer to modify the design rendering Discuss our requirements with the designer Receive a design rendering from the designer

Pay deposit

Decora�on company

Price Star informa�on

Recep�onist of decora�on company

Recep�onist of decora�on company

Data Contract

Determine the final design rendering Many �mes later

Sign a contract

House owner

Determine the decora�on plan

The design rendering does not meet our needs

House owner Designer Decora�on company

Mobile phone Picture Chair Desk

House owner Decora�on company

Mobile phone Design rendering

Half of the building materials are pur�ased by the decora�on company and the other half by the owners

The building materials are pur�ased the owners

Different Contrac�ng Op�ons

Decide the final drawing

Choose a decora�on company

Ask friends

Renova�on takes a long �me and a lot of energy .

Inten�onally omit the clause

Problems encountered in signing a contract

JOURNEY MAP

Looking for a reliable decora�on company

The building materials are pur�ased by the decora�on company

Price trap

Con�ruc�on subcontra�

TV and media

Jobs

Interview

Others

11%

Company site

Stage:

There are many kinds of work involved in decora�on , so it is troublesome to find professionals .

��� ��� The terms are not clear

54+18118+721

Insight

Construc�on stage Prepare for construc�on

Indoor structure construc�on

Terminate contract

Hydropower transforma�on

Infrastructure installa�on

Check

Terminate a contract Apply for a decora�on permit to the property

Search informa�on online Find workers to do this

Wait in line for a long �me Help workers with entry and exit permits Prepare basic materials

Find that the construc�on period is seriously lagging behind.

search online Ask friends Field trip Iden�fy suppliers

Check the progress of construc�on

Need to wait in line

Find other workers Determine delivery �me Buy all kinds of materials by ourselves Check the progress of the decora�on every day

Decora�on company raise prices at random Supervisor House owner Designer Workers Courier Decora�on company Garbage handling

Residen�al property Workers House owner

Indicator board Mobile phone Community Property staff Property cer�ficate and related informa�on Community pass

Make appointments with workers Select household appliances

Supervisor House owner Designer Workers Decora�on company

Mobile phone Materials Designer Foreman Supervision House

Mobile phone

Why don't I arrange it by myself

Wow, the stars are using this company.

This designer is terrible, isn't it?

There are so many people in line.

The construc�on period is seriously behind.

It's so expensive. I hope it's worth it.

That's a lot worse than I thought.

I do not have so much �me to buy building materials which have so many kinds

The contract was not carefully studied at that �me, and now we have to pay more

Contract Foreman Decora�on company

Inspect the result of decora�on Find a lot of materials was le�

App service provider Workers Friends Decora�on material merchant

Mall Merchants Computer Mobile phone Household applica�on Goods Measure tools Courier Services Company

I'm going to extend the schedule again. There's a lot of material le�. It's a waste.

Emo�on GOOD

WORST

Xinrong Li’s Portfolio


BLUEPRINT

PROBLEM DEFINE Upset. I don't want to look for informa�on.

Stage:

Awareness

Jobs

Adver�sing

The informa�on is messy and a lot of �me is wasted in finding it.

CONSEQUENCE

The construc�on period is delayed

Terminate a contract

The decora�on effect is not good.

Error message causes error flow Spend a lot of �me studying decora�on

Design rendering modifica�on Redecora�ng

Poor quality of building materials

Affect work efficiency

Increase the budget

Basic informa�on

Professional Custom flow advice

App

Circle of friends Standard Strategy

Be deceived by a merchant

Visual Reading of Professional knowledge

Low cost performance of building materials

Can't find a good worker.

Reputable design-built firm

Measure the size of a house

Contract

Property

Online diy interior design drawings

Template Personalized One-on-one customiza�on answers from online experts

Build-design Firm Informa�on Pla�orm security guarantee

Intelligent measuring tool

Reputable firm

Process planning machine

Hardware

Be deceived by a decora�on company

Click on the picture to get the type and brand of furniture directly

Template

Online applica�on

Building materials

Appointment of professionals

Online mall Professionals Brand recommen- Informa�on da�on Pla�orm security guarantee Personalized customiza�on Professional knowledge

Choose a sa�sfactory designer

The interests of the homeowners were lost

The effect of decora�on is not ideal.

Design drawing

Finish Remaining building materials

Engineering inspec�on

Experience

Cause a waste of resources

Be dismissed

Decora�on prepara�on stage

Understand Decora�on Informa�on

Basic Informa�on Guidelines

Reputable Professionals

Preserva�on method Treatment method Redesign

Personal file

Provide a list of materials

Measuring tool

Printer

It is difficult to judge whether the informa�on is valid or not There is no way to examine the abili�es of designers

People

Rendering is different from reality

A professional surveyor

There are a lot of people wai�ng in line for passes in residencial property.

Designer

Professionals

Lawyers Professionals

Professionals Designers

There are many kinds of building materials, so it is difficult to choose. The decora�on is so messy that it is easy to ignore one of the processes

Backstage

Adver�sing firm

Ne�zens

PROBLEM

Due to the lack of details of the contract,the budget was increased at a later stage. Its difficult for homeowners to obtain decorators’ informa�on and ability. Remaining building materials

Designer

The knowledge of decora�on belongs to a strange field, so it is difficult to understand it.

Partners

The message is not universal .

A mix of categories of informa�on

Consultant

Lawyer

Design-build firm

Surveyor

Courier services company

Ne�zens

Professionals

Partners

Material supplier

Material supplier

Designer Professionals Courier services Company

NEEDS MAP

Lack of standard process

No clear decora�on standards and procedures

Error of measurement

There is li�le informa�on available for decora�on workers .

False propaganda of decora�on company The informa�on provided by friends is highly reliable . Poor communica�on between designers and users .

The grasp of the quan�ty of building materials is not accurate .

The designer is not competent enough to meet the demand .

CAUSE

Professional decora�on team

The field of decora�on does not belong to daily life and is difficult to involve in . The contract is irregular and there is a certain problem of decep�on . The selec�on and purchase of materials is professional, it is difficult to see the difference between various brands

There are so many decora�on processes that it is difficult to understand them all

Contract standardiza�on

Template for decora�on process

Find professional help

Personalized customiza�on of Decora�on process Community process planning machine

Key points of contract

Search for informa�on Decora�on on-line communi�es

Residen�al property only supports offline management . The purchased material does not match the rendered map .

Standardized decora�on process

One-to-one answers from online experts Standard Strategy for Decora�on Visual Reading of Professional knowledge

Safe treatment of waste Building Materials Designer redesign waste materials and sells them Neighbors give building materials Online sale of surplus materials

Online contract review

Rapid and effec�ve selec�on of Building Materials Professional measurement--Recommend according to the actual situa�on Introduc�on to the selec�on of Building Materials

Effec�ve engineering inspec�on Uniform standard Standard case Inspec�on by professionals A list of check �ps

Simplified process of property management in residen�al area Submit an applica�on online Electronic pass Pass printer

Online selec�on, offline shop inspec�on Intelligent measurement tool, cloud storage data

Finding professionals easily Construc�on management service Registra�on and verifica�on of professionals Construc�on management service Past project Client reviews Friend recommenda�on

Based on the data, es�mate the purchase quan�ty of building materials

A reputable design-built company Past project Client reviews Friend’s recommenda�on Grading of decora�on companies

A sa�sfactory design plan Online diy interior design drawings Click on the picture to get the type and brand of furniture directly Choose a sa�sfactory designer Provide a list of materials

Xinrong Li’s Portfolio


HARDWARE DESIGN

SYSTEM MAP

Sketch

LAWER

PROCESS PLANNER

REAL ESTATE DEVELOPERS

DECORATION COMPANY

CONSULTANTS

THIRD-PARTY TESTING AGENCY

RENOVATION WORKER

SURVEYORS

DESIGNER

Salary&Membership fee

Salary&Membership fee

Salary&Membership fee

NEW HOME ESCORT

Orders

Introduc�on Experience

Introduc�on Experience

Introduc�on Experience

ecivreS&tnemeriuqeR

DECORATION STAFF

eef pihsrebmeM&yralaS

PARTNER

Rendering

Applica�on fee & Membership fee Property informa�on ly HenryCreativeSi Designer

ID

: 9876543210 : 00-00-00 531 4262 DOB : (211) mail goes here Phone : Your E-mail 12-09-2018

Join

Rental fee & Membership fee Pla�orm informa�on Product&Labor Salary&Membership fee WASTE MATERIAL DESIGNERS Introduc�on

Redesign products

Sales revenue & Membership fee

Decora�on material

DECORATION MATERIAL SUPPLIER

Material informa�on

Delivery

OFFLINE EXPERIENCE STORE Products informa�on Logis�cs informa�on

wawu

Loca�on Connec�on

MATERIAL LABOR

Pay for service

PAYMENT

LOGO HERE YOUR TAGLINE

Contents of decora�on agreement

Install and Maintain PROPERTY MANAGEMENT

: (211) 531 4262

: A+

: Female y o u rsin c e rly

Touch screen

Introduc�on COURIER SERVICES COMPANY

By pu�ng the printer in the community hall , the user can print the entry and exit pass of the worker through the printer and doesn't have to go to the property management department , which is �me-saving, quick and convenient .

Mode of use

ELECTRONIC PRINTER

HERE

Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum elit dolor sit amet, consectetur adipiscing : 00-00-00 elit

DOB Phone Blood Sex

Decora�on material

WAWU APP

INFORMATION

Freight Delivery of goods Measuring tools

NEW HOME ESCORT SERVICE PLATFORM

: : 13-09-2023 Expire

MEASURING TOOL RENTAL PLATFORM

Products informa�on

Delivery of goods

Requirement & Door-to-door service Orders Requirement & Service

BILLBOARD

Place the print paper Touch screen Paper outlet

Download app Sign an agreement Pay Look for a nearby printer

Put your room card or ID card at the bo�om----------iden�fy yourself Click on the screen to select the business you want to handle .

Print a worker's entry and exit pass

Sign the agreement and sign on the touch screen. Pay by scanning the QR code .

Xinrong Li’s Portfolio


SOFTWARE DESIGN Architecture Informa�on

Low-fieldly Prototype wawu

TREE

Experience

Instruc�on Ge�ng started Video

Instruc�on

Experience

Process

Process

Moments-decora�on Popular posts

Introduc�on of Decora�on process

Guide for acceptance of works Basic knowledge of renova�on

Evalua�on of household appliances

Personalized customiza�on

Process template

Building materials selec�on Home appliance selec�on Time schedule

Search PROS

Contract

company

Surveyor

Designers

Construc�on worker

Property

Engineering examiner Template

Contact

Contact

Sign an agreement

Professional audit

Phone number Details Submit an order Previous cases User evalua�on Share

Details

Submit informa�on Submit an order Previous cases User evalua�on Share

Contact Details

Fees Print

PROS Submit an order Previous cases User evalua�on Share

Service informa�on

Service informa�on

MALL

ME

Shop by department

My home 3D diy

Online mall

Dimension measurement Interior design renderings Quan�ty es�ma�on of building materials

Personalized one-click genera�on

Se�ng

Personal center Message

Offline mall

Collabora�ve designer online mall

Case Pros Sharing Post Search Product

System message Chat message Logis�cs message Mall news

Transforma�on of waste materials

Favorate

Manual service

Order Decora�on progress One key genera�on Custom defini�on

Diy effect diagram

knowledge consulta�on

Create my house.

Complaint feedback Apply to become a professional

MALL

Professional side

ME

Apply to become a professional

Schedule.

Order

Message

Wallet

Work area

Completed order

System message

Gross income

Work date

Scheduled order

Chat message

Net income

Upload post

Fill in the informa�on

Payment

Case Name Department Qualifica�on Personal descrip�on

Wai�ng for audit

Brand merchant side

Applica�on approved

Shop

Order

Product Upload post

Completed orders All orders Unshipped orders Uncompleted orders

Message System message Customer message Logis�cs message Customer evalua�on

Me Gross income Switch account Se�ng

Xinrong Li’s Portfolio


STORYBOARD High-fieldly Prototype

MY HOUSE

Choose a decora�on company

Open app , watch the video of ge�ng started with decora�on

Buy a house

Paid telephone consulta�on

Use templates for the decora�on process

Measure my house

Online purchase

200cm

Generate my renova�on schedule BUY

Time:June 17-July 20 Place:SHILI River ENSURE

Customize the renderings and determine the favorite style Offline purchase

Find professionals and determine construc�on �me

Contract review

Residual material recycling Design a new product Go through the formali�es of related decora�on

Receive express delivery

Construc�on

Professionals come to inspect the house

Xinrong Li’s Portfolio


02 2021.03-2021.09

An immersive informa�on visualiza�on for food supply chain Informa�on about food made available to consumers should not limited to its nutri�onal value , but also provide clarity on its origins, processing and supply chain.

Collaborated with University of leeds

Pon�fical Catholic University of Rio de Janeiro

Interac�ve design

Informa�on design

3D


Background

Target User Research

healthy diet is one of the most potent interven�on factors that affect human health and the sustainable development of the earth. At this stage, the food produc�on system and the earth's ecology are facing enormous challenges A

About one-fi�h of the world's land acidifica�on and four-fi�hs of eutrophica�on is caused by food produc�on

QUESTIONNAIRE The ques�onnaire was distributed through website

Three-tenths of the total greenhouse gas emissions are generated by the food supply chain .

19+17+13+9+3+2+12

��� ��� Q 1: Gender

Poore and Nemecek, 2018

19

18-24 25-34

Female 40

35-44

Male 30

45-54

Prefer not to say 5

55-64

Other

65 and over

17

13

3

United Kingdom

China

United States

Brazil

United Arab Emitates

2

France

Other

Food supply chain

PROBLEM IDENTIFICATION

EXPERT INTERVIEW Interviewee

1 2

VR Artists 3 4 Mariya Molotnikova 5 6 Lorna Inman 7 Iain Nicholls 8

28 ( 52.9%)

16 ( 30.2%)

13 ( 24.5%)

YES 53 (70.7%)

7 ( 13.2%)

NO 22 (29.3%)

Game

work

Productivity software

5 ( 9.4%)

Film Wellbeing Music Entertainment

Drawing Science Art museum Art Art exhibition

Other

Q 7: Usually, how difficult do you think it is to learn a new VR product?

0+15+43+38+4=

Very rarely 24 (45.3%)

Very Easy 2 (3.3%)

Rarely 15 (28.3%)

38+34+13+30+9+11+25 Occasionally 9 (17%) Frequently 2 (3.8%)

Easy 20 (37.7%)

Neither easy nor difficult 23 (43.3%)

Difficult 15 (28.3%)

Very difficult 0

Very Frequently 3 (5.7%)

Virtual Reality

Q 5: Where do you usually use VR systems?

It is difficult to show all the relevant informa�on about the food supply chain because of the various assessing standards, stakeholders, and complex process. VR is a challenging media to convey informa�on because of the unfamiliar interac�ve ways and uncomfortable user experience.

60+25+13+53+9+30

Q 6: What kind of VR products have you tried (choose all that apply)?

32 ( 60.4%)

Q 5: How often do you use VR?

12

9

The Eat-Lancet Commission, 2019

��� ���

Q 2: Age

Q 3: Country

From processing and produc�on to transporta�on and retail, the food supply chain affects the environment and the development of socio-economic culture, animal health and welfare.

Virtual Reality Q 4: Have you ever tried a Virtual reality product?

Basic Information About Respondants

Bouwman et al,2002

Decrease the learning cost Interac�ve methods with mul�ple hardware Time limita�on User experience

A one-sided understanding of the content of the food supply chain

Home

Work

Family member or friends home

Environment Venue

School

Store/Mall Other

Q 6: How physical comfortable are you using VR equipment?

Can you tell us a bit about yourself? How did you get started with Virtual Reality? How long have you been crea�ng VR works? What is your professional background? Do you think your background influences your VR works? If so, how does your background influence your VR works? What do you think that dis�nguishes VR from tradi�onal digital media (for PC and mobiles)? What do you think are the essen�al ingredients for a successful VR product? what tools do you use to conceptualise, ideate, prototype and/or develop your work? What do you think is the most important in the process of designing a VR product?Could you describe more about your design process? What kind of challenges you had in the process of developing the Virtual Reality “Project”, and what solu�ons did you come up with? What do you normally do when you need to present informa�on in VR, such as data or facts?

Art Space Art Exhibition Art Venue Museum Science

Hospital

Restaurant Gym

Q 8: Usually, for how long do you use VR, during a session?

���

Q 7: How would you rate the interaction methods below?

10 minutes or less 19 (35.8%) 10 to 30 minutes 22 (41.5%) 30 to 60 minutes 11 (20.8%) 60 minutes or less 1 (1.9%)

Food purchase What kind of food do you usually buy (check all that apply)? Meat

Dairy product

Result and discussion The most obvious advantage of VR is to create a 3D environment Content and experience are two very important factors Special perspec�ves Interac�vity, uniqueness, and immersion

Fruit

How concerned are you about food safety?

Processed food

How much would you say that you know about ensuring food safety?

Bread Vegetable

Unclear concept of healthy diet standards A one-sided understanding of food safety

Snacks or Sweets What factors do you think will affect food safety?

Xinrong Li’s Portfolio


Visual research Target user

Table research

Carlos Lindner

Reason

The consumer Age:24 Posi�on: Interna�onal student Statue:single Cooking by himself

unhealthy diet unsustainable food production systems the growing world population

The needs of

Goal

Bio

Lindner is a meat lover, who mainly eats meat in his daily diet and seldom eats vegetables Unbalanced ea�ng pa�erns

Interes�ng way to get a food's carbon footprint Access to data and informa�on in a reliable manner Sustainable development of the earth Eat a healthy, balanced diet

Scene display order

Food

Data visualisation

Consequence earth/environment

Human health

abstract inform visualisation

the land available for production

Climate change

the degradation of land and resources biodiversity the resilience of ecosystems

(Poore and Nemecek, 2018)

1Land use change 3

Aim It is necessary to find new visual formats or media to deliver the food environmental impact.

Crop produc�on

Animal feed Its processing into feed for livestock

2

Food supply chain Carbon footprint

5 Objective: To find A way of expression that can make informa�on more authen�c and credible. A way that is a�rac�ve enough to a�ract widespread a�en�on

How to deliver the food environmental impact?

Farm

Deforestation Soil carbon Methane emissions from cows, methane from rice, emissions from fer�lizers, manure, and farm machinery

6 4

Processing

Energy use Conver�ng raw agricultural products into final food items

Transport

Energy use In-country and interna�onally

Retail

Energy use Refrigera�on and other retail processes.

Package

Packaging Materials Material Transport End-of-life Disposal.

(Kiger, 2020)

(Washington Grown, 2021)

(Muldowney, 2019)

(Angel, 2017.)

Xinrong Li’s Portfolio


Visual research VR

Case study/ data visualisa�on

Data visualization Information visualization Sound Interactive actions Timeline Using the colour and size changes of virtual gas balls to show the amount of greenhouse gases produced by daily activities

Using the chatbox to introduce information

Immersive virtual reality platform

Experience your carbon footprin in VR (UN environment programme, 2020)

Data visualization

The actual volume gives users a strong visual impact and a sense of pressure, thus causing fear to them

The visual format (style) is relevant to the real objects Easy to be accepted People's inherent perception of things Comparing the suicide number of men and women Different sizes, colour and form means different group

Conclusion Data visualization Compare Side by side

A view on despair (Studio Terp, 2019)

VR

The change of colour/size/form

3D data infographic

But, it is more abstract to the people who do not be faimilar with this profession

visualization style More clear and easy to gain information

Kates, 2019)

The audience is familiar with the format

It can be easily recognize

Xinrong Li’s Portfolio


Visual research

Case study/ Low poly

Use the change of height to devide different scene

The number of the block is a clear way to compare data

Block-scene

different layer means different scene Height

Animal-cow Low poly

chemistry input or output energy

Low poly Low poly (KIMPARKS LAB, 2017)

A method to show different scene Perspective

(Hyekyung, 2016)

Transport Help show the process scene of processing and packaging

Cloud

Size/colour/number

Greenhouse gas emission

Low

Retail Animal feed Farm Package Land use change Process

“1”

use island to show different scene Low poly

High

(Egholm, 2018)

Use different color blocks to divide the area

CO2

Low poly

(Goh, N. 2020)

Altitude Change

Game

Interactive

A method to change the scene or perspective

Interesting

Monument Vally (Ustwo. 2019)

Xinrong Li’s Portfolio


Design development

1

Storyboard

Visual research

Initial concept

Case studies Concept 1: 3D data

1 Concept 2: Change----colour/ sea level/ the polar bear

easy to compare

Concept 3: Compare and side by side

Evalua�on and analysis

Concept 1: 3D data Concept 3: Compare and side by side

2

Side by side

Itera�on

Add elements Ini�al stage itera�on “1”

“2”

Al�tude

Concept 1: Block

“1”

“Prototype 2”

Concept 2: Organic “4” + “1” “Scene”

“Blocky”

“Prototype 1”

“Scene”

“Altitude”

“Horizontal”

“1” “2”

Be interac�ve “3”

Ini�al prototype A/B test

3

“2”

“3”

Xinrong Li’s Portfolio


Design development Stage Question

A/B test and result

Before the tes�ng

During the tes�ng

Es�mate your knowledge about beef carbon footprint Es�mate the greenhouse gas emissions from beef produc�on

Data

5 Land use change 1 Animal feed 1 Degree of knowledge

Farm

4

2 1

Processing

1

Transport

1

1 6 5

2

1

Retail Package

3

1 2

2 2

4 3

2 4

4 2

1 2

4

2

2

Accuracy Rank emissions Right order Te�ers’ oder Animal feed 3 7 4 4 3 2 3 7 1 25% Land use change 1 4 6 1 2 1 1 1 3 50%

Analysis

Farm

2 5 5 7 1 7 2 2 2 37.5%

Processing

4 2 2 3 7 5 5 3 4 12.5%

Transport

6(7)

Retail

6(7)

Package

5 1 1 2 5 6 6 6 5 25%

3 3 5 4 3 4 4 6 12.5% 6 7 6 6 4 7 5 7 62.5%

� � � � � � � � � � � � � � � 25+ 50+ 50 63 38 + 50 + 13 + 0 + 13 + 50 + 63 + 0 + 25 + 38 + 10+200+100+3050+1020 � � � � � � � � � � � � � � � 1+2010+2010+4030+130 25+63+5063+38+63+13+13+13+0+63+75+25+50

Most people do not have a clear concept about each stage of carbon footprint Regarding the greenhouse gas emissions at each stage, "Retail" and transport is the only one who is ranked correctly by more than half of the people.

The level of understanding of "processing" and “transport” are the lowest.

Result

Opportunity

Es�mate the greenhouse gas emissions from cheese produc�on(prototype 1) Es�mate the greenhouse gas emissions from beef produc�on (prototype2)

Rate your experience of understanding the informa�on about carbon footprint How easy to use prototype 1=very difficult to understand, 5 = very easy to understand

Prototype 1 Prototype 2

5

The numer of people

Accuracy of ranking

3

2

1

1

1

1

0

2

The numer of people

3

50%

62.5%

50%

50%

50%

12.5%

Animal feed

Land use change

Farm

3

4

37.5% 25%

Before tes�ng Prototype 2

62.5%

62.5%

37.5%

50%

Standard A=3 Prototype 2

A

Scale

The experience of understand informa�on

Land use change

Farm

5

Creative

Easy to Use Effec�ve Impressive 3 Clear hard to use 2 A�rac�ve Complex 4

1

Confusing

Clean understandable Comfortable Boring Convenient Friendly Incomprehensive people’s answer

Processing Transport Retail

Clean

4

A�rac�ve

3

3

2

2

Comfortable Easy to Use Convenient Crea�ve Friendly

1

Simplis�c

people’s answer

Clear

Emission for beef is about __A__ �mes the one for cheese

Package

1=very difficult to understand, 5 = very easy to understand

Prototype 2

4

25%

12.5%12.5% 12.5%

Animal feed

Prototype 1

5

0%

5

5 words to describe prototype

Package

75%

62.5%

Emission for beef is about __B__ �mes the one for cheese

0%

Accuracy of ranking

50%

people’s answer

12.5%

Processing Transport Retail

0

2

4 2

37.5%

25%

1

0

1

62.5%

62.5%

3

2

1

0

Prototype 1 Prototype 2

4

2

Scale

5

Standard A=3 Prototype 1

B

3

0%

1

0 3 4 Easness

Prototype 1

25%

2

Before tes�ng

Compare the carbon emission of beef and dairy cheese

Impressive

people’s answer

A�er the tes�ng

Which of these two prototypes did you prefer, and why?

Quantitative Data

Prototype 2 is easer than prototype 1 for tester to use.

Prototype 1, in the content of processing and retail, did not give people more informa�on and even make people more confused.

Prototype 1 and Prototype 2 are both convey the informa�on and data effec�vely. However, prototype 2 can convey more details about each stage than prototype 1.

Prototype 2, in the content of processing and transport, did not give people more informa�on and even make people more confused.

Prototype 2 performs be�er in showing data and details of each stage of supply chian

Prototype 1 performs be�er on delivering the total data of greenhouse gas emissions of beef and cheese.

Prototype 1 and Prototype 2 are both convey the informa�on the emission for beef is larger than cheese successfully.

At present, people’s awareness of the food supply chain and relevant greenhouse gas emissions is at a low stage and even misunderstanding of some stages.

Prototype 1 and Prototype 2 are both sa�sfy the aim of the project.

To convey the informa�on of beef carbon footprint to people.

To combine the prototype 1 and prototype 2, then to make the total data and each stage of data more clear.

To tell which stage accounts for the most percentage of greenhouse gas emission in the food supply chain

Although the prototype convey the informa�on effec�vely, but it s�ll need to be improved, especially for the processing, transport and retail. We need more clear instruc�ons to dis�nguish the differences between each other

The picture of the prototype 1 is not clear because of the screenshot, and the prototype 1 make them confused. Prototype 2 is easier to convey informa�on and data than prototype1 Prototype 1 is clear to compare the total greenhouse gas emissions between cheese and beef, but prototype 2 is clear to compare the data of each stage of the food supply chain and relevant informa�on. The prototype has a stronger sense of experience, and the data of the second one is easier to understand. For users who o�en play games, prototype 1 is more acceptable than the people who do not have too much experience on game. For prototype 1, they rarely no�ced the height of the s-curve, the colour contrast, and the number and colour contrast of the cloud (smoke) without any reminding. A�er promp�ng, the effect is be�er. They think prototype 1 has a strong experience than prototype 2 (block). One person also said she can pay a�en�on to more details, such as the number of the cloud and the colour because of the experience of playing steam games.

Result The interface of Prototype 2 is clear and easy to use, which is more acceptable for most people. The prototype of 1 has more details and strong interac�on, some of the testers think it is interes�ng. But the prototype 1 is not suitable for the public

Xinrong Li’s Portfolio


Design development

According to the feedback

Storyboard

“Horizontal”

Choose suitable showing method

XR

Set up new model

360° image

4

XD

“Horizontal” “Prototype 2”

“Altitude”

“Blocky”

Final outcome Itera�on Involve cloud

Put scene into different height

Change perspective

Smoke

Symmetrical structure Easy to compare

Make data easier to gain

add message box

5

68 42 + �� � 67 33 + 1 + �� � ��� ���

Transport

Usability test

Transport Animal feed

Farm

The element that influences the most the carbon footprint of beef

Carbon footprint of beef is much bigger

5

66.6%

Carbon footprint of cheese is slightly bigger

42%

4

33.3%

Carbon footprint of beef is slightly bigger

Compare the carbon footprint of beef and cheese

Carbon footprint of cheese is much bigger

Compare the carbon footprint of tofu and cheese

58%

3

0.1%

Strongly Agree undecided Attitude agree

Rate the prototype’s ease of use “Ea�ng more plant-based protein and less meat can effec�vely reduce On a scale of 1 (very difficult to use) to 5 greenhouse gas emissions.” (very easy to use)

Strongly Agree agree

Attitude

“This prototype can help me understand the impact of different stages of food supply chain in greenhouse gas emissions”

Xinrong Li’s Portfolio


Final solution

Farm / BEEF

Perepective 1

From crop processing into feed for livestock

CHEESE

Processing factory

From crop produc�on

Animal feed farm / milking

cow

The gas exhaust pipe and coloured smoke designed for each scene can strongly stimulate the senses and brains of the audience because the advantage of VR is that it can provide a similar experience with the real world The greenhouse gas emission of beef is 60kg (Poore and Nemecek, 2018), which is only a number in 2D space, but users can authen�cally feel the volume of 60kg in the VR world. Animal feed

By touching the selec�on panel in the middle, users can choose any food carbon footprint they want to compare.

BEEF Retail Package Processing

Transport Land use change

The number of the 'block' with a typical element to represent the greenhouse gas emission

Farm

One block represents 0.1 kilograms of carbon dioxide equivalents(kgCO₂eq) per kilogram of food

BEEF

Aboveground changes: biomass from deforesta�on

Underground changes: soil carbon

Land use change

Processing factory

Users are limited to the side-by-side format to compare the carbon footprint of food, but by touching the selec�on panel in the middle, users can choose any food carbon footprint they want to compare Message Box

Seven scenes are placed at different heights, making it possible to compare the whole food supply chain simultaneously.

CO2-equivalents

×23

One block means one kilogram greenhouse gas emission

Emission from enegy use

To dis�nguish the differences of the scene between each other

The transport of food items in-country and interna�onally

Refrigera�on other retail process Emission from enegy use

Retail

Emission from the produc�on of packaging materials

It is easier for people to collect data

Packaging Transport

Transportation

Package

End-of-life disposal

Xinrong Li’s Portfolio


Immersive information visualisation for food supply chain

https://xinrongl01.github.io/VR/

Farm

Cheese VS Beef The carbon footprint of the beef supply chain is 3 �mes that of the cheese supply chain

Farm Farm

×160

×40

×40

CO2-equivalents One block means Ten kilogram greenhouse gas emission

More info

! ! !

!

!

CO2-equivalents One block means Ten kilogram greenhouse gas emission

More info

!

!

CO2-equivalents One block means Ten kilogram greenhouse gas emission

More info

!

Farm Methane emission From Farm machine

Methane emission

From Rice

From Farm machine From Rice

Eating meat and dairy products emit more greenhouse gases than plants or plant-based alternatives.

From Fer�lizer

From Fer�lizer From cow

!

From cow

!

Tofu VS Beef The carbon footprint of the beef supply chain is �mes that of the tofu supply chain

30


Environment Reactive

Global Challenge

Air Quality Guideline

Future Generation

service design project Air Quality Guideline

Positive Action

Burning Things Air Pollution

8 words

Environmental Healthy Risk

03 8 words Air Pollution

Air Pollution

Burning Things

Collaborative

Prevention

Integrate

Environmental Healthy Risk

Burning Things

Positive Action

Block

Environmental Healthy Risk

Collaborative

Education

Air Quality

Prevention

l ” Prevention o n o p i t r a i r o A b “ a Positive Action Coll

Air Quality Guideline

Positive Action Collaborative

Environmental Healthy Risk

Future Generation

Technology

” n o i t u l

Future Generation

Positive Action Collaborative

Collaborative

Air Pollution

Air Pollution

4 words Environmental Healthy Risk

16 words

4 words 2 words

Air Pollution

Collaborative


Introduction

Frame The Design Challenge Problem identification

Background Air pollu�on is caused by people pursuing specific goals (Groot, 1967). For example: Fast transporta�on chains Economic globaliza�on Comfortable hea�ng systems

Urban air pollu�on is mainly caused by burning fuel. Long-term exposure to high-level air pollu�on can cause different degrees of damage to the human body. (Majid Ezza�, Alan D. Lopez, 2004)

For example:

Air pollu�on has become worse and worse which cause a nega�ve impact on either people's health or living environments, such as climate, water and farming.

The important aspects of the context or constraints It is difficult to change the lifestyle of the public. How to enhance public educa�on and change or subvert the living habit of ordinary people impercep�bly needs to be considered. Some phenomena have been insighted that

Mild damage--eye irrita�on Then--irreversible physiological damage Severe damage--death The awareness of the public about air pollu�on is much lower than the actual air pollu�on value (Groot, 1967).

The sustainable development aims are related to the health, and the health is influenced by society and environment (WHO, 2018).

Aim The purpose of this project is to help people realize the dangers of air pollu�on and take ac�ons to reduce the damage caused by air pollu�on to the body. At the same �me, the public should prevent the aggrava�on of air pollu�on according to simple, effec�ve and sustainable strategies.

Insight

How to convey the impact of air pollu�on to the public in an effec�ve way instead of using pure words. In the short term, how to show the outcomes to the public. How to balance economic factors and environmental costs

1. Environmental issues are not one of the most urgent issues in daily life 2. People know about air pollu�on, but they have no clear concept of the meaning of the air quality index 3.The percep�on of air pollu�on and energy consump�on is one-sided Moreover, adults with children under the age of 18 are more concerned about the damage caused by air pollu�on than people in other age groups, such as the elderly(Groot, 1967). Besides, the problem of health has the most possible to inspire the public a�en�on to air pollu�on(Groot, 1967). In addi�on, Children are vulnerable in an air-polluted environment, which will have a great nega�ve impact on them (WHO, 2018). Thus, children are one of the target user because they are more likely to be influenced by the air pollutants than other people.

Xinrong Li’s Portfolio


User research

Persona 1 Personal motivation

User needs

Effec�ve interven�ons to reduce the hazards of air pollu�on and reduce air pollu�on Knowledge about air pollu�on and the harm it brings in an a�rac�ve way

Point of View

A more intui�ve way to show air quality than just numbers A healthy and sustainable living environment for children

The couple with young children who has the possibility of suffering disease caused by air pollu�on needs to try to avoid the nega�ve impact of air pollu�on and to live in a healthy and sustainable living environment.

Demographics Name

Han Sun

Age

10

Gender

Female

Loca�on Beijing

Personality

Homework

Friendly

Rewards

Responsible

Healthy growth environment

Curious

Compe��ve mentality

Outgoing

“Children live in a forest-like place with good air quality and grow up healthily and happily.”

AMP up the good: HMW a�ract children’s curiosity to the air pollu�on like the a�rac�on of candy and ice cream? HMW Inspire family enthusiasm for protecting air quality? HMW spread the nega�ve impact of air quality radially in a new visual form? HMW call on more families to par�cipate in the campaign to protect air quality?

Take it to extreme HMW regardless of economic development and focus on purifying the air?

Focus on the emotions HMW make people afraid of the damage caused by air pollu�on to their health?

Question an assumption

HMW show the informa�on of air quality and air impact without a file or data HMW make people care about the air quality without compulsory

Explore the opposite HMW ignore the impact of air pollu�on on health, pay more a�en�on to immediate benefits and rapid economic development?

Focus in on an elemen HMW make protec�ng air quality a thing that is easy to adhere to and can be sa�sfied in the short term?

Conserva�on Crea�ve Passive

Technology •Internet usage: Medium Educa�on: primary school Professional background: no •Social media usage: Language: Chinese Electric watch/Phone

Extrovert Liberal Analy�cal Ac�ve •Device: Ipad and Phone at home Electric Watch

Motivation for using the service platform Long-term

• Gain some interes�ng knowledge and being a�racted by a website or machine • A sense of responsibility to protect the environment and gain some rewards • Having some interes�ng ac�vi�es with parents

•Cul�vate a sense of environment protec�on •Healthy and clean growing environment

Persona 2 Personality FriendlyCaring/ Pa�ent/ Studious

Personal motivation • Living in the center of Beijing, which has poor air quality

HMW let people get a sense of sa�sfac�on in the ac�on of protec�ng air quality? HMW increase the happiness of life and the sense of connec�on between family members due to family-based environmental protec�on ac�vi�es?

Introvert

Skill

Short-term

How might we

Personal type

Personal type

• Having Chronic respiratory diseases Demographics Name

Jing Zou 35 Age Gender Female Loca�on Beijing Married, husband(42) and a son(15)

• Caring about the family members' situa�on of body,especially her kids. • Family ac�vi�es are very important Skill • Educa�on: undergraduate • Professional background: Financial • Po� skills: cooking • Language: Chinese English

Motivation for using the service platform Short-term

• Buying some products to purify their indoor air quality in a short �me. • Pay a�en�on to the air condi�on, develop healthy and sustainable living habits in terms of diet and daily life, and avoid the same respiratory diseases in family members.

Introvert Conserva�on Crea�ve Passive

Extrovert Liberal Analy�cal Ac�ve

Technology • Internet usage: Medium • Device: PC at work, ipad and phone at home • Social media usage: Medium- Wechat

Long-term

•Moving to an area where have low air pollu�on. •Real-�me a�en�on to air condi�ons, and relieving or curing chronic respiratory diseases caused by poor air quality. •Children grow up healthily, family members are healthy and have no respiratory diseases

Xinrong Li’s Portfolio


Idea generation Persona Middle-age Mother

Product

Children

Avoid the harm of air pollution

Avoid the harm of air pollution Cooking Diet

Convey information About AQI Persona

app

Decrease the air pollution

Transportantion Avoid the harm of air pollution

Convey information About AQI

Diet Decrease the air pollution

Convey information About AQI

Smart watch Product

app

Show the negative impact of air pullution

Decrease the air pollution

1 Brainstorming 2 Ideation

4 N OW W OW H OW MAT R I X

Colour

Interac�ve device Applica�on

Air quality

Smartwatch

Vitual image

Ac�vity Family

3 F O U R CAT E G O R I E S M ET H O D

Density Shadow

Teaching materials

Walking/taking the bus to school/work two days a week Transporta�on Healthy diet New building

Green energy

Walking �me/Exercising �me

Indoor product--purify air New cooker----no smoke Contactless cooking environment Factory is far away living community Controlling the consump�on of power/Bill

Xinrong Li’s Portfolio


User Journey Map Persona

Scenario

Name

Jing Zou

Age

35

Gender

Female

Loca�on

Beijing, china

User expecta�on

• They take part in some interes�ng ac�vi�es which organized by school, and then they realize the danger of air pollu�on. In order to help children grow up healthily, the family work together try to solve the problem of the air quality.

Married, husband(42) and a son(15)

• Develop sustainable living habits, improve the children's awareness of environmental protec�on.At the same �me to enhance the family rela�onship.

Phase: 1

Phase

Ac�on

Realizing the danger of air pollu�on ---one day

Phase: 2

Phase: 3

Taking measures to mi�ga�ng air pollu�on---one month

Some ac�vi�es were organized by the school and community, which encourage communi�es' families to take part in.

Downloading this program/app and finish some tasks with their children

In this process, they realized the danger of air pollu�on, and they know a program that is interes�ng and helpful for protec�ng air quality.

Gaining informa�on about air quality everyday

Having a discussion with the family about the next week plan.

• Create a good living environment • Family �me • Help children build up the right concept • Help children to finish the homework

Receiving posi�ve feedback--a life �me

Seeing the change of air quality visually Taking ac�ons to finish the plan Gaining some rewards in the applica�on

Learning some useful knowledge about how to protect air quality in daily life, and knowing how to protect themselves from the poor air quality environment

Taking ac�vi�es again and recommending to other families.

Seeing other families process and what they do

Thought Emo�on

Oppertunity

It is interes�ng that we can have some interac�on with our neighbor and community.

What's the ac�vity aim and what we should do--be curious

Worry about my children's and family member's health--be worried

We did not have the habit to check air quality everyday

• Those ac�vi�es should be interes�ng and collabora�ve, because the target user is family. And the outcome should be shown to the public. • This rewards policy should be sustainable. • App should be simple and funny. • Air quality reminding--recommend

Internal ownership

For children, it is hard for them to keep doing one things

We can see the improvement of air quality clearly because of our joint effort.

We took part in some interes�ng ac�vi�es, but i did not see our works, such as picture or report.

• School and social organiza�on :organizing some ac�vi�es about air pollu�on and air quality • China na�onal environmental monitoring center: offer data about air quality • App team: add func�onality to tell people air quality and encourage them to protect themselves and air quality. • Community: collec�ng the community members' bills and work-maintain the opera�on of community. • Device team: maintain the normal opera�on

Xinrong Li’s Portfolio


Touchpoint Map Stage: Ac�ons

Awareness

During

• Receiving a booklet about air quality ac�vi�es from children. • Going to take part in with children • Experiencing the poor air • Having a discussing with family members about their next week plan

• Downing load the applica�on and knowing the rules • Input their plan • Searching informa�on about air quality • Searching informa�on about what they can do now

A�er • Going to school in foot on Friday • Sharing the booklet with other people • Cu�ng down the unnecessary using of power • Taking part in the ac�vi�es again • Trying to find a more smooth road when driving car • Making a new plan for next week • Gain feedback--digital mascot/pet • Looking at the device to gain the informa�on about air quality and changes

Experience

Touchpoint

Booklet Publicity board Speaker Teacher Kits for tes�ng air quality

Plan Phone

app

Phone Smart Watch

Hardware device for showing air quality Phone Smart Watch Bill Car

Pen/paper Teaching Materials

Hardware device for showing air quality

Booklet Phone

some nature materials to imitate the poor air

Backstage

School and social organization The printing

China national environmental monitoring center

Community organization China national environmental monitoring center

Google map Internet team Device team

Internet team The printing China national environmental monitoring center

Development Name The whole service pla�orm is named 'Block'. Each family is an individual and represents a hexagonal block. The system hopes that the idea of paying a�en�on to air quality and protec�ng the environment can spread radially outwards, and finally perform a blockchain to achieve air purifica�on.

Colour ed4132 efdf05 c1d9c4

c1b�f

To represent the presence of nitrogen dioxide.

Icon

Touchpoint Touchpoint 1

To represents the presence of sulphur dioxide air pollutants. To represent the sizes of different par�cles in the air. To represent Ozone

“Booklet + Teaching materials’’ Touchpoint 2 “APP + Smartwatch’’

O S N

Oxygen Sulphur Nitrogen

Touchpoint 3 “Interactive Device’’

Xinrong Li’s Portfolio


Touchpoint 1 How much much do do you you know know How about air air quality? quality? about

“Booklet + Teaching materials’’

NATURE SOURSE

““ How How does does air air pollution pollution come come about? about? ””

Let’s do a test! 100%

hello

Target user:

Do you know the air quality today?

What do you think of the air quality today?

Have you ever noticed the different meanings of different colors on the air report?

Children who are in primary school

pr

welcome to

There is a test about“ how much do you know about air quality”. The target user is children and it is not convenient for people to find a pen to answer the test in the outdoor environment. Therefore, I use the s�ckers behind the ques�ons. The user can use s�ckers to answer the ques�on. Furthermore, this test is a useful tool to inspire curiosity.

Energy

Draw something about your understanding of air pollution?

3

“ Do you want to know more about air pollution and air quality? ” Join us with your parents and have a fun and meaningful weekend together

t-child activiti es ren Pa

Using bright color to a�ract children’s a�en�on Telling the site and data of the ac�vi�es

Date: 19/04/2021 Site: Beijing street 101

ealth nd h ta en

Cover Page:

Block Block

HUMAN-MADE

Do you think air pollution will do harm to your health?

2

r living envi ron t ou m ec ot

Wild Fires Volcanic Eruption

Agriculture

4

5

Environment

Come and and Come Join us us!! Join

““ What Whatare arethe the dangers dangersof ofair air pollution? pollution? ””

Smog Acid Rain Global Warming

Activity 1:testing air quality with your parents

Health

Activity 2:Drawing your stories about air pollution

Respiratory Diseases

Activity 3:lecture about air pullution and making a plan for your family

Heart Disease

Lung Cancer

Organ failure Birth defects

8

The content on this page is to introduce the causes of air pollu�on, using more illustra�ons and a small amount of text can help children quickly understand the content

9

This page describes the dangers of air pollu�on

Ecological destruction

6

7

In the last part of the leaflet, various ac�vi�es on the theme of air pollu�on are introduced. Readers can choose their favourite ac�vi�es to par�cipate in

Xinrong Li’s Portfolio


Touchpoint 2 “APP + Smartwatch’’ Making Family Plan

Structure

Application

Personalization Tamplate Progress Store

keeping a virtual pet

Standard Carbon Consumption Current Progress Ranking With Other Friends

The plan A is completed

Feeding

The Plan

Function

The process

Community

My pet Air quality

The article about air quality Hardware device Friends’ pets

Smart watch

Air quality level

Paying attention to air quality Walking/taking the bus to school/work two days a week Controlling the consumption of power/Bill Walking time/Exercising time

Living environment The state of pets

Routes for a day

Checking air quality--times Gain virtual rewards

Lo-fi development store To build homes for pet

“Smartwatch ’’

To feed the pet Air quality

Data visualization

To clean the air for pet

Daily data Past data Data changes

“Mascot ’’ The inspiration for the mascot comes from the appearance of clouds and the different air colours caused by different air pollution levels. The darker the grey, the worse the air quality at that time. When the air quality becomes better, the colour of the mascot will become lighter.

Information flow “APP ’’

“Virtual pet ’’

“Icon ’’

Xinrong Li’s Portfolio


Hi-fi development Air quality Diary your total “block”value

choose date Air quality index

Good

Moderate

Unhealthy

Location

State

Very Unhealthy

Unhealthy of sensitive groups Air quality index

The home of pet

The process of plan

Making a new plan

Final outcome

Xinrong Li’s Portfolio


Touchpoint 3 “Interactive Device’’ Ideation

Light

Hardware Rendering

Hazardous Very Unhealthy

When no one passes by the device, the product is in sleep mode to save energy. Because the cloud above is a mirror LED screen, it is reflec�ve. Therefore, when the device is installed, it can face the direc�on of sunrise or sunset, and the sunrise or sunset picture can be reflected on it. At the same �me, this also reflects the air quality. The reason is that when the air quality is good and there are few par�cles, the sunlight can be reflected on the screen. If the air quality is poor and there are many par�cles, then you will not be able to see the scene as shown in the picture.

Unhealthy Moderate Good

LED electric screen Use the colour and density to show air quality

LED electric screen see the change of the air quality directly

Show the level of air quality index

The device will be placed at the exit of the community, near the entrance of the school, and the entrance of the workplace, so that users can clearly see the changes in density and color. For example, when mul�ple users plan to walk to the company and pick up their children on Friday, through the device users can clearly see the difference between Friday and the same �me period in the previous days. Visualizing data in this way is a posi�ve feedback that can mo�vate users to con�nue to implement plans to protect air quality.

Xinrong Li’s Portfolio


04

XGRILL User experience design

ENJOY YOUR PICNIC More and more people choose to go to the seaside for a picnic with their friends on weekends. To this end, a portable folding charcoal oven is designed with an incubator and barbecue tools. When you use picnic service, you can easily take care of the picnic process and have a good weekend with your family and friends.

INDIVIDUAL PROJECT JANUARY � MARCH 2019

Xinrong Li’s Portfolio


BACKGROUND Insight

Interview

Persona

Age:

“We o�en organize three or four families to have picnics on weekends .”

18-25 years old

Posi�on: Income:

Lisa

having a picnic whit her families

Number of persons:

6-10

BEFORE

College students have more free �me, and they will go on picnics with their families during the holidays to enhance their rela�onships. Picnics are usually organized by two or three families.

Food should be pickled in advance

As students, due to lack of life experience, they may have difficul�es in controlling the quan�ty of barbecue ingredients prepared, which will lead to a waste of food.

Find the right place and weather

Most of families choose to have a charcoal barbecue on the beach.

AT THE PICNIC

They will buy be�er quality picnic tools which is suitable for mul�ple use.

Smoke Windy Poor stability The area that can be barbecued is small AFTER Garbage disposal Cleaning of grill Carbon genera�on

Problem defina�on 1. When purchasing barbecue ingredients and tools, it is difficult to determine the quan�ty and type. Unfamiliarity with the produc�on process can also cause uncertainty. 2. During barbecue, it takes a long �me to ignite the charcoal fire outdoors, and a�er using it, the treatment of the charcoal fire is more troublesome. 3. The fire at the barbecue is difficult to control and the food is easy to scorch. 4. Food materials are easy to deteriorate. 5. Use disposable tableware. 6. The oven is not portable. 7. The oven is unstable. 8. Difficult to clean the oven. 9. Food is in short supply.

��� ���

People between the ages of 18 to 25 are more likely to go out on picnics

TYPE

CHARCOAL ROASTING

Most people who go out for picnics choose to bake with charcoal

ean.

Ques�onnaire

18-25

I wanted to go to the barbecue, but I found the ingredients had to pickled a day in be advance.

22 years old Student

RESEARCH

AGE

We need to ch oose the loca�on in adva nce. The oven is very troublesome to cl

Windy

laces to o few p ne or s e r a e Ther only o od , ue that barbec le can bake fo p o two pe ers can only th while o . ed h c t a w d, �o� ake foo e. b I n e Wh smok �rong by the

I usually go on a picnic with my classmates. We prepared so many ingredients and utensils that they were wasted in the end.

Items carried at a picnic

71+71+60+55+51+21 67+16+87+81+41+37+5

Treatment of cinder

Cooked food

71.43%

Tableware

71.43%

Tools

60.32%

Oven

55.56%

Raw food

50.79%

Others

20.63%

Performance of picnic oven Hea�ng efficiency

Appearance

66.67% 15.87%

Portable

87.3%

Security

80.95%

Price

41.27%

Number limit

36.51%

Others

4.76%

Frank

24 years old Student

Exis�ng score

Many tools should be prepared in advance

“We usually use disposable cutlery .”

25 years old Officer

Consump�on ability: Ac�vi�es:

“Ovens are usually transported by car .”

college student money given by parents

“We will have a picnic and barbecue by the sea or on the mountain, prepare our own ingredients and drinks, and then carry it to our des�na�on .”

10

Exis�ng shortcomings

���������������� 5.75

5

4.92

Easy to carry

Rate of use of fuel

6.14

6.1

5.44

4.52

Stability Wind protec�on

Security Appearance

4.49

Cleaning

5.46

light a �arcoal fire

Xinrong Li’s Portfolio

07


SCENARIO

DESIGN SPECIFICATIONS

ERIC

College Student

A.Purpose

Have an outdoor picnic with his family

He has arranged for several friends and family to have a picnic at the seaside nearby.

CONCEPT

The purpose of the design project is to make the user's picnic process smoother, and the prepared utensils are easy to move and the feeling of use is good.

B.Feature

Receive express delivery

3.Portable and easy to assemble

3

2

6

They assembled the oven, secured it, and opened the windshield. They put the charcoal in the stove and heated it up. The charcoal was heated very quickly and was ready for grilling a�er 5 minutes. They opened the incubator, took out the ingredients, and baked together. They roasted the meat for minutes and put it in the mild area. The vegetables are barbecued with the same process.

10.High security 11.Easy to clean

The girls carried cutlery and towed ingredients from the parking lot to their des�na�on

TABLEWARE

1. Inquire about the weather and loca�on

PICNIC APP

4.Recommended number of ingredients to be purchased 6.Rental of barbecue paraphernalia 7.Recommenda�on for the purchase of ingredients

Braised oven The most commonly used barbecue utensils

70+10=

Food clip

Long handle clamp

Price of carbon oven with the simplest func�on

30$

≤ 100$

Portable barbecue oven

Large type barbecue oven

STRENGTH

STRENGTH

STRENGTH

The firepower is fierce and uniform.

The barbecue furnace has a large cavity and a uniform circula�on of hot gas, so that the food is cooked quickly, not easy to scorch, and tastes be�er in such a heated environment.

Use gas as fuel and have a gas tank. Convenient and simple to use.

WEAKNESS

WEAKNESS

WEAKNESS

The price is more expensive, and the barbecue area is small.

It takes a lot of �me to install.

The barbecue oven is small and not suitable for many people It needs to be put on the table.

There are independent charcoal basins, and the charcoal fire is not in direct contact with the furnace body.

58%

USE WITH BARBECUE FURNACE

STORE TABLEWARE

5.Treatment of fresh ingredients

STORAGE TOOLS

CONVENIENT TO MOVE

3.Recipes The wind was strong by the sea, but it didn't affect the fire. There was almost no smoke.

Marke�ng

Sex of the people who use barbecue ovens

KEEP FRESH

2.Guidance on tool prepara�on

TABLE RESEARCH

���

A CONTAINER THAT FACILITATES THE HANDLING OF INGREDIENTS

2. It is beneficial to the preserva�on of ingredients. 3. Mul�func�onal use and combina�on

7

8

HIGH STABILITY

1. Tableware is easy to handle

The two boys carried the oven and barbecue tools respec�vely

When the oven cools down, disassemble it, take it away, and take out some parts for cleaning when he get home

U�liza�on

PICNIC APP

12.Treatment and use of carbon fire

Take out the cooked food and set it up,and have dinner.

Usage rate of barbecue ovens in the course of the year

OFFERING MAP

9.Not easy to deform

4 Put the prepared food and utensils into the car and go to des�na�on

FIRE CONTROL

8.Durability

Deal with food according to the guidance

The second day

WIND-PROOF

6.Large barbecue area 7.Fire control, not easy to scorch

Get the amount of food he should buy

Make food according to the recipe

PORTABLE BARBECUE OVEN

5.Charcoal fire is easy to ignite and easy to deal with

They talked about the food they wanted to eat.

Put the processed vegetables and meat in the incubator

MODULARIZATION

4.Dirty resistant, easy to clean and maintain

OUTDOOR OVEN

5

FOLDABLE

2.Good stability

Set a date for the picnic

He checked the instruc�on and bought portable ovens and matching utensils

THE RAPID IGNITION OF A CHARCOAL FIRE DETACHABLE

1.Portable, easy to store, high volume

1

DURABLE

Higher security

The height is not adjustable

Portable barbecue oven STRENGTH Light and easy to install

WEAKNESS The height is not adjustable

Portable barbecue oven STRENGTH Light and easy to install Movable carbon ash tray

WEAKNESS Suitable for 3-5 people The price is higher, the func�on is less, the performance-price ra�o is low.

Xinrong Li’s Portfolio 08


IDEATION

PROTOTYPING

Research and Explora�on of Folding structure

B B A

A AFTER

B A AFTER

1 Determine the size and scale of the model according to the design scheme. Use the KT board to build the shell of the barbecue furnace

Folding mode of oven shell

2 Explore the ra�onality and Stability of folding structure.

Explore how to fold charcoal frame. BEFORE In the scheme , the AB stent was folded in reverse , and it was found that the folded stent occupied a large part of.

Make the coupling sha� with cardboard and board and make the hinge with KT board to enable the rota�on and folding of the model.

AFTER Change the folding direc�on of the A bracket to down.

Folding method of carbon frame

Research and Explora�on of Design scheme BEFORE

Explora�on and selec�on of Design Scheme of Barbecue Furnace

AFTER

3 Use screws and nuts to realize the turning and folding of the legs of the barbecue rack, and realize the con�nuous movement. Test the stability and connec�on of triangular structure

AFTER

BEFORE Due to the folding of the oven , it is found that it is difficult to support and balance on the legs alone . AFTER Add the latch structure to the bo�om of the oven to stabilize the oven shell

AFTER

4 Func�on and Modeling Design of Insula�on Box

Test the carrying method and the posi�on of the handle

5 Determine the final plan

BEFORE-AFTER The test results showed that this mode of carrying was not very convenient , so it was changed to the form in which it was folded and placed in the box .

Xinrong Li’s Portfolio


HARDWARE RENDERING Presenta�on and descrip�on of the process of use

Tool rack

The foldable double-layer barbecue grill can have its height adjusted according to the need, the bo�om layer is close to the charcoal fire, and the barbecue food can be put on the upper layer to avoid scorching and cooling.

Double grill The vent can be rotated open, thus speeding up the burning of charcoal fires. By closing the vents, the oxygen content can be reduced and the fire can be controlled.

Igni�on machine

Igni�on machine. It contains built-in blower and lighter and combus�on improver to help charcoal fire burn quickly. The blast speed can be controlled by rota�ng the switch

Fixed base. By removing the fixed base and putting sand in it, the weight of the bo�om will be increased and the stability of the oven can be improved. Moreover, the contact area between the base and the ground can be increased.

Shelf. The tools needed for barbecue can be hung on the shelf, which is easy to pick up, use and keep clean.

Air vent

By storing in the storage box, the barbecue tools and cutlery are easy to carry.

Telescopic pipe. Users can increase or reduce the use space as needed The incubator has pulleys and handles, which makes it easy to store and carry food and tools.

Fixed base Telescopic incubator

Xinrong Li’s Portfolio


HARDWARE RENDERING Method of Use

Explosion Diagram Folding method of barbecue support

Folding method of charcoal frame 1

3

2

Working state

Unplug the bolt and lower the side bezel

4

Fold according to the direc�on of the arrow in the picture

1

Rota�ng sha� Support frame Side baffle Bo�om fixed pin

Charcoal Frame Igni�on machine

Combina�on 3

2

3

Form a flaky cube for easy storage

Folding method of barbecue oven 1

2

Double grill

4

Fold the side bezel inward through the sha�

Switch Air inlet

5

Barbecue Support

Through the sha�, the oven is folded up, reducing the placement space by half, making it easy to carry

Fixed base

SOFTWARE

STORYBOARD

Info-Architecture

Hi-Fi With this app, you can successfully complete your picnic i�nerary. Either you go on a picnic o�en or for the first �me, you can enjoy a relaxing family dinner.

Weather PLAN

Loca�on Date My Plan

Food bank Quan�ty Recommenda�on

1

Purchase Choose Foods

START

Make an appointment to have a picnic together.

2

Determine the appropriate �me, weather and place in app.

3

Choose barbecue tools and favorite food.

6

Prepare ingredients according to the recipe.

Prepara�on method Package Food list

Choose Tools

FIND

Popular Post

Type

Receipt

Package

Instruc�on Community News

ME

Se�ng

4

Receive express delivery.

5

Put the prepared ingredients and drinks in the incubator.

8

Share i�nerary and list with friends.

Scene Popular Follow Vlog Circle

About Us My Order Ideabook

7

Take the tools and ingredientsto the des�na�on according to the naviga�on.

9

Set up the barbecue oven, light the charcoal fire, and start the barbecue picnic.

Xinrong Li’s Portfolio


05

Back Bike Having a good bike journey with your family Interac�ve design project 2019.11.20-2019.12.10 Group work


Background Insight In this brief, we learned that due to global warming, ecological destruction and other ecological problems, bicycles are praised as a green means of transportation. At the same time, cycling is an effective way to keep fit, which can reduce obesity and other problems. In this context, many families use cycling as part of family activities. But at the same time, there are some problems. Most of the parents at home are office workers, and planning a cycling route is a very time-consuming and wasteful experience. This also caused the biking outing program to be shelved. As children's minds are not yet sound, safety issues have become particularly important. As Goniewicz et al (2017) said, most of the death of children is caused by road traffic, which accounts on a larger part than the factors of birth defect and cancer. So I need to design an app to help families ride bicycles safely.

Persona

User Journey Map Persona David

Stage

Goal

Action

Thoughts & Emotion

Name : David

Family : Married, 2kids

Age :45

Location : Leeds.uk

Character : Easy Going

Bio After a week of hard work. David likes to spend his time with family. And recently, in his family, every member got a bicycle. They want to cycling. But this plan was always delayed, he did not know where is the best place, and how to make a perfect plan.

Opportunities

Goals And Expectation -Cycling as a way of spending quality time with family -To make most of his time on weekend -Connect with nature -Exercise

Senario using a plan to have a bike journey with family

Senario Making a plan Whole process of the plan

-Read some infor mation about travel strategy -Select date -Check weather -Select place -Select road/routine -Check tool list -Traffic situation -Search some games or activities

Cautious/precise Restless

Preparing Taking and checking everything

--Cooking -Packaging -Dress protective gear for kids

Cycling

Picnic/activity

After

-Having a safe and comfortable travel -Exercise -Connect with nature

-Connect with nature -Organizing equip-Have fun with family ment -Spending quality time with -Social family

-Check time -Follow the road -Find rest place -Check time -Taking photos -Listening some music -pay attention to kids -riding too fast

- Find a place to park the bike -Rent equipments( tent, seat, and so on) -Eating -Playing -Throw trash to can and clean the place -Return equipments -Check time

-Check equipment and clean them -Sharing experience and photos in social application -Comments

Tense Patient

-The recommend -Help check equipment place -An app to make a plan -Rent or buy some equipment -Recommend activities

Happy Harmony Relex Tired Inconvenience Tense

-Guide a proper road -The location of bike Rest place -Suitable riding speed Time reminding

Enjoy Cheerful Trouble Messy Jobs

-Search and check inform in advance -Game recommend Take photo to share

Exhausted

-Check bike guidance -Family diary -Share to friend -Poster or blog

Xinrong Li’s Portfolio


concept

Low-Field Prototype

Architecture Information

Information Flow

Logo

Riding is a green sport, so I use the outline of leaves to make the outline of the whole logo, which represents healthy and green. But I used yellow as the background colour because climate change has caused damage to the earth’s ecology. Through green travel, energy can be saved, the earth will recover and everything will recover. I ride on the road and take different routes, so I superimposed the shape of the road and the shape of the leaves.

Xinrong Li’s Portfolio


Final Solution High- Field Prototype

#474097

#e8da23

#484745

#201c1c

Nowadays,UX and UI play an essential role in the designing process which can make the software success or not and market reaction (Cohen and Wang, 2013). In this circumstance, designers should pay more attention to UI and UX to make them suit the function of applications, which can meet the needs of expectations of user experience (Cohen and Wang, 2013). Because the persona of the app is an adult man, and he is busy with work in daily life. After analyzing the journey map, I think the interface of this application should use simple colour and cut down on the cost of learning. I use the yellow, purple and dark as the main tone for the app, and the universal icon was applied which can cut down on the time of learning a new app.

https://xd.adobe.com/view/75529d01-9824-455e-8d28-909cfde3e5ec-2001/

Xinrong Li’s Portfolio


Final Solution

Completed Journey

5

2

you can check your mileage, speed and other data. At the same time, you can upload photos of your riding, and save the riding diary in the app. The mileage bill will be generated at the end of the month and can be shared with others.

At the same time, in this interface, you can see your calories burned, your riding progress and your riding distance

4

loge in Home

In the new journey interface, You can check your travel plan, including basic information such as weather and temperature on the day of travel, and some guidance to help you check your bike. Your planned route, including the number of rests, riding speed and riding distance, etc. Your riding formation: The system recommends safe and convenient riding formations based on the riding level you fill in and the age of family members Your activity: Relax and leisure activities after riding to make family relationships closer. Then start riding.

1

Check My Journey

This interface is mainly divided into three parts, the completed cycling itinerary, the planned new itinerary, and the re-planning of a new itinerary

3

view other people’s journey and article upload your own diary

On the way you are riding, when a vehicle is going to pass by, the app will automatically ring a bell to remind you of the vehicle to ensure riding safety.

your bike information find some guidance to check or repair bikes

Add a New Journey

Enter your ideal travel date Information about family members, including age and riding level. The system will recommend the appropriate distance and average speed based on the riding level of family members Bicycle information, the system can provide corresponding guidance to help you inspect and repair the bicycle, and pair with your bicycle to ensure its safety You can choose the recommended route and plan, or choose a new route yourself Choose a relaxing leisure game suitable for family riding

Xinrong Li’s Portfolio


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.