HOLOLENS
hydroponic data display
My Role: Creative Director and Motion Graphics
Project Objective: This project was done at the request of Microsoft's cafe and sustainability team. They wanted to see options for using the HoloLens for a visitor or employee to view the live data from the hydroponic vegetable gardens.
Mission: A high fidelity, animated mockup video.
Squad: Project Manager, Production artist, and Microsoft hydroponic experts
Timeframe: 2 weeks
Tools: Illustrator, Photoshop, and After Effects.
final product
process
INFORMATION/DATA LAYOUTS AND STYLE CHOICES
Challenge:
Displaying all of the data and features the client requested in a clean, simple, and mixed reality-friendly way.
Solution:
I went through multiple iterations on buttons, toggles, icons, values, etc. When designing mockups for HoloLens, you have to consider transparency and readability. Early designs were heavier on text but since the user's primary goal is quick viewing of current hydroponic station status, that needed tweaking. Considering this was also going to be viewed by visitors, without expert knowledge, I decided on presenting the data more visually, in an animated infographic style.
Challenge:
Honoring the Microsoft brand guidelines while needing to make the UI feel like it's floating.
Solution:
My early designs drew upon the traditional Windows Metro style. It was a more literal interpretation with rectangles and bright colors. For the later iterations, my nods to Microsoft were more subtle and drew more inspiration from their new Fluent design system. I softened the color palette, used MS typefaces, lighter line weights, and utilized more transparency. I found the elegance of Fluent to be more effective for this project (where my UI was "floating", rather than something that read more heavy and utilitarian.
CREATING AN IMMERSIVE 2D PROTOTYPE
Challenge:
The purpose of this prototype was to "pitch the possibilities" to a large team of visitor experience experts and the sustainability team. A challenge was how to convey depth, motion, and presence via a 2D video, to people who may have not ever used a HoloLens.
Solution:
I chose to use After Effects to animate the infographics but also to animate the user's experience of walking up to the garden, selecting a plant to view, and seeing a display pop up. I also added ambient cafe sounds to the video (from where the visitors will experience this) and sound effects for the interactions. This gave the entire video mockup more immersion and real-life usage examples for the team to visualize.
INSPIRATION IMAGES
