10 concept sketches

Typography exercise

Designing the app

colors

--------------------

logo design

Pictures that i took during the testing of the tour that i can use in my app

event ticket + poster

Who are you designing for?
For clubbers that are between 18-30. These people cannot be defined to one specific person because these clubbers come in different races, gender, sexuality, religions and interests. They all go to the club with different reasons. Some people are going out because they want to escape from reality. Or meeting up with friends or like minded people. Or because they feel safe in this nightlife environment. Or people that completely emerge themself in the music that is played by the dj.

What is their relationship to the collection?
They make use of the public space where the art is located. But maybe not really recognize the art pieces or don't feel a connection with the art pieces. But in some ways they feel connected to it. Light sculptures can make them feel safe at a dark night. Some art pieces can be used to sit down and relax for a bit. They see art pieces when they use the public transportation because some of the pieces that are in the collection are located at metro/train stations. The street/graffiti art that is making the street view a lot more beautiful.

Which content are you ‘interfacing’?
the art in public spaces provided by the BKOR. The content is focussed on light sculpture art pieces because these are the most visible during the night. And lights are also an important aspect for a club night. Street art, because these resemble the visuals that you can find in a club. And also because these are really colorful a bit tripy and thats why it is nice to look at when you are a but drunk or something else.

What type of interaction is fitting for this?
an interaction they can do together with friends. something they can do before or after a club night. Maybe something like a tour or an experience.

What type of medium is fitting for this?
a medium that is easy to use and accessible to everyone since the art in public spaces is also accessible for everyone. Websites, app. something they can do on their phone because this is something that mostly all the people from 18-30 will have.

In general: what are you trying to accomplish through the interface you want to design?
To create a experience outside the club, because in these times those people still need to entertain themself.

Which visual design elements have you already collected/designed that can be useful for this?
i do not have anything collected yet.

quick & dirty exercise

Questions prepared for
first design class

interaction station deliverable

in class exercise

For typography inspiration i looked at some places where art, music and culture comes together and where those aspects plays an important role. I noticed that the style, design and typography where really minimalistic and simple but very modern and very sleek. The typography that they use is mostly sans serif so for my design i found some interesting sans serif typography that i want to use for my design.

Conclusion:
I will go with the Eurostille EXTD font for my design. It is very readable and i like the 3 font styles. With those 3 styles i can create a good hierachy within my design.

1. inverted

2. Seven's style

3. Different hierachy

Prototype 2

Prototype 4 and final version

Conclusion:

The concept i will use for the project is the 4th concept (CLUB RAT). I think this concept will be the best fitting concept for my user group. Because it will be very interactive, it will have some aspects of a regular night out but without the club. It's something that also people that are not interested in art can also do because it will be something they can do with a couple of friends and just have fun.

CONCEPT: CLUB RAT

RAT stands for Rotterdam Art Tour but is also the animal that is a night creature and is mostly active during the night.

The club is the most important place for the clubbers. It is a place where they meet up with friends or like minded people. It is a place where they can enjoy music, lights and visuals. Sitting down once in a while and have drink. After when they night is over and they are all heading home, make a quick stop at a fast food spot for a greazy snack.

But since this is no longer the case, clubs are closed and party's are kinda forbidden. The clubbers can no longer enjoying all of this... I want to create an app for an alternative night out where the clubbers can come together with friends at the club, check in with the app and enjoy 1 art tour during a night out. The tour will be at friday and saturday because this is also the most common days to go out to a club. The tour can be visited at two weekends in June. The tour will leads them to street art pieces that comes to live with AR (augmented Reality), light sculptures, night shops, fast food spots and art pieces where you can chill out. In this way i picked some aspects that you can also find and experience during a night out.

Scroll to the right for
the feedback section

>>>>>>

FEEDBACK

If you see a black line like this on your way scrolling down, there will be feedback on the right that i received at that point

Feedback by Kimmy:

Maybe think of something with audio or music because this is also a very important part of a (club) night out. It could be an audio tour that will lead you through the art route. Or think of a dj stream that you can implement in your app.

Instead of a check in poster, you could also think of an event ticket that the clubbers need to buy at the club to get access for the app.

The feedback from Kimmy was really helpful and let me thought of some cool things i can add to the tour. I really like the idea of buying a ticket at the club because this is also something you would normally do when you are going out at night.

Music is indeed a very big and important part of a night out and i will think of something that i can use in my app.

Adjustments to the concept after feedback from Kimmy: CLUB RAT

The whole idea of an app for an the alternative art tour night out stays the same. But the clubbers are buying an entrance ticket at WORM. Worm is a club in Rotterdam and the entrance is also part of the BKOR collection. On the ticket there will be a personal code that they can enter in the app. By needing a personal code for the app, you make sure that everybody will buy the ticket to make use of the tour.

There will be personal discount codes in the app that they can use for drinks at the night shops and fast food spots.

I will also creating a function for a silent disco so the clubbers can enjoy music during the tour. They can connect their phones through bluetooth with a silent disco bluetooth antenne. The user can plug in their own headphones and listen to the music as long as they want.

For the silent disco the club can organize streams where dj's can play and so people that are doing the tour can listen to some nice techno/house music like they are in a club.

Documentation is in chronological order

4. Different hierachy

The assignment gave me some insights on how important the right way of using typography is. But also to look at what am i designing and in what way i want to use typography. And how to apply typography hierachy in my design.

Which typefaces are you using and why?
modern sans serif typography because this is the most easiest to read. This style of typography fits the design style the best. Also when it's dark and the user is maybe a bit drunk.

Which hierarchy of information are you designing and why?
Title, header, body text, buttons.


How can typography contribute to your navigation and interaction?
typography is necessary to tell the user on what page they are, what kind of functions they can choose from. give the user information about art pieces.

Testplan with Arjen

What are you going to test? (tasks/questions)
The first rough sketch of the app where all the pages are linked and the first base of the navigation will be set. It's more about the structure of the app. Is it clear for the user what steps they can make and take.

What prototype are you making?
A wireframe sketch in Adobe XD with maybe some design elements.

Where will you test?
The first tests will be at home. When the app is user friendly enough I also want to test it outside

Who will be your testers?
3 friends that are also clubbers and interested in art and design

How will you document your test?
I will screen record the iPhone where the app will be tested on. i will take notes during the tests and maybe setting up a camera to also record the person who is testing but not sure

Feedback by Arjen:

The route and experience is a big and important part of your concept. Maybe more important then the app and to have something super graphical. So i would suggest to try out the route and see if this will work before you really design an app.

AR is maybe not the right interaction for the app. It could be a lot of work and also for the user not really understandable. These users can be drunk and maybe on drugs and then this function could be too complicated.

Maybe you can think of an interface where you can control the light sculptures with.

The feedback of Arjen let me think again about the interactions that are included in the app. I never worked with AR and it is indeed maybe to complicated for my users to work with. I like the idea of controling the lights that are included in the tour. I will think of something like that, that i can use in my app.

but i still want to do something with the street art so i also need to think of an interaction for that part.

I will also start creating the route for the tour so i can test the route and see if this will work out.

Adjustments to the concept after feedback from Arjen:

The whole idea of an app for an the alternative art tour night out stays the same. But i skip the AR because this is to complicated for the users. So i created two different interactions that i will include in my app.

1. In the club you always have people that are filming everything or constantly taking pictures. So in the app The users can take photo's of the street art pieces, edit them and save them to their phones and they can share them afterwards with their friends.

2. The light sculptures that are included in the app, can be controlled by the user by scanning a QR-code that is located at the art piece. The user scan this code and they have a short amount of time to play around with the colors of the lights. after the time is done, a lock will pop up and the function is frozen.

The route

Since Arjen mentioned that the route is an important role for the app, I wanted to start with creating the route for the app before I start designing the app.

I used the map that i created during the research with all the light sculptures, street art pieces and art pieces where you can sit down. I added night shops and fast food spots to the map.










Once i had all the spots in my map, i tried to make connection between the artworks and tried to find the best route.

The starting point for the tour is WORM. WORM is a club in rotterdam and the entrance is part of the BKOR collection. Since Worm is located in the centre of rotterdam, i could only do art pieces that weren't located that far from the starting point so i needed to make a selection. I first made a couple of potential routes but these didnt were that great and way to long.






after some try outs i could make a selection of the route and this was it.



















Once i had the right fitting route, i tested it in real life (the results can be found on the testing page) and the results where quite good. the tour wasn't to long and there was a nice balance between art pieces, chill out spots and nightshops/fast food spots.

The route will be in the following order:

WORM (starting point of the tour) > Love spreads > Restaurant Jaffa > Jongleur > El trotamundos > Zonder titel by Anuli Croon > In alles is een oogopslag > Nightshops Alexia > Alles van waarde is weerloos > Zonder titel by Jan van Munster > Rotte-dam > Taxat > Night shop Mariniersweg > Dancing on a ceiling > Louis Davidsmonument > Zonder titel by Bouke Ylstra > Zonder titel Rul3rs > Give me light, Picasso > Zonder titel by Onio > Zonder titel by Onio > Liggende figuur > Zonder titel by Onesto > Zebra in de nesten > De Koolmees > The world is yours > KCT Nightshop > Snackbar Midnight > Fauteuils > Endoscopia > Nu alles is zoals het is > Zonder titel by Peter Verstruycken > Mephisto > Qwertz > Eethuis Fafi > WORM (ending of the tour)

all Light sculptuers, street art, chill out spots, night shops, fast food spots

I picked very bright colors for the app. It made me think of the dark nights and the bright lights from the light sculptures but also the bright colors that are used at some of the street art. The bright lights are contrasting with the darkness of the nights. This is something i want to use in my design as well. Contrasting colors that resembles the colorful lights and colorful streetart with black as a second contrasting aspect.

I went for the neon colors: green and orange and there contrasting colors: blue and purple.

and i want to use a lot of black the create a more easy and quiet base so the design is not going to be to chaotic.

Also these colors are used quite a lot in modern design and mostly in event posters so i think these colors also will attract my audience

Conclusion:
I will go with the Eurostille EXTD font for my design. It is very readable, bold and modern and this will fit perfect in my design. The font has 3 variables, Bold, Medium and Regular. I really like the 3 font styles and with those 3 styles i can create a good hierachy between them.

- i'm going to use the big bold style for headers. The headers will be big black bars and using the big black bold style of this font will work out pretty good.

- The medium style I will use for the second headers, things like titles etc. In this way i'm creating a difference between the header title and sub titles in an elegant way.

- The regular style i will use for my body text. Text pieces like information, story's etc.

Typography conclusion

These are the spots i used for the route:

>>>>>>

>>>>>>

My inspiration for the colors are disco lights, laser lights, neon lights and the theme dark nights, bright lights. Those lights are an important role in a club and this is something i want to include in my design.

CONCLUSION

Prototype 3

Prototype 1

CONCEPT:

An app for an art tour that leads the clubbers to colorful street art that they can photograph and edit in the app, controllable light sculptures, silent disco, chill out spots, night shops and fast food spots (with personal discount codes). The clubber needs to buy a ticket at the first stop (worm) and on the ticket there will be a personal code that they need to get access to the app.

For the first prototype i made a very simplistic, minimalistic version. I played around with colors and some try outs with the functions. I just wanted to do a first mapping of the pages and i want to do a first testing round very soon. Because in this way i can find out what the user wants and needs, what works and what i need to work on. I don't want to put that much time in it and find out after the first test that the design is lacking and all the hard work is for nothing. Once the functions and flow is good i want to develop the design more and make it less flat.

CONCEPT:

An app for an art tour that leads the clubbers to colorful street art that they can photograph and edit in the app, controllable light sculptures, silent disco, chill out spots, night shops and fast food spots (with personal discount codes). The clubber needs to buy a ticket at the first stop (worm) and on the ticket there will be a personal code that they need to get access to the app.

After doing the first round of testing with 2 testers. i found out that the flow of the first version wasn't good. The user missed a lot of function and was overwhelmed by all the informations and function they got. I needed to work on a more simple overview of the route and a step by step navigation. I needed to create an information page for each art piece so it is much more clear for the user what art piece they are visiting and what kind of interaction and function they can do at the art piece. So for this version I made a gps navigation function where the user gets a step by step navigation of the directions and once they are arrived at the art piece they can press on the arrived button that leads them to the information page about the art piece and the function that they can do at the art piece.

I also played around a little bit more with colors and make it a little less flat. it is still very minimalistic and bit to flat imo so i need to work on that more after the second round of testing. I developed the photo edit function more with some crazy filters that the user can use.

Information page about the app

page for entering the code

overview of the route and all your functions

scan the qr code and control the light function

make a photo and edit it

personal discount page

connect for music function

what i need to work on is:

- A more simple overview of the route that the user is going to take

- a more clear step by step navigation so the user knows what to do when

- creating a page for each art piece so it much more clear for the user what art piece they are visiting

- the interaction that are for 1 specific art piece needs to be on the page of that specific art piece, because otherwise it will be too overwhelming for the user and they dont know what to do when.

- creating a flowchart for myself so i know what will lead to where

- maybe if the interactions dont work out in a way think of a collect art piece game. (i already heard from 2 people that this could be a fun feature)

page for entering the code

loading screen

information page

route overview

the step by step gps navigation

art piece information page

connect for music function

personal discount page for each nigh shop or fast food spot

photo edit function

these are some of the screens that i made for the second version of the app. below these screen there is an overview.

what i need to work on is:

- make the step by step navigation better, because some steps are not right.

- the navigation sidenote information needs to be more clear and a bit bigger so the user notice it.

- make the design a little less flat and more exciting.

Event ticket that the clubber is buying at WORM at the start of their art tour

event poster that will be spread around Rotterdam to promote the event.

CONCEPT:

An app for an art tour that lead clubbers to street art, controllable light sculptures, silent disco, night shops and fast food places where they get personal discount on drinks and chill out art pieces. The tour includes a collect the art piece game where, if they collect all the art pieces, get a free voucher for a greazy snack that they can get at Eethuis Fafi.

Feedback by Arjen:

Maybe do a radio stream instead of a silent disco. Try to make a Collection icon by yourself. Try to bring the design a little bit together so it would feel more as whole. The event ticket, poster and app should be feeling as one.

The feedback of Arjen was usefull. I need to work on the design that i would feel more as one. So i will try out some other color combination and work on the event ticket and poster. I will be still doing a Silent Disco instead of a radio stream. I like the idea of a Silent Disco much more and this is way more interesting for my users instead of communicating and doing a radio stream. The collection icon will be same as i already used. Because during my testing this icon was really recognizable and easy to find by my users even when i didn't tell them what it was they could tell me what the function of the icon was. So i don't want to change that.

Feedback by Megan:
When you are making a photo for the art piece collection, make this more excited. QR-code visuals and mock ups are important

Feedback by Megan:
Photo edit isn't that strong as the rest of the concept. It is lacking of a purpose. why does the user want to do this?

The feedback of Megan let me think again of the photo edit function and why i wanted to do this. It was for the clubbers that are always making videos and photos of things during a club night. But why they want to do this at the art tour, was lacking of a purpose. So this is something i need to change.

I need to make the page of the collected art piece a little more excited. I also need to make mock ups and visuals to show how things will work.

The logo that i'm going to use for the app.

After megan's feedback i thought about the photo edit function and if i still need to continue with this... I made the decision to skip it and think of something else. Some of my testers mentioned that a little collect the art piece to get something free would be funny to do. So I came up with a collect the art piece game for my app that the clubbers can do during the tour. They need to collect 16 at pieces that they can save in their collection. If they collected all the art pieces, they get a voucher for a free snack to end the tour with. just like a regular club night. I also changed the design a little bit to make it more intersting.

The clubber can collect art pieces with the app, save them to their collection and if they collect all of the art pieces, they get a free voucher for a free snack at Eethuis fafi.

one of the chill out art piece pages.

one of the two art pieces where there is a silent disco function

one of the fast food spots with personal discount

one of the control the light function

CONCEPT:

An app for an art tour that lead clubbers to street art, controllable light sculptures, silent disco, night shops and fast food places where they get personal discount on drinks and chill out art pieces. The tour includes a collect the art piece game where, if they collect all the art pieces, get a free voucher for a greazy snack that they can get at Eethuis Fafi.

the fourth and final version of the app, event poster, event ticket, qr-code poster, silent disco poster and the mock ups. I made everything in the same style and right now i have the feeling that everything comes together and it really feels as a whole.

loading screen

route overview

information page and enter the code the page

collect the art piece

connect for music

need a break

control the light

The end!!

The design of the app is not going to be to complicated. the user doesnt needs to be overwhelmed by everything and needs a clear overview off every function. The user is going to be drunk so everything needs to be clear. Thats why i want to be the design quite simple and minimalistic.

the design