John Bondoc's profile

Holocopter for HoloLens

This project won the 2020 Award of Excellence and Innovation in the Integration of Technology in a Partnership or Collaboration from the Canadian Network for Innovation in Education
This is a group project I did for my capstone at The Centre for Digital Media as part of my Masters Degree.  My role on the project is UI / UX Designer.

If you've looked elsewhere in my portfolio you will recall my long-time fascination with virtual objects and designing for digital immersive experiences.

This goes all the way back to Art Center days, dreaming of AR fashion (check out my Sartura project).

BCIT is an amazing technical school here in the most beautiful city in the world, Vancouver BC.  BCIT has an aerospace school near the airport-  this is where talented men and women from all over the world come to learn how to repair and maintain airplanes and helicopters.
One of the helicopters in the hangar is the renowned Airbus AS350 'A-Star' helicopter.  The A-Star has some special meaning to me as it is featured in most heli-skiing and heli-snowboarding videos.  As a teenager it was the vehicle of my dreams!
BCIT asked our group to take an existing 3D desktop application that their instructors use to demonstrate the function of the A-Star rotor and translate it into Microsoft's HoloLens. 
HoloLens is a head mounted appliance (sort of like goggles) that overlays digital information over a portion of your field of view.  HoloLens can keep track of objects in space and can sense the position of physical objects around you.

With HoloLens, it's possible to view and interact with holograms-  this is an incredible time to be a designer!


Above is concept art of how we imagined the baseline experience look and work.  Our client wanted us to deliver an early attempt at translation so we wouldn't get lost in all the opportunities and challenges that working with an emerging medium will bring.

We didn't even know how to sketch something like this out...  do you use Adobe XD? Sketch? Video? Puppets?

...this is my kind of challenge ;)
At the moment we're trying to keep the layout simple.  

Our initial thought was:  'everyone loves a good Iron Man UI right?'.  We couldn't be more wrong.  Simple is working much better.
A slider on a 2D screen is an affordance that doesn't work well in HoloLens.  So we limited sliders where we could and used voice commands as much as possible.

We also exaggerated the interaction, this was needed because the 'gaze' function (using your head and neck to control the movement of a cursor) is difficult to control and the selection method of 'air- tapping' is difficult for people with limited HoloLens experience.
Here's an image of an A-Star cockpit.  I had to add it for context.  Aerospace people- particularly those that work in engineering and maintenance are a different breed.  Function is especially important-  I think the ultra minimal, lightweight feel is almost a point of pride for these users.  I keep this image by my desk to remind my team and I that we need to stay in character.
Here are some icons we're developing for the application that will hopefully contextualize the project for the user.  The current application only uses a blue arrow to specify the forward direction of the helicopter.

In a future iteration, we hope to attach the rotor to a 3D model of an A-Star.  We feel this added context will help students learn about rotor functions and better connect these functions to flight dynamics.
We started using a rapid prototyping tool for HoloLens called 'HoloSketch'.  It has been a great way to prototype UI layouts and communicate with the development team about where assets could be placed.
I also created a type of form or layout to capture Holographic experiences.  You'll find it below.  A concept image is broken down into a list of necessary assets.  The visual assets are mapped onto three panels that record the foreground/ mid-ground/ and background.

A separate sheet is meant to capture interactions, but I'm still trying to sort that out.  Screenshots of an AE motion piece perhaps?
This last slide is a little experiment showing where we might go-  3D flight controls?

It might be cheezy I know...  but I don't mind modelling them for an A/B test.  Will keep you updated!
Wearable interface-  it sits below eye level so it's non-intrusive.  It also keeps the interactions equally distant and within reach.  One could also prioritize which menu items as important by keeping them toward the centre of the menu.
Some options for the team.  Above is a 2D menu meant to react like buttons and a quick sketch of menu roll-out.  Below is an option to integrate bar indicators for speed and size of the rotor.  These visual cues are going to be important because the menu is for voice control options.  With voice control it is difficult to track your experience because changes in state are often difficult to discern-  or worse, the result lags or is inconsistent in picking up the voice instructions.
Holocopter for HoloLens
Published:

Holocopter for HoloLens

Published: