Pioneering a Design System for Industrial AR
Since its creation, this design system has been used to design and engineer applications for the HMT across the globe including partners such as Cisco, Microsoft and Zoom.
A little about the device.
The RealWear HMT is a head-mounted wearable device that operates through a 'Say What You See' primary interaction modality. The usage is for industrial environments and a key feature is its hands-free, extreme noise cancellation voice control.
Research & Discovery
As part of the new design system and major software upgrade, we collected a lot of qualitative knowledge gained through a number of PoCs as well as ethnographic research with pilot programs.
​
The design process itself was approached in an Agile fashion but with more weight on the design exploration end than had previously been employed in the development process. This allowed the team to interact, evaluate and conceptualize together before a lot of investment was made into engineering.
​
User testing and evaluation was gained through a variety of channels including leveraging the sales team as the first users.
Experience Strategy
The first step in the implementation of a design system is educating the team and executive leadership on what it is and what it can do for the business. Design systems can benefit a product and organization by:
-
Creating a foundation to grow and expand
-
Providing a consistent and understandable language
-
Reducing time and cost of development for internal and 3rd party applications
A design system is a set of guidelines, patterns, and components used to guide and produce experiences. Design systems can incorporate any and all interaction modalities. Design systems provide consistent experiences, reduce time to market and provide scalability without risking the quality of design. Design systems are in effect, the system engineering of design.
​
In every start-up there are a lot of demands on resources so it's important to work smarter, not harder. By adapting the amazing work Google has done with Material Design, we were able to reduce the time for the design of our design system and capitalize on the market saturation of the Android platform.
The best example of a well-known design system is Google's Material Design. We chose to leverage Material Design for a number of reasons when we created the system for the HMT.
Take inventory.
The first step in a design system is to take inventory of what is needed for the system. This can be done in any number of ways - we created an Excel Spreadsheet. Since we were using material design, we needed to compare our needs with how the Android System worked, analyze the human behavioral patterns needed in AR compared to mobile devices and assess what was needed to provide the best experience.
Fonts
The HMT has limited screen space. The fonts were updated from Montserrat to Roboto to allow more characters on the screen for 'Say What You See' voice commands. Roboto is also the default system font for Android so its use would offer familiarity to the user as well as consistency for areas of the interface that exposed the core Android interface design.
Previous Font: Montserrat
Say what you see
Updated Font: Roboto
Say what you see
Iconography
Existing Material Design icons were used and new icons created to be consistent with Material Design as needed.
Light Mode + Dark Mode
Core Component: Speech Keyboard & Carousel (Patented)
We designed a carousel with multiple levels of information hierarchy that were employed through a combination of head gestures and voice control. This control was designed to be used in areas where the user has focused attention. This interface design led to a group patent for the team.
Controls & Settings
PIN Entry
Voice Keyboard
Core Component: The Command Bar
The command bar was designed to meet the needs of the 'Say What You See' interaction paradigm whilst also offering flexibility and extensibility for applications across the experience. Reminiscent of behaviors from the Android command bar, it is made up of three core components - the action bar, the options menu and the help menu.
Outcomes
The design system used for Cisco Expert on Demand
The design system used for Microsoft Teams