K PROCESS OF CULTURE SHOCK
Hsin-Tung Chen | Kolloquium ss18
CONTENTS DESIGN KOLLOQUIUM - SUMMER 2018
01
Politiken des Designs/ Made in Potsdam
08 - 19
02
Crafting User Interfaces
20 - 27
03
Basic Interface 17|01
28 - 35
04
Information Visualization with D3.Js
36 - 39
05
Experimentelle Kartografie
40 - 49
ABOUT ME DESIGN KOLLOQUIUM - SUMMER 2018
Hsin-Tung Chen, aka Nicole, come from Taiwan. I am right now studying the 4th semester in FH Potsdam. Before I came here, I was an industrial design student in Taiwan, what I have learned there before is a lot of Product Design skills. As I got the chance to be a guest student in Potsdam, and learned more about UX design. After the exchange semesters, I decided to stay here longer and study the whole Interface Design programm. So far in FH Potsdam, I mostly concentrated on those Interface Design course, I tried them as much as I could. For example: Data Visualisation, Service Design and Interface Design, etc. Just wanted to find a point what I am really interesting in.
Politiken des Designs / Made in Potsdam Politiken des Designs is originally the WERKSCHAU topic from 2017 becuase the topic was so interesting. It was invited to have a real exhibition in Waschhaus - Kunstraum for 2 weeks. The inspiration of Politiken des Designs was from the politic situation changed. Topic like: Brexit, Donald Trump win the election, based on these news which was too shocked for most of the people, some of them started to use their way to share their feeling. That‘s how we get this topic: politiken des design. In this exhibition there were around 60 projects be shown by design students from FH Potsdam in a lot of different kinds of depiction. The exhibition hall was seperated into 5 collections: Consume, Future, Crossing Boarder and Private.
8
9
1
POLITIKEN DES DESIGNS MADE IN POTSDAM PROCESS
10
I was not a person who really into holding an activity or exhibition. To take care of all autors, design a perfect interior, build the exhibition ourselves, etc., it was just too complex and not for me. Of course when we just started this course, it was still so hard to get deeper into it. I always felt confused during the whole process, and didn‘t know what exactly I should do. Maybe it was because of different design methods, so it took time for me to get used to it. At that time, I realized that every steps were so fresh and new for me. Although the beginning was tough, after trying and trying, I started to be in the good vibe. I learned, that doing sketch and building CAD model are not the only way for exhibition design, directly playing around in the showroom is also a cool method. It just reduced our work a lot and made it to be more interesting than I thought.
11
1
POLITIKEN DES DESIGNS MADE IN POTSDAM ROOM: FUTURE PRODUCTION
So let me show you my room, Future Production, it was at the top of the exhibition hall. Future Production showed the projects, which are mostly based on topic climate change and future smart city. Most of them plot with their project data visualization and video. In order to show the future feeling, we designed a „star wars decoration“ around the stairs, just wanted to build a future atmosphere. And hope when visitors coming upstairs, see what we have done for this future production room, will change their mood a bit to the future. Based on the projects that we took the responsibility are mostly digital and interactive, so we designed a working space (see right photo), to let visitors sit down and see each projects that they are interested in. The special thing is, there is a future kino, showed the design project of author‘s imagination how people use pills in the future.
12
13
1
POLITIKEN DES DESIGNS MADE IN POTSDAM BUILDING PROCESS
Building process was normally the most difficult part of holding an exhibition because it is time consuming and boring, at least that was how I understood in Taiwan. But this time, it was different! Although it still cost a lot of time and made me tired at the end, I had more fun than I expacted. Almost every person tried his best to take care of his own work, and the result was awesome as well. At the same time, I was pretty impressed by some little points. For example, having bier, bread and cheese, etc. while we were building an exhibition. In Taiwan, we worked also for a really long time, but we always forgot to add some fun in the process, so it was pretty easy to get bored when we were going through everything.
14
15
1
POLITIKEN DES DESIGNS MADE IN POTSDAM VERNISSAGE
16
17
1
POLITIKEN DES DESIGNS MADE IN POTSDAM REFLECTION
Endly to the day of Vernissage, which meant this project was almost to the end. The Vernissage was pretty successful, our guests enjoyed this exhibition a lot, which just made us feeling worthy. At the same time, it made me to get closer with my classmates who also joined the same course with me. This was a big personally approach to be honest, and of course, I was glad with it.
18
This „Grundlagen Gestaltungskurs„ broke the quiche that I had before. After this course, I started to realize how to use design process more flexibly, and expertly. And of course to know more about German personality and culture, how to get along with them, not just stay in the corner to wait someone come to talk with me. This course helped me a lot for improving this skill, which makes me feeling better when I have team work with German together.
19
Crafting User Interfaces The increasing complexity of today‘s society is causing a counter-movement with the simplification of visual interfaces. The trick is to prepare a comprehensive set of facts as clearly as possible in order to give everyone access to them. In this course we look at the role of the perfection of visual user interfaces in craftsmanship. The development and building of a deep understanding of user needs, i.e. the role of design research, is just as much an integral part of the design process as the ability of visual translation and iteration to perfection. The course was ledded by Christian Hertlein (Head of Design, N26) who brought more than five years of experience at IDEO and Startup knowledge to the course.
20
21
2
CRAFTING USER INTERFACES RESEARCH & BRAIN STORM
„SPHERE“ is the main-task that we do for this fin-tech course. For this main task, all concepts have to base on money, trust and financial education. To understand our topic, we did a lot of research to understand what exactly Trust, Money and Financial Education could be. Our project was doing like this routine. We do a lot of research, brainstorm and do it again and again.
Our first step was to identify what “trust” exactly is. And made a mind, to show each different states, characteristics, and each features of the trust with the money. For this purpose, we made this research. We focused on different aspects of a trust. Such as psychological foundations of trust, biological basis, a theory of colours, different aspects of trust in different European countries and all around the world, how to create trust with UX design.
22
23
2
CRAFTING USER INTERFACES PROCESS
This idea was an application that helps foreign students to study in Germany. There are a lot of students from countries which don‘t belong to European Union. Not EU-citizens must finance their studies in Germany. Before you begin your studies, you will have to prove that you have enough money to support yourself. The document you need is called a “Finanzierungsnachweis”, or proof of financial resources. You are asked for it when you apply for an entry visa. At the latest, you will need to present it when you apply for a residence permit in Germany. In most cases, applicants have to prove that they have around 8,700 euros at their disposal for one year. Many international students use a blocked account to finance their studies in Germany. It’s called a “blocked account” because the money deposited into the account cannot be withdrawn until you have arrived in Germany. It is relatively easy to open a blocked account. There are a few points students should remember. Sometimes it may be confusing. That‘s why we decided to explain them what not EU-citizens must remember, to save time and to help them to avoid mistakes.
24
25
2
26
CRAFTING USER INTERFACES RESULTS
We made it possible to connect three main German platforms such as X-patrio, Fintiba, and Deutsche Bank with regional banks (in our case it were a couple of Russian banks — Alfabank and Sberbank). In our final version, we focused on the goal to make just several main clear functions: - Open German block account - Open German normal account - General information We made several introductions about how to use our application with descriptions and illustrations. We used illustrations as a graphical language to explain users the whole process of account opening. They make easier difficult financial language and users can feel more comfortable in such a delicate affair. It was our idea to simplify the serious problem. The illustrations also serve as navigation tool. The user knows in what part of app he is now. It helps him to open a blocked account easier and quicker. prototype: https://invis.io/GVMWZWT6QSD#/308323936_1_Logo 27
Basic Interface 17|01 Basic Interface is a basic exploration of the central themes of interface design. In this course, participant would learn the basic but important principles for interface design through a few tasks. With the introduction of interface history from professor at the beginning of each tasks, students get to know more detail parts of design and would able to work with clearly guidelines. It is also a good opportunity to learn how to work with other people in the group and present your ideas in front of the whole class. Through 4 tasks to train our interfaces design skill, which are Digitales Buch, Klangbild, graphic user interface and 1000 Wรถrter.
28
29
3
BASIC INTERFACE 17|01 DIGITALES BUCH
The goal of this first task, Digitales Buch, is to teach us how to follow the style from the original book to digitalize it. What we could learn is how to put information into tablet and smart phone and still looks good. The layout should not have too many differences from the original book that we chose.
30
This project could be my very first interface education. Before it, I even did not know what the software „sketch„ is. Everything was fresh for me. At that time, I worked with my groupmate and struggled together what we should actually do. We started to skech and used sketch to digitalized the screens in our mind. For those 12 colors we did in 2, and made it be tablet size which should be easier for readers to read. From those pictures down below, the theme of dishes change the color with each food or collection that you choose.
31
3
BASIC INTERFACE 17|01 KLANGBILD
Klangbild is a sound visualization task. We should record a noise soud file, and visualize it in our way. It could be a video, graphic or illustration as well. For this task, me and my parter decided to do round graphic as our visualization because we did not want, when we added some sound symbol into the graphic, it lost its own aesthetic. So as you see from the right side, this is how our Klagbild looks like, also a category next by to expain each meaning of those symbols. When people hear the sound from us, can easily understand what this graphic means.
32
usic eräusch)
sounds of the music Purple: noise (Geräusch) step sound door sound klinging sound sound from human
an
33
3
BASIC INTERFACE 17|01 GRAPHIC USER INTERFACE
Task number 3: graphic user interface is to design a brainstom app. How people do their own brainstorming through this application? The special thing of this brainstorm app is, it has „single„ and „group„ session. It means our users can feel free to think all the ideas they have in every single session, they will not feel shy because it is in a group, maybe someone will feel the idea is bad. Before this task, I always felt designing an interface is not a difficult thing, we just have to put some shapes, boxes or fields into each screen. But after this UI task, I got to know that designing a really beautiful and logical interface is very hard, and was totally different as I thought.
34
35
Information Visualization with d3.js In this course, we will learn basic and advanced techniques in interactive visualizations with the famous framework d3.js. In this course with Katja, we used the journalist killed data-set to visualized the amount, place and by which reasons. All tasks were mostly based on this journalist data-set. In each different level, we applied our D3 knowledge to finish some data visualization graphics. After the anaylse course from Prof. Constanze Lange, I started to be insterested in data visualization. Last time I only tried to use some graphic software to do it. In this course, I am going to programming by myself.
36
37
4
INFORMATION VISUALIZATION WITH D3.JS
In this task, I used 4 different kinds of colors to distinguish the danger level for journalists. The visualization of each danger level can see from the graphic down below. Each color means different amount of killed journalists. when people move their mouse to that country, it shows a little text field to tell you the name of it, just like what I show at the right side. The most difficult part of this task was to put a map into this programming process. To find a suitable picture in it, set all amout for each country was the most complicated part. I know this task does not look good, but it was a big approach for me to start programming, and apply the skills by myself.
38
Russia
India
person 80-60
60-40
40-20
20-0 39
Experimentelle Kartografie In this course, Experimentelle Kartografie, we learned how to use our sensory and the surveying instrument (which we built ourselves) to measure the place that we are interested in and do a map or a visualized poster afterwards. The whole process during the course was intensive but fun, we usually felt helpless or dazed when we just got the homeworks, but after some design thinking processes, it became clearly and easily.
40
41
5
42
EXPERIMENTELLE KARTOGRAFIE HOW SMELLY BERLIN U8 IS?
When I just arrived in Berlin, I always have a question: How could this Berliner U-Bahn so smelly and messy? As the topic of this cartography project, I decided to acquire the smell in each station of those metro station. The first idea was to go through as much station as I can. I even planned to ask my freinds who live aboard, to help me a bit of this project. But at the end we decided to concentrate a bit. Only focusing on the U-Bahn stations in Berlin, especially the smelliest one. So here comes U8, because U8 has the most limited area in Berlin, north part is wedding south part is Hermannplatz. That‘s why.
43
5
EXPERIMENTELLE KARTOGRAFIE HOW SMELLY BERLIN U8 IS?
Since the Metro system in Berlin is still too complicated, we chose one of the well-known line — U8 as our main line. The following process is all based on this line. Before the measuring process, we do a “measure handout” for ourselves and friends for testing. That is kind of surveying instrument, the handout teach people how to use their nose to join this project easily and orientated. Also! It is easy for us to do the data collection, after gathering all the data we need, we can start to do the visualize work. As you can see in the handout, we ask our friends and tester to use their nose as the measurement. When testers walk to the platform of U-Bahn station, they should hold their breathe for about 5 seconds, then give it a long deep breathe, record the first smell they mention directly on the handout. To distinguish the extent of that smell, there are three levels of smell. They can mark the smell, for example: it is way too strong that even if you cover both nostril, or you need to cover at least one nostril, or the station is not smelly at all and even with some fragrances. It is sometimes hard to describe or measure how strong the smell is, so hand writing description is also very important. And you will also know how they thought during the testing process.
44
1.
What was it?
2.
What was it?
3.
What was it?
1. Station: Time: 2. Station: Time:
3. Station: Time: 4. Station: Time:
e
e
e
ss ss
tra
tra
es ns
an
rm
He
in
Le
tz ss
ra
e
ss la
np st
in
dd
Bo
tz rT or ra
st an
in rm
He
nle
hö
Sc
se
us
ttb
Ko
pla
itz
or
M
e
ss
ke
üc ra
St
e-
in
He
h-
br
itz
e tz
ss
tz
pla
er
nd
xa
ow
nn
Ale Ja ric
in
He
tra
la
rP
le
e
e
ss
ss
ra
St
r-s
te
eis
m
W ein
ha
tra
as
er
au
nt
rn
se
Ro
Be
e
en
nn
ru
db
Vo lt
e
ss
ss
ra
st
ra
St
nk
Pa un
es
G
er
e
tz
Pla
ss
tra
d
e
lle
Ba
s-
n-
an
m
slo
O
eu
N
zs
en
lcu
ce
sid
Re z-
an
Fr
ra
Pa
ik
lin
nk
rA
ue
ve
er
u
rf
do
en
ick
da
Lin
r-N
ein
sR
ffe
oe
nh
na
te
wit
e
e
ss
e
ss
ss
tra
ns
an
rm
He
tra
es
in
Le
tz
la
e
ss
ra
st
in
dd
Bo
np
an
z rT or tra
ns
ei rm
He
nl
hö
Sc
at
e
ss pl se
us
ttb
Ko
itz
or
M
tz ke
üc
e
ss la
ra
St
e-
in
He
h-
br
itz
ow
nn
Ja ric
in
rp
de
an
ex
Al
tz
la
e
e
ss
tra
er -s
st
ei
nm
rP
ra
e
en
ss
ra
St
le
ha
nt
se
Ro
er
au
rn
st
ta
Vo l
nn
ss
e
z
at
ss
ra
ru
db
un
es
Be
W ei
He
Name:
Bo
rl-
Ka
au
th
Date: Ra
G
st
ra
St
nk
Pa
er
slo
O
e
d
e
ss
Pl
n-
an
m
eu
N
tra
zs
en
sid
Re z-
an
Fr
Ba
le
ik
lin
Al
s-
lcu
ce
ra
Pa
er
au
nd
Li
u
rf
do
nk
ve
en
na
tte
wi ck
er
r-N
ffe
oe
nh
ni
ei
sR
au
th
Ra Bo
rl-
Ka
How Smelly Those U-Bahn Stations are?
What did you smell?
4.
What was it?
Other Discription:
45
5
EXPERIMENTELLE KARTOGRAFIE HOW SMELLY BERLIN U8 IS?
After collecting the handouts and some arrangement, here is the result and visualization graphic that we have done. We made a day and a night version to compare if the smell become different between day and night time. People can see the smelling part, it‘s not only how strong it is, but also which kind of smell. For example: smoking, alcohol, extension...etc. How strong is it? When did the tester smell? We use all the content to do these 2 posters and show the situations in U8 stations platform.
46
ss
ss
e
e
e ss
tra
tra
ra st
ns an rm
He
Bo
Le
dd
in
in
es
e
tz la
ss
np
tra
an
ns ei nl
rm
us ttb
hö Sc
Ko
He
z
rT or se
pl
ss
in He
M
e-
or
St
itz
ra
üc br itz
ow
hin
ric
Ja
at
e
ke
tz
e
la rp de an
ex
st ei
Al
nn
tz
er -s
le ha nt
nm
se Ro
tra
la rP
ra St
rn Be
ss
e
e
ss
ss ra st ta
au
Vo l
er
e
en nn
db un es G
z-
W ei
He
Bo
Fr
nh
an
oe
ru
ra st nk
Pa
er slo
m
O
eu
ss
e
z
ss St
nan
zs en sid
N
Re
ra
Pl
ss tra
Ba slcu ce
ra
at
e
d
e
ik
Pa
ffe
Li
r-N
nd
er
au
ve
er
nk
Al
lin
le
rf do en
en itt
ck
W
ni ei sR au th Ra
rlKa
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
e ss
e
tra
W
ns
rm an
tra ss
Le
in
es
He
tz in dd Bo
He r
m
an
st
np
ra s
la
se
e tra ss
ei nl hö
Sc
ttb
us
ns
se
rT or
at z Ko
or itz
pl
e St ra ss e-
in
M
tz
ke üc br
ow itz
Ra
He i
nr
ich
-H e
e
la rp de an
ex
st ei
nn Ja
tz
ss tra
er -s
le ha
nt
nm W ei
se Ro
Al
rP
St ra s er
au rn
la
se
e
n
ss st ra Be
db un
Vo lta
ne ru n
ra s st
Pa
nk
es
slo
er
St ra
ss
e
se
How U-Ba
G
at z n-
m an
Fr
an z
O
zs en
-N eu
sid
Pl
tra s
Ba scu
ra c
el Re
Pa
se
d
e le
lin
Al au
nd Li
ffe oe nh
er
nk ve er
r-N
in Re th au s
rlBo
Ra
ik
rf do
ick
W
en
itt en
au
How Smelly Those U-Bahn Stations are?
Ka
tra
ss
e
au
How Smelly Those U-Bahn Stations are?
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
Food
Excrement
Alcohol
? (Neutral)
47
48
Fragrance
Food
Smoke
Alcohol He
it
ow
nn
Ja
tz
la
rp
e
ss
tra de
an
ex
Al
e tz
la
rP
le
e ss
ra
St
ss
en
nn ra
st
er -s
st
ei
nm
W ei
ha
nt
se
Ro
er
au
rn
Be
ta
Vo l
e
ss
ra
st
ru
db
un
es
G
e
ss
ra
z
at
e
ss
Pl
n-
St nk
Pa
er
slo
O
an
d
Ba
s-
e
ik
rf
le
Al
tra
zs
en
m
eu
N
z-
an
Fr
sid
Re
lcu
ce
ra
Pa
er
lin
nk
ve
au
nd
Li
er
do
en
u
na
tte
wi ck
ni
ei
r-N
ffe
oe
nh
Bo
rl-
Ka
sR
au
th
Ra
5 EXPERIMENTELLE KARTOGRAFIE
HOW SMELLY BERLIN U8 IS?
Neutral or others
e ss ns
an rm
He
in
es
tra
tra
ss
ss in
dd Bo
Le
st
ra
la np an
rm
e
e
tz
e tra
ei nl hö
Sc
He
ns
se
ss
rT or
z
us
Ko
ttb
or M
-S ne ei
itz
tra
pl
ss
at
e
ke üc
br
tz
-H ich
nr
ei
Excrement
This is the concept of “smell-pads” that we have done with our tester. When they were standing on the platforms, waving the pads and trying to absorb the smell in that little pad. But honestly, it doesn‘t work well. We only got really light smell from super stinky smell. And the smell also did‘t keep longer than 30 seconds, after we return to our rooms, we smell nothing from the pads! So the result so far for us shows, that we couldn‘t collect the smell from line U8. If someone really wants to know how smelly it is, just go there and give it a try directly will be a better choice. Cartography is always an interesting but difficult theme for me, as this chance to use smell as a focus point to do that map was really interesting experience for me. At the same time it was also a good experience for me to explore some place in Berlin which I have not been there yet. Back to smelling part. We could see from the results that smell was not so easy to be keeped. Next time we should think in more professional way to gather all the strong and weak smells.
49
I‘m still new here, more will come soon. hsin-tung.chen@fh-potsdam.de