DESIGNING PROCESS Maraya

The exercises we made during the Station days inspired my designing process by making me think of an interface which can be connected to an app. My idea is to make an app which will follow the route of the bus and on the map the events which will happen, connected with all the art works, will pop up with pins. Then when you go to the art work you will be able to interact with an interactive poster which when you are nearby, you can connect with your phone via bluetooth. It can send you, for example, a photo made with your friends next to the art work or it can give some interesting facts about the artist or the art work itself.

During the designing class, we had a 'Quick and Dirty Exercise' where we had to pick 1 interface from our archive and try to define its medium and the type of interaction it provides. Then we visually had to sketch how you can connect this medium and interaction to the collection of knowledge.

I chose to use the 'Flashlight' because I am researching the 'Creatures of the night' and this interface will help them, firstly, to see in the dark and, secondly, it will make them feel safer.

As an experience interacting with the interface, the user will be informed, but he can also be shocked and confused of what he saw. However, at the same time the user will be active during the whole process of interaction. With the usage of flashlight, the user can discover new parts of the artwork by pointing with it at the art piece. By seeing only parts of the whole thing, he can make pictures of the outcome and then come out with interesting photos and connect them to form a new art work.

ON THE LEFT: My first, quick sketch which represents the user with the flashlight who is pointing at the art work of Joel Shapiro - Zonder title (1999).

ON THE RIGHT: This is 'the picture' which he might have done by pointing with the flashlight at part of the art work.

Mostly when I have to think of a solution quickly it does not come out as good as I wished it would be. I did not understand everything correctly from the statement of the exercise because I did not think of an interesting artwork which can have weird outcomes, instead I took a random one. Even though I had those sketches during the class, I decided not to show them because there was nothing interesting which to be shown. However, as it is part of the process to make mistakes, I have added them to website.

ON THE LEFT: A sketch of a phone showing part of the route of the night bus which we, as a group, have chosen with the pins which by clicking on them show which art work is situated there.

ON THE LEFT: A sketch of the window popping up after clicking a pin from the map.

BOTTOM: A sketch of the interactive poster, situated in front of the art work.

Who are you designing for?

I am designing for young partygoers who are using the public transport for going to parties and getting back home. They are in the age between 18 and 25.

What is the relation to the collection?

We as a group have created a new route of the bus which contains of two existing routes of the BOB-bus in Rotterdam (B3 & B5). We decided to chose them because they are on the opposite directions of the city centre and are covering as much places as possible. Thus we ended up with 27 artworks which can be seen from the bus.

Which content are you 'interfering'?

In my design I will include all the works we have as a group because I am designing an interactive poster in front of the artwork and an app which will include a map.

What type of interaction is fitting for this?

I think it can be both physical and digital because young people, nowadays, are mainly using their phones, however there can be a connection between the physical world and their phones - an interactive poster next to the art work.

What medium is fitting for this?

The medium can be an app so that the partygoers can use it easily and can use it while being on the bus or next to the artwork. But it can be an interactive poster connected to the app so that there is a physical-digital connection.

In general: What are you trying to accomplish through the interface you want to design?

With my design I would like to catch the attention of the partygoers, to educate them about the artworks and to inspire people to be more interesting in artwork, even at night.

As a title to my application I decided to name it 'Plus One' because my idea is to catch the attention of the partygoers with free drinks, so that they have interest in the artworks during the night. Those are some tryout sketches of the optional fonts which I think would be interesting as a design. The one on the left (with the magnifier), I designed because there will a game and the users will have to search for something, so that he wins his award - the free drink. On the bottom I have used the font 'Proxima Nova' because the small texts have to be readable and have to be written in more plain fonts. That is why I chose this font because it is not the usual used 'Times New Roman' but at the same time it still is not complex.

IN CLASS TYPOGRAPHY SKETCHES

During the exercise in class we had to take on of our typography sketches and try some odd ways to explore our font. The tutors advised us to try the opposite ways of using a font. For example, I rotated the font upside down, reverted it on to its vertical and horizontal axis, mirrored it, I changed the inside of the letter with using only stroke and removed the fill in. As well, I changed the colour and how big the letters are, so that I can see how it affects the readability of the text. The conclusions are that the font which I used, 'Phosphate', is best to be used for titles and bigger headings because when you make it smaller, as big as a body text, the lines of the letters are overlapping each other and it is barely readable.

ON THE LEFT: For the next part of the exercise we were divided in groups and we had to take one of the fonts which our classmate used for his designs. I was given the 'Helvetica Neue' font with which I basically tried the same ways of changing it as in the previous part of the exercise. The conclusion is that because this font is not as complex as 'Phosphate', that is why in whatever way I change this font it still is readable and understandable, which means that this font is suitable for playing around with if you want to include in your design some playfulness.

ABOVE: The last part of the exercise was to play around with the hierarchy of the texts between the titles, headings and the body. We were given examples by the tutors of different designers who have used different approaches. The one which stand out for me was the example in which the designers have used one and the same font and the letters were with the same size. They were using only the spaces between the headings and the paragraph so that they have this visible difference. During the class exercise I did not had enough time to explore the hierarchy further, that is why I only tried to use two different fonts - one for the title and heading, and a different one for the body. The conclusion is that I have to take in consideration the readability of the text.

FEEDBACK WITH MAYTAL

During my feedback session with Maytal about the idea of my design, I explained that I would like to do an app which to be connected to interactive posters next to the artworks, that there will be a game with answering some riddles and eventually, if answered correctly, the user will win a free drink.
The first question which Maytal asked me was: 'Who will be the sponsor for those free drinks?'. She also told me, something very important to me, that in my idea she hears a lot of different ideas which makes it a mess. This is something which I tend to do usually - to make everything complex and looking hard to be done. This feedback meeting helped me because I realised I have to learn how to narrow my ideas, because as Maytal told me: 'it does not have to be complex, the simple ideas are ending up better'. She advised me to narrow things down and to have a look at what I can to on the places which I already have available - the bus stop and the artworks. Thus, my new idea is to make an interactive poster on the bus stop which gives information for the artworks and catches the attention of my user group - partygoers using the night bus.

ON THE LEFT: A sketch of a bus stop in Rotterdam and where I imagine the interactive poster to be - where usually there are posters, either changing or just a still one.

PREPARATION QUESTIONS

For my final interface I decided to do an interactive poster on the bus stop with which the users can not only be entertained, but educate themselves as well. I would like to catch the attention of the people who are either using the night bus, or just pass by the bus station. By doing so I want my design to be mysterious and I would like to raise questions in the users' minds, so that they get interested in what this is about and try it out.

By interacting with the poster, the user will be able to choose between reading about the artworks or playing the game. The game consist of memorising an object (in this case the artwork which the user chose on random) for 30 seconds and do a pixel version of it. The user will be able to choose an artwork which is on the route of the bus. I have selected 20 artworks out of the 27 which we have chosen with my research group. I have decided to take this particular ones because I find some of them interesting to be seen in pixels, others because they will be easy for the user and lastly, because some of them are more challenging than others. The selected collection is the following:

INSPIRATION & RESEARCH

I started my research by finding out what is the size of a poster on a bus stop. It turned out that there are more sizes than I expected. They vary between:

-> A2
-> A1
-> 500 mm x 700 mm
-> A0
-> 1016 mm x 1524 mm
-> 1200 mm x 1800 mm

I have decided to work with the biggest one because in the past few months I am challenging myself to work on a bigger space so that I change my way of working.

I started searching for inspiration on different interactions with a poster because almost everyone has a smartphone these days and it is not something new and intriguing to have a poster with a touch screen only. I remembered a video which the tutor, who thought us during the Station Days, have shown us as an example of interaction. I do not remember how it was called but when people were standing in front of the poster and were moving on the left and right, the picture of the two people on the poster was moving as well (as they were standing next to each other, they started kissing). I further researched similar interactions and here are some of the examples:

Having those examples in mind, I decided to use a glowing dot as a way to catch the user attention. The idea is to have a 'glowing dot' in the centre of the poster which to cover all the existing text. However, as the user is getting closer to the poster, the dot is shrinking and the text underneath is starting to come out. Until when the user is next to it, then the dot is disappearing and the user is left with two options - you either are a 'reader' or a 'player'.

I got inspired by the movie 'Nerve' in which there is sort of a video game which is similar to the old game 'Truth or Dare', however here we have only the 'Dare' part and it all happens in real life. As I know that most of the younger generation have watched this movie, I decided to use it as a reference to my design. In the movie the player is asked if he is a 'Watcher' or a 'Player'. I changed it into 'Reader' and 'Player', so that it intrigues the younger ones and they decided to try it out. I used this movie in particular as a design reference because I remember when the movie got out how viral it became and that most of the watchers wanted to try such a game, in particular, I was one of those people as well.

ABOVE: The design of the beginning of the game, used in the movie 'Nerve'.

As I mentioned, the idea of the dot is as a person is getting closer to the poster, the dot is shrinking and a text is getting underneath it. If the person goes away, the dot will expand. The idea is to make the person curious why is this dot moving and what is underneath it. I was thinking of using some kind of a sound or a voice which to invite people to use the poster, or to have some kind of a not so strong magnet, which to attract the phone from the person's pocket. However, as I am working with the user group 'Creatures of the Night', the poster will be used during the night. This means that in order not to scare people and to push them away from my project, I had to think of a more 'silent' way to attract the audience. Once again I am judging by my reaction what would be if in the middle of the night I am waiting for the bus (either drunk or sober) and as I am sitting some music starts to play or a person is starting to talk to me through a screen, I will be scared to death and will not even want to look at this poster.

ON THE LEFT: An analogue version of the shrinking dot. As this was the beginning of designing, I decided to try it analogue first because I was not sure how it would look like. As well, if I do it digitally it will be more of a GIF, instead of an interactive design because for the poster I will need sensors to recognise the person getting closer, so that the dot starts to shrink.

If a person choose to be a 'Reader' then he will be able to read information about the selected artworks, as well as about the artists. There will be:
-> fun facts about the artist
-> summary about the artwork

The user will be able to choose a random pin from the map of the route of the bus.

If the user decides to be a 'Player' then he will have to follow these steps:

1) to choose a pin from the map containing the route of the bus.
2) to memorise an object (the artwork) for 30 seconds. He will have a look at a screen with only the picture of the artwork without the name of the artist and the name of the artwork, so that they do not search it in Google while playing the game.
3) after the time passes, the user will see a pixelated screen where he will have to make a quick pixel version of the object.
4) after finishing the user will be able to share it on BKOR's website, share it with friends, or can download it to their phones via Bluetooth, or can delete it.

This game will provide me with a new collection with a lot of different versions of the artworks. Moreover, they will be in a new form - pixelated and done using the memory

NOTE: For the first time I had to use Adobe XD which meant that before starting to design my prototype, I firstly had to learn how to use the program. That is why I was not completely able to use all of functions of the program which are provided.

While designing the game in Adobe XD, I got to the point where I had to make the pixel grid which to be filled in with colour in order the person to draw. However, I had to find another way of doing it because I was not able to find the function myself of making the pixel grid working. That is why I have researched a method of doing a pixel grid on Adobe Illustrator where I had a success. That is why while testing the prototype, I was switching from Adobe XD to Adobe Illustrator, so that the testers were able to complete the test.

I chose to work with pixels because of 2 reasons. Firstly, since I was little, every Christmas my mom was buying me 'Adventskalender' and I loved to open those little windows every day so that I take the chocolate. You will ask what is the connection between pixels and those windows on a calendar? As I was struggling to find a way to have a working pixel grid in Adobe XD, I have decided to research methods of how to do it analogue so that I can test it. The method I found was reminding me of those small windows on the calendar.

Secondly, at the beginning of this study year we had a quick in class exercise where we had to make the pixelated version of an object using sticky notes. Then I was struggling to do it that is why I decided that this would be a fun and challenging experience for me and for my user group to try it out without worrying about failure.
Working with pixels can be playful and easy looking but at the same time it can become really hard.

ABOVE: My first attempt to use the pixel sheet while trying to represent the artwork on the right called 'Untitled (1966)' by Rob Kooman.

FINAL DIGITAL PROTOTYPE

ON THE LEFT: This is the final design of the cover page of the digital prototype. I decided to work with a black background because the user will use the interactive poster during the night which means that if the background is white, the eyes of the user will start to hurt because of the bright light. Thus, when the background is black it will be more friendly for the eyes.

ABOVE: If you click on 'Reader' then you will firstly see the map where you will have to choose a pin. After choosing one, you will get to information about the artwork. By dragging the purple card to the left, you will go to the second card which is giving information about the artist. If you want to have a look again at the previous card, you just need to click the arrow on the bottom left corner. If you want to expand the picture of the artwork, then you will simply have to click on the picture or the expanding icon, so that you go to the page where there is a bigger version of the picture. If you would like to go back to the information cards, you have to click on the arrow at the bottom left corner or if you want to go back to the map to choose another pin then you will have to press the button 'Back to the map'.

ABOVE: If you click on 'Player' you will once again see the map first where you will have to choose a pin. Then a screen with instructions will pop up which explains that you will have to memorise an object for 30 seconds. I have chosen 30 seconds as a time frame because I have researched that the Short Term Memory of a person starts to work after 30 seconds. Then by tapping of the screen you go to the next one where you have a blurred image with a timer. When you click on the blurred image, the timer starts to count. When the time passes, you have to press the button continue, so that you go to the pixel screen. While going around the screens I have added 'X' icons so that you can go back to the start whenever you want.

ABOVE: After the 30 seconds pass and you have pressed 'Continue', you go to the pixel screen where you have to draw the pixel version of what you have memorised on the previous page. On the bottom left corner is written: 'It does not have to be detailed! It can be only the shape of the object, some lines, etc.' - it is not visible because I have made it smaller size because when it is on the big screen it has to be small text. After you feel satisfied with your result, you click 'Continue' and where you can see your final result. On the up left corner of the pixel grid, there is an 'Info' icon which links you to the 'Reader' side where you can find more information about the artwork you have just seen and drawn. On the bottom you have 3 choices about your drawing - to download it, to share it or to delete it. The downloading is happening via Bluetooth and by connecting to the poster. You can share your work on the BKOR website or sent it to your friends via Instagram, Facebook or Pinterest. Or if you are not satisfied with your work, you can press the button 'Detele' and you will go back to the cover page to start all over agaian.

If you click on 'Reader' and go through some of the pins you will notice that the colours differ. That is because I decided to use the colour scheme of the website BKOR which represents which artwork what is - a sculpture, painting, etc. I decided to use those colours because this project is connected closely to the website and in my opinion this connection has to be seen visually and by the way of communication as well.

Your choice of the night bus as an interface is very sharp and promising. In particular the early sketch where hands touch each other though the bus windows helped to set the tone of the research, as was the description of the night bus as potentially “more social, more interactive than a daytime bus”.

The user subtypes you defined as night bus passengers (backseat lover, sleeper, overexcited troublemaker, entertainers, fast food lovers) show that your research is empathic, humorous and non-judgemental.

Exploring the BKOR logo as a formal source for your Venn diagram: good move and worth
exploring further as a method. What other visual cues could you find in the artworks and in the night bus themselves?

Defining the 27 artworks over the two longer night bus routes calls for a next step in which more clarity and more depth is added: for instance groupings, categories, themes, narratives. Try to connect them to the passenger subtypes.

Even when lighthearted or humorous, art is an experience of a certain depth.
Try to avoid creating an ‘easy’ consumer experience, as tourist routes often are.

Medium: Poster, beamer and a hologram

Type of interaction: The user can see a 3D version of an artwork in front of him without having to go to the actual artwork. It is digital and sort of analogue as the person can touch the hologram and turn it around.

Which element is useful for the collection or target group? The user can have a look at the artwork while being far away. He can interact by having a closer and a 360 look.

What is the concept? The concept is to have a poster which to project a hologram of an existing artwork in Rotterdam. It can be in several places around the city.

What effect does that give? It promotes the artworks in a new way, a more modern way. Moreover, as it is interactive and relatively new for people to have a look at holograms, people will be interested in using the poster.

How it is connected to the target group? The target group is more informed and entertained.

Star Wars is one of my favourite movies, when I started thinking about an interaction I immediately thought of the hologram conversations in the movie.

Medium: Poster and a beamer

Type of interaction: The user will be able to project patterns from the artworks on his clothes.

Which element is useful for the collection or target group? The user can have a look at the artwork while being far away. As well as, by applying on himself patterns of something, he will try to find more information about the artwork so that he knows where are those patterns coming from.

What is the concept? The concept is to have a poster which to project a patterns on people's clothes.

What effect does that give? It promotes the artworks in a new way. It is fun and attractive for younger and older people because it is not engaging.

How it is connected to the target group? The target group is more informed and entertained.

Medium: the handle in the bus

Type of interaction: The user by grabbing the handle will interact with the artwork because he will look at it and will think what it is.

Which element is useful for the collection or target group? The user can have a look at the artwork while being far away. As well, he will ask himself questions why this miniature of a sculpture is around the handle or what is it, where can he find more information about it.

What is the concept? The concept is to make miniatures of the already existing artworks, make a hole in them and put them around the handle on the bus.

What effect does that give? It promotes the artworks in a strange way by raising questions.

How it is connected to the target group? By confusing the user group, they will start to ask around what this is or eventually while walking around the city will notice that they are artworks. Thus by making associations, the user will remember more information about the artwork.

Medium: arrows on the street

Type of interaction: The user can follow the arrows and eventually they will lead him to one of the artworks.

Which element is useful for the collection or target group? The user will not know where do those arrows go and will be curious to follow them. Thus by getting to the artwork, he will search for information.

What is the concept? The concept is to make a path by arrows to certain artwork. Every month can be a different artwork.

What effect does that give? It promotes the artworks in a strange way by raising questions and following a path which you do not know where will lead you to.

How it is connected to the target group? By intriguing the user group, they will start to follow the direction, it can be even accidential.