WebVR as a Sales Tool
Recently, Vonage Garage, the technology, research, and innovation department of the leading business cloud communications company, approached me to assist them in the design and development of an exciting project. The task was to create an immersive WebVR experience that would highlight their core UCaaS and CPaaS products for enterprise communications at the CPE (Channel Partners Evolution) trade show on September 25–28 in Austin, TX.
In this case study, I describe the process of creating and developing this custom WebVR experience and share what I learned from it.
Briefing with the team and stakeholders
As with any new project, my first step was to learn which products and services would be featured, and what their core functionalities might be.
One of the key requirements of the experience was to play video clips for each product. But, for security reasons, mobile phone browsers require the user to physically touch the screen before they can play video files. In a non-touch environment like VR, this was a challenge. To solve it, we decided to use the original Google Cardboard V2 VR viewer with its built-in touch trigger, as it was the most immersive and most comfortable headset for the experience.
From sketches to modules
The Vonage products featured in the VR Experience were:
- SmartWAN, SD-WAN technology that connects public or private networks to intelligently allocates resources and optimize networks based on prioritized demands
- Amazon Chime, a web-conferencing and collaboration suite that provides capabilities like audio conferencing, video calls, screen sharing, chat and document sharing integrated with Vonage’s full range of UCaaS solutions
- Vonage Integration Suite powered by gUnify, a service that connects the user to — and interacts with — the biggest CRM software APIs, and logs user adaptations
- Advanced Contact Center, a service and platform that helps the company communicate with customers over multiple messaging services, and enables tiered coaching and control
- Sip Trunking, a geo-redundant cloud service that assures steady data connection and provides fallbacks for outages
- Unified Communications-as-a-Service (UCaaS) solutions to enhance connection and collaboration among employees and enable seamless integration with business applications and CRM tools
- Communications Platform-as-a-Service (CPaaS) technology to create personalized and contextual communications with customers for deeper engagement and more meaningful relationships
While learning about the different products, I started drawing shapes and boxes illustrating data flow and information nodes, layers, and connections — creating a module for each product.
In this early stage, it was crucial to get feedback from sales staff and stakeholders. These experts know their products inside-out and were able to offer useful insights and improvements on my sketches. It was important to determine whether my illustrations correctly represented the core function of each service. Did sales staff recognize the illustrations as accurate, and on point? Were the illustrations simple enough to be recognized as what they represent but still visually attractive enough to intrigue the viewer, inviting further investigation?
I started with the landing platform: defining a basic size and proportion of the experience and arranging a starting position and navigation checkpoints for ease of use. The viewer of the VR scene was going to stand in a non-confined environment on the trade show floor, but with limited mobility due to passing trade show visitors, so the comfortable range to navigate was under 180º.
Next step was building out my drawings into combinations of A-Frame primitives. I limited the color palette to grey tones because the focus was on shape and proportions.
In some instances, as with the brand logos, I was creating shapes in Blender and exporting them as .obj files to place them into the VR project. My goal was to maximize A-Frame’s Entity Component System for this project, and not to rely on 3D modeling software to accomplish my vision.
Staying on brand
Once the shape and design of the illustrative modules for the products were finalized, the next step was color and light.
To improve performance, and stay as true to the Vonage brand color palette as possible, I decided on an overall flat shading and no shadows. Given the illustration style, flat colors worked best. The only exceptions to this rule were the Vonage and Nexmo logos in the center of the experience: those got a slightly metallic treatment to stand out a tiny bit.
To give the experience more dimension and depth, we decided to place the scene in the sky by adding an equirectangular cloud image. In order to stay within the illustrative style of the scene, I retouched out the sun (no sun, no shadows), ran the image through a few Photoshop filters, blurred selected layers for depth, and color corrected the entire cloud image to match the palette.
Now that the modules were colored, I added some subtle animation to each of them, while making sure I wasn’t hurting overall performance. The modules had to match in quality and style; they had to “read” visually as a family of products.
The next crucial step was assembling the modules into the main VR experience. Here again, it was necessary to adjust the modules to work together as a family in the scene. I defined order and size by importance of the product to the sales team, seeking a good balance between performance and module quality.
Performance optimization was the last big task. During the creative process, I had tested the experience on multiple devices; but now, with all the pieces combined, I found I needed a bit more optimization. Here are a few examples of what drastically improved performance:
Performance was good; last step: onboarding
To get users quickly up to speed, I created an introductory slideshow, with screens explaining the navigation of the VR headset, and pointing out the trigger button. I designed a map of the experience inspired by the iconography style of the Vonage brand, showing the position of each product module relative to the others. The final slide featured a button to enter the VR Experience. The slideshow thus served, not only as guide to the experience, but also as layer allowing the WebVR scene to load in the background.
For tracking, and for a controlled, curated environment, Vonage Garage set up a messaging server that sends a link to the experience when a user texts “VR” to this U.S. phone number: +1 201 834 0424.
This A-Frame WebVR experience works beautifully on desktop or mobile.
Check it out. And let me know what you think!
Special thanks to Vonage Software Engineer Kevin Alwell, Sr. Director of Innovation Tzahi Efrati, Marketing Program Manager Marcela Gonzalez, the Vonage Garage, and the Sales team for their enthusiastic support and feedback!
“One of the most unique and engaging demonstrations they have experienced”
