1st Annual WebXRWeek.com WebXR as a Sales Tool Converting Visitors to Clients Roland Dubois @rolanddubois
A presentation at 1st annual WebXRWeek in June 2018 in New York, NY, USA by Roland Dubois
1st Annual WebXRWeek.com WebXR as a Sales Tool Converting Visitors to Clients Roland Dubois @rolanddubois
I’m Roland Dubois • UI/UX designer and web developer, WebXR consultant • A-Frame contributor & W3C Immersive Web Community Group member • Design Director at Studio Zeldman • Founder of GRAVR - a globally recognized avatar for VR on the web
Community outreach
Creating a VR experience for a trade show environment
Vonage VR CPE Version 2
First let’s talk about “attention”
Stats of a Microsoft research paper (Microsoft attention spans, Spring 2015) were reported in Time magazine, the Telegraph, the Guardian, USA Today, the New York Times or the National Post etc. Stats from advertising.microsoft.com
America’s Growing Smartphone Addiction Smartphone Addiction Tightens Its Global Grip Charts from statista.com
OVERSTIMULATION
Task-based “attention” 140 Characters, Image Filters, Fleeting Moments
Hello there! Could I have your attention really quick? Hmm… yes, I am listening… Wow! Yes, I am listening!
Measuring attention on banner ads Heat-map (eyeballs) tracking, time spent in the experience, and click-through-rate for the ad units Charts from readwrite.com, webpagefx.com
Now let’s go back to the trade show
How do we catch & retain someones attention?
Catching attention traditionally
Vonage Trade Show Designs Images from pgexhibits.com, coroflot.com, glovaltradeshow.com
Retaining attention traditionally
SWAG/FREE STUFF/ GIVEAWAYS Image from matthewsonmarketing.com
Product education traditionally
Images from channelpartnersonline.com, youtube.com/watch?v=YwKpc_1X4BY
Selling a Brand vs Selling a Product
How can we tell a new story to sell the product?
Creating a VR experience
Visual Elements • Branding - What are the key visuals that represent the brand • Shapes - The composition of booth walls, display areas, and furniture • Colors - The most prominent colors, patterns, and lighting • Materials - Surface properties, flat or shiny, smooth or rough • Symbols - like Branding; reoccurring logos, signs, fonts or geometry • Digital presence - What are the visuals from the corporate website
Branding colors Images from pgexhibits.com, coroflot.com, glovaltradeshow.com
VR stage comp
Featured Products • 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
Drafts and comps
A-Frame models
Defining Space and Proportions
Schematic FOV 60-80
Overview Screenshot
Photoshop styling
Stylized sky image
Vonage VR CPE Version 1
User Flow Version 1
Onboarding and Launch
Image of my work desk at the Vonage Office downtown Manhatten
Onboarding screens
“One of the most unique and engaging demonstrations they have experienced” Twitter responses
Version 2
Updates and Enhancements • Aligning visual style to new “Communication is Everything” campaign • Designing dedicated UX for Cardboard and GearVR • Making four products interactive • Adding an additional product • Adding sound effects and background music • Add tie-in to the current trade show booth (activity)
User Flow Updates
User Flow Version 2 (zoom)
User Flow Version 2
Adjusting the visual style
Communication is everything (https://youtu.be/IdakC24Whps)
Image assets from the Illustrators
Photoshop composition sky image
Textured A-Frame Models
Overview
Designing dedicated UX for Cardboard and GearVR
Onboarding for Cardboard and GearVR
Intro panel Google Cardboard
Intro panel Samsung GearVR
Interactivity – Trigger task-based “attention”
Amazon Chime: Device Transition High Capacity Collaboration Incoming call: Your meeting starts now
Contact Center: ACD & Skills-based Routing Use case: Travel Weather
Smartwan: Voice Prioritization/QoE Pristine Voice - Noisy - Lost Call
Vonagereach: Use Cases: Retail / Real Estate
Simplified low poly objects and UV map textures
Screenshot of Vonage VR Version 2
A Tie-In to “Real Reality”
Schematic FOV 60-110 Curiosity Zone
The Treasure Trunk in reality and in the VR Experience
Screenshot of Vonage VR Version 2
Version 3
Updates and Enhancements • Performance optimization • Designing dedicated UX for Oculus Go • Add feedback loops for user testing and training • PWA for staging as permanent exhibit at Vonage’s Holmdel headquarters
User Flow Version 3
Avatars? … stay tuned! Thank you.
Keep in touch • Medium “WebVR as a Sales Tool” • Twitter @rolanddubois • linkedin.com/in/rolanddubois • meetup.com/A-Frame-NYC • meetup.com/WebXR-New-York • meetup.com/Immersive-NYC • WebXRWeek.com • AFrame.io
