1st annual

WebXR Week Challenge

Hosted by Samsung & Microsoft Reactor (SF)

July 2018

the challenge

Create an experience that mashes-up a "next generation" portfolio presentation in 3D with multimedia content of today — running in multiple web browsers, including an Apple iPhone X and an Oculus Go. How do we translate media in 2D on a web page into a 3D canvas on that same page and then dive into VR?

After some discussion and ideation, the team agreed: It’s very important to be mindful of bridging the gap for users. We are making what is often a frightful leap from today's familiar 2D screens and touch devices into 3D space with 6 degrees of freedom. What I call "Newbie handholding" is tantamount to success in this case; It's more than a great idea to lead users by the hand. "The hardest part of learning to dive is breathing underwater for the first time."

platform, tools & rules



a shared problem

The struggle to portray portfolios for polymaths is real. Well, it's a struggled shared by anyone with a diverse portfolio! Today's "one pager" websites lack the depth and production hooks that today's users with short attention spans need.. to jump into the next web dimension...

use case in point

We centered our proof-of-concept around our teammate, Ryan Miller, a 360° film maker with a polymath's (very diverse) portfolio. Ryan's artifacts range from 2D photographs to video and fully immersive media with spatial audio effects. This is a typical template for modern multimedia web-based portfolios today.

goals & measures

steps

  1. Layout the landing page
  2. Design visual elements
  3. Design interaction mechanics
  4. Design "newbie handholding" (guided) flow
  5. Build, test, in/validate designs, change, repeat, ... ...until time runs out ;)

visual exploration

Our page content is condensed into categories, allowing for an element of surprise. Familar objects in the 3D scene relate to the 2D icons. The projector is the centerpiece and invites us to see a show.

visual exploration

The layout of the room is much like a retail store, showcasing various things to explore. The space allows for browsing, watching and discovery, much like a museum experience.

visual exploration

The familar and inviting elements of each context are combined, with just enough to explore without being overwhelmed. The final look is coordinated, with object textures and color palette to match.

ux design exploration

Users have familiar navigation controls in reach with arrow and W-A-S-D key clusters moving the camera/view in 3D. To invite the user to touch both the 2D and 3D canvases and explore, users use "magic" by clicking and dragging icons into the 3D canvas. Tapping and clicking interactions for 3D objects work just like hyperlinks.

ux design exploration

There are multiple paths and points-of-entry from 2D to 3D that were implemented to embrace the web platform:

success!

Users are excited about the possibilities they see for themselves in this experience, personally and professionally.

further explorations...

An automated presentation mode to empower users to curate a completely guided experience – combining interesting choices and AI; An immersive 360° theater space, complete with spatial audio – a high-fidelity VR experience; Environmental audio effects to "fill the room" with ambiance and act as audible cues; and A digital rights management (DRM) solution to protect user-generated content.

winning!

The event's challenge judges selected our design for a categorical win, based on the following feedback:

Webfolio XR

The Web 3D.0 for You!

A product that invites your audience to make the leap from 2D to 3D and experience the most compelling story of you from as many different, sharable points-of-view as you have audience members. Coming soon to the Microsoft Store!