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