back to individual page
Quick and dirty assignment
I just randomly selected a street poster from my interface collection. Not thinking too much, I want to go for something about AR because I just came across a game advertisement on Youtube. Surprisingly, this idea is the one I decided to follow and develop until now.
Group discussion
1. Who are you designing for?
The night bar/club workers, who are likely to work overnight. This usergroup may include: bartender, server, cooker, DJ, cleaner, sound engineer, sercurity guard,...
2. What is their relationship to the collection?
Before or After their nightshift, the art place is the one they often come across on the way, or stop by for a sitting, maybe observing or simply just don't really care.
3. Which content are you ‘interfacing’?
The public art place collection, especially more focus on the one that stand out in the night (have lightning systems for instance).
4. What type of interaction is fitting for this?
Maybe some thing a combination between physical and digital. The thing that they can touch, see, hear or making some digital interaction.
5. What type of medium is fitting for this?
My plan is to make a digital oriented interface. Not really sure at this point, maybe an application.
6. In general: what are you trying to accomplish through the interface you want to design?
I want to help them to releive their working stresses, sorrow and somehow make them a part of the city artistic night life.
7. Which visual design elements have you already collected/designed that can be useful for this?
AR camera(?), QR code, some interaction with light (?)
10 sketches
Feedback session:
- I decided to focus more on the 1 and 2 idea, maybe combine 1 and 3 could also be a solution.
- Need more specific linking to the group of user, since the idea is kind of for everyone.
Further development:
-I will make an application, intergrates with AR camera.
-The navigation map is some thing that I can work further on.
-The app that can only be used by night bar/club workers.
Typography and text-hierarchy practice
-Name of the app: VIRTUAL NIGHT
-Sans-serif font, popular font (Helvetica, Roboto)
-Instagram color pallete (I don’t know why I chose this)
-Some round shape with transparent gradient
-There are something off about this design
-Need to reduce some color tone
-The moon (?)
-This somehow look like some beauty game app, not a place for a night worker
-Need to change to serif font
-The app logo is fine
First design
Inspiration
-Name of the app: VIRTUAL NIGHT
-Serif font (MADE mirage)
-Vibrant color (Ultramarine Blue and Cyber Yellow)
-Use the moon as the main icon
- It’s simple to use, but there is lack of connection between the moon and the app concept.
- The moon icon in the map section way too blurry, which is hard to see. The “back” button need to be placed on another area.
- Need the proper instruction in using the app.
- Need more detail map navigation.
- The design maybe a bit too bright for the users.
-It’s definitely some worthy improvement, the weather and the color scheme also.
-Need more clear design, especially in the map since there are kind of too much button to follow, bolder text.
-Need to change that bright yellow color tone.
-The introduction page is a little bit chaotic
-It would be better if there is a connection between the film showing and the art place.
NS railway train is something that has became a part of Dutch city. So I want to use the main color of this train (blue and yellow) in my application. When the worker looking at the app, maybe they will have a feeling of familiarity. And also this color combination, it works together pretty well and easy to hightlight the content.
-Interesting idea, quite fit to the user's need
-Maybe try to link the film with the art place, so the idea will be much more stronger
-Should test in many weather, light conditions.
Sketches
-Name of the app: VIRTUAL NIGHT
-Serif font (MADE mirage)
-Color gradient (main tone is Ultramarine Blue and Cyber Yellow)
-Use the moon and rhombus as the main icon
reflection
Second design
reflection
Demo design
reflection
Interaction station workshop
This workshop introduced to me a whole new concept of interface by working with Adafruit circuit playground express, with a little bit of coding. The session went quite well for me, especially the first lesson where I have a chance to set up some commands to play around with color, sensor and even music. The tutors were nice and supportive as well.
The second day was a bit more tricky as we have to connect the sensor with a program call Processing, also create some gif and line drawings.
Honestly, I still can't apply these workshop knowledge to my personal project since it requires some specific devices. However, it helped me to understand more about the concept of interface, broaden it also. Now I not only see the digital interface but also the physical one, or maybe a combination between these two elements.
What I have learned:
Reflection:
This is the typography I made in the class. The result came out was fine but I feel like it somehow too mediocre, and doesn't really fit with the concept I follow, maybe more suitable for the gamers I guess.
However, from this class I got to know how to distinguish different type of typo and learn some rules about text hierarchy. It's not some thing that I could apply after 1 hour of lesson, but definitely I will discover more in my later design.
further development
- Adjust the design to be more accessible for the workers (gradient)
Link the moon symbol with the application, maybe come up with something new with the moon (weather?)
More detail map (add icon, guideline?)
Add some instruction in using the app
Consider a lightning system to the big poster place outdoor
-Keep on symbolize the design. Make things clearer to see
-Change the map design with less symbol
-Redesign the Introduction page
-Draw more Rotterdam famous sight
-Find some Dutch/International films that link to each public art place
-Be a bit more playful with the outdoor poster, doesn’t have to be a QR code
-Try to fix the error in Xcode
Build the actual AR camera that have the film footage.
further development
Third design
-Name of the app: VIRTUAL NIGHT
-Serif font (MADE mirage)
-Color gradient (main tone is Ultramarine Blue and Cyber Yellow)
-Use the moon and rhombus as the main icon
Forth design
-Name of the app: VIRTUAL NIGHT
-Serif font (MADE mirage)
-Color gradient (main tone is Ultramarine Blue and Cyber Yellow)
-Use the moon and rhombus as the main icon
I also draw some iconic sight of Rotterdam and place it in the main menu, to emphasize that this app is designed only for the user living in Rotterdam.
feedback sessions
My idea is to make an application that only accessible to the night bar/club worker in Rotterdam, so I decided to add the "your workplace" in the account register form. So if their information is valid, the app will let the user in.
So there will be an big panel with QR code placed near every art place (from my reasearch before). So after the user come to the place they want to go, just simply place the phone camera in front of the code, the AR movie will appear.
In this version, the main idea is still simillar with the first one, but with a proper instruction place in the main menu, so the user will know all the basic step to do first.
Another improvement is that the map. I replace the moon icon with more stand out blue/yellow dots. When you click in each dot, the name of the art place as well as the film showing will appear. Moreover, I also adjust the navigation service, more options about means of transport.
This time the design isn't change too much, exept for new drawings of some iconic places in Rotterdam.
The biggest change is instead of scan the QR code, I replace it with a collage poster which is inspired by the artist's work, so some how it will link to the public art place. Also the movie that are showing, which must have some characteristic/messages that match with the art peice.
the AR camera
-Experiment in Unity
-This is the demo version tracking a random video. I have try to export it into IOS in iPhone but failed due to 1-2 unidentified errors.
-Megan said that it also acceptable if I still fail to build the AR camera til the end. Just make sure to document everything.
After the feedback session, I has made some significant changes. First I replace the collage design with a poster that can blend to the art place if you standing in the right position. Secondly, instead of the long movies, now I only select the film that have maximum 10 minutes. I think that's a good time to watch a film while sitting down to rest or waiting for the train.
I also add more detail informations and instructions, so the user will feel much easier when using the app for the first time.
I made two collage design for 2 indoor and outdoor art places. The outdoor art place also have a lightning system, so it will be much easier for the camera to track the poster in darker condition.
-Lack of detail information about the art place as well as the film showing.
-Lack of connection between poster, the place and the film.
-The text and object feel a bit small and light, hard to notice.
-More detail instructions
reflection
feedback sessions
-The movie is too long for the worker, no one want to standing outside in 2 hours for just watching a movie.
-Still need more linking between the collage and the art place.
-Maybe try to blend the poster with the art, so the connection is much stronger.
-Back to the future (1985) might not be a good choice :)
further development
-Change the poster design, make it blend to the place, also match the app concept.
-Bigger objects, text.
-More infomations about the film and art place.
-Change to short films that only have 10 minutes length maximum.
-
For instance, in this art call Zonder Titel which describe the city movements with construction, human, robot, lifting cranes... so the film showing in this place will be Back to the future (1985), also about urbanism.
-Still can't import it in iOS.
-Arjen said that it will be much better if I have a AR camera on the phone to do an actual testing, but I've tried...
-Megan agreed with Arjen feedback, but it's still fine if I can fake it on the final results.
-I will keep testing the camera on computer.
-Basically the laptop's webcam have a worse quality so if it successfully track the image, the Iphone camera will definitely does, even better.
the AR camera
Because this art place is made of colorful glass, I decided to choose the film that also using color as a means to reflect their life, to express many messages.
This art place was used to be the most famous destination in Rotterdam, then was destroyed by the bomb. I love NY is the short film that tell us to embrace all the cultural values of the city we are living in, somehow connect to this art, which is also a work to pay tribute to the lost heritage site.
The art located on the front side of an old cinema. So La La Land epilouge is the scene that reminds us about the old heyday of cinema, brings the nostalgic feeling.
The poster in the daylight
The poster at night (with lightning system)
reflection
-In general, I receive a positive feedback after the final testing with the user, it just needs more adjustment in the visual of some drawings.
-I mostly forget about the film audio.
-The app somehow feel force when it connect the night bar workers with the art place collection.
further development
-Maybe add something like "please access to a headphone to have a better experience"
-Make a video to describe all the step as a final document.
the AR camera
-I have printed the final poster version and test it on the computer's webcam. Things went quite well