Week 12
HI. Rethinking and refining methods to delivery information
This blog will be mainly discussing the refinements based on previous feedback, and also latest feedback from the advisors.
First sharing
Refinements on typeface
I tried out a different art style for the typeface, combining 2D+3D graphics.
Incorporating Airbnb
Regarding previous feedback, my microsite is lacking the integration of Airbnb in the experience itself. I reevaluate it and decided to add additional information to the places, the additional information that will be included are the nearby Airbnb accommodation and other nearby nature places. I feel like these information are relevant to present to users.
There are different consideration in presenting the nearby Airbnb accommodations. From their official website, users are able to search for accommodation based on the location/distance, price, available dates and number of guests.
Delivering the information based on location/distance would be the most relevant, however, I realized Airbnb does not provided me the exact location of the accommodation unless I did an official booking. It would be challenging to get hold of the exact distance, so I decided to go with the other relevant information, which is the price and number of guests.
Information deliverance decision
References
I wasn't satisfied with the previous content layout design. I decided to go with a layout that is similar to infographics. I tried out different composition and overlay it on top of the 3D scene.
My concerns:-
- I feel uneasy about the previous propose camera movement, because there won't be any details in the 3D scene, I feel like it might not be necessary for the camera to move along the scene while presenting the information
- Because the 3D scene has a lot of objects and colors, it is a concern the 3D space at the background would stand out more than the information
- It is quite challenging to prioritize both the information part and the 3D background part, and if I want users to focus on the information, I might need to mute the 3D space at the back, which will also cause the camera movement to be irrelevant
Summarize feedback:-
- Suggested that maybe the camera could just transit to the sky where the background will just be a single flat color, able to deliver the information conveniently
- Could also try approaching the UI components to tie in Airbnb, for examples use their brand color or art style
- The 2D and 3D style looks better and most probably will work, just keep experimenting
- The content layout is not really working, try searching for more reference
My thoughts:-
- The camera transition its definitely a good idea, I will consider it. My previous idea was to just have the camera zoom in a little and mute the 3D space.
- It is agreeable to apply Airbnb into the UI components, for them to be more relevant
- The art style I will continue exploring and hopefully I could incorporate the 2D illustrations into the 3D space too
- The major problem that I am facing is definitely the information deliverance, I need to look for more references and inspirations
Second sharing
2D + 3D graphics
I finished the 2D + 3D graphics typeface, applied it onto the wireframes. I also refine the UI buttons to match the 2D graphics.
Change of camera movement
Video 1: Camera zoom-in to the specific natural environment
Video 2: Camera transition towards the sky
I did 2 videos to showcase the camera transition I have in mind; Video 1 and 2. These are the camera transition that would happen when users are accessing the information on the nature places.
Content layout refinement
Video mockup
Video 1: Layout 1
Video 2: Layout 2
Since I am not going to show much of the 3D scene when I am presenting the information, I decided to occupy the whole page. These are the new layouts that I came up with for the content deliverance. I prepared 2 videos to showcase the interaction and animation of how the content would be delivered.
Incorporating Airbnb
I design a 'location' icon based on the Airbnb logo and place it on the cues like how the advisor suggested. I also used their main brand color on the button and icon.
I explained to my advisors about the camera movement concerns (mentioned previously) and how it will affect my information deliverance.
Summarize feedback:-
- the 2D and 3D graphics are blending well but the 2D graphics right now are being overwhelmed by the outline, maybe try using thinner outlines
- the new proposed camera transition may work, however, the previous proposed camera movement looks more interesting and can be expanded more
- my concerns about the camera movement is definitely relevant, however, it can be solved
- try presenting the information in a more structured layout to contrast with the 3D space at the back
- study Airbnb's style guide and the UI components should be working well
My thoughts:-
- Compared to the references, I agree that the outline for the 2D graphics right now is quite dark and thick
- the previous proposed camera movement is definitely more interesting and I actually like it too but it is challenging to put in information together with it, I might need more time to think about it
- I will need to reevaluate the content information and analyze layout arrangement
From the discussion with my advisor, I might stick back with the previous camera movement but instead of zooming-in too closely, maybe just switching up different angles. I will need to experiment more and look for more references on this area. My advisors provided a few references that I could study, hopefully it helps. After studying the references, I am going to continue working on the content layout part and see how it goes from there.
That's all for now, in the next blog, I will be going through reference and analysis on ways in delivering information with 3D elements present.
Comments