Museum of Type - Windows Mixed Reality App Design & Development Story

A designer’s journey into the virtual environment and typography

Windows Mixed Reality headset with motion controllers (Image credit: DELL)

Background

Typography Insight for HoloLens (2016)

Sketches

Sketches for the environment and content

Setting up the tools and environment

Useful building blocks and example scenes in Mixed Reality Toolkit

Design & Development iteration with Unity and Mixed Reality Portal

Motion controllers paired and ready in Mixed Reality Portal
When you click ‘Play’ in Unity, your scene is launched in your in your headset instantly

Constructing the virtual museum environment

Layout and locomotion testing in Unity
Initial test of the skybox, color, material and text rendering in space
Initial test of the skybox, color, material and text rendering in space
Building content and environment in Unity

Direct manipulation with motion controllers

Grab Mechanics Example scene in MRTK
Rigid body & box collider (blue box) attached to the controllers for grabbing objects
The object also needs a box collider(green outline) to make it grabbable
Interacting with type with motion controllers is fun!

Optimizing text rendering quality

Used TextMesh Pro for the rendering quality and multi-line text display
The glyphs behind the wall visible through because of incorrect font material that ignores z-depth

Attaching UI to the motion controller

Holographic Button in MRTK’s Interactable Object Example scene
Cylindrical grid menu layout with Object Collection script
Initial test for menu layout and pointer interaction
Show & hide with menu button press event. Teleportation behavior.

Intro scene

Creating 3D logo in Blender. Adding animation keyframes in Unity.
Intro scene with logo animation
Overview of the museum with section indicators

Tooltip for the motion controllers

Default button mapping information — Mixed Reality Portal
Tooltip for the motion controllers

Type Playground

Type Playground

Adding 3D app launcher

Creating 3D model in Blender / Testing the model in the cliff house
Default 2D app window vs. 3D app launcher
3D launcher can be manipulated just like other objects in the cliff house

Publishing app to Microsoft Store

Microsoft Dev Center Dashboard
Store submission with screenshots and videos
You will be able to see your app in Microsoft Store

Build your own mixed reality experience now!

Resources

App links

Media

Read my other stories

Designing Type In Space for HoloLens 2

Designer & Creative Technologist. UX Designer @Microsoft HoloLens. Creator of http://typeinsight.org Opinions are my own. http://dongyoonpark.com