Background
I was part of the VR Training team at Axon where we focused on creating next generation law enforcement training using immersive and interactive experiences augmented with virtual reality.
I joined the team in mid-2022 and over the course of 4 months launched our inaugural design system to unify the user experience across products. Our goal was to mitigate scaling risks, streamline cross-functional team processes and grow our revenue through supporting third party content creators and customer acquisition.
My role
As the lead product designer for the in-headset experience, I defined typography, layout, UI components, patterns and interactions, prototyped designs and ran usability tests, and published Human Interface Guidelines for vendors and internal teams.
I collaborated closely with PM, UX Research and Engineering teams to define and execute end-to-end flows, perform usability studies and secure stakeholder buy-in. Through these efforts, we were able to empower team operations, create a more cohesive ecosystem for the team's products, and align the experience between them.
The challenge - Disparate product experiences
The VR team was growing in many ways - internal team size, number of vendors, amount/variety of content, expanding into international markets, and more. During this period of rapid growth, in order to get multiple products to market on an aggressive timeline, different engineering vendors were sourced for the development of several products.
This scaling created two key risks. (1) Poor user experience due to inconsistent UI/UX/Art. (2) Slow art, design, & engineering speed due to redundant work, decision fatigue, and ownership confusion.
This was an opportunity to simplify workflows, provide consistency with other Axon products, enable 3rd party content creators, and support a variety of interaction methods and device hardware while also ensuring accessibility.
Low hanging fruit for a unified Axon experience
In my first few days, I focused on some easy solutions that would give us quick wins and help build momentum. Upon reviewing the broader design team’s pre-established 2D design system, I adopted their color palette and iconography in efforts to bring the VR team’s products more in-line with Axon’s other products and brand, and begin establishing our design system’s foundations. While the existing system offered multiple themes, I opted for the dark theme due to increased legibility in headset supported by secondary research.
One of the key activities I performed early on was an audit of the existing interfaces, components and patterns throughout our products. This was done to establish a shared understanding of the current state of our UI, information architecture, and hierarchy. Our existing paradigm utilized 2D UI slates within a 3D environment, displaying most content at one primary viewing distance with notifications and pop-ups to be overlaid at a secondary distance.
Defining UI size and positioning
Two key questions I sought to answer when approaching foundational size and positioning elements for our design system were “How do we define UI size in VR?” and “Where should UI be placed in VR?” The goal here was to ensure comfortability for users and define a system which allows us to design content once for use at a variety of viewing distances to simplify workflows between design and engineering.
Through secondary research, I found Google had done much of the legwork related to ergonomics and establishing base units to work with, defining field-of-view comfort zones and an angular unit which scales with distance to design in.
To define viewing distances for the identified paradigm of primary and secondary UI slates, I developed a prototype to test various slate distances based on best practice guidelines proposed by Oculus and facilitated a quick and loose dogfooding session with the team to set preliminary values.
Establishing a type ramp
When defining the last foundational element of the design system—typography—the key question I sought to answer was, 'What is the smallest font size that remains comfortably legible within the headset?'". This would serve as the baseline upon which our type ramp would be constructed.
To find out, I defined a usability study and developed a prototype which allowed participants to adjust their font size through a series of tasks involving varied font weights and cases, asking participants to identify the smallest font size they are comfortable reading for each task.
After identifying the minimum font size and incorporating a buffer, I defined our new type ramp scaled based on the existing 2D ramp with a few modifications to retain hierarchy and adjust line height.
Design iterations
With all the foundational elements in place, I redesigned a few existing UIs and ran through an end-to-end workflow from design to development.
The goal of this exercise was to test out our type, color, and z-space definitions against the existing UIs in the same context our users would experience them and perform a spot check to make refinements as needed.
This resulted in slight modifications to the type ramp and slate distances for comfortability and successfully validated the handoff process I defined between design and engineering.
Defining and documenting UI components
With foundational elements further dialed in after having experienced our designs in headset, I could start documenting these foundations and designing components I’d been working on in our UI library.
When designing our button component, it became apparent that we needed to deviate slightly from the existing design system, as buttons defined in that system lacked a hover state which was required to enable our supported interaction methods.
I performed an industry audit to document and analyze how other organizations in the field solved for hover in VR, experimented with several design options to support this interaction and presented them to the team. We made the strategic decision to move forward with a color based approach, shifting color values in order to maintain enough visual distinction between states.
Given that our design system would be externally available, it was necessary to be somewhat restrictive in dictating the look and feel of our components. Taking dialogs as an example, I defined and documented variants in human interface guidelines to be explicit regarding appropriate icon/color combinations, positioning and animations for consistency regardless of who was creating content on our platforms.
Reticle and interaction design
Defining the hover state for the button component was naturally tied to our reticle design and interactions. Notably, our current gaze interaction utilized a short dwell time to affirm a user's selection.
In order to maintain consistency in the reticle design across all our supported forms of interaction, I utilized a full stroke around the reticle in the active state, which for gaze interactions would fill around the circumference of the reticle during the hover state.
Outcome
After completing UI library component definition and writing respective human interface guidelines, Axon’s design system for VR launched successfully for vendors, 3rd parties and internal teams in Q3 2022. We saw a significant reduction in internal churn due to streamlined team operations as well as improved consistency in the content produced for our platforms.
In the longer term as our existing products fully integrate the design system - our users, who are mostly first time VR users, will not need to learn and relearn multiple different interaction patterns as they did previously, reducing cognitive load and reinforcing our users’ mental model of our products.
Improving this experience for our users - law enforcement officers and their trainers, is even more so advantageous as the product is shown off to potential clients through Axon’s numerous roadshow events evangelizing and promoting our products, making it an easier sell to departments and driving further revenue and contracts.
In short, this project was a journey that reminded me of the value of cross-team collaboration in driving towards a unified product ecosystem and vision. Our final solution not only coalesced disparate user experiences but did so in a way that was user-centered and technically feasible.