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."
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...
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.
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.
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.
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.
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.
There are multiple paths and points-of-entry from 2D to 3D that were implemented to embrace the web platform:
Users are excited about the possibilities they see for themselves in this experience, personally and professionally.
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.
The event's challenge judges selected our design for a categorical win, based on the following feedback:
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!