Technical Case-study
How to transform an event invitation into an immersive experience (hold my VR headset). This is what this article is about. We will tell you about the technologies we used to create a 360 magical world in a mobile platform and how we turned it into a VR experience.
Discover the experience from your smartphone at kineticnight.com
Behind the project
In 2017, our team was planning to carry out a brand relaunch and emerge as SPOTDLY SQUARE, an Interactive Creative Studio with a purpose: conceptualize, create, design and launch the world’s most advanced digital experiences in the market. We were looking for an opportunity to develop a great project when we had the chance to present a creative proposal to the amazing fashion designer Oscar Carvallo when he was planning an exposition for one of his most iconic collections. This is how the Kinetic Night concept came up.
“I want a digital invitation for my event”
In 2014, fashion designer Oscar Carvallo joined the plastic artist Carlos Cruz Diez to create a high couture collection called Voyage Cinetique II. Everything, from the prints to the design of the dresses, was a mixture of the kinetic and vibrant art of world-renowned artist Carlos Cruz-Diez with the gothic and mysterious style of Oscar Carvallo, making each dress a unique piece of art; an outstanding collection that is still in force 3 years later.
This collection had great success at the Paris Fashion Week, so they came up with the idea of bringing it to America. They were planning to expose it during the Art Basel Miami 2017. The exhibition of the pieces was going to be held at the Perez Art Museum Miami during a one-night event for which the designer wanted a digital invitation where people could register and confirm their attendance.
That’s what the client wanted, but we knew that we didn’t want to make just another digital RSVP invitation…
Why just an invitation when we can create a whole digital experience?
We decided to create a 360° mobile website named www.kineticnight.com where users could confirm their attendance and, at the same time, discover part of the collection as they went through a mysterious forest with the movement of their phone.
The main purpose was to offer people an exciting and different experience related to the dresses. The users were able to discover these art pieces by finding totems hidden in the woods. When a dress was revealed, the user could hear Oscar Carvallo’s voice telling the story and anecdotes behind that piece. When discovering the 10 totems, the collection’s fashion video was revealed.
Fun fact: All the sounds on the website were made exclusively for it, we had a blast doing them!
Muses from the woods
When thinking about this world, we wanted it to be a balanced mix between Oscar Carvallo’s gothic and bold style, and Carlos Cruz-Diez’s colors and shapes delight. We wanted to immerse people in a surreal world, and we carefully design every element of the forest in a way that made sense without crossing the “too logical” line. In our first round of ideas, we wanted to use Oscar Carvallo’s gown sketches for the forest, but it was important to him that people were able to see the real colors and textures of the pieces. It was challenging to mix our illustrated background with the real-life models, but we came up with the idea of making them look like they were coming from a different dimension by using polygonal shapes around them to create this illusion. The models were coming from a “Voyage Cinetique” and landed in this beautiful forest for a “Kinetic Night”.
Fun fact: The snow/ashes effect was inspired in Stranger Things TV Show.
Exploring the 360 technology from Zero to Experts
The development of this website was a great learning experience for the team. Since it was the first time we developed this kind of website, the back-end had many changes from the beginning to the final version. We were testing and discovering new technologies until achieving a fluid navigation with impressive results. The project was redone a few times until getting the result we really wanted; graphics and visuals were the only parts that remained the same during the whole process.
In an early exploration, we selected Krpano as the programming technology. This is a viewer used for panoramic images and interactive virtual tours, available in Flash and HTML5 and designed for the usage on Desktop and Mobile. This was a good start, but we weren’t satisfied with the results. We wanted more realistic graphics and better performance! One of the challenges we found was being able to nail the perfect depth for each and all of the elements inside the forest. We prototyped over our canvas until we felt satisfied with how all the elements felt and made the user feel once inside the forest.
Let’s make it this more immersive!
Quick advice: before you start coding, it’s fundamental to know which is the headset you are going to use.
A couple of weeks before the event, our team came up with the idea to turn the mobile website experience into a VR experience so people could enjoy it during the event.
When we wanted to transform the mobile experience into a VR Experience, we found that the code in which the website was developed was not compatible with the HTC VR platform we chose to use during the event! So we had to re-encode it all in an A-Frame framework (a Mozilla technology specialized in building VR Experiences) to fit the requirements of the HTC VR headset.
Fun fact: The re-encoding from Krpano to A-Frame was made in just 3 days!
This VR proposal was a success
The day of the exposition, the VR stand became an important point since people could fully immerse themselves in the mysterious forest through the headsets, and at the same time the public around could visualize the experience in the screens and hear the stories. The guests loved how they could know a little more about the art pieces they were going to see live in the next room, even they were constantly going back to the stand after look at the exposition.
When Oscar Carvallo had the chance to immerse himself inside his forest, he was super excited to see our interpretation of his Kinetic world and re-discover his pieces from a digital perspective.
Fun fact: So many people attended the event that the museum had to close its doors and part of the public had to be left out. (First come, first serve policy, what can we say?)
Enhancing the mobile experience
After the event, we spent about a month doing research on new and best technologies until we decided to use WebGL, its performance is very good for rendering 2D and 3D graphics. The library we used was Threejs: a JavaScript library/API used to create and display animated 3D computer graphics on Web Browsers. It can be used in conjunction with the HTML5 canvas element, SVG or WebGL. That was the language we used for the final development.
Results
- 2.777 registered users
- 53% attendance confirmed in 2 days
- 1.463 people attended the event
- 70% reach
- On average, people spent 2 minutes navigating on the 360 mobile website
- On average, every 3 minutes a person interacted with our VR experience during the event
Conclusion
This project was a great opportunity for our team to unfold a transmedia strategy from a simple request as an invitation for an event was.
We learned a lot in 360 mobile developing matter and the most important of all: we gained a new happy client, with whom we have had the opportunity to create other amazing projects.
Check www.spotdlysquare.com to know more about our interactive creative studio!
