Semester 2 W8 | Audio Update + Refined UI design

After the Usability test is over, the placeholder scene did its job for that time being but it was tie for refinement! The scene was in no way complete yet, I felt the scene was still kind of empty and it needs more decorating to create more depth. I looked up for city illustrations and modellings for inspiration and the element that stands out the most was street lamps, signage and electrical posts. Having these elements added into the scene will suggests the busy streets in cities such as Tokyo, Hong Kong, Kuala Lumpur or Shanghai. Having cyberpunk as the main visual inspiration, a busy street is an ideal look and feel. I started drafting out the elements which included street cones, different colour of boxes, some alley animals, some silhouette of humans, robotic lab elements such as monitors and keyboard, and some graphics for a tutorial scene I'm going to include. Also, on the photo below, the top left are illustrations of the symbolisation of explicit contents depicted in UI form. On the far right is the tutorial scene panel.

Next off I also drew environmental elements to add depth to the background, that included building silhouette of different sizes and colour to suggest distance as well as clouds.

Improved UI Design

The overall artstyle of my project has drastically changed from the original when it was firstly introduced during the first semester and the UI desing used then was not valid anymore. It does not fit the current art style and it must be altered. The below image is the first UI design designed for this project, it was a gradient and transparency oriented design which is not the key artstyle of the project now, by using this design will throw off the consistency of the overall look. The current artstyle has bold outline in Black and minimal to no transparency, it is sketchy and the chaotic imperfect is the intended look.

I decided not to add numbering as the including the action term such as "grab", it would be too bombarded with info for a simple UI design. Instead of using numbering for the countdown, I use colour and shape to suggest instead. When the time is running out, the circle will run out from its contender and the colour of the radius but turn from blue to yellow and to red at last to promote the idea that the time is running out. It also has a pointer as when users are in a VR setting, they are granted 360 degree angle view so it is easy for them to miss the action, having a pointer will be easier to navigate users' attention to the designated call to action button/trigger. As for the arrow, it serves the same purpose to allow users to know that they are required to look around and only the artstyle is changed to fit the current artstyle of the project. In terms of UI design development, the stills are here and they are all to be animated soon!

Audio Update:

The audio base music is finalised and has more volume to it, it feels overall fuller than before and the feelings of adrenaline is much more present than before. If I can describe it better, it will be that it promotes the feelings of chaotic calm.

To listen to the audio: