live data 360°
Visual design + VR prototypes
Client: Microsoft
Project Objective: To explore the visual possibilities for presenting live data feeds (news, stocks, etc.) in 360° and powered by Azure.
My mission:
• 360° high fidelity mockups for the VR data experience
• Design within the Microsoft branding guidelines.
• Collaborate with Azure developer on final deliverable
Squad: 1 designer (me) + 1 remote developer
Timeframe: 2 weeks
Tools: Photoshop + After Effects + Illustrator
final deliverable
design process
Step 1: Mockup drafts and exploring layout & readability
Challenge:
Finding the appropriate design for maximum readability
Solution:
For the visual design, I drew inspiration from the Microsoft Metro style of layout for the data feeds. It was important to stay on-brand while offering a new experience to the client. The feeds are presented simply and with clean lines as not to overwhelm the user. Intentionally large gaps are left between the feeds so users can focus on the background if necessary for relaxation.
Challenge:
Designing for virtual reality. Aka taking it back to the old school.
Solution:
Designing for virtual reality is one of my passions and this project was the very first time I had designed for a 360° VR experience. One reason designing for this medium is such a fun challenge is that it forces you to draw upon age old methods for presenting information. Rather than approach these data feeds using UI principles, I learned that print media was the better inspiration. Billboards over devices. A data billboard using symmetry, simple layouts, heavy typefaces, and abridged info at-a-glance is what this project called for. Once we went that route, testing was far more successful and aligned with the client goal of a more calming experience. It also allowed me to design these widget "billboards more in line with Microsoft and Windows branding, which was important to the client.
Next step: designing an immersive, but simple, escape to data
Challenge:
Who is this user and how can this experience be effective?
Solution:
Our user personas were primarily people at work, in an office like Microsoft, looking to check their news feeds in a unique way. In the early stages, I tested various backgrounds and none of them felt like an "escape"...
So I decided on the calm of outer space as the main background. This would allow the user (the stressed office worker) to escape to a more natural environment via a VR headset. Taking a moment to relax while also checking in on their chosen feeds of "can't miss" info. Balancing the need to "unplug" with the reality of a professional's fear of missing out on pertinent information. The client had envisioned something almost meditative so the natural world as the backdrop definitely satisfied that. We went with a night time nature backdrop and a vacuum of space backdrop for options.
Next step: finalizing unique data feed features
Challenge:
The client wanted these feeds to have themes represented. How can I meet this client need while balancing simplicity and readability?
Solution:
We went through a number of iterations for these themed backdrops for each data feed. From full length backdrops to nothing at all. Playing with scale and depth of field, I finally settled on the earth for weather, newspapers for the news feed, and the New York Stock Exchange building for stocks. Subtle and not too overwhelming in scale.
