Back

Overview

Problem

Solution

Understanding

Visual Design

Units

Components

Impact

XR Design System

Defining a process to design and manage interface components for mixed reality experiences.

SkillsVR creates custom VR learning experiences for clients across various industries. Due to tight production schedules, the team frequently reused mechanics from previous projects. As the first UX/UI designer hired, my goal was to formalize this reuse into a scalable design system that ensured consistency while accommodating diverse learning objectives.

SkillsVR creates custom VR learning experiences for clients across various industries. Due to tight production schedules, the team frequently reused mechanics from previous projects. As the first UX/UI designer hired, my goal was to formalize this reuse into a scalable design system that ensured consistency while accommodating diverse learning objectives.

A key challenge was the project’s remote collaboration dynamic: I was based in the US, while the development team operated from New Zealand. To maintain alignment, I prioritized proactive communication and process transparency.

A key challenge was the project’s remote collaboration dynamic: I was based in the US, while the development team operated from New Zealand. To maintain alignment, I prioritized proactive communication and process transparency.

Problem

Mechanics and interfaces were evaluated, scoped, and iterated on with each project. This narrow focus led to inconsistent development and style, while also pigeon-holed support for learning design use cases. A proactive, comprehensive process was needed to design wholistically.

Solution

Within six months, I delivered:

  • A visual style guide and spatial design framework used to evaluate consistency and usability of 5 VR experiences over the following year.

  • 8 redesigned mechanics with documented interaction patterns.

  • An initial library of 67 components and a documented process for iterative design.

  • Key process touchpoints with all stakeholders to identify new use cases and iterate on capabilities and accessibility.

Understanding

I began by analyzing the existing VR development workflow. Through this, I learned that developers iterated on mechanics organically on a project basis. There was no wholistic process for managing visuals and features to proactively align to use-cases.

Another learning was that role definitions differed between the US and New Zealand tech industries. To ensure my process was transparent, I dedicated time to aligning stakeholders on my process and evangelized traditional UX procedures.

Understanding

I began by analyzing the existing VR development workflow. Through this, I learned that developers iterated on mechanics organically on a project basis. There was no wholistic process for managing visuals and features to proactively align to use-cases.

Another learning was that role definitions differed between the US and New Zealand tech industries. To ensure my process was transparent, I dedicated time to aligning stakeholders on my process and evangelized traditional UX procedures.

Visual Design

To align the interface with the company’s mission, I first defined the brand’s visual identity. Expanding on the marketing team’s existing assets, I documented the brand archetype and personality traits to guide stylistic decisions.

Core color and typography style hierarchies were then defined. I kept a lean approach to focus on initial components to be built and tested, with the intent to gradually expand when needed.

Visual Design

To align the interface with the company’s mission, I first defined the brand’s visual identity. Expanding on the marketing team’s existing assets, I documented the brand archetype and personality traits to guide stylistic decisions.

Core color and typography style hierarchies were then defined. I kept a lean approach to focus on initial components to be built and tested, with the intent to gradually expand when needed.

Units

Existing accessibility standards from Google Daydream, Microsoft HoloLens 2, and Meta Quest 2 developer guides gave recommendations in differing units. To apply these recommendations, and ensure accurate translation from Figma to Unity, I defined a conversion from pixels, degrees, and metric units.

Units

Existing accessibility standards from Google Daydream, Microsoft HoloLens 2, and Meta Quest 2 developer guides gave recommendations in differing units. To apply these recommendations, and ensure accurate translation from Figma to Unity, I defined a conversion from pixels, degrees, and metric units.

1 degree = 20 pixels = 20mm size @ 1m distance (20dmm)

I created a in-headset prototype in Unity to test the conversion sizing with a small group. With the test results I finalized documentation on typography hierarchy, button sizes, and panel dimensions relative to distance from user.

I created a in-headset prototype in Unity to test the conversion sizing with a small group. With the test results I finalized documentation on typography hierarchy, button sizes, and panel dimensions relative to distance from user.

Components

With the framework in place, I applied it to a parallel project to redesign the interface for an in-headset library of learning modules. I created a Figma component library and corresponding Unity Prefabs for all UI elements.

Components

With the framework in place, I applied it to a parallel project to redesign the interface for an in-headset library of learning modules. I created a Figma component library and corresponding Unity Prefabs for all UI elements.

Following the library UI’s successful implementation, I continued to document the process to iterate on components and applied the framework to the 8 existing mechanics.

Following the library UI’s successful implementation, I continued to document the process to iterate on components and applied the framework to the 8 existing mechanics.

Impact

  • Streamlined asset management for 8 mechanics, 67 interface components. This was eventually expanded to all art assets in a centralized library.

  • Strengthened cross-functional collaboration with learning design, development, art, and marketing teams. This laid the foundation for research and feedback loops for iteration on mechanic features.

If you want to hear more details about this project,
feel free to email me at lukeschmidt.design@gmail.com
or connect with me on LinkedIn

If you want to hear more details about this project,
feel free to email me at lukeschmidt.design@gmail.com
or connect with me on LinkedIn