Brave New China
Virtual Experience Design
Client
Academic
My Role
Designer
Developer
Concept
Tools
Figma
Three.JS
Blender
Timeline
Four Month
Overview
"Brave New China" is a virtual web project that navigates the social justice events of 2022 in China. It operates under the principle that "in each observer's eye, a thousand Hamlets dwell," highlighting the multiplicity of interpretations each incident can inspire.
Influenced by the knolling technique, I arrange artifacts from notable events in an organized yet dynamic tableau, creating a visual metaphor for the interplay of order and chaos inherent in social justice movements.
Navigating the complex legal landscape, the 'elephant in the room,' requires a delicate, nuanced approach. The potential underlying legal issues necessitate the use of subtlety and symbolism to highlight critical issues without provoking unwanted attention.
The dystopian undertones of "Brave New World" serve to inspire reflection and conversation on social justice and human rights. Borrowing its title from Huxley's iconic novel, the project subtly mirrors dystopian elements within the sociopolitical realities of our time. The aim is to create a visually impactful piece and generate a ripple effect of awareness and understanding.
In this project, I seek to foster an engaging narrative that encourages dialogue around social justice themes. By offering a unique perspective on the events of 2022, I invite audiences to explore the complexities of my work and discover their own truths, thereby experiencing a personal glimpse into the dystopia of our reality.
At the end of the exhibition, more than 2,000 visitors had visited the site. It received overwhelmingly positive reception and feedback, especially regarding the compelling and immersive experience.
The Challenge
The demand for coding skills and spatial design principles became evident as I aimed to create seamless transitions and realistic textures in the 3D environment. Parallelly, the web development facet brought forth its unique challenges. Constructing a robust and interactive website from the ground up necessitated the cultivation of a strong foundation in coding, a skill that was relatively unfamiliar to me at that point. As I delved deeper, the task of balancing the aesthetics of the 3D elements with the functional requisites of a user-friendly interface transformed into a continual act of finesse and adjustment, proving to be an exercise in patience and resilience.
Intitial Research
While tackling this project's coding challenges, I recognized the visual components' vital role in crafting an immersive experience. I thus dedicated a considerable amount of effort to perfecting the 3D models, fully understanding their crucial role in encapsulating the essence of each event. My aim was to strike a balance between visual aesthetics and functional implementation by investing a substantial amount of time and energy into both the modeling process in Blender and overcoming coding obstacles. This holistic approach facilitated a visually appealing representation and guaranteed a seamless user experience.
“I realized that I had been privileged to be witness to the drama of a soul turning in on itself, not because of remorse but because of sheer frustration, like a beast gnawing its own entrails.”
— Guiding Design Motto from "The Stranger, Albert Camus"
Initial 3D Models
The Objective
After the initial modeling tests, I realized that the modeling process would consume a considerable amount of time, as it forms the foundation for the virtual import. Therefore, I began selecting the events I wanted to feature in this virtual exhibition. Following this, I chose objects from these social justice events to represent them in the exhibition space before integrating them into the virtual environment.
The Audience
The primary audience for this project is visitors attending the school exhibition, "NEXT," who come from various ages and backgrounds. Given that some of the social justice events depicted can be traumatizing, my goal was to create a design that is vibrant and colorful so to not traumatize any viewers. Initially, there was a booklet explaining the significance of each object. However, due to potential legal issues, I had to limit the information shared to only positive interpretations of each design. This approach bears a resemblance to the concept of "double thinking.
First Prototype Render in Blender
First Prototype
I managed to complete all the modeling and rendering within a few weeks. Although my goal was to avoid traumatizing any viewers, I chose to adjust the angles of each object so that they faced the audience, as if embodying victims recounting their stories. After finishing the initial modeling and rendering, it was time to import the project onto the web.
Second Prototype Render in Web
Second Prototype
After importing the models onto the web, I quickly realized that my rendering settings were not configured correctly. Consequently, I needed to adjust the settings. However, I found that all the colors were merging together, necessitating a review and correction of the issue. After several days of continuous debugging, I understood that the texture for each exhibition object needed to be reapplied individually. As a result, I spent the following few weeks unwrapping and reapplying textures in the browser.
Third Prototype Render in Web
Third Prototype
After importing the models onto the web, I quickly realized that my rendering settings were not configured correctly. Consequently, I needed to adjust the settings. However, I found that all the colors were merging together, necessitating a review and correction of the issue. After several days of continuous debugging, I understood that the texture for each exhibition object needed to be reapplied individually. As a result, I spent the following few weeks unwrapping and reapplying textures in the browser.
Final Prototype Render in Web
Final Product
After a few rounds of testing, I discovered that the design would undergo spatial shifts within three.js as time progressed. I spent several days experimenting with various codes until I realized that different browsers had different frame rates. Therefore, I added synchronized frame codes tailored to accommodate various browsers, preventing any spatial discrepancies in the texture or objects.
When I was setting up the physical installation, I found out I was assigned an old iPad that did not have the graphic processing power of a laptop or a current mobile device. Therefore, I created an additional CSS website to accommodate the technical difficulties.
Brave New China 2022 Site
Project Booklet
Virtual Exhibition
Outcome
Although there were a lot of technical difficulties, the exhibition was successful. More than 2000 visitors visited the exhibition. I was able to earn the highest grade for the thesis design. Even after the end of the exhibition, there are still people inquiring about the project and visiting the website.
Reflection
I faced doubts and criticism when I pursued a 3D virtual exhibition design for my thesis, as most of my peers focused on mobile app design. However, I realized that progressing as a product designer necessitated understanding colleagues from different backgrounds. Grasping their challenges would facilitate better communication and foster increased collaboration when working with cross-functional team members.
If I had more time, I would have liked to transform the project into an actual VR experience for visitors. However, starting from scratch meant a considerable amount of time was invested in making the right decisions to bring the current version to fruition online.
An Virtual Space Designed to Remeber
The virtual design aimed to foster remembrance of the untold stories. It seeks to engage the audience and convey the facts without causing trauma to viewers. It sparks discussions and inspires reflection.
