Page 1

2019

CHEN Xiaoli


PERSONAL INFORMATION

CONTENT

CHEN Xiaoli Sex:Female

APP DESIGN

01

DOT

1

Date of birth:1992/11/24

+86 13556687708 / chenxiaoli921124@163.com

APP DESIGN

02

IDUB

9

EDUCATION South China Agricultural University

2011/09-2015/07

Bachelor of Agriculture Major: Ornamental Plant & Landscape Architecture

SPACE INSTALLATION

03

WORDS CAN BE WEAPON

16

GPA: 3.34

04

KPI DASHBOARD DESIGN

PLAIN

24


APP DESIGN

01 DOT The space DOT is a combination with a shared space combining self-study room and cafe for more and more freelancers or professionals who are keen to improve their abilities with VIP mode. Customers can work here with dierent services and wonderful coee. Users can make online reservation for the DOT space through APP DOT in advance, and there are a variety of space environments and table and chair types to choose. People can also enjoy the quota free printer, charging cable and goods storage, etc. DOT space is a quiet environment and refusing to chat. And it allows people to focus on study or work.

1


BACKGROUND The number of slash in China

15906

2012

31794

2016

86000

of the young people are slash youth in China

140902

2018E

12-15RMB (Convenience stores)

Mainroad

CBD

235

250

204

200

156

177

135

100 50-80RMB (Specialty coffee shops)

8-10RMB (Self-service coffee)

The main locations of coffee shops

(in China) 271

300

150

The prices of coffee at various offline shops

THE YOUNG

100 million RMB

2007

30%

Shopping Mall

Offine coffee shop industry marker size in China

The number of offline cafes in China (2017-2018)

35-45RMB (Chain coffee shops)

2013

2014

2015

2016

2017

2018E

BACKGROUND RESEARCH CONCLUSION A large number of young generation have become slash in China.

Residence Zone 0

10

20

30

40

50

60

70

FROM: 1. 《New age, new youth:2019 Youth Group Observation》 2.《CBNData》

80

90 RMB

The number of coffee shops has a great increase in these years. There is a large room to growth for coffee industry in China.

2


CULTURAL PROBE Positive

Shopping mall

Probe Tools: Notebook / Pen / Smartphone

Noisy

Do not go to toliet

People talked loudly Felt tired because of uncomfortable seat

Waiter cleaned the table

Many seats Do not need to wait in a line to order a cup of coffee Seats for work are occupied Get the coffee by ownself

14:30

Max:86db

WORK Excellent decorations

Coffee shop

Negative

Nobody

Soft light

Car parking

14:10

15:30

Working

Enough truck space

Decide to go to a cafe to work

17:00

Change another seat

Power supply was bad Felt a little cold

16:30

14:50

Timeline

14:35

14:25

Leaving Convenient to pay for car parking

17:45

PERSONAL INTERVIEWS

Motivation

Wants to stay in a cafe to finish her article.

Needs a quiet place to do her design work.

Has to prepare her postgraduate exams on weekends.

Fructraction

Feels embarrassed when customers wait in a line and she is occupied the seat.

Can not find a seat sometimes and a few cafes are noisy.

Loves studying at library. But there are not any restaurants in the library.

Expectiation

32 Wants to find a quiet space where she can work and have a cup of coffee. Teacher & writer

Linda

Mary Willing to work at a place which is peaceful and can be ordered in advance.

27 Designer

Jun Will study in some places where is quiet and she can have meals

24 Secteary 3


COMPETITORS ANALYSIS

CUSTOMER JOURNEY MAP This customer journry map shows some current cafes’ circustmences and other protential services or opportunities of coffee shops in the future.

5

STAGES

Descide where to go

STEPS

Find a cafe Confirm the location

How to go

Arrive at the destination

Opportunity

In the cafe

Current condition

Leaving

4 3 2

Parking Go to the cafe

Ordering food Payment Working

Payment Find the car Go back home

Op en Lo a sp ca ec ific Ch tion ap oo p s Ch e a ec co Co k the ffee sh mf s o Bo ort l eats p ev ok el Fo ing of rw se a ats Ro rd o ute rde rin Me pla g tro n pla Bu n sp Tim lan e Re (bas ed mi En ndin on v g tra ari ou Tru nce sw gu ck ay i de s s) Th e w pace Or ay t guid de o e Pa r the the c yb af re Fo y QR fres e h od me co nt Co deli de ve mf r Gu ort l y ide eve lo Clo to ak the f sea se WI ing at ts FI La mp De light co Air ratio ns co Po ndd we itio Pr r su n int pp e l To r&s y ca lie nn Clo t er the Cle s an Pa ing yb Gu y QR ide c to ode Th e w the Fe ay t par ed k ba o the ing ck ex it

1

Choose the ways of traffic

1 2 3 4 5

TOUCHPOINTS DEPARTMENTS Marketing Operating Food and beverage

Bookstore

Cafe

Co-working space

Financing Front-service Rear-service Design 4


PERSONA

CONCLUSION

WORKING

Age: 25 years old

DOT

Normal

COFFEE SHOP

WORKING

SERVICES

DOT is a coffee shop with co-working space. Customers can enjoy coffee,forward booking service, office supply and peaceful working environment here. Meanwhile, people can also buy their take-away coffee from the shop.

Job: Designer&writer

Cafe Income She need to spend some spare time on her writing career and she love to work with nice coffee and environment.

Eve

STORYBOARD

Age: 30 years old

Job: Entrepreneur&KOL

Cafe Income

Done!

1 To book the co-work seat

in the cafe in advance.

2 Go to the cafe from home.

3 Arrive at the cafe and

find the seat.

4 Enjoy working with the

She is running an online shop and does not have enough money to rent an office for a little work. So she would go to some place which is peaceful.

May

nice coffee.

Age: 18 years old

Job: Student

Cafe

Thank you!

Income

5 There is a quite

environment for working.

6 Offers free power supply

and soft blankets.

7 Customers print files by

scaning the QR code.

8 Pay for the service and give

suggestion by smartphones.

Jack

He enjoys reading books or finishing his homework outside especially where is quite and comfortable rather than at home at weekend. 5


USER FLOW DOT

TESTING COLLECTION

Register Log in

Home

1

Scan

1 Delete the tab bar

Location Stores

2 Show the number of remain seats

Picture

2 Lack an entrance for QRcode

Navigation Comment

1 1

Total price

3

4

5

6

3 Show the differences of the seats 4 The picture is likely to seat guidence

Details

6 Lack a notification of booking Seats

6 Get an QRcode after booking

Service

8 Lack a menu

Time Service

2

Address

Booking

Order

Lack a loading page

7

8

9

10

11

12

9 Add some space for suggestion 10

Change “Wallet” to “VIP Card”

11 Lack the coupons’ information

Payment

Me

Information Level Coupon Setting 6


WIREFRAME It shows the nearest DOT to users.

Get the information about the places of unoccuppied seats.

INTERFACE Book the services in advance.

Logo

Icongraphy

Sign in

Color #98B19B

#698E63

#707070

#CDCDCD

#FFFFFF

Fonts ABCDEabcde12345

PINGFANG

ABCDEabcde12345

Avenir 7


PROTOTYPE

8


APP DESIGN

02 IDUB Nowadays, learning foreign languages has become more and more popular around the world, but learners have little opportunities to practice their speaking skills. because most of courses or application focus more on vocabulary and reading. A learning APP called IDUB is designed to combine language learning with popular movies. By dubbing for hot movie clips, users can learn idiomatic words from dierent scenes and plots. They can learn and correct their oral pronunciation through the audio track of the dubbing interface to improve oral abilities.

9


Background and research Are there some words in movies impressed you often?

1. Oral English skills plays an important role in

How do you want to learn in a language learning software?

communication with others around the world and is a key to confer excellent people.

64% 2. Because of the education system of English teaching in

23%

42%

Always

Often

25%

10%

China, most of people neglect the significance of interaction function of languages and focucs more on reading and writing.

?

None

Is it beneficial to learn other languages by watching movies?

48%

28% Questionaie of 100 people

Sometimes

Very helpful

Beneficial

19%

A little benefit

5% No

1. About movies

31%

Enjoying it very much

45%

Loving

19%

Loving a little Disliking

Have you ever learned some languages by yourselves?

YES 45%

55% NO

37%

Playing games

Reading

34%

1%

Watching movies

Other

Would you use an app that you can dub for movies? Using it often

40%

Using it sometimes

42%

Never

18%

2. About language

Do you like watc hing movies?

5%

Watching videos

43%

Conclusion Many people enjoy watching movies, and the special words will impress them for a long time. Videos is a good method for most of people to learn something new. Some people enjoy dubbing. 10


Interview

Competitiors Analysis

How do you learn English nowdays? Interaction I enjoy learning English by watching movies and apps on the smart phones. It is really convenient. Do you have any suggestions with the language learning apps? We can learn words or grammar well from apps, but speaking is ignored. Have you ever imagine that you are one of the charaters in movies?

Visual design

Scope

Haha, always. I am inspired by heroes in action movies.

MARY CHEN JACK WU Which movie is your favourite?

Structure

Skeleton

That must be 《Wonder》 What impress you most in the movie? The teacher Mr Brown's words“When given the choice between being right or being kind, choose kind.” Would you want to dub for this movie? Actually. I enjoy playing a role in my favourite movies. It is really funny.

Talkmate To assist people in language learning and they can help others to correct their speaking.

Busuu Users can learn foreign languages through games and making friends.

Dubbing show Everyone can dub for their favourite movies and create new lines for the films, and make new friends. 11


Storyboard

Persona

LOCATION

27 Designer Shenzhen, China

AGE OCCUPATION LOCATION

Story 2

People can practice their oral

Users can learn oral speaking

speaking skills through

skills through dubbing for a

dubbing for their favourite

movie even though they do not

scenery in the movie they

know each other or get

loves.

together.

Mary Wu

OCCUPATION

Jack Chan

Anna Huang AGE

Story 1

20 Student Guangzhou, China

AGE OCCUPATION LOCATION

40 Housewife Dongguan, China

Interest

Interest

Interest

English

English

English

Movies

Movies

Movies

Mobile apps

Mobile apps

Mobile apps

Behaviors

Behaviors

Behaviors

Enjoy watching movies and repeat the lines to learn speaking skills.

Enjoy stay alone and want to study alone after school.

Find some interesting apps on the phone to use.

Frustrations

Frustrations

Frustrations

Do not have enough time because of overtime working.

Online courses are too expensive for a student.

Can not meet friends sometimes.

12


Design Objective

Information Architecture

Materials Single

Post Add Friend

 

Collection

Dubbing

Create Search

Type Hot videos

Team

Dubbing Materials

Home

Language Hot languages

 

Hot blocks



Hot users

Add Search

Dubbing

Community

Scan users Recommend

Languages

Message

Blocks

Attendence It is convenient and interesting. The app is an oral learning platform. People can learn and practice their speaking by dubbing for

Vocabulary

Study File

Grammar

Courses

Speaking

Hot courses

their favourite movies. And they can not only dub alone but also dub together with other users.

Likes Study

Personal Center

of dierent countries.

Collection Draft Box

Me

Setting

Through dubbing, people will improve their oral speaking skills and learn some culture or history

Join in

Information

QR code Notices 13


Wireframe

Showing the hottest works, groups, users and so on. 1

Home Page

Users can choose different courses to learn foreign language. 2

Study

To choose your favourite movies video to dub fot it. 3

Dubbing

Sharing your happy moments with your friends. 4

Friends

According to your behaviors to set your app function. 5

Me

14


Prototype

Interface Design ICON

FRONT Nirmalaia

ABCDEFGabcdefg12345

PingFang

ABCDEFGabcdefg12345

COLOR

64C1B6

17439A

7D828F

FFFFFF

15


SPACE INSTALLATION

03 WORDS CAN BE WEAPON "Maybe we don't think that our way of talking is violent,

Through the three spaces, it shows the process of people receiving

but words do often cause pain to ourselves and others."

verbal violence, struggling, and finally overcoming. Visitors can interact

-- Marshall lubbersen

with sound and light in the installation space to deepen their experience.Hope people can pay more attention to the problem of

Language is a window as well as a wall. Is it freedom or

verbal violence and remind themselves not to use words to hurt others.

obstruction and judgment? The black thread wound.The firm At the same time, it is right to speak out and lend a helping hand to voice echoed. And the faint light flickered...

help the victims out of their plight.

16


      

  I hate you.

Campus

81.5%

of interviewed students think verbal violence is the most urgent problem to be solved.

FAKE

You are nothing. Go away

Fat

Family

32

432

Negative comments each day

≈

1:10

STUPID

Ugly

I want to hide away when my classmates say I am freak.

You must be perfect.

People always say the girls are powerless. But i do not think so.

I hate my father because he said that I am stupid.

Shut up

Powerless You are trouble.

Childeren receive Positive comments each day

You are just a girl.

      

My wife thinks that I am trouble which makes me feel annoyed.

NUMB

Verbal violence makes me think of devils and hell.

The young man sayďźšâ€œYou are worthlessâ€?which made me feel depressive.

     I feel self-abasement when my friends think I am fat. But I get over it ďŹ nally.

Depressive emotion

Internet

3 serious problems on the internet

Abuse Problem

Fake info.

Mental disorder

Negative info. Answer violenc with violence

Critical damage

I can not breathe when I remind the words“Numb�.

 Verbal violence is a serious problem in our life, and it should be paid more attention from now on. The victims need more care and love from others and they should also try to get out of dilemma. Verbal violence can induce dierent degrees of hurt, such as negative emotion and even critical damage. 17






The sculptures is a 1:1 scale replica for house that artist had previously lived in, and it is created in purple fabric which is soft and ethereal. All of these are likely combination of the virtuality and reality.

Colorful lights bring a feeling of magic. There is likely a rainbow in the room. The “sun� is in the room. And its bright light makes people feel warn and happy.

All the red lines are winding together, which make people feel depressed.

Creating a sense of space with simple circulars arrangement.

Make the audience feel the astomsphere which is surrounded by speech attacks on the internet with various good made by paper.

The installation is a large scale of the vast, swirlling cardboard labyrinth. And each visitor explores the maze, thus becoming an integral element of the work itself.

People can talk to others who are far from themselves in dierent places through this special water pipe. 18


 Exhibition Hall of Crime Evidence of Japanese Germ Factory in Harbin





Verbal violence is like a sharp sword harming people’s heart.

Colorful patterns have a sense of joy and magic. And they make people feel happy .

 The main building is sinking under the ground, and the submerged entrance with Genius Loci. Lines and angles are the main design elements.

San Cristobal——Luis Barragan

Constructing the space with colorful walls which are brighter and fantastic under the shunshine.

The Memorial Hall of the Victims in Nanjing Massacre by Japanese Invaders

It is like a combination of light and darkness. Victioms are likely trapped in a net cage, but they can see through the cracks and feel the light.

Sharp acute angle is like a knife ricing the sky, making people feel unpeaceful.

 A nail symbolizes the each experience of verbal violence. By the method that the way of tying the knot in the ancient, symbolizes experience deeply rooted in the lives of the victims. 19




Lines net make a depressed atmosphere.



Breathing light

Sense light

Music area

It is a little complex that there are three dierent areas in the third part.

 This is a space installation which shows the process that people suer from verbal violence, try to ďŹ ght with it and ďŹ nally get rid of verbal violence. Visitors go through three dierent parts of the space installation to feel the emotion and psychological states of vicitims. I hope that people will pay more attention to the problem of verbal violence and get more courage to get over it. Hope is in the future.

 Sense light Interaction screen

Triangles are sharp and they have a feeling of uncomfort. Dierent color can make people feel enjoyable.

A space with combination of lights and sounds.

Speaker

Black lines Microphone

The channel in the ďŹ rst part is too long, and it is a little boring. 1. The ďŹ rst part is a space with black

The screen will be brighter for the louder sounds.

lines net. 2. The second part is a space where visitors can inuence the lights through their voices. 3. The third part is a room where people can hear some positive words said by themselves.

Confrontment Shimmer

Area

Dilemma

Route 20


 

 1/ Voice-activated lamp



Sound information

Microphone

Led

1

Microphone

Firstly, enter the dark space which is constructed a depressing atmosphere . 

2/ Human body infrared induction lamp

B Say positive words

Arduino

A Computer

Light

Collection File

Light

Human infrared

2 Infrared ray detection zone(light)

Get into the infrared ray detection zone, then the light turns on.

Trigger switch

Human infrared Say positive words louderly

Sound information

Speaker

The speaker turns on and it plays audio messages.

3/ Human body infrared induction speaker

3 Then, visitors will come into a room where they can inuence the brightness of the light of the wall by saying some positive words through microphones.

Pyroelectric infrared sensor

Fresnel lenses

 Infrared ray detection zone(speaker)

Fresnel lenses

Speaker Pyroelectric infrared sensor Collection File

Computer

Arduino 21






 Iron wire Iron wire is hard to be change shape. And it has a abvious sense of boundary.

Cotton thread Cotton thread is soft. But it can construct a depressive space through winding.



Red light

Green light

Comparing

Compare dierent colors of light. Red light makes make people feel aggressive. Green light is the symbol of hope. Yellow light is like the sunshine which can oer warmth and peace. 22




23


KPI DASHBOARD DESIGN

04 PLAIN PLAIN is a KPI dashboard design for engineering project management for senior management of project contracting enterprises. PLAIN draws inspiration from the at management model. In PLAIN, grass-roots sta update the information of projects, such as project progress, project quality and safety inspection, and senior leaders can timely get the facts and solve the problem of engineering project management, so as to do a better job in management to ensure project quality and completion time.

24


BACKGROUND STORY In a certain work, the leader suddenly wanted the monthly output value information of all the company's engineering projects. Then all of us just copied the data of hundreds of projects from all forms, and summarized the data in a general one.

“Is there a good way to record management of engineering information?”

RESEARCH

management s

s Long period

Large amount of money

Many jobs and processes

%

Gross profit rate

s s s

Increased investment

Net profit ratio

Political impact

25

CONCLUSION Garden plate is expected to continue to maintain a high-speed growth trend in the future.

5

Because of the fast development of urbanization and the increasing investment of urban landscape, the landscape engineering industry will have sustainable development in the future.

Pressure of public opinion

20

10

the development of urbanization

Casualties

1

15

s

Economic damage

Gross profit rate and net profit ratio 30

Current status of landscape engineering industry

Seriousness of the engineer accidence

Difficulties of current engineering project

0 16Q1 16Q2 16Q3 16Q4

17Q1

17Q2 17Q3 17Q4

18Q1

In 2017, the gross profit rate of landscape engineering sector was 27.21%, up 0.82 percentage points year on year. Net interest rate was 9.5 per cent, down 1.06 percentage points from a year earlier, mainly due to increased competition in the industry.

The management of landscape engineer projects are difficult and complex. And the engineer accidence can lead to perniciousness to societies. Companies should pay more attention to management to increase influences in such competitive business. 25


OPINION MAPPING Flat management

Q: What are your opinions of two different management styles?

Vertical management

The diffierences between two main management styles Decision-making layer

1

efficiency of information flow

2

efficiency of efficiency of decision-making decision-making

Management layer

3

efficiency of organizational functioning

4

exchange of information between different sectors

Executive layer

Vertical management Decision-making layer Executive layer

Flat management

Number of interviewees

3 2 1 0

CONCLUSION X2

X3

X4

X5

Efficiency of information flow

X2

X3

X4

X5

Efficiency of decision-making

X2

X3

X4

X5

Efficiency of organizational functioning

X2

X3

X4

X5

Exchange of information between different sectors

Through the ideas of interviwees, we can know that the efficiency of information flow and the exchange of information between different sectors is better of flat management than vertical management. 26


CURRENT STAKEHOLDERS MAP

USER PERSONA AGE GENDER

Financial institutions Lend money

Project manager

The bid institutions

LOCATION

Society

Media

Lend money

Contractor

Contract the project

Material supplier

Owner Invest

LANDSCAPE ENGINEER PROJECT

Supervise

General public

Give suggestions Experts

Offer designing scheme

TOM QIN “I enjoy seeking different methods to increase efficiency.”

Hard to track the progress of the rectification work.

40

GENDER

Government

Environment Designer

Shenzhen, China

“It is my duty to manage all of the engineering projects.”

Have a good control of company’s engineer projects. Improve the efficiency of work.

No enough time to have field visit of all projects.

CURRENT FEELINGS

Passive

Active

Analytic

Creative

Thinking

Feeling

Stressed

Concened

Optimistic

GOALS Finish the project in the signing time. Increase project profit.

PERSONALITIES

Can not check the information of different projects at the same time.

Outsourced designer

Primary stakeholder

Female

FRUSTRATIONS

SAMMY WANG Secondary stakeholder

Busy

CURRENT FEELINGS

LOCATION

GOALS

PERSONALITIES

AGE

Supervise Design Company

Primary stakeholder

Dongguan, China

Do not have enough time to check all the reports.

Give suggestions Supervisor

Male

FRUSTRATIONS

Staff Offer materials

45

Busy

Passive

Active

Analytic

Creative

Sensing

Intuition

Hopeful

Confused

Tired 27


Arrive at the project department

Spot inspection

Leave

Report to the leader

Decide the means of transportation Find the information of the projects

Check the files of the construction project Check the project department

Check the construction and manaement of the project

Leave for the next project

Finish the inspection report Report to the leader

Open the Xiecheng APP to book the ticket Find the files of the construction project to confer its type, cost and so on Print the files

Take photos for the gate Go to the office to check contacts, special seal for contractual uses, drawing, time limit for a project, production value and so on

Check the prototype project Contrast the constrction site and the drawing Take photos for the places of bad quality and unsafety Take notes

Have a meeting with the whole project department Take a car to the next project

Collate all the pictures in the phone and the notes Finish all the reports of the inspected construction projects Report to the leader

It is unefficient to find the report one by one.

It cost a lot of time to check the files in the project department. And the time of spot inspection was delayed.

It is too hard to take the pictures and notes at the same time. I may confuse of the two different unqualified places

Good to have a meeting to summarize the inspection

I felt helpless becacuse of the reports Heavy workload It cost a lot of time to type setting

A good way to check all the files quickly

Have a record about all the typical problems

PAINPOINT

EMOTION

THOUGHTS

TARGET

Ready to go to the construction project

BEHAVIORS

STAGES

CUSTOMER JOURNEY MAP

GOOD

BAD

A special app for route design of company’s inspection trip A system for the staff to check the information of the project

Have a record about all the typical problems

A system to renew the information all the time and the leader can see on it

28


KPI DEVELOPMENT

The importment information

Loading

Early warning

s Cost

Output value

Profit index

CONCLUSION Most of engineering management companies adopt the management mode of vertical management. However, due to the separation between employees and superiors, the efficiency of information communication is low. According to personal work experience, a system platform will be designed to solve the problem of low efficiency of information transfer between leaders and grassroots employees.

Excellent engineering project management

Progress index

Goals

CSF’s

KPI’s

Control the finance stategy through the whole constructing progress to make profits.

Finance strategy

Contract price

Profits Cost

Total cost

Control the unqualified factors of the project to avoid quality accidences.

Quality vertification

Total checking times

Phenomenon of disqualification

Number of disqualification

To control the unqualified factors of the project to avoid safety accidences.

Ensure the output value according to the timely completion of the project

Control the project progress and finish the project on time.

Safety vertification Phenomenon of unsafety

Output figures Output types

Profits of the project

Disqulification factors record

Total checking times Number of disqualification Unsafety factors record

Output value pre day Output value pre month Output value pre year

Date of commence Project progress

Working days The count down

29


WIREFRAME Usability testing

Final outcome 1. No sign in page. 2. Too many project location markers. Project Page

Get the detailed information of project.

3. It is not easy to get the information from the form. 4. No details about dierent kinds of output value. Dashboard 5. Some data charts are similar and it is diďŹƒcult to distinguish them.

6. Lack of a calculator. Entry Page

7. It is not convenient to roll the page to see all the pictures. 8. Lack of information of projects, such as area and address. Get the information of pre month. 30


VI DESIGN

PROTOTYPE

Logo Inspiration from the information communication styles of flat management. Plain is mostly at the same horizontal position.

Each letter is with single strokes.

Fronts PINGFANG

ABCDEFGabcdefg1234567

SIMHEI

ABCDEFGabcdefg1234567

Color

#D84634

#213F8D

#8790A5

31


32

Profile for xiaoli chen

UI/UX Portfolio  

UI/UX Portfolio  

Advertisement